down to the wire
content strategy and wire framing
Ashley Williams, NYCDA
Tuesday, 12 March 2013
content-first
The purpose of a website is to connect the right user to the right content at the right time
-Jeffrey Zeldman
why?
If you don't make the content easy to find, users will find other ways to get it
- RSS readers (Instapaper, Readability, Google Reader, Flipboard, longreads)
- Aggregator websites (Tumblr, Buzzfeed)
- Your competitors
What does easy mean?
The three click rule:
If the user cannot reach the content in three clicks the website is content-averse
SCrew that
As long as a user is able to determine that they are making progress towards their goal, a user will continue to click, even past three clicks
Progress - use cases
- Users visit websites to achieve goals
- These goals are called use cases
- "Just looking around" is rarely a goal, and a bad use-case to design for
- One should design for the most lucrative use-cases that represent the business goals of the company
Progress - audience
- Use cases belong to audiences
- Sometimes these audiences are well described by a representative personality described in a persona
- A persona will describe a faux person, their attributes, and most importantly their goals
- "EVERYONE" is NOT an audience
- The more specific you can be about your audience and their motivations the better you can design your use cases and the better you can design your product
A great read on users, user types, and their motivations:
great reads
progress - elements
- Breadcrumbs
- a:visited states
- Personalization
- Progress bars
how to find out what works
Read some user research:
Do usability testing:
- Guerilla or "hallway" testing: Go to a public place and observe members of the public attempting to achieve a goal using your product
- A/B testing: Present users with 1 of 2 designs and ask them to accomplish a goal. Compare and contrast user success using each of the two designs.
the design process
There are many different workflows that a web design and dev team can use. Some examples:
- sketch > wireframe > visual code
- sketch > wireframe > hi-def wireframe > visual > code
- wireframe > hi-def wireframe > visual > code
- sketch > code
- wireframe > interactive prototype > visual > code
what do these things mean?
- Sketch: quickly get out ideas and general visual layout
- Wireframe: Visual layout with content distribution
- Hi-Def Wireframe: A more specific wireframe with more granular details
- Visual: A colored in wireframe with fonts, borders, images, and other branding elements included
- Interactive prototype: Anything from a simple keynote presentation to simple HTML, CSS, and JS. Can be bare bones, or contain some branding elements.
- Code: HTML, CSS, JS
Some opinions
- Visual mockups: full of lies... Photoshop files are static (not responsive). People are likely to get attached to visual mockups and be more resistant to change. Needless to say: Biz Dev types LOVE these things.
- Wireframes: Keep them simple and semantic. Should translate to code very easily. Programs like Balsamiq let you make wireframes that are exportable to HTML.
- Interactive Prototypes: By far the best, but also the most time consuming. The code used to make these is often thrown out, but the early design and product decisions can be made with a real exp of the interaction in mind.
wireframing
- Wireframing is a method used to create visual web app layouts that focus on content and NOT style
Wireframes DO NOT have:
- images
- color
- fonts
- borders
wireframes
What do wireframes have?
- Boxes
- Headings
- Filler text (lorem ipsum)
- HTML element names
How do i make wireframes?
- Paper!
- Balsamiq
- Illustrator
- online editors
A good article about how to choose a tool:
Neat resources
- i <3 wireframes - a gallery of wireframe examples
- wirify - a tool to turn any website into a wireframe
Grids
- When wireframing, you want to start with a grid
- The words grid and layout are often interchanged, though the word grid refers specifically to how the layout relates to the window
- A grid allows you to standardize the width of your elements and the spaces between them
There are two types of grid:
- fluid- changes with the width of the browser window, uses percentages, responsive (+1)
- static- does not change based on the width of the browser window, uses static numbers, not considered responsive
grids
Twitter bootstrap offers two examples of these grids.
Check them out here:
Viewports
- Fluid layouts require something called "viewports"
- Viewports describe the width of the screen of the device currently accessing the website
- Fluid layouts are associated with style sheets that use @media queries to change the grid depending on specific viewport sizes called "breakpoints"
- It is impossible to create a breakpoint for every screen, so breakpoints are usually benchmark widths that generalize the diversity of viewport widths
- NOTE: when considering mobile devices the viewport can be either the width of the height of the screen depending on device orientation (!!)
oy vey?
- Building responsive grids is hard! And it takes a while.
- More importantly: a lot of people have already made really nice ones.
- We are going to use Twitter Bootstrap.
If you'd like to learn more, check out this set of notes by LukeW: http://www.lukew.com/ff/entry.asp?1683
Exercise
- Think about how you might design a personal branding site for yourself
- Determine an audience, write a simple persona for them, and come up with 3 use cases
- Download the Illustrator Grid file for Twitter Bootstrap: http://checkthis.com/6i6g
- Create a wireframe for your page for yourself (check out about.me for inspiration)
- Label the boxes you create with the content they should contain AS WELL AS the html element tag you would use to describe that content
- Keep the idea of progress in mind, reward your user with feedback
- If you need help, use wirify to inspect websites
content strategy and wire framing
By ag_dubs
content strategy and wire framing
- 1,292