User Flows and Wireframes

A user flow is how the user accesses and navigates your content. It’s usually depicted as a flow chart, though sketches and lists can work, too.

Here are some tips for how to get started:
1. Figure out what’s most important
  1. Consider how the user is accessing your website/application
  1. Map it out

Example User Flow for our class homepage

This may seem obvious, but it can be helpful when dealing with a website with more entry points, users, and content. It can also help you figure out all the pages you’ll eventually need to design. When you’re working within a team or with a client, creating a userflow can help all parties know what needs to get produced and get on board to come up with a realistic budget, time frame and plan to complete the project.

I’m going to show you a more complicated example on the screen…

A wireframe is a stripped down layout design that focuses on content, structure and hierarchy. Design and photography are omitted.

Here is an example of a mobile wireframe. Let’s take a look at it. What are some things we notice?

  • A sense of uniformity, even with placeholder content
  • Clear typographic hierarchy
  • Color is used to call attention to different things and to create a uniform look but is not meant to distract from the content.
  • Buttons and iconography are the same throughout

To complete our transaction activity, we’ll create a mobile wireframe to highlight all the screens necessary to complete a transaction.


Symbols are design pieces that can be re-used throughout your page. You can design them once and use them throughout your design, then you can replace all of them in one move. An example of a useful symbol is a button or any type of icon, you can also use it for bigger modules recycled in your design, such as the footer or main navigation.

To create a symbol, make the design you want once and group all elements together by selecting them and pressing “command” and “g” at the same time. Or, select them both and select “Arrange / Group” from the top menu.

Right click your group in the layer menu on the left or in the document. Select “make a symbol.”
To use the symbol, either cut and paste it from screen to screen, or create a shape and right click it and select “replace with / symbol” and then “set to original size.”

Noun Project is a great place to look for simple icons, you can draw your own in Sketch or Illustrator, or you can try: Copy Paste Character.

Symbols are a great idea for things that are fairly consistent, but change slightly.

For example: buttons, where the text will change. If you create a button, you can edit the text without changing the symbol on the right hand panel. This is also helpful if you have several similar styles – for example: a filled in button – because you can replace it with another symbol in the dropdown menu.

Basic Prototyping in Sketch