Web Design

A Human Approach to Functional Website Design

by Emily Rapport Updated:
An old Apple Macintosh.

Design is not just what it looks like or feels like. Design is how it works.

Steve Jobs

Form and Function: two sides of the same coin

We may not objectively notice if a website is beautiful but we will notice if it works. This is the marked distinction between design standards (a comprehensive set of patterns that govern how content is displayed and interacted with) and design trends (that hip, parallax scrolling effect is sooo 2014). While concerning yourself with making your website beautiful, ensure that it also has an underlying design logic.

I’m not saying that good design will save the world, but it can support your site content, enhance your message, and create a beautiful user experience for all.

Good design begins with your content.

struggling-to-write

Among all business owners, this is the “to-do” item that gets repeatedly shuffled to the end of the “launch my website” list. No one wants to sit down and write about what they do. It’s hard. It takes competitor research, thought, words… typing. Ugh. But, just like packing up your business cards and elevator speech and heading to a local MeetUp, or going to the gym when you’d rather sleep in, as much as you’d simply rather not — writing your own web content can be a rewarding and fruitful exercise.1

Communicating what you do and why you do it to someone else forces you to streamline and clarify your message, service offerings, and pricing. It will also help you decide what parts of your business you want to focus on and develop. This “editing” can potentially increase your productivity by eliminating tasks or services that don’t produce income or are not truly reflective of what people are looking for from your industry.

Even if you are working with content writers and are not a writer yourself, being a contributing part of this process will help you (and your team) craft an authentic voice for both your website and your business. Finding this voice sets you apart from your competition who did not take the time to work on their content. It will also help identify you as a trustworthy resource for information about your product or service, and guess who likes that? Google likes that.

Content precedes design. Design in the absence of content is not design, it’s decoration.

Jeffrey Zeldman

Your content is the foundation for design decisions.2 I have a background in fine art and years of experience in the organization and design of visual things. My work as a designer involves studying how people use websites, understanding the impact a font or color choice can have on brand perception, and considering how the architecture of your site can help or hinder your user. While we all have our personal preferences and favorite colors, it’s important to realize that you are not necessarily your user. The designer’s goal is to support your content authentically and to allow for a rewarding user experience.

The work you put into initial content preparation will be returned two-fold when it comes time to design and develop.

Beauty is only theme deep.

girls-on-beachA word or two about commercial themes: While there are many exciting WordPress themes pre-loaded with sliders and portfolio/team/agency post-types, pricing tables and animated progress bars, parallax scroll effects and MORE… ask yourself, what does your site need to communicate its message to your audience? In most cases, it is none of these bells and whistles. Your content will help your designer and/or developer either recommend a commercial theme or build a custom theme that best suits your purposes.

Web design trends come and go as quickly as Apple releases a new iPhone. Don’t be distracted by the shiny. If it doesn’t work for the user (that includes you as a content editor), it’s not a good design.

It’s all about the responsive web design and web accessibility.

Part of good design is making sure that all of that great content you created is accessible to everyone and usable across devices, regardless of Internet connection speeds. Here are five simple practices to make a habit of including in your website design and future content editing:

  1. Make sure your (appropriately sized) images have “ALT” tags. Search engines and people with screen readers can’t see your images. This is not an opportunity to stuff keywords into an alt tag description. Make it useful for people.
  2. Provide good contrast between the text people have to read and page background. This is a major pitfall for many designers who favor the subtlety of a slender dove-grey text on a shimmering white background. Be aware of font size as well — 10pt is considered a minimum. With mobile devices, and navigation in particular, you want to be sure that there is a large enough “tap” area (or “touch target”) and that fonts are readable. Font-size Tips: https://www.w3.org/QA/Tips/font-size
  3. Plan for and use Headings appropriately. Headings (h1 through h3 mainly) are used to help break up your content and introduce new topics. This helps all readers scan your content and easily locate the sections that they are interested in.
  4. Consider people with color-blindness. Color blindness affects approximately 1 in 12 men (8%) and 1 in 200 women (.5%) in the world. Deuteranopia, or Red-Green Color Blindness, is the most common. For these users, red and green are often indistinguishable.
  5. Animation – make it useful, keep it short. Think about people with motion sensitivity when creating animated events, adding video to your header (trending) or building your next slider with HTML5 animations. Including user controls and keeping animations short are two ways you can make your web animations better.

Making sure that your website is attractive, authentically communicates your content, and works on a variety of devices for all users will produce a website that you can be proud to show off at your next client meeting or conference. This groundwork will also satisfy many of the demands of search engine optimization, meaning you will have a fast, efficient site spring-loaded to perform well in local, organic search.

You can learn more about web accessibility and related items here:

1. Really, it can.

2. Ideally, the web development process is collaborative, meaning your designer, developer and content creators work together. The web is not hierarchical so why should the web development process be?

Posted in Web Design