In the final part of our five-part series on how to plan better websites, Astute Communications owner Anna Stout discussed visual design, “the part that people really look forward to.” Yet because of today’s vast array of screen sizes and shapes, she emphasized the importance of beginning the visual design process by focusing on responsive web design. She also shares how atomic web design is now influencing how her company creates sites for its clients.

Many people consider a website’s visual design as the first step toward building a website, but the first four parts of this series reveal a different fact. From developing sitemaps and customer acquisition funnels to gathering relevant content and creating useful wireframes, an immense amount of intentional planning must occur before even one pixel has been designed. But if such planning has been done, design work can commence.

[soundcloud url=”https://api.soundcloud.com/tracks/193943282″ params=”color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false” width=”100%” height=”166″ iframe=”true” /]

What is Responsive Web Design?

Stout summarizes the drastic change web design has undergone within the last decade: “It’s not about pixel-perfect web design anymore because there’s no such thing as pixel-perfect.” Instead of designing a static website of 980 pixels wide in Photoshop, as Stout often did early in her career, today’s web designers must use HTML5 and CSS to make responsive web design come alive.

According to Stout, responsive web design is “about making a site that’s going to respond to the medium upon which it’s viewed. The elements on the page will shift and optimize based on the browser width and resolution.” For more in-depth information about responsive web design, Stout recommends searching for content by “the father of responsive web design, Ethan Marcotte.”

Responsive web design itself is a necessary response to the rapid expansion of the mobile web. As of 2014, mobile Internet usage surpassed desktop browsing. That’s why Stout espouses mobile-first web design:

The idea behind mobile-first web design is that we’re going to start with the lowest common denominator. On the smallest screen with the lowest resolution, how are we going to display information? What’s most relevant? What’s most important? And how are we going to present that in a way that’s easily accessible to the user? And then, as you move up, as you plan for larger and larger screens, you’re going to add on different features and functionality.

To test responsive web designs, Stout uses and recommends Browser Stack, an online tool that offers an easy-to-use cross-browser testing platform. She’ll also manually resize windows on a desktop in order to see if a responsive website decays well.

 

What is Atomic Web Design?

As coined by Brad Frost in 2013, atomic web design is a particular approach to responsive web design that looks at how the individual “atoms” of a website create larger “organisms.” Stout says that, “The deliverable that the client actually receives is not a picture of the website. They’re receiving all the different elements. What they’re receiving is a design system that is inherently going to provide consistency throughout their site rather than just a design.”

This is still a new process for Stout and her team, but she appreciates how much sense such an approach makes in terms of creating adaptable, responsive, and mobile-ready websites.

 

3 Parting Tips for the Visual Design Phase

To end our conversation, Stout offered three insights into a customer’s relationship with a designer and developer during the visual design process:

1. Ensure that your designer and developer are working together and have been since the start of the process. As Stout said,

The developer knows what pieces need to go where and what those pieces do, and the designer knows how to make them really good and really visually appealing. And the designer should know how to create a call to action that’s going to stand out on a page. By working together, they’re going to create optimum results.

2. Don’t be afraid to speak up.

Stout encourages open communication with all of her clients and desires their feedback:

We’ll do a couple of rounds of revisions to make sure that the visual design is both in line with their goals and reflecting who they are as a company and their brand identity. It’s not until we receive approval on the designs that we will start actually building the site.

3. Keep an open mind.

When hiring a professional designer and developer, trust them to do their jobs. Provide examples of designs you may like to see implemented and be vocal about your specific goals for the website, then let the company do their work. Be sure to voice any reservations you may have before design work has started, as changing the design after development has begun may prove challenging and costly.

Now that you have a fuller understanding of what it takes to build better websites that result in more conversions, consider contacting Astute Communications to learn more about their web design and development services.

***

Clark Buckner hosts several Nashville Podcasts and is building a podcast agency called Relationary Marketing: Strategic Content that Drives Engagement. Special thanks to Chago’s Cantina for the space to do the recording.