How to think like a GENIUS UI/UX designer transcript

Most designers want to work for big tech or start an agency, but most designers won't. Most designers focus on making things look good, but genius designers don't. They focus on making things work brilliantly for the user. Think of web design not as art, but as a story, and not every story needs 3D graphics or buttery smooth scrolling. If your goal is to impress other designers, maybe. But if your goal is to guide someone to an action, all that flare might just be in the way.

Start with user intent. Let's say you need to design a user flow that enables customers to rent vacation properties, not unlike Airbnb. A UI designer might start thinking about the icons or the layout of each card and entirely lose the plot of why we're designing. The intent of the user is to search for accommodations. So, a search bar is a natural starting point. We can then augment with useful features like destination, amount of travelers, and dates.

You might think the next step is to put a header above this and slap an image on the background. But think about the user. Does this design do anything extra that this design didn't? Not at all. But there can be more than one intent for a website. Maybe user knows they want to go on a vacation but doesn't know where. They're there to browse. We can serve that intent too by displaying our listings, but the user probably wants something more specific.

So, we can add in filtering UI elements. Notice how the fonts, colors, and icons affect the aesthetics, but do very little to change the functionality. Only as the user intent expands do we expand the functionality of our designs? But we jump the gun a little by building full UIs before talking about leveraging existing layouts. Why not put the search bar down here or arrange the cards like this? Truth be told, nothing is stopping us from making a UI like this if it serves the user better.

But after 30 plus years of websites, users have come to expect certain layouts. This doesn't preclude us from trying new layouts, but means that typically information should flow top to bottom and left to right. Navigation is at the top of the page, and call to actions are typically eye-catching and easy to find. Designs that follow these guides are generally much easier to integrate new sections seamlessly and make responsive.

Respecting these expectations, but making the design uniquely yours, like adding a cool micro interaction or a set of unique features is what separates the good from the genius. And if you're trying to think like a genius designer, it helps to see how the best are already thinking. Mobin is a curated library of realworld UI and UX from full user flows down to individual components all pulled from top apps and websites.

Instead of downloading dozens of apps just to reverse engineer their design patterns, Mobin lets you search and explore them all in one place. Personally, I'm always diving into the UI element section. There's a link in the description if you do want to check it out. Thank you to Mobin for sponsoring this video. But without a content structure, design has very little value. There are two steps to designing around content.

The first is to decide which content to display. Understanding how the user will interact with the design will determine what type of information is presented. For example, on our travel page, we can include a short description for every listing. But if the user wants a detailed look, they'll just click on the listing. They need the specifics to scan like the location, rating, and price before anything else. The second step is structuring the content that we do display.

Currently, our design has perfect content, meaning that the titles and locations are all short. But what if we had a destination with a really long name or save icons on really bright listing images? We'd probably want to truncate long names and add a circle to the icon to guarantee contrast. Otherwise, you end up with unintended consequences, which are not fun to deal with. Animations should add clarity or functionality to a design.

Just take a look at my old portfolio website. It's awful. All of these animations didn't do anything. Navigation is a great example of this. As we add more links, we simply run out of room. So, we consolidate them into a menu that can animate in serving a purpose. Or if our web app starts to take on a browsing priority, instead of sticking this block to the top of the screen, we can reduce the size of the search bar and have it animate in when clicked.

These are all great examples of progressive disclosure, showing the user what they need to see and revealing more as it's required. That's why a load more button is preferable over infinite scroll. It gives the user more control and crucially, it lets them actually reach the footer, something infinite scroll often makes impossible. Context matters, but as a general rule, buttons should almost always have a small animation, while scrolljacking effects should be used very sparingly, if ever.

Finally, design systems add a layer of replicability and speed that's tough to match. But the system has to reflect the values of the team. A lean startup might need something lightweight and flexible, quick to update and easy to scrap. Whereas something like Google's material design is massive and deeply defined because the use cases span dozens of products and billions of users. More importantly, the development of a design system is often more critical than the design itself.

The process of defining rules, spacing, typography scales, interaction patterns gives you an architecture for expansion. But a design system isn't about making everything look the same. It's about giving your team a shared language. And like any language, mastery means knowing when to bend the rules. You don't break the system by accident. You break it with intention. Overall, I hope this gave some perspective on how to think like a better designer.

If you're interested in checking out Mobin, it'll be the first link in the description below. And thanks for watching.