From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.
If you ever look up best practices, design techniques, or trends in application design, you’ll notice something significant: there seems to be a much greater focus on what is most important, that being the user experience, usability, and functionality.
We see this stressed every now and then for that in web design too, but how often is it done?
Web design should not only be about making things look good, but also about good user experiences and a website’s goals. Most designers probably know this. It’s a matter of changing our habits though to make this a reality. In this article, let’s go over a few items that are very noticeable in the app design world, that are often times missed or not given enough consideration in the web design world.
A Very Well Planned Out Layout
If we’re talking about mobile apps or tablet apps, layout is extensively planned out ahead of time — usually to make efficient use of space. Still, even for desktop Web apps, you’ll notice the same sense of a well-planned layout. Usually web app’s design goes through a much more extensive layout planning process because they want to try to figure out a layout that will increase usage of the app.
The same principle should apply to the Web right? Don’t we want people to use our static website just as effectively as well?
What website creators do instead: Layout for web design is often times stolen from a similar website, using the ‘proven design pattern’ excuse. (I’m not totally against pattern libraries, and I know they have their place, more on this later.) Or, they find a cool layout on the web — something that is purely an interesting and cool-looking solution, but without any real thought to why it should be used for this website.
I’m not against pattern libraries. After all, all the great designers steal. There are blog layouts that work great for blogs. There are navigation design patterns that have been proven to be very efficient for their purpose. This is all true. However, never blindly assume that it means that X design pattern is good for your web design, only because it has worked so well on many other websites. Focus on the website’s goals. Focus on how users will use the website; how they’ll want to use it, and how they need to use it. Do not only work off of how you would use it; consider the target audience.
What you should do: Start coming up with your own layouts, based not on what looks cool, or what others have done in the past. Go off of research, planning, goals, and what would be the most efficient and effective for the users of the website. Use pattern and design libraries, as well as showcases, for inspiration when you get stuck. Use them as inspiration to improve what you initially come up with on your own. Do not use them as a starting point.
Interactivity & User-Centric Design
What makes an app, an app? It has a use. It’s not solely for consuming content, but doing something with it as well. It puts focus on the user of the app.
What if your website is meant to be consumable content though? It doesn’t matter, you can still create a website design that is more user-centric.
Hawaii.gov has done an excellent job with this. Why would people come to this website? There are likely a number of reasons, and the website clearly divides the navigation into clear sections, highlighting the most popular options. It puts the current status and a search option right at the center, so the user can easily and immediately get to what they need. There are also a number of interactive techniques that allow the user to make the website more of their own, to better accomodate their needs.
Let’s also use the example of a blog. Instead of laying out all of the content, how can you make the design better with interactive effects that make it easier for the reader to find exactly what they need, or what they want to read, besides the standard search bar and a few categories? Can you build a really interesting filter? Can you create a tool that helps readers get the information they need, solve their problems, and get what they’ve been searching for?
Adding interactivity and user-centricity to design can come in many forms. There’s many examples of other websites already doing it in their own way.
VisitPhilly.com puts both an emphasis on users that are planning to visit, and visitors that are currently there. With plenty of information and tools to plan a trip, the current conditions of Philly right now, and what events are currently happening, the resources laid out in the website really focus on the individual’s goals.
nclud includes a lot of interesting interactivity that really allows the user to absorb the information in a more meaningful way. At the same time, the interactivity does not make the website difficult or gaudy to use, but instead complements the content.
Yellow Pages puts what the user needs and wants to do right at the center of everything. Secondary content is content that the visitors may find useful in the form of localized coupons and places. Interactivity and user-focused functionality is added through a bookmarking feature, that requires no login.
Stop Worrying About How Pretty it Is
You could make the coolest, prettiest, best looking web design there is, but that won’t solve the visitor’s problem. It won’t solve you client’s problem either.
Don’t design for aesthetics, design for how the target audience will use the website. Do you know your audience? How well? How do you know them? This is why designers who focus on one type of website are so successful: they know what the audience is looking for, even though they aren’t apart of that audience directly. It’s a combination of research, but mostly know-how through experience. Stop designing for yourself, it’s not a good business model.
“But I want good looking pieces to put in my portfolio! I’m a designer, it’s my job to make websites look good!”
You don’t need to make ugly websites, but only making pretty websites should not be your primary role. You need to make smart websites, and then wrap that intelligence in a pretty coat. Over half of design is design intelligence and usability, not just aesthetics.
Mobile First and User-Centric is a Good Start
The #1 way we can start making better designs is to start thinking of website as a tool again, and less like a painting on a canvas. Placing importance on this is the fastest way to begin doing it. How can we force ourselves to change our mindset though?
Mobile first design is a good place to start. It won’t automatically come up with the solution, but it can get us thinking on how something will work on mobile, where users are more goal and task-focused.
Here are a few resources:
- A Book Apart’s Mobile First
- Mobile First Design: Why It’s Great and Why It Sucks
- Creating a Mobile-First Responsive Web Design
Another concept that has plenty of outside resources and a good place to start to change the mentality of web design is the concept of user-centric design. Start designing more for the user, what they need, and how to personalize for them to make the best design decisions possible.
Here are a few resources:
- User-Centric Website Design
- User-centered design (UCD) – 6 methods
- Looking Beyond User-Centered Design
Static websites are not applications, and shouldn’t necessarily be treated as them. However, we should give more importance to the concepts we need to deal with in app design, and start applying them to website design.
Putting more focus on how the user will interact with a website, rather than just trying to have a creative competition with other designers, will put the intelligence back in website design, creating better performing websites.
nice article. i will use it for my responsive sites.
Great Article. Cheers!
Nice article… I hope some blueprints <3
i will refactor all options when designing the best layout for the specific user
I normally enjoy codrop articles, but there’s not much flesh in this one, I am afraid. I kept on waiting for the meat until the end.
I love this kind of articles more than how to’s and examples of doing things
Siempre recuerdo esta frase: “Has un diseño en el que el usuario tenga que hacer la menor cantidad de ‘clicks’ posibles, que el producto busque al lector y no que el lector busque el producto”, un ejemplo Apple
Love this article!
Full usability! I like it))))
I agree we need to put the intelligence back into website design. More people are accessing the Internet from mobile devices and a mobile website design is important. Functionality and ease of use on any platform is a top priority.
Awesome Article, Worth reading…
A website should always be simple and functional. If it can look good, so much the better. But looking good should be second to function. If a site looks good and does not function it is unlikely to make money for its owner.
Looks a bit technical but possible for those who know coding. The information you provided was awesome and I learned a lot from it. Thank you so much for your effort in sharing such an awesome post!
Congrats! It has been a long time since a read such a great article like this. Agree at 100%!!
Indeed! “all the great designers steal.” LOL!
Awesome post. All these applications are useful and beautiful. Thanks for sharing.
I really loved your article. Don’t you think that, for example, the Facebook app is much better designed that the desktop version?
In real a thought provoking article. Adorably adventurous, i would really appreciate this whole new concept. and i’ll agree with Sasha that Facebook app is much better designed that the desktop version. I previously had tried idaho falls website design and it was good.
Good article indeed. A good website design lays the foundation to the functioning of your website! Nail a simple design but an eye catchy one!
Brilliant idea I am impressed with this article,. I agree with “Sasha” about Facebook app. but thanks for the sharing.
That is right, efficient use of space and well planned design goes a long way for mobile or desktop app.
Make sure your text and background has the proper contrast. There’s evidence showing that white text on a black background is easiest for most people to read, but other colors are fine so long as they’re readable. Also keep in mind that people with visual impairments may not be able to read your site if the contrast is poor.
this is an awesome idea
Very good article but for me it lacks more (well chosen) examples. I would really like to see comparison on good looking vs good functionality in similar places.
Most of the website examples you have put here don’t complement the clear message of the article.
This is great, thanks for the share. I agree, some more examples could have been great to compare or contrast. Keeping it simple is probably the best tip though, totally agree.
“Stop designing for yourself, it’s not a good business model.” – Yeah, let’s all spend our lives doing what other people want us to do. I look forward to the follow-up post where the author talks about finding her muse and pursuing the types of projects she really wanted to work on.
If you can afford it, you shouldn’t settle for a templated layout. Best to customize according to your personal or business needs.
Talk about web design with a twist.