Strategy

8 Secrets of Powerful Modern Web Design

By Tia Nowack, Content Strategist

July 15, 2014

We recently gave the Stephan & Brady website a complete makeover. It was due for a refresh, and we also wanted to create an online presence that better reflected our values and culture as a company.

Today, we wanted to open up the conversation a bit more to talk about the fundamental web design guidelines that influenced our design process. Most of these guidelines came directly from our own experience in designing successful websites for our clients.

If we had to zero in on some “rules” that are most critical to modern web design, we’d go with these:

 

Start by mapping out the user experience

The best modern web designers don’t think of themselves as designers at all—they’re information architects. Their job is not to create pretty things, but to choreograph perfectly streamlined websites that hold users’ hands, guiding them through a specific workflow.

It’s only natural to want to show off your creative chops, but make sure you’re not doing it at the expense of the user experience. Your primary goal should be to build a website that is so intuitive, users don’t have to think at all to find their way around it. They’re able to navigate through it on their first visit as quickly and nimbly as if it were their tenth.

So, how do you do this?

First, resist the urge to include everything on your site. Put yourself in your audience’s shoes and think about what information they’d want to find, in what order (rather than what information you want to share with them).

Then, think about what visual cues you can incorporate to draw eyes to the right places at the right times. I’m talking about things like large, high-contrast fonts, sharp visuals and specific trigger words users will be looking for, such as About, Contact or even Start Here.

 

Design for mobile devices first

78% of website views are happening outside of desktops. This means we’ve officially reached the point where we shouldn’t just be considering mobile devices in our design, but designing for them. This can be a tricky sell with clients, who are almost always thinking solely of desktops, but it’s also a perfect opportunity to flex your expertise muscle.

And that 78%? It’s only going to increase as mobile navigation improves, and as more and more devices are released. Tablets are the latest craze to throw the design world for a loop, and smart TVs might just be next.

 

Don’t just keep up with trends—get ahead of them

I know you don’t have a crystal ball. But here are a few tips for becoming proactive, rather than reactive, in the design game:

–Keep a close eye on influential design outlets—sites like The Best Designs, Site Inspire and Best Website Gallery. What the guys featured on those sites are doing now is what everyone will be doing soon.

–Understand the reasons trends emerge and how they build on each other over time. For example, the trend toward simplification—flat images, fewer navigational options, light text—paved the way for the full-screen background image trend, since the simplification reduced load time demands that could then be redirected to beefier imagery. What might be next?

–Don’t think of modern design trends as visual changes so much as they are usability changes. How can you allow users to think even less while perusing your website? What could be impacting the way your site looks to different users, and how can you capitalize on that?

 

Keep copy lean

Back when the phrase “content is king” started lighting up the internet world, some people accidentally misinterpreted it as “write a lot.”

As the internet becomes more and more sophisticated, people have grown progressively less tolerant of the word-vomit-style sites that used to be the norm. Now, we’re thrilled with websites that are bold enough to fill a screen with nothing but a single sentence (like this one)—and we’re happy to scroll through five extra screens to read five more sentences (which, if they’d all been presented on one screen, we might have skipped).

 

Find a story that resonates

You’ve probably heard it at least a thousand times: good storytelling is critical for good web design. By telling users a story, instead of just checking off pieces of information, you’re engaging them in a real, human way, and you’re also helping them understand and remember your message.

The trick is to find a story that resonates with and intrigues people. Your story is not the history of your business (not even if that’s a cool story about how a couple of young, inexperienced guys launched something great out of their garage…or what have you).

Most importantly, your story must do two things:

–Relate directly to your target audience’s problems.

–Present a way that the target audience can make their lives better.

 

Show your authenticity

Something that was really important to us during our website redesign was appearing real to our audience.

Rule #1: no stock photography. Instead, we incorporated actual photos of things we found around our office, like shoes, mugs and office tchotchkes. We captured and showed these items in gritty documentary-style, purposefully distancing ourselves from that glossy, too-perfect look.

Why does authenticity matter? Because in today’s marketplace, it’s not the biggest, strongest, most well-established companies that win—it’s the relatable companies. The ones that seem to understand us, not just as consumers, but as fellow human beings.

 

Infuse emotion

You’ve probably heard that most purchase decisions are based on emotions. We choose certain brands because we like them and connect with them in some way.

The same goes for web design. As user experience designer Aarron Walter explained in his book Designing for Emotion, emotion is the “lingua franca of humanity”—the native tongue that every human is born with.

What kind of emotional tone are you setting with your design? The colors, the images, the fonts, the layout, the copy—every element plays a role in triggering a certain emotional response from the reader.

If you’re looking for specific tips for infusing your site with emotion, Smashing Magazine has a super helpful article on the topic.

 

Remember that the site isn’t done when it’s live

We can’t stress this one enough.

Too often, we see the go-live date for a new design treated as a finish line, when it’s really just another step in the journey. There are plenty of things you can and should be doing with your website post-live to both maintain and optimize your web presence.

For example:

–Find ways to keep content fresh. On our site, the photos on the home page are different each time you visit, and we’ll continue to add photos to that rotation going forward. We’ve also included a link to our latest blog post at the top of the page, which we’ll update each time a new post is published.

If you’re active on social media, you might also consider showcasing your latest tweets/posts on your site.

Not only is fresh content engaging for users, but it’s fantastic for SEO. Speaking of which…

–Beef up your SEO efforts. A quick Google search will lead you to countless articles about how you can optimize your site for search engines, which will boost your rankings (how high up you appear in search results) and bring more traffic to your site.

Have you incorporated appropriate keywords in your site copy? Are you using heading tags properly (so search engines can easily identify your headlines)? Do your pages and images have meta descriptions? Does your site load quickly?

–Track user interactions. Once your site is live, Google Analytics can tell you a lot about how people are actually using it. This is valuable information that you can incorporate back into your design.

Which pages are users visiting the most and least? Is it the ones you expected? (If not, do you need to tweak your navigation?) This is also a good time to do some testing—if you swap in a different headline on a key page, how does it affect your numbers?

 

Conclusion

If you take absolutely nothing else from this post, remember that last point: your site isn’t done when it’s live.

The hottest, savviest websites out there have room for improvement. So does ours. And so does yours.

The ability to embrace this reality is what separates the great sites from the ok ones. Are you ready to do what it takes?

What would you add to this list?


Comment

MORE IDEAS:

ADM Grain silo and blue skies

Get the Advantage

Get the Advantage

To fit ADM’s new branding, we developed a modern website, complete with custom videos.

To fit ADM’s new branding, we developed a modern website, complete with custom videos.

View Project