PDF: How to Wireframe + Examples
How to create wireframes
- Sketch several variations for each screen type, so you know you’ve exhausted all ideas.
- For example, try different ways of laying out information for a home screen, browse screen, profile screen and so forth.
- For example, do you want a list view or grid view for a set of information? Do you want icons or text or both in different places? Do you want a scroll down or a horizontal swipe gestural interface in various places? Do you want a circle shape cropping a photo or do you want a square? What is the hierarchy of information on the various screens?
- How can you keep it cohesive across the different screens once you zero in on what organization is working best?
- Sketch out the basic placement of content.
- Just use different monochromatic shades of boxes for sectioning information.
- Use lines for text.
- For images use a box with an “X” across it.
- Choose between two different wireframe types:
- You can do lo-fidelity sketch wireframes on paper, whiteboard, or Procreate.
- or
- You can create mid-fidelity wireframes on the computer – using whatever software you prefer. (Figma or Adobe XD is recommended since you will be using it on the next step, lo-fi prototyping)
- See examples of wireframe types above and look at inspiration of layout patterns to give you different ideas of how to layout various types of screens/info.
Optional: Crazy 8s Quick Iteration Exercise
Crazy 8s is an activity where you get 8 minutes to come up with 8 different layout ideas for the same screen. The goal is to be fast in getting several variations out without worrying much about the details. At the end of 8 minutes, decide on the layouts worth exploring and moving forward with into the wireframing and prototyping tasks.
Steps for Crazy 8s:
- Pick one screen in your product for which you want to explore several layout variations.
- For example, it could be something like a home screen, profile screen, browse screen, or checkout screen, and so on?
- Go with the one that has the most content on it, that you can rearrange and try different layouts.
- Set up your Crazy 8.
- You can either fold a piece of letter-sized paper into 8 quadrants and then draw in each quadrant and take a photo of it.
- or
- You can go to Conceptboard, and click on “Use Template” button on the left side of the webpage. This will take you to a Crazy 8 digital setup that you can draw on. Once you are done, you can go to “Board” in the top menu and choose “Export board” and then “Export board as PDF.”
- Set a timer to go off every minute for 8 minutes.
- You get one minute per sketch.
- And one rectangle per sketch.
- When you are done, circle your favorite(s) that you might consider moving forward with into the wireframing and prototyping tasks.
Inspiration/Resources for Layout Patterns
- 13 basic mobile UI patterns (Links to an external site.)
- iospirations (Links to an external site.)
- screenlane (Links to an external site.)
- mobile-patterns (Links to an external site.)
- mobbin (Links to an external site.)
- ui-patterns
Other wireframe examples online:
- I Heart Wireframes (Links to an external site.)
- Wireframe Showcase (Links to an external site.)
- 40 Inspiring Web and Mobile App Wireframe Examples
How to Turn In:
- Wireframe sketches for various screen types in your user flow. Sketch several variations for each screen type to explore different layout ideas. You are welcome to use the Crazy 8s method.
- You can use a sketchbook or whiteboard and take a high quality photo or scan of them. OR you can create them in a tool like Figma, Figjam, Invision Freehand, OR whatever software you feel most comfortable in.