Wireframes

'A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.' - Wikipedia [...continued...] Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. The key points to get across when creating a wireframe are: 1.Information design

1. Navigation design
2. Interface design An example of a wireframe:

Let's look at the difference between YouTube's page for a particular video and how a wireframe compares:

Wireframes focus on:

1. The range of functions available
2. The relative priorities of the information and functions
3. The rules for displaying certain kinds of information
4. The effect of different scenarios on the display

Useful wireframing tools

1. draw.io
2. balsamiq
3. invision
4. marvelapp
5. Pencil and Paper that old school shit

User Stories

Once you have constructed User Personas, to better understand your Users, you must construct User stories to identify each pathway they may want to take through your app or website. User stories exist in different formats, but this is one that works quite well: As a [role], I want to [goal] so I can [benefit/purpose] For example:

1.  As a user, I want to read reviews of a selected book to help me decide whether to buy **
2.  As an admin, I want to update the inventory of a selected book so my users know what is available.**