00:00:00
I've designed apps and websites for over
00:00:02
a decade. And when I look back at my own
00:00:05
design journey, one thing is clear.
00:00:08
There are patterns to the kinds of
00:00:10
mistakes you make as a designer at every
00:00:13
level of your career. In this video, I
00:00:15
will highlight those patterns of
00:00:17
mistakes, what they are, when they
00:00:19
typically happen, and how to fix them so
00:00:22
that you can reach your next design
00:00:24
level faster. Here's how we'll do it. We
00:00:26
will take a screen from a real client
00:00:28
project in my agency portfolio and
00:00:32
redesign it starting from an unpaid
00:00:34
beginner level, iterating all the way to
00:00:36
a high ticket senior level. For each
00:00:38
level, we will call out the biggest
00:00:40
mistakes while providing resources and
00:00:44
guidelines so that you can avoid them.
00:00:46
And then by the end of the video, we'll
00:00:49
dig into a hidden mistake that even lots
00:00:52
of senior designers make and a solution
00:00:56
that can really set you apart in this AI
00:01:00
era that we're in. Let's get started.
00:01:02
So, at the beginner level, nothing
00:01:04
works. However, this isn't a surprise
00:01:07
since we have less than a year of
00:01:09
experience and we're not getting paid
00:01:12
for our work yet. But let's dive into
00:01:14
why it doesn't work. The first mistake
00:01:16
in this design is something as simple as
00:01:19
the copyrightiting. For example, do we
00:01:21
really need four words to communicate a
00:01:24
user's rewards? And does it make sense
00:01:27
for the button to be about earning
00:01:29
tokens when the action is actually about
00:01:33
claiming voting rewards? Clarity is key
00:01:36
in copyrightiting, and we're not really
00:01:38
nailing it here. Therefore, it's a fail
00:01:42
on the first principle, which brings us
00:01:45
to the visuals. Lots of beginners will
00:01:47
overuse flashy gradients, blur effects,
00:01:51
and other cool visual techniques like
00:01:53
that. And to be fair, even mid-level
00:01:55
designers do this, but the difference is
00:01:57
that they make it work. More on that
00:02:00
later. The best quick tip I can give
00:02:02
here is if you're unsure, opt for
00:02:06
simplicity instead of flashiness. A
00:02:09
simple but clear graph will help a user
00:02:11
much more than a fancy graph that is
00:02:14
hard to understand. In this case, since
00:02:16
we went for fancy and we couldn't pull
00:02:19
it off, it's a fail. But what about the
00:02:22
colors? First off, we're using too much
00:02:25
of a very strong red color, which makes
00:02:28
the UI straight up stressful to look at.
00:02:31
Everything here is screaming for
00:02:33
attention and therefore nothing gets
00:02:35
attention. Not even the things we want
00:02:37
to highlight in the UI. Now to make
00:02:40
coloring a bit easier, try the
00:02:43
603010 approach. 60% of the UI is a
00:02:47
neutral color like white or light gray.
00:02:50
30% of the UI is a complimentary color
00:02:53
like black and 10% of the UI has the
00:02:58
main brand color in this case red. This
00:03:01
UI feels more like a reverse at the
00:03:04
moment. And while that could work here
00:03:07
it doesn't. Now however it's time to
00:03:10
count the font sizes. 1 2 3 4 5 6. Six
00:03:18
different font sizes are used here and
00:03:21
four different font weights. It's
00:03:23
impossible to create a greatl looking UI
00:03:26
with this much variety in the text
00:03:28
department. So here's the easy fix. Try
00:03:32
to reduce those numbers that we just
00:03:34
talked about six and four by at least
00:03:37
two. So four sizes and two weights. That
00:03:41
will take you really far. In this case
00:03:43
though, it's a fail. But we're not done.
00:03:46
We don't need to look super closely to
00:03:48
see that things aren't really aligned in
00:03:51
here. And the things that are aligned
00:03:53
are spaced out randomly. 11 pixels here,
00:03:57
25 pixels here, just random numbers. So,
00:04:00
here's a little trick to improve spacing
00:04:03
quickly. It's called the eightoint grid
00:04:05
system. The main idea is that anytime
00:04:08
you use a number in your design, make it
00:04:11
divisible by 8 or 4. Instead of 25
00:04:14
pixels, use 24. Instead of 11, use 12. I
00:04:19
actually have a full video on this that
00:04:21
you can check out after this one linked
00:04:23
down in the description below. Anyways,
00:04:25
unfortunately, we fail here as well.
00:04:28
That's six out of six fails. A pretty
00:04:30
rough start. Surprisingly though, lots
00:04:33
of progress happens with just one year
00:04:36
of design obsession. Which brings us to
00:04:39
the junior designer. But before we go
00:04:41
there, if you want to learn from even
00:04:43
more realworld projects, you can check
00:04:46
out a full case study of this and other
00:04:48
projects that we've designed at SIPAP in
00:04:51
the link I've shared down in the
00:04:53
description below. Now, time for the
00:04:55
junior designer. Here we have a person
00:04:57
with one, two, maybe 3 years of
00:05:00
experience designing apps and websites.
00:05:02
They're likely either working in-house
00:05:05
somewhere or making anywhere from a
00:05:07
hundred to maybe 500 bucks, doing
00:05:10
smaller design gigs as a freelancer. And
00:05:13
usually copywriting is still a big issue
00:05:16
at this level. We still add unnecessary
00:05:19
words and write labels that don't really
00:05:22
make sense. For example, commit time
00:05:25
sounds like we're committing time
00:05:27
instead of votes. These are small
00:05:30
details that make a lot of difference if
00:05:32
we improve it. So, how do we do that?
00:05:35
The easiest solution nowadays is just to
00:05:37
take a screenshot of your UI, pop it
00:05:40
into chat GPT, and then feed it some
00:05:43
more context on the project, emphasizing
00:05:46
that you want copy that is clear but
00:05:48
short. For now, though, it's still a
00:05:51
fail. But that means that we get a shot
00:05:54
at redemption for the visuals. And here
00:05:57
we've actually stepped it up. Now, we
00:05:59
understand that visuals primarily serve
00:06:01
a communication purpose, especially if
00:06:04
it's a graph like in this case. And the
00:06:06
red dot in contrast to the gray bars
00:06:09
here communicates to the user, this is a
00:06:12
thing we want you to focus on. Sadly
00:06:15
though, we still think visuals
00:06:17
absolutely need a trendy skumorphic
00:06:20
effect with 45 layers of shadows. But
00:06:23
it's fine. We're still learning. So, a
00:06:25
first half pass and we're back to the
00:06:28
colors. As juniors, we have enough
00:06:31
experience to know that mixing colors
00:06:34
too freely easily turns into a disaster.
00:06:37
We also understand that overusing a
00:06:40
color could work against you if you want
00:06:42
to assign meaning to colors. So, we're
00:06:45
generally more passive when it comes to
00:06:48
color usage, which actually is a very
00:06:50
good thing. And one of the most
00:06:52
important learnings for creating clean,
00:06:54
professional interfaces, but it's a
00:06:57
balance. Here, we went from a UI that
00:06:59
overused our red main color to a UI that
00:07:03
now barely uses any of it, which makes
00:07:06
it a bit dull and therefore just a half
00:07:12
pass. In terms of font sizes, we still
00:07:14
have issues. Too big sizes, too small
00:07:17
sizes, too many sizes. It still happens
00:07:20
at this level, understandably. So,
00:07:23
sadly, it's a pretty quick fail here
00:07:25
that segus into spacing and structure
00:07:28
again, and we've made progress. But it's
00:07:30
evident that there's still no calculated
00:07:34
approach to how we space or structure
00:07:36
elements. pixel values are still a bit
00:07:39
random, which tells me that someone
00:07:41
forgot to study the eightoint grid
00:07:44
method, so it's a faily fail. That puts
00:07:48
us at two out of five half passes. And
00:07:51
while that might not seem great, we're
00:07:54
moving in the right direction here. The
00:07:56
design we saw isn't close to be worth
00:07:58
serious money, but things are about to
00:08:01
change at our next stage, the mid level.
00:08:04
Before we jump into that though, I'm
00:08:06
curious. How would you score your own
00:08:09
design skills? And how many years of
00:08:12
experience do you have? Let me know in
00:08:14
the comments. Now things start to get
00:08:16
interesting. We have somewhere between 3
00:08:19
and 6 years of design experience, and we
00:08:22
can potentially at this point rack in 8
00:08:25
to 10k USD per month with projects
00:08:29
likely ranging anywhere from 3 to 6K.
00:08:32
And this is clearly reflected in the
00:08:35
design. The copywriting is now even
00:08:37
clearer. There's a sense of it being
00:08:39
written for an actual user. It still
00:08:42
might not be the prettiest, but it
00:08:44
definitely looks better, which means
00:08:47
that we have our first half pass on
00:08:50
copy. But what about the visuals? They
00:08:54
look good, maybe a bit overworked, which
00:08:57
is something we usually see with
00:08:59
mid-level designers. Just like beginners
00:09:01
would add and add and add to the
00:09:04
rituals, designers at the mid level can
00:09:07
sometimes gravitate back towards that
00:09:10
same behavior. At this point of their
00:09:12
career though, they have a much more
00:09:15
trained design eye, which allows them to
00:09:18
make it work. So, while it's not
00:09:20
perfect, it's clearly a half pass, which
00:09:23
means we're stepping into colors with
00:09:26
momentum. As a mid-level designer, we
00:09:28
know that UIs don't need all the colors
00:09:31
of the rainbow to look good. We know how
00:09:34
to balance the UI by using different
00:09:36
shades or tints of one color instead of
00:09:40
multiple different colors. If you want
00:09:42
pro tips on shading and tinting, check
00:09:45
out Eric D. Kennedy's article that I
00:09:48
linked down below. Anyways, it's a good
00:09:50
old half pass. And we're back at the
00:09:53
point where the junior still tripped up,
00:09:55
the font department. But now, for the
00:09:57
first time, we understand how to use
00:10:00
fonts in a UI. We have less sizes, have
00:10:03
less weights, and while some sizes and
00:10:06
weights might still be a bit off, it's
00:10:09
starting to look cleaner. Half pass. And
00:10:13
onto the last point before we reach the
00:10:15
senior level and the hidden mistake. And
00:10:19
for spacing and structure, it's looking
00:10:21
pretty good. Related elements are
00:10:24
grouped nicely. We've started to use a
00:10:26
spacing system like the 8oint grid. And
00:10:29
as a result, the UI feels more
00:10:31
professional. It's not entirely cooked
00:10:34
like the young crowd might say, but it's
00:10:36
definitely a half pass, which brings us
00:10:39
to five out of five half passes. And the
00:10:43
final boss. As a senior designer, you
00:10:45
have at least seven years of experience,
00:10:48
which means you have designed so many
00:10:50
websites and apps that you're a safe bet
00:10:54
for clients that want both beautiful
00:10:56
design, but also design that actually
00:10:59
drives business metrics. That's why you
00:11:01
will see deals all the way from 20K to
00:11:05
over 100K from senior designers. Sounds
00:11:08
crazy. Let's dive into how it's
00:11:11
possible. First of all, the difference
00:11:12
in copyrightiting here might look
00:11:14
subtle, but when we actually study the
00:11:17
words and the length of the words, it
00:11:20
all just harmonizes so much better
00:11:23
because as a senior, we find ways to
00:11:26
communicate better with less. We know
00:11:29
that we don't need to write last 10
00:11:32
votes when we have a big label right
00:11:35
above saying voting or claim um if we
00:11:39
have a heading saying um rewards. And by
00:11:42
not repeating the same words, we reduce
00:11:45
cognitive load and visual clutter
00:11:48
without sacrificing clarity. And I know
00:11:50
that might sound like a minor detail,
00:11:52
but when you scale this across a full
00:11:55
app is a massive difference. So, we have
00:11:58
our first full pass and we're ready to
00:12:00
talk about the visuals again. They are
00:12:03
now clearly made with careful thought.
00:12:06
We add emphasis only to what matters and
00:12:09
we help the user make immediate
00:12:11
connections between different parts of
00:12:14
the UI by reusing visual patterns. For
00:12:18
example, here the commit part of the UI
00:12:21
gets connected to the current voting
00:12:23
period in the graph because we're using
00:12:27
the same pulsing circle. We're achieving
00:12:29
more with less. It's a full pass. But
00:12:33
what about the colors? Well, here we
00:12:35
basically just simplified what the
00:12:37
mid-level designer did. Instead of
00:12:39
gradients, just simple flat colors.
00:12:41
Instead of a button that screams error
00:12:43
states, we're saving the red color for
00:12:46
the graph. the rewards icon and the
00:12:48
commit indicator. It's nicer on the eyes
00:12:51
while calling attention to the right
00:12:54
things even more effectively. It's our
00:12:57
third full pass, which brings us back to
00:13:00
the fonts. We're finally down to only
00:13:02
four font sizes and two font weights.
00:13:05
And you can see here that we introduced
00:13:07
a monospace version of the font for big
00:13:10
numbers. And to avoid collision when
00:13:13
this reward number grows, we reuse the
00:13:17
heading size from the voting label for
00:13:20
our decimal fractions. And that's all it
00:13:22
takes for full passing again as we bring
00:13:25
out our rulers. And dang, this is what
00:13:28
we call structure. Elements are grouped
00:13:31
logically. Spacing is deliberate between
00:13:35
elements, inside elements, everywhere.
00:13:38
Those seven plus years of experience are
00:13:41
becoming really evident. Full freaking
00:13:44
pass were five out of five full score.
00:13:48
But what about that hidden mistake that
00:13:50
even senior designers make? Well, I'm
00:13:52
glad you brought it up. Let's talk about
00:13:54
it. This mistake doesn't have anything
00:13:56
to do with static UI or UX skills
00:13:59
because as you saw, senior designers are
00:14:02
capable of creating greatl lookinging,
00:14:04
well functioning interfaces. But thanks
00:14:07
to AI, in the coming years, we're going
00:14:10
to see an exponential increase in the
00:14:13
amount of apps that are available to us,
00:14:16
which means that designing memorable
00:14:18
experiences that connects us with
00:14:21
technology is going to be the easiest
00:14:23
way to stand out as a designer. And the
00:14:26
mistake most designers make, again,
00:14:29
seniors included, is that we get stuck
00:14:33
just focusing on static images. But to
00:14:37
create a true experience, we need to
00:14:40
treat UI design more like a movie. We
00:14:43
need to piece static screens together in
00:14:46
a way that makes the app a pleasure to
00:14:49
use. That's how we create truly
00:14:52
delightful apps and as a result also
00:14:56
drastically increase our price tags as
00:14:58
designers. Look at Phantom Wallet,
00:15:01
Airbnb, and even Dual Lingo. Those are
00:15:04
all great examples of apps that have
00:15:07
gone that extra mile, which raises the
00:15:10
question, how do you achieve this? Well,
00:15:13
that is a topic that is out of scope for
00:15:17
this video. But luckily, if you're
00:15:19
interested in a breakdown of these kinds
00:15:21
of apps and how they create memorable
00:15:24
experiences, I have a video on that here
00:15:27
that you can check out. Now, until the
00:15:29
next one, I want you to have an amazing
00:15:31
everything and we'll talk
