0:01 Most designers want to work for big tech
0:04 or start an agency, but most designers
0:06 won't. Most designers focus on making
0:08 things look good, but genius designers
0:10 don't. They focus on making things work
0:12 brilliantly for the user. Think of web
0:15 design not as art, but as a story, and
0:17 not every story needs 3D graphics or
0:19 buttery smooth scrolling. If your goal
0:21 is to impress other designers, maybe.
0:23 But if your goal is to guide someone to
0:25 an action, all that flare might just be
0:27 in the way. Start with user intent.
0:28 Let's say you need to design a user flow
0:31 that enables customers to rent vacation
0:33 properties, not unlike Airbnb. A UI
0:35 designer might start thinking about the
0:37 icons or the layout of each card and
0:39 entirely lose the plot of why we're
0:41 designing. The intent of the user is to
0:43 search for accommodations. So, a search
0:45 bar is a natural starting point. We can
0:47 then augment with useful features like
0:49 destination, amount of travelers, and
0:50 dates. You might think the next step is
0:52 to put a header above this and slap an
0:54 image on the background. But think about
0:56 the user. Does this design do anything
0:59 extra that this design didn't? Not at
1:01 all. But there can be more than one
1:03 intent for a website. Maybe user knows
1:05 they want to go on a vacation but
1:07 doesn't know where. They're there to
1:09 browse. We can serve that intent too by
1:12 displaying our listings, but the user
1:14 probably wants something more specific.
1:17 So, we can add in filtering UI elements.
1:19 Notice how the fonts, colors, and icons
1:21 affect the aesthetics, but do very
1:23 little to change the functionality. Only
1:25 as the user intent expands do we expand
1:27 the functionality of our designs? But we
1:29 jump the gun a little by building full
1:31 UIs before talking about leveraging
1:33 existing layouts. Why not put the search
1:35 bar down here or arrange the cards like
1:37 this? Truth be told, nothing is stopping
1:39 us from making a UI like this if it
1:41 serves the user better. But after 30
1:43 plus years of websites, users have come
1:45 to expect certain layouts. This doesn't
1:47 preclude us from trying new layouts, but
1:49 means that typically information should
1:51 flow top to bottom and left to right.
1:52 Navigation is at the top of the page,
1:54 and call to actions are typically
1:56 eye-catching and easy to find. Designs
1:58 that follow these guides are generally
2:00 much easier to integrate new sections
2:02 seamlessly and make responsive.
2:04 Respecting these expectations, but
2:06 making the design uniquely yours, like
2:08 adding a cool micro interaction or a set
2:10 of unique features is what separates the
2:12 good from the genius. And if you're
2:14 trying to think like a genius designer,
2:16 it helps to see how the best are already
2:19 thinking. Mobin is a curated library of
2:22 realworld UI and UX from full user flows
2:25 down to individual components all pulled
2:27 from top apps and websites. Instead of
2:29 downloading dozens of apps just to
2:31 reverse engineer their design patterns,
2:33 Mobin lets you search and explore them
2:35 all in one place. Personally, I'm always
2:37 diving into the UI element section.
2:38 There's a link in the description if you
2:40 do want to check it out. Thank you to
2:41 Mobin for sponsoring this video. But
2:43 without a content structure, design has
2:45 very little value. There are two steps
2:48 to designing around content. The first
2:50 is to decide which content to display.
2:52 Understanding how the user will interact
2:54 with the design will determine what type
2:56 of information is presented. For
2:57 example, on our travel page, we can
2:59 include a short description for every
3:01 listing. But if the user wants a
3:02 detailed look, they'll just click on the
3:05 listing. They need the specifics to scan
3:07 like the location, rating, and price
3:09 before anything else. The second step is
3:10 structuring the content that we do
3:12 display. Currently, our design has
3:15 perfect content, meaning that the titles
3:17 and locations are all short. But what if
3:19 we had a destination with a really long
3:21 name or save icons on really bright
3:23 listing images? We'd probably want to
3:26 truncate long names and add a circle to
3:28 the icon to guarantee contrast.
3:30 Otherwise, you end up with unintended
3:32 consequences, which are not fun to deal
3:34 with. Animations should add clarity or
3:36 functionality to a design. Just take a
3:39 look at my old portfolio website. It's
3:41 awful. All of these animations didn't do
3:43 anything. Navigation is a great example
3:46 of this. As we add more links, we simply
3:48 run out of room. So, we consolidate them
3:50 into a menu that can animate in serving
3:52 a purpose. Or if our web app starts to
3:55 take on a browsing priority, instead of
3:56 sticking this block to the top of the
3:58 screen, we can reduce the size of the
4:01 search bar and have it animate in when
4:03 clicked. These are all great examples of
4:05 progressive disclosure, showing the user
4:07 what they need to see and revealing more
4:09 as it's required. That's why a load more
4:11 button is preferable over infinite
4:13 scroll. It gives the user more control
4:16 and crucially, it lets them actually
4:18 reach the footer, something infinite
4:20 scroll often makes impossible. Context
4:22 matters, but as a general rule, buttons
4:24 should almost always have a small
4:26 animation, while scrolljacking effects
4:28 should be used very sparingly, if ever.
4:31 Finally, design systems add a layer of
4:33 replicability and speed that's tough to
4:35 match. But the system has to reflect the
4:37 values of the team. A lean startup might
4:39 need something lightweight and flexible,
4:42 quick to update and easy to scrap.
4:43 Whereas something like Google's material
4:46 design is massive and deeply defined
4:48 because the use cases span dozens of
4:50 products and billions of users. More
4:52 importantly, the development of a design
4:54 system is often more critical than the
4:57 design itself. The process of defining
4:59 rules, spacing, typography scales,
5:01 interaction patterns gives you an
5:03 architecture for expansion. But a design
5:05 system isn't about making everything
5:07 look the same. It's about giving your
5:09 team a shared language. And like any
5:10 language, mastery means knowing when to
5:12 bend the rules. You don't break the
5:14 system by accident. You break it with
5:16 intention. Overall, I hope this gave
5:18 some perspective on how to think like a
5:19 better designer. If you're interested in
5:21 checking out Mobin, it'll be the first
5:23 link in the description below. And
Chrome Extension