2. What is it?
 Wireframes are basic visual guides
 They describe the content and functionality without
design
 They are very useful in working out the user
experience an journey of a site without design

4. What to include
 Placement’s for content with descriptions. You can
use things like CTA to describe the visuals.
 Point out functionality where needed
 Show when there are images and text

5. Think about how people
read online
 Generally people read websites left to right top to
bottom.
 You can change how read down your website but
placing more weighting on different areas
 In you wire framing you have the chance to try many
ways of laying out content to try it! Its much easier to
get it right now, rather then later.

6. F-shape theory
 Formed from eye-tracking
 First Horizontal movement
 Then down a bit and second horizontal movement
 Then Finally a left hand side vertically

7. F-shape

8. What to learn from F
 Users won’t read your text completely
 The first two paragraphs must contain your most
important information

9. Copy
 Online you need to dumb everything down the plain
English
 People don’t pay attention online, unless they are
committed to site. (they will just scan for what they
want and look for keywords.)
 If you site has a lot of copy (like news and blogs)
then make ways for people to work out if they want
commit or not

11. Wire framing tips
 Try different solutions on paper
 Keep in mind different users, and what their
approaches may be
 The wireframe isn’t the design, don’t feel like your
committing to much to the layout.
 Form a priority order for the content