So now that we've talked about some of the fundamentals of design like Color Theory and Typography, the
next thing I want to talk about is User Interface Design.
Now take a look at this picture,
in most cases, 99% of you would have read "YOUR EYES HERE" first, "then here" then
"Isn't that fascinating?"
So this is just a way that our brains work.
We're always drawn to the bigger bolder squarer of things.
And As designers, we can use this knowledge to define Hierarchy. So let's say that you were to write a
birthday invite to Jane.
You could write it like this, but all of the information has equal weighting.
So as a reader, I have to go through the entire paragraph and I can't just skim through it to get the
important bits.
So it's going take me a lot longer
right? Now on the other hand if I apply the rules of hierarchy then the most important information gets
conveyed over first and I make sure that Jane actually knows whose birthday party it is, where it is
and when they should go.
So we can establish hierarchy in a number of ways.
The most obvious is through the use of color.
So colors that really pop and stand out and have contrast with that background tend to be used for high
hierarchy.
So for example in this case if all the colors were the same, then it feels like they all have equal importance.
But on the other hand, if we have something that's very bright very standoutish versus something that's
a bit more grayed, a bit more muted, then we know exactly where our eyes will go to first.
Now if you take a look at this example, this is the ASOS website, and their predominant color palette
is the sort of gray and white color. But they've really cleverly used their accent tone, this green and
red, to really tell the user what they think you should really look at.
And it seems like ASOS really cares that you know that they have an outlet and also that you add your
product to the bag so that they can actually make money off you.
So, in this case, they're using that green accent tone to really pull the eyes to that button and make sure
that the user actually completes their transaction. Now in addition to color, you should also think about
size because as I said, the bigger items often draw your eyes to it.
So, for example, if you look at the Coinbase website which you can use to buy cryptocurrency, we can see
the first thing they want to tell you is you can use this website to "Buy and sell cryptocurrency."
Now the next biggest thing on the page is this huge email input and a button that says, "Get started".
So because a lot of these companies run ads and they're paying for users to land on their page, it's really
important for them to capture the emails.
This is kind of what this design is representing,
right?
As long as you land on this page, you're probably going to want to look at this place where you put in
your email address and get started so that the company can capture your information.
Now in addition to establishing hierarchy, in terms of User Interface, you should think about the Layout
of your website.
You can of course, on one hand, have this big block of text which is just your website where everything
is all laid out in the same kind of way
or you can create more interest by creating a block of text and then interspersed with pictures and
then create some different sizes and different shapes and different hierarchies to make your design
look more interesting. Now the Wikipedia pages are an example in bad design because just look at how bland
it looks.
It really is trying to be an encyclopedia but it doesn't have to be like this. Now
one of the most noticeable things about Wikipedia is just the length of each block of text.
Just look at how long each line of text is.
It's very hard for a user to keep their eyes tracking along the same line.
And in fact, in terms of User Interface Design, there's an optimal line length. Too long and it gets a
little bit tedious to read, but too short it feels a bit too choppy and it's a bit awkward to read.
So you want to aim for something around 40 to 60 characters per line so that it feels comfortable to
the user and they'll be able to get through the information and still be interested in your website.
Now when you have good layout like Grammarly's website, it's not only interesting but it also chops
up the content into smaller pieces so that you actually get through more of the website and you take
more of it in.
Now another thing I want to talk about is Alignment.
This has to do with how you position each of the elements on the screen relative to each other.
So take a look at the example on the left. The top title is center-aligned whereas the body text is
left-aligned. And it makes it look a little bit awkward like they're not really meant to be together.
Now on the right however just by shifting the alignment so that both starting points are the same for
the title and the body, it suddenly looks a lot more consistent and a lot more designed.
Now one of the easiest ways of making any sort of design you create look professional is just to reduce
the number of alignment points.
So let's say that you're creating a slide deck for your next presentation or you're creating a poster
for your birthday party,
take a look at all the things that are on the design and identify a line which goes through the beginning
of each item.
Now if you can reduce the number of lines like we have done here on the right then suddenly the design
looks a lot more coherent, like all the pieces are meant to be together.
And it just looks a lot more professional.
So use these grid lines in your designed to help you visualize where the starting points of each element
is and try to line them all up.
Because even if you do nothing else but just alignment, you can see in this case the left looks a lot
more sloppy and the right looks a lot more designed and more professional. And all that's changed, there's
no change in the color, there's no change in typography, it's just the alignment. Now a really important
concept in all design is White Space. And white space refers to the empty space that's around text or round
your elements.
Now sometimes when I'm on the high street I come across one of these luxury handbag or shoe shops and
I look through the window.
Now here's an experiment,
take a look at this shop that sells handbags, and take a look at this one,
now how much are you willing to pay for a handbag from this shop versus this one?
Now this is really a use case for white space.
A lot of luxury shops, luxury designer stores,
one of their simplest tools is just injecting white space around their products, space things out and it
makes everything suddenly look a lot more expensive. Whereas when you have everything all tightly crammed
together and you have a lot of product on show, it makes it look like it's some sort of discount store.
And the same principle applies when it comes to digital design as well.
Let's say you have an ad for noise cancelling headphones.
If you have loads of things on screen, there's "New!", "Only $20", "100% noise cancellation".
It makes the product look really cheap. Whereas if you injected some white space, all of a sudden it looks
like Apple made it, right? Just by adding that space around each element on the screen
you can make your design a lot more minimalist and at the same time elevate it.
Now the last thing on User Interface Design I want to talk about and probably the most important is
design for your Audience.
A lot of things I've said, including not using comic-sans,
it really depends on your audience.
Let's say you're designing a children's concert poster, the one on the right looks like something that
children might actually want to go to. The one on the left looks a bit like a funeral advertisement.
It's so serious. It's so black and white and it's so severe looking that no child is kind of want to
go to that concert.
So think about your audience.
Think about what would appeal to them and what's important to convey to them. That it's going to be a
fun concert or that it's going to be boring adults who are going to be reading newspapers and some sort
of classical band in the background. When you're designing websites design it for your audience even
if it's something a little bit messier, a little bit bolder in terms of color, as long as it fits your
audience and that's perfectly fine.
So have the flexibility in your design so that you're not just creating one style all the time. You're
creating one style for a particular audience like teenagers who want to buy clothes and you're creating
a different style for people who want to buy and sell cryptocurrency or have a medical website.
So the flexibility in your design skills is really important when it comes to User Interface design.
But keep in mind those five things: hierarchy, layout, alignment, white space and your audience and you'll
be well on the way to creating more beautiful user interfaces for your websites.