I’m excited to jump in this video because I’m talking about web design fundamentals of 2022. Now, as you know, I’ve been in this space for about 8 years so I’ve seen a lot of trends come and go. But I wanna talk about principles that are effective for website design, things that you can do to make dope sites convert, and how to get it done on a daily basis.
So let’s jump into my computer, I’m gonna dive in and show you in real time some of the effectiveness of the websites that we’ve created. Let’s go!
First things first, let’s talk about Hick’s Law. Now Hick’s Law states that you need to make it very, very simple for people to make a choice. Think of it as, the more complex the choices are, the more difficult it makes the end user’s ability to make a decision.
So with most websites, you wanna keep your call-to-action from 1 to 2. I’m on the Discord homepage here, as you can see, they don’t have a ton of call-to-action here. This is a very simple homepage.
Now in this main header area, you have two options: Download it for Mac, or you can open Discord on your browser. It’s opening this based on the device type I’m using. Since I’m using Chrome browser on a Mac, it says “Download for Mac,” I can click this and I can download it.
Now there’s also an option here to open Discord. So what I would do here is I would actually get rid of this one or this one, and just keep it at two with a contrasting look and feel for each button. That way, a user can come here and they’re not inundated with decision-making.
The goal is to remove clutter and then showcase your end user with just a couple options for them to make a decision. Hick’s Law is crucial to any web design, and you will see this across the board on many, many website types.
I just pulled up a few random websites–you can see this one here, the header just has a couple decisions. Mostly likely, the “Get Started,” that’s the most prominent button here.
If I go to Ziko Studio, you can see we have the “Sign Up” and “Sign Up” here, as well. If I go to this website, you have a clear call to action here. There’s nothing here on this header, but this is mostly focusing on image content.
But you can see these all have a common denominator. Now what I like to do with most cases in the header is just have one call-to-action that I want most people to see prominently. If you have two, three, four different options, it’s gonna inundate the end user and they’re gonna have too many options to try to decide what they wanna do next.
A lot of times, people get analysis paralysis and they just wanna jump off with the quickest.
Now I’m on Lapa Ninja because I wanna show you the second element. It’s called the Law of Common Regions. Basically, what you wanna do is place related content in specific areas so that people know that things grouped together are most likely identical or have affinity toward each other.
What I like to do is go to Lapa Ninja just for info, just to show you all what the example is. As you can see, all this content is grouped together in this session: borders, background, everything is pretty much in tandem for these sections. So I know that all these are grouped together and I should treat all these as one entity on this page.
So when you’re building out your sites or if you’re thinking of it from a user experience standpoint, you wanna make sure that all this content is grouped together and that you have similar pixel spacings between each one.
A lot of times when you visit a blog, or when you’re on a website with some type of resource area, usually the Title, the Author, and the Image are grouped together. What that tells the end user is that, “I know that all these items are together, so therefore they’re talking about something similar in regards to this section.”
So if I go here and I scroll down to here, you can this is all ticket times, I can see latest news here, they’re all grouped together. So anytime you do this, any content you create around this should be similar in regards to the end user and what they’re seeing on their side.
Now one important element when it comes to website design, and most of you all know this is, you don’t want to have large blocks of text. And you can see that this page has a bit of content on it, right? But it’s segmented in a way that makes it easily digestible.
This is similar to an Apple website landing page. As you can see, you have the main grouping here: you have the large title, you have an image. The first thing you see is you have a title, the largest thing you see is the image, second largest is the title, and third is these calls-to-action.
You can also see that there’s a good amount of content here, but it’s broken up into segments–1, 2, 3–that makes it easily digestible. So instead of a long form paragraph that’s gonna be difficult for users to peruse, they have images here, titles, and then quick-to-read descriptions of this piece of content.
Then, of course, here you have cards. You have an image, a title, and you have a description, then you have some type of call-to-action here as well.
So you could see that there’s a lot of content on this page, but it’s segmented in a really digestible way that makes it easy for the end user.
Next, let’s talk about the serial position effect. Now what this means is that users remember the first and last things in a series. That’s why the header and footer of a website are so crucial to making that user experience an easy and memorable one.
So you can see in this header, it looks great, they have an arrow to scroll down, and they also have a preview of the next section, so I know I can scroll here.
Now what I wanna do is I wanna know about these hidden heroes, in regards to technology, and I can click their profiles to learn more. As you can see, as I get close to the footer, I get this really cool call-to-action to join the newsletter.
That’s a really big component on this website, because they wanna really build that email list. Now the footer has just a little bit more information on whom I can contact and reach out to.
So usually, in a website’s footer you have options that are in the main menu to access any additional pages that you might need. But try to keep your important content at the top, as you can see here, this is the main idea of what this website is about. Then we have this clear, concise, action area here for us to sign up for the newsletter.
Now let’s switch a little bit to usability. So you want to keep your users informed and up-to-date with appropriate feedback. Feedback can come in many different ways.
On this website we built for a client, you can see that when you highlight your mouse over this, this bubble starts to have an effect. I always say to add some kind of highlight effect to a button because then it shows the user that this item is interactive, that they can use it and that there’s an appropriate action once they click that link.
Feedback can be arrow changes, effects, arrows, points, items, moving interaction–those are all considered effects. Even as you scroll, the content starts to scroll up and populates as I scroll through this website.
Also, you want to make your website original, like Pablo’s website here, for his design astrologists project.
But you do wanna keep conventional things, right? Every website should have a header, a footer, should have a logo on the top left or top area so you can signify what this brand is. Usually folks read left-to-right, so having the important content left, with image content to accompany that, works really great, and then having really clear call-to-action in the upper right corner.
So most websites will follow this criteria. It doesn’t say that you can’t be creative, but you do want to stick to standards that most people understand–especially when it comes to accessibility and being able to reach a larger audience.
Lastly, let’s talk about white space. Now you can see on the iPhone 13 webpage, it gets millions of views per month, and it’s literally just a long form sales page. But as you can see, they do a great use of white space, and essentially they used all the elements that I talked about in this quick video.
As you can see, there’s a nice amount of white space on each side, some consistency in regards to the title and description, as well as this call-to-action here–there’s a highlight option here, it’s just really subtle. But it’s Apple, so they can get away with it.
You can see that there’s a lot of white space in regards to the content, right? You have text in this lower left corner, so you can see this homie’s beautiful face, and then this large image. All this is really, really strategic in regards to how this content is showcased–and they’re using the card format, which really organizes the content and make it look really great on a desktop device.
Here, you can see that all the content is broken up in groups here, so you know that these are all identical. So these are all ideal principles that you can use in reading and creating your website design and development.
Again, a lot of these are common knowledge, but it’s great to put this behind some elements that you can see in real time, and I really hope this was helpful.
Thank you all for checking out the video content, it is much appreciated. Make sure you Comment, Like, Subscribe. Make sure you give me that feedback I need to make these informed decisions, you all, and I will see you next week.
