Building a Website? Make Sure You Choose Design Patterns and Build Wireframes First.

Building a Website? Make Sure You Choose Design Patterns and Build Wireframes First.

It’s Week #6 of the UX Design class I’m taking at The Starter League! By the way, they are still accepting some late applications for the spring quarter, but spots are really limited–so make sure you sign up very soon if you’re interested.

Last week, we talked about determining what features you should include while building your products. This week, we moved on to design patterns and wireframing—which is one of the most important exercises in UX design. Let’s dive into design patterns first.

Intro to Design Patterns

Let me start my saying there are an overwhelming number of design patterns from which you can choose when you’re building out your site. For the sake of brevity, a design pattern is a general, reusable solution for a user experience problem or challenge. One of my favorite resources for finding patterns is Patternry.com. Here, you can find a list of dozens of pattern types, like: breadcrumbsautocompleteendless scrollingprogress bars, and navigation tabs.

This article would become a mini book in and of itself if I attempted to even mention all of the various patterns you could use while designing a site. So instead, I’m going to take you through the process we’ve been learning in class about deciding which patterns will ultimately work best for you. In the meantime, if you’re interested in discovering the array of pattern choices for your design consideration, here are several awesome additional resources:

So, how do you decide whether a particular design pattern is the right fit for whatever you’re building? Here’s the basic process for analyzing a pattern:

1.) Define what the pattern is

I’ll use an example—let’s look at “ratings” as a design pattern.

Rating is a way for users to give quick feedback, have their voices heard, and easily collect user data about particular objects, like physical products, services, or virtual-based items like software and digital content.

2.) Find a strong visual example of the pattern working at its best

Here’s an example of the ratings design pattern working well on Rotten Tomatoes:

Screen Shot 2013-02-25 at 11.57.19 AM

Doing some research and analyzing the way a particular design pattern is used on other sites will help give you a sense of the way it could be useful to users, as well as how it could look aesthetically, on your site.

3.) What problem does this pattern solve?

  • Allows users to leave a quick opinion
  • Engages an audience by making their opinions an important part of the site
  • Makes a site more interactive and fun for users
  • Creates more reliable ratings due to volume of feedback

4.) When should you use the pattern?

  • You want to engage users
  • Your product requires feedback from users to increase trust and reliability
  • You want to use them in combination with written reviews for a richer experience

5.) How should you use the pattern? (reccos, options)

  • Display an aggregated average of reviews per object
  • Allow users to change their ratings later on
  • Display clickable items (like stars or checkmarks) that light up on rollover to suggest clickability
  • Once a user has selected a rating, create a pop up that ensures readers their ratings have been saved

6.) WHY use this pattern?

  • Rating an object is an easy way to get users to contribute to the site
  • Ratings are a tool you can use to build and foster a great community
  • User ratings make the content on your site more reliable, and your site as a whole more credible

When you think about the problem a pattern solves, as well as when, why, and how to use it, it’s easier to determine whether the pattern is the right fit for your site. Sometimes, we choose design patterns that seem cool or look visually appealing, but aren’t really necessary. Answering these questions will help you stay focused and eliminate the unnecessary.

Wireframes

Now, let’s dive into wireframes. So, what exactly is a wireframe?

A wireframe is an absolute staple of UX work; it is essentially an initial skeleton of a page you’re looking to build. The skeleton is meant to demonstrate the particular priority and organization of elements on a screen, along with how users will get to other parts of the site.

Wireframes can look a lot of different ways. They vary from quick sketches to detailed frameworks using special wireframing software. It’s important to remember, though, that wireframes are more about the placement of various elements on a page, and not so much the “look and feel” of it. You probably won’t see much information on color schemes, typography, photography, or spacing on a wireframe.

Here is an example of a basic sketch wireframe:

primary-sketch_wireframe2

I’ve been working on wireframes for my Starter League Demo Day project (all students present an interdisciplinary project we work on with Starter Leaguers from other classes, like web development, visual design, and HTML/CSS). For our project, my team is working on an interactive digital music magazine. Here’s an example of a medium detail page wireframe I put together using a really cool tool called Balsamiq:

Alabama Shakes_Our Music_Wireframe

And sometimes, UX designers create wireframes that are heavily detailed, like this one:

globalcruise1

Source: UX Magazine

As you can probably surmise by now, wireframes can really help when it comes to defining page requirements, developing a shared understanding of site layout and function amongst a team, exploring user behavior in a more detailed way, and keeping the team focused on producing a great site with design patterns that work best.

What you need to know before you create a wireframe

In class, we talked about some of the information we’d need to collect before creating wireframes. They include:

  • Business requirements (e.g. user stories)
  • Content requirements
  • Design pattern requirements
  • Technical requirements
  • User insight (e.g. personas, mental models, etc.)

You can start the wireframing process by creating content groupings of similar information types that are likely to be used together. For instance, for the interactive music magazine we’re working on, we are thinking of each page in terms of “sections” in a magazine. One section might be specifically about an artist or band’s tour, so all elements that fall under that category would be grouped together (tour photos, quotes, posters, etc.). You also want to begin prioritizing the information on each page from most to least important; this will help you create a hierarchical order for the content, guiding users to click on information in a certain order.

Make sure you understand who you’re building out wireframes for, and be sure to address the questions each audience type will be look for—there are 5:

  1. Primary stakeholders (internal and/or external) – “How is this meeting our business goals?”
  2. Visual designers – “What visual elements need to be displayed on the page?”
  3. Copywriters – “What will I need to write?”
  4. Developers – “How does the site work, and what’s the best way to build it?”
  5. Wireframe creators – “Why did I decide to include each of these wireframe elements? Are they all important? Did I leave anything out?”

Information to include in your wireframes

  • Content – articles, logos, graphics, podcasts, product descriptions, page headings, forms, etc.
  • Layout – placement of page elements (i.e. header, footer, branding, content areas, etc.) and content prioritization
  • Behavior – include notes and annotations to explain in detail any functionality that would be difficult to communicate in a two-dimensional format, like: error messaging, pop-up forms, default settings, etc.

Ultimately, wireframing is a fun and highly important exercise in the UX process. Creating wireframes for the next thing you build will help you visualize, clarify, and communicate your vision to the team of people helping you build your site. It’s also a great exercise for clarifying your own assumptions about what belongs on the page in the first place.

To get you started, here’s a list of incredible wireframe tools you can use:

Until next week!

Note: If you just started following along now, you can catch up on what I’ve learned so far about UX design through The Starter League:

More Guides You Will Love

The 5-Step Process for Finding the Best Designer and Developer for Your Business Building a website for your small business is a lot like breathing.  It’s an essential.  If you read my last post, you heard about my unpleasant experience with building my own site.  My experience was an extreme one.  Still,...
A Beginner’s Guide: The 5 Steps to Great Design for Your Startup Before embarking on a ship with some of the most innovative entrepreneurs for Unreasonable at Sea, an accelerator circumnavigating the globe designed to solve the world’s most urgent social problems, I figured that the compan...
Great Design Can Make or Break a Startup I’m a firm believer that design can be a game changer for businesses. This is especially true for startups. Great strategic design can be the difference between a startup's success and failure in the early days of hitting the...
The Basic Elements of Visual Design This past week in our The Starter League UX class, we dove right into the basic elements of visual design. The purpose of the class wasn't to go in depth on visual design, but rather, to become familiar with basic terminol...
UX Design: What Features Should You Include When Building Your Product? It’s Week #5 of the UX Design class I’m taking at The Starter League. Last week, we talked about tools you can use to build your best product. This week, we're diving right into the nitty gritty of product usability analysis,...
Responsive Web Design: How to Make Websites That Look Great on Any Screen The web has always been a work in progress, but never so much as in the last few years. The introduction of the iPhone in 2007 opened a vast new world where we were able to view the real internet—not a stripped-down mobile we...
UX Tools You Can Use to Build Your Best Product It’s Week #4 of the UX Design class I’m taking at The Starter League. Last week, we covered techniques to help you define your user base and position your product. And what better way to start this week off than by talking ab...
Starter League UX Design: How to Define Your User Base & Position Your Product It’s Week #3 of the UX Design class I’m taking at The Starter League. After covering top visual design techniques and research methods last week, we dove right into affinity diagramming, user modeling, and product vision. It'...
The Starter League UX Design: Top Visual Design Techniques and Research Methods It's Week #2 of the UX Design class I'm taking at The Starter League. After covering UX design heuristics last week, we dove right into these three topics: Visual Design Principles Conducting Surveys Conducting Field ...
The Starter League: An Intro to UX Design "Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works." - Steve Jobs I just took my first Starter League class: User Experience (UX) Design. If yo...