YouTube Transcript:
How to think like a GENIUS UI/UX designer
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
View:
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
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
Works with YouTube, Coursera, Udemy and more educational platforms
Get Instant Transcripts: Just Edit the Domain in Your Address Bar!
YouTube
←
→
↻
https://www.youtube.com/watch?v=UF8uR6Z6KLc
YoutubeToText
←
→
↻
https://youtubetotext.net/watch?v=UF8uR6Z6KLc