Applying App Design Concepts to Website Design

Should we let app design guide us more in website design? In this article we’ll explore how app design concepts can help rethink the planning and design of websites for a better user experience.

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.

riddimpediariddim2
Credit: App Design Served

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
Credit: Hawaii.gov

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
Credit: VisitPhilly.com

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
Credit: nclud.com

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.

yellowpages
Credit: Yellow Pages

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.

kiss
Credit: Hey Paul Studios

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

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:

User-Centric

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:

Conclusion

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.

Tagged with:

Kayla Knight

Kayla Knight is a web developer focusing on front-end development and WordPress themes. She works full-time at an agency as well as freelances on the side, particularly doing a lot of blogging.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 31

Comments are closed.
  1. 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.

  2. 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

  3. 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.

  4. 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.

  5. 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!

  6. Congrats! It has been a long time since a read such a great article like this. Agree at 100%!!

  7. Dear Kayla,

    I really loved your article. Don’t you think that, for example, the Facebook app is much better designed that the desktop version?

  8. 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.

  9. 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!

  10. Brilliant idea I am impressed with this article,. I agree with “Sasha” about Facebook app. but thanks for the sharing.

  11. That is right, efficient use of space and well planned design goes a long way for mobile or desktop app.

  12. 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.

  13. 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.

  14. 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.

  15. “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.

  16. If you can afford it, you shouldn’t settle for a templated layout. Best to customize according to your personal or business needs.