FAQ Friday: What are 3 Modern Web Design Elements that Matter?

Posted by Jessica Jones Jan 20, 2017

faq-friday_modern-website-design-elements-that-matter_1000x576.jpg

Web design has morphed drastically over the years, and in its wake, rules and trends have been developed to wow users visually and to promote businesses products and services with modern web platforms.

However, just wowing your users with fancy designs doesn’t help your brand sell its products and services if users don’t know where to go. That’s why in today’s FAQ Friday, we’re going over 3 modern website design elements that matter to your website—providing a happy medium between clean design and functionality.

Make the journey to your content immediate. Don’t let your users fish around for what they need.—Direct Images Interactive

Active and Visible Navigation

At the top of every website, there should be an easily accessible area for users to navigate throughout the site. A navigation bar or header is where your users can see what pages are present on your website, what information is available for them to browse, and how they can take action by clicking the links to those webpages.

However due to the rise of mobile design, hamburger menus have started to prevail even in desktop website design. A hamburger menu is a minimalistic way of condensing and stacking your navigation into one menu button. Once the menu is clicked, it opens up to a stacked list of your webpages. If you don’t know what a hamburger menu looks like, they tend to look like the following example:

andy-stone-sidebar-menu-design.png

SOURCE

While the hamburger menu serves its purpose of condensing information, achieving a minimalist aesthetic, and keeping a site uncluttered, it may have significant drawbacks.—Stephen Moyers

Yet, hamburger menus sometime go unnoticed—making it harder for your users to navigate your website.

The alternative then is to use active and visible navigation to alert your audience towards the important places on your website. This is best exemplified by Brightcove’s navigation bar which is presented in the following image:

brightcove-navigation.png

SOURCE

In this example, it’s clear to the user what types of information Brightcove is offering, i.e., Why Brightcove, Solutions, Products, Partners, and Company. It has trust indicators so that if the user needs support or wants to learn additional information they can call, visit the blog, or click the support link. It even provides buyer persona targeting as the solutions tab shows who benefits greatly from Brightcove’s services. And finally, with the call to action at the end of the navigation, the user can instantly take action by talking with a representative, all with a click of the bright blue button.

Key takeaway: Make your navigation simple to use while being clear and visible to your users right as they access your website. The longer it takes for them to access your information, the quicker it will be for them to want to leave your site. Also, make sure that the way in which you align your webpage links makes your audience want to take action. Cap the ends of your navigation with action based links, i.e., either a CTA, your store, etc. For example, in Brightcove’s navigation, Why Brightcove and Talk to Us cap the ends of the navigation header. Whatever your industry is, find a way to create a navigation header that not only provides information about your business, but also makes your website visitors want to learn more.

Anything we can do to make things simpler and more transparent is a plus.—Cap Watkins

Buyer Persona Card Design

Essentially, the goal of every website is for visitors to take action and explore the information available to them on the site. However, if the user does not know how your website best serves them, what’s the point in exploring?

This is where buyer persona card design comes in. Like the provided example from Values Partnerships, they clearly outline who they support through a list of card style selections. Once clicked, each selection clearly outlines the foundations, nonprofit organizations and private companies that they consult with—allowing the user to see if they too can work with them.

values-partnerships-card-design.png

SOURCE

The key to successful card design is based on your buyer persona knowledge. Who do you help specifically? What are their needs? How do you help solve them? These questions and more should be reflected in your buyer persona profiles as well as within your web design. In this card design example from Type A Machines, they clearly state who they help, what their buyer persona needs, and how their machines can help them. And the cherry on top in this design example is that there is a button for the user to learn more.

type-a-machines-flip-card-design-front-back.jpeg

SOURCE

Key takeaway: Create cards based on your buyer persona profiles. Make it actionable for your users by highlighting their needs and how they can take action towards solving that need.

By using Fat Footers, you provide the user with an easy and natural way of browsing to a new page and while staying on your website.—UX Booth

Fat Footer

In line with simple, visible and actionable navigation in the header of your web design, is the footer of your website, which is just as important. In this case, a fat footer acts as a resource library of all your webpages. It is also a place to add your contact information, social links, and a primary CTA as exemplified in the following image:

type-a-machines-fat-footer.png

SOURCE

Key takeaway: List your webpages in the order that your visitors frequent the most. For example, if you have 5 webpages in one section, list the top 3 most frequented webpages within that section first, followed by the remaining pages. If you have a blog, list your most popular blog posts in your footer or list the blog post links as they flow within the buyer’s journey. All in all, be intentional with your links by basing them on how you want your audience to take action.

The key to creating a unique user experience is allowing your audience to see themselves in your brand. So why not acknowledge them and their needs right off the bat through your website design.—Direct Images Interactive

If you have questions you would like to see featured in our weekly FAQ Friday, please submit them in the comments below or mention us @DirectImages on Twitter. Until next FAQ Friday, keep your communication lines open. Don’t know the answer—just ASK.

Subscribe to our BLOG

Stay in touch & learn how to attract customers, become a thought leader, create effective marketing campaigns, & more.

  

10 Step Website Redesign

 

Suggested links:

2017 Website Planning Made Easy with these Modern Web Design Trends

FAQ Friday: How to Make My Website Better with Modern Web Design

Creating a Digital Experience with These Modern Mobile Design Trends

User Experience Best Practices to Put Your User Back in the Experience

Topics: Online Design, Web Development

Direct Images Interactive is an inbound marketing agency specializing in high-impact video production and online graphic design. We are centrally located between Oakland, San Francisco and San Jose. Come see us at The Gate in San Leandro, a thriving tech-hub of innovators. What can we do for you?

Learn more   How do you launch & measure a remarkable inbound marketing campaign? Get the tools you need.  Download tool kit.
Contact us  Share your challenges with us! We'll help you achieve your goals and ease your pain.  How can we help you?
Call us  Want quick answers to your problems?  What’s better than picking up  the phone and calling us?  510-613-8299 <>
New Call-to-action

Recent Blog Posts

In-Sites Video Series

IN-SITES LIVE! VIDEO