Speaker A
Most designers want to work for big tech or start an agency.
Learn how genius UI/UX designers focus on user intent, content structure, and design systems to create functional, user-centered designs.
Key Takeaways
- Focus on user intent over aesthetics to create functional designs.
- Respect established layout conventions to meet user expectations.
- Use animations and progressive disclosure to enhance usability without overwhelming users.
- Develop design systems that align with team needs and allow flexibility.
- Content structure and clarity are essential for effective UI/UX design.
Summary
- Genius designers prioritize making designs work brilliantly for users rather than just looking good.
- Design should be approached as storytelling focused on guiding user actions, not just visual flair.
- User intent is the foundation of UI/UX design, influencing features like search bars and filtering options.
- Design layouts should respect user expectations, typically flowing top to bottom and left to right.
- Micro interactions and unique features differentiate good designs from genius ones.
- Content structure is critical: deciding what content to display and how to present it effectively.
- Animations should enhance clarity or functionality, using progressive disclosure to improve user control.
- Load more buttons are preferred over infinite scroll to maintain user control and access to page footers.
- Design systems provide replicability and speed, reflecting team values and enabling scalable design.
- Mastering a design system means knowing when to intentionally bend its rules without breaking it.
Full Transcript — Download SRT & Markdown
Speaker A
But most designers won't.
Speaker A
Most designers focus on making things look good.
Speaker A
But genius designers don't, they focus on making things work brilliantly for the user.
Speaker A
Think of web design not as art, but as story.
Speaker A
And not every story needs 3D graphics or buttery smooth scrolling.
Speaker A
If your goal is to impress other designers, maybe.
Speaker A
But if your goal is to guide someone to an action, all that flair might just be in the way.
Speaker A
Start with user intent.
Speaker A
Let's say you need to design a user flow that enables customers to rent vacation properties.
Speaker A
Not unlike Airbnb.
Speaker A
A UI designer might start thinking about the icons or the layout of each card.
Speaker A
And entirely lose the plot of why we are designing, the intent of the user is to search for accommodations.
Speaker A
So, a search bar is a natural starting point.
Speaker A
We can then augment with useful features like destination, amount of travelers, and dates.
Speaker A
You might think the next step is to put a header above this and slap an image on the background.
Speaker A
But think about the user, does this design do anything extra that this design didn't?
Speaker A
Not at all.
Speaker A
But there can be more than one intent for a website.
Speaker A
Maybe the user knows they want to go on a vacation, but doesn't know where, they are there to browse.
Speaker A
We can serve that intent too by displaying our listings.
Speaker A
But the user wants something more specific.
Speaker A
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.
Speaker A
Only as the user intent expands, do we expand the functionality of our designs.
Speaker A
But we jumped the gun a little by building full UIs before talking about leveraging existing layouts.
Speaker A
Why not put the search bar down here or arrange the cards like this?
Speaker A
Truth be told, nothing is stopping us from making a UI like this if it serves the user better.
Speaker A
But after 30 plus years of websites, users have come to expect certain layouts.
Speaker A
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.
Speaker A
Designs that follow these guides are generally much easier to integrate new sections seamlessly.
Speaker A
And make responsive, respecting these expectations, but making the design uniquely yours.
Speaker A
Like adding a cool micro interaction or a set of unique features is what separates the good from the genius.
Speaker A
And if you're trying to think like a genius designer, it helps to see how the best are already thinking.
Speaker A
Mobbin is a curated library of real world UI and UX from full user flows down to individual components.
Speaker A
All pulled from top apps and websites.
Speaker A
Instead of downloading dozens of apps just to reverse engineer their design patterns, Mobbin lets you search and explore them all in one place.
Speaker A
Personally, I'm always diving into the UI elements section.
Speaker A
There's a link in the description if you do want to check it out.
Speaker A
Thank you Mobbin for sponsoring this video.
Speaker A
But without content structure, design has very little value.
Speaker A
There are two steps to designing around content.
Speaker A
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.
Speaker A
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.
Speaker A
The second step is structuring the content that we do display.
Speaker A
Currently, our design has perfect content, meaning that the titles and locations are all short.
Speaker A
But what if we had a destination with a really long name or save icons on really bright listing images?
Speaker A
We would probably want to truncate long names and add a circle to the icons to guarantee contrast.
Speaker A
Otherwise, you end up with unintended consequences which are not fun to deal with.
Speaker A
Animations should add clarity or functionality to a design.
Speaker A
Just take a look at my old portfolio website.
Speaker A
It's awful.
Speaker A
All of these animations didn't do anything.
Speaker A
Navigation is a great example of this.
Speaker A
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.
Speaker A
Or if our web app starts to take on 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.
Speaker A
These are all great examples of progressive disclosure, showing the user what they need to see and revealing more as it's requested.
Speaker A
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.
Speaker A
Context matters, but as a general rule.
Speaker A
Buttons should almost always have a small animation, while scroll jacking effects should be used very sparingly, if ever.
Speaker A
Finally, design systems add a layer of replicability and speed that's tough to match.
Speaker A
But the system has to reflect the values of the team.
Speaker A
A lean startup might need something lightweight and flexible, quick to update and easy to scrap.
Speaker A
Whereas something like Google's material design is massive and deeply defined because the use cases span dozens of products and billions of users.
Speaker A
More importantly, the development of a design system is often more critical than the design itself.
Speaker A
The process of defining rules, spacing, typography scales, interaction patterns, gives you an architecture for expansion.
Speaker A
But a design system isn't about making everything look the same, it's about giving your team a shared language.
Speaker A
And like any language, mastering means knowing when to bend the rules, you don't break the system by accident, you break it with intention.
Speaker A
Overall, I hope this gave some perspective on how to think like a better designer.
Speaker A
If you're interested in checking out Mobbin, it'll be the first link in the description below.
Speaker A
And thanks for watching.
Topics:UI designUX designuser intentdesign systemscontent structureprogressive disclosuremicro interactionsweb designuser experienceMobbin
