# Web Design is MUCH better now, but...

## Метаданные

- **Канал:** Malewicz
- **YouTube:** https://www.youtube.com/watch?v=-xKgBgGOAqs
- **Источник:** https://ekstraktznaniy.ru/video/43287

## Транскрипт

### Segment 1 (00:00 - 05:00) []

I take an idea, refine it in code, push to a local server, collaborate across our company so that we can deliver better quality than ever. Web design has changed dramatically and to stay relevant, you got to adjust. I know work based on three main rules, but the workflow is a lot different than it was even a year ago. We achieve even better outputs with more granular control on how things are being built. This is a whole complete professional web design and development process that I'm going to fully cover in this video. We'll talk hardware, apps, we use, processes, methods, and obviously the costs. And there is zero Figma in this workflow. Zero. I made a perfect setup for building landing pages within Square. This is how it looks like. Three main rules are the output can never be AI slop. Never optimize for speed, only for quality. And you got to understand most of the code that's being written by AI. Most people use AI to generate a lot of garbage fast. In my case, I use that extra time that would normally be spent coding for longer on making things a lot better. So, it doesn't take me less time to finish a landing page, but the quality is way better because yeah, you know what? Good quality takes time. So, let me show you how we do it. And at the end, I'm going to tell you how much all of it costs. Designers are now being closest to being front-end developers. Again, when I started in 2001, my first job as a web designer was actually to design and then code the HTML and CSS. These roles started splitting apart and going into many different sub roles creating a lot of chaos and confusion. But in reality, it makes complete sense for designers to do front end because designers have the eye to spot what's different, what's wrong, and what can be improved. So designers can now use AI to build some of that front end, but they need to understand it. It cannot be done blindly by just prompting the AI and hoping for the best. You need to understand the code enough so you can do some smaller tweaks manually and then you can explain it to AI in the right kind of words. And I think that people who are currently front-end developers should learn design. This is going to be an essential skill for the future of work. If you just want to generate slop, then sure, you can just steal somebody's prompts and just start typing them into a box and get a website. But that's not going to be a way forward. Let's talk about the setup. Let's start with the hardware. We have four computers at the office. We each work on a MacBook Air M4 because of their portability and speed. Then we used an M1 Mac Mini, 32 gigs of RAM as an Apache server, a git server, a 14 billion parameter local AI model, and an open close server for brick. It handles all of that perfectly. I connected this portable 15-in flat display to it. a flat keyboard from Apple and some old mouse. It sits in a closed cabinet underneath a truly beautifully designed product from the 1960s. There's also a framework desktop computer. It's running another, this time a 32 billion parameter model for more complex tasks that serves the llama model to the mini via Ethernet. Combined, these two serve as our main organizational support. onboarding new clients, generating documents, creating client profiling, and having a complete database on how the work with that client progresses. It's basically running all of that stuff that we already shared in the Squareblock blueprint. All the documents, templates, and methods combined as a single source of truth. Both me and Diana run maxed out M4 MacBook Airs. The RAM is at 32 gigs, 1 TB of storage, cuz we travel a lot and found out that the Air is completely capable enough for everything we do from coding, design, writing all the way to editing these 4K videos. I don't need a pro. I sold mine a few months ago and never looked back. The MacBooks use a shared Git repository from the Mini to push and pull the sites we're working on locally. The Apache local server on the mini allows us to quickly preview what we're working on the actual phones using Wi-Fi. So, no more simulators or responsive design modes in the browser. This just works. The workspace I work at this mainstanding desk. The studio display works great to stay at eye level and have enough space for all the apps. Diana prefers working on a laptop and has a small laptop table on wheels that's like a mini standing desk. She likes to move around when working. So, sometimes she's in one spot, then in the other side of the room, and sometimes in a completely different room. I'll show you our five-step workflow based on a

### Segment 2 (05:00 - 10:00) [5:00]

project that we're currently working on called page formats. The actual work starts even a little before paper. We sit down and we talk and brainstorm, sometimes on walks as well, just to figure out what is the best angle to approach solving a specific problem. A framework for what questions to ask and how to even handle these kinds of brainstorms is also included in the Squarebot blueprint. On paper, I start by sketching the general layout and idea using colors to map out the vibe. Coloring also switches how your brain works so that you can get even more good ideas. In case of page formats, we also explored a couple of logo ideas for the site on paper. Then I use Obsidian to write out the copy structure. In our case, we're starting with the heading of the site. So a clearly defined kicker H1 description CTA and what else can be added as side notes plus the navigation in the top bar. This can get exported as an MD file and then fed to AI to build the initial structure sketch. In some cases we still do design the highfidelity screens but in this case we just made the SVG logo of page formats in sketch that was made based on the paper sketches then kind of recreated on vectors and exported as SVG. What's cool about the export, and it's something that I really love about Sketch, is that you can just drag and drop the image from the Sketch window directly to a folder. So, you don't need to save as or download zip files or do any of that other crazy stuff. We both use a cloud max plan for coding at the moment, and I use Sublime Text for manual editing because this is manual work made of many small steps. We don't go for the CLI cloud code version. I do use it for another project though that I can't really talk about yet. For landing pages, the claw app in the code tab is more than enough. It's not vibe coding though because we talked to the AI in precise language. Starting a project like that is about defining a grid, still the same one based on the blueprint methods which is 64x 32x 12. It's the perfect grid for the web. Using that, we define the mine wrapper. Then code in the navigation, the top bar, the H1 description and CTA. Sometimes it's based on dropping the MD file from Obsidian. Sometimes it's just written out. We take parts of the code we like from our other websites too, like that effect on the button. The next step here is the carousel for which we search online ourselves to find the perfect open-source solution. Yeah, Cloud can do the search for you, but in many cases, the results are not exactly what you need. In our case, we want a very specific outcome. So we can't rely on AI to figure that out for us. We need to find it ourselves. We also use inspect in the browser a lot to change things up. We move them around and then we give claude the precise values in CSS already. Doing that yourself saves a lot of time. The first takes on the mobile break points happen in the browser. And pro tip, do not ever let AI define those itself. Everything from font sizes to even when the lines break has to be carefully thought out for every break point. You can make a BR tag be only mobile or only desktop and define that perfect break yourself. Cleanup. Manual tweaks in code happen in Sublime. So at this messy build stage, most styles are in line. It's messy, but it's on purpose. It just makes it easier to tweak a specific part by hand without constantly asking an AI model to move something by a single pixel. And yes, we now take time to move stuff by a single pixel and then we assess whether it actually looks as we want it. We spend all that extra time for pixel perfection. After the tweaks are done though, we ask the AI to split the JS and the styles to separate files, define their structure, and clean up the code. That often requires a little bit of manual help. And that's a story for another video. the collaboration. Once a set of changes is done by either me or Diana, we push it using Git to the Mac Mini server. That also moves the most recent Git version from the mini to the Apache served folder so we can have previews on all computers and phones in the house. Designers using Git in 2026. Yes, this is the future. Okay, let's talk about the cost. Our maxed out MacBook Air M4s were around $2,000 each. The Mini was close to 1,500, maybe 1,700 back when it was new, but now you can get a refurbished M1 like that for a lot cheaper. The framework desktop was around $2500, but it's not really a crucial part of the setup, just a nice to have, so this can be completely skipped. We pay at $12 per month each Sketch license, but if we stop paying for it, we still keep the latest version, which is how most software should work. We also have $120 Photoshop license because Diana still prefers Photoshop, but I use Pixelmator. I paid for it once and now I can use it forever. We each run a $100 Cloud Pro subscription for coding. The extra

### Segment 3 (10:00 - 13:00) [10:00]

electricity costs for both the servers are around $25 per month because they are running non-stop. AI API costs for more reasoning and open claw are now down from around 200 per month to around 20 as opposed the last on the list after the two local models and an almost 300 billion parameter free tier for QN on a lama. Okay, but why does it matter? Most people using AI are getting it wrong. They think that because something can happen faster like the coding part that they should just do more stuff. But that's the road to nowhere. If we do a lot of stuff fast, we won't be pushing new boundaries, new discoveries, new curious options that we can pursue or even new solutions to the old problems. We'll be just generating more of the same mediocre things. So AI allows you to build a website faster, but it's not really something that hasn't been done before. Because in the early 2000s, if you wanted a website fast, you could have just gone to a website that serves templates and you buy a $30 template, modify the text on it, change the images, and you have a website in a couple hours, just like right now with AI. So, what AI does is on par with those templates. You can have a little bit more control over it, obviously, but that's just the next step. If you're just vibe prompting without knowing what you want to do and without taking the time to do something cool with it, then you're just producing more slop. And this is not what we're about. This is why the slopless dotdesign movement started. And this is why I believe designers are the best positioned people nowadays to push that AI agenda forward. to use AI not to make more crap faster, but instead to find new solutions to those old problems, to create truly delightful experiences, to come up with ideas that nobody's ever done before, and to just kind of push it forward, to make innovative stuff happen on the web with that emotional connection and the human touch. And AI does get better at UI, but it uses publicly available trends and concepts and it's mostly systemic. So if you deviate from those systems a little bit, you can always stay a couple of steps ahead because it takes a few months to train those AI models on new concepts. And for us designers, I think it's super exciting to be able to continuously innovate, to not sit still and assemble from the same components and patterns over and over, but instead push it forward every few months. Come up with something completely new, completely original and unique. We have the brain power for it. We're designers after all. The only thing to remember is to use the AI as a tool, not as a replacement for a designer developer. you use it as a tool with conscious intent, then you're going to be doing great things. That is our approach at Squareblock. That is my approach in sharing how we do it precisely and in great detail, both in the Squarebug blueprint and in the special dedicated community where people ask me questions about these workflows and they get answers from me almost every day. It's the most fun time to be a designer. You can just do things. And with that, I'm going to leave you to have a beautiful day.