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
Consider how the user is accessing your website/application
Map it out
Example User Flow for our class homepage
User is a student
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.
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
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.
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.
Example User Flow for our class homepage
A wireframe is a stripped down layout design that focuses on content, structure and hierarchy. Design and photography are omitted.
Symbols
Basic Prototyping in Sketch