Introduction to Building Wireframes - Part 1
Upcoming SlideShare
Loading in...5
×
 

Introduction to Building Wireframes - Part 1

on

  • 887 views

 

Statistics

Views

Total Views
887
Views on SlideShare
884
Embed Views
3

Actions

Likes
4
Downloads
34
Comments
0

2 Embeds 3

https://si0.twimg.com 2
https://twimg0-a.akamaihd.net 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to Building Wireframes - Part 1 Introduction to Building Wireframes - Part 1 Presentation Transcript

    • Introduction toBuilding Wireframes Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com
    • What we’ll cover• What is a wireframe? • Software tools• Why make wireframes? • Stencils libraries• Sketching • Code wireframes• User centered design • How to test wireframes and gathering feedback• Features and scenarios • Iterative design• Site maps• Paper prototyping
    • Hands On
    • A website to save favourite places in London.
    • What is a wireframe?
    • A visual guide for the purpose ofarranging elements to best accomplish aparticular purpose
    • No fontsNo colourNo graphics
    • Wireframe fidelityLow HighSketching Paper Mock up Code Prototype Software Prototype
    • Why make wireframes?
    • Concept Exploration
    • Concept ExplorationLayout Content on Pages
    • Concept ExplorationLayout Content on PagesBrainstorm Interactions
    • Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling
    • Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus
    • Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation
    • Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk
    • Why designs fail?
    • Why designs fail?Users aren’t motivated to achieve goals
    • Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it works
    • Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things
    • Sketching
    • 8 tips for wireframing
    • Have clear objectives
    • Make it functional
    • Keep it clean
    • User Interface is not User Experience
    • Repetition. Repetition. Repetition.
    • Consider dependencies
    • Don’t be lazy
    • Know when to stop
    • Demo –Facebook Profile Page
    • Exercise –Draw a sketch of either:the Twitter profile page orthe Instagram taking a photo flow
    • Demo –Sketch of the favourite places site
    • Exercise –Draw a sketch for your app or site.
    • User Centred Design
    • Goals
    • What the user wants to do, not how the userachieves them.No assumptions about the system interface.Can be used to compare different interfacedesign alternatives in a fair way.Can be personal, practical or false goals.
    • Exercise –Write down 3 goals for your site/app
    • GoalsPersonas
    • Very specific, although not necessarily accurate.Based in large part on the goals.Puts an end to feature debates.User persona, not buyer persona.
    • Exercise –Write down 3 personas for your site/app
    • GoalsPersonasTasks
    • Describe the steps necessary to achievethe goals.Can vary with the available technology.Broken down into steps for task analysis, and arerecombined into sequence of steps for scenariodevelopment.
    • Exercise –Write down a task for one goal foryour site/app
    • Features & Scenarios
    • a.k.a “making designers anddevelopers love you”
    • Protect revenueIncrease revenueManage costIncrease brand valueMake the product remarkableProvide more value to your customers
    • Feature: In order As I want
    • Feature: Addition In order As I want
    • Feature: Addition In order to avoid silly mistakes As I want
    • Feature: Addition In order to avoid silly mistakes As a maths idiot I want
    • Feature: Addition In order to avoid silly mistakes As a maths idiot I want to be told the sum of two numbers
    • Feature: In order As I want
    • Feature: Favourites In order As I want
    • Feature: Favourites In order to remember places As I want
    • Feature: Favourites In order to remember places As logged in user Dave I want
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list
    • Exercise: Write 3 features of your app/site –Feature: In order As I want
    • Feature: In order As I want Scenario: Given When Then
    • Feature: In order As I want Scenario: Given When Then Scenario: Given When Then
    • Scenario: Given When Then
    • Scenario: Given I have entered 50 into the calculator When Then
    • Scenario: Given I have entered 50 into the calculator And When Then
    • Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When Then
    • Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When I press add Then
    • Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When I press add Then the result should be 120 on the screen
    • Feature: Addition In order to avoid silly mistakes As a maths idiot I want to be told the sum of two numbers Scenario: Given I have entered 50 into the calculator And I have entered 70 into the calculator When I press add Then the result should be 120 on the screen
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario:
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places And I hover over a listing
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places And I hover over a listing When I click the star icon
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places And I hover over a listing When I click the star icon Then I will have 1 favourite place
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have no favourite places And I hover over a listing When I click the star icon Then I will have 1 favourite place And the star icon will be selected
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario:
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place And I hover over that favourite
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place And I hover over that favourite When I click the star icon
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place And I hover over that favourite When I click the star icon Then I will have no favourite places
    • Feature: Favourites In order to remember places As logged in user Dave I want to save places to a list Scenario: Given I have a favourite place And I hover over that favourite When I click the star icon Then I will have no favourite places And the star icon will be deselected
    • Exercise: Write down 3 scenarios for a feature –Feature: In order As I want Scenario: Given When Then
    • States
    • Errors, alerts & successes
    • No content
    • Events (e.g. click, hover, tap and swipe)
    • Responsive design
    • Exercise –Add an error state, a success state ora hover/tap state to your sketch.
    • Site maps
    • A site map is a visual overview of each section of a site/app
    • Demo –Site map for favourite places site
    • Exercise –Create a site map for your site/app
    • Paper prototyping
    • Demo –Favourite places site
    • Exercise –Paper prototype your site/app
    • Five booksworth reading
    • Thanks! Rik Lomas, Lomalogue Ltd @riklomas rik@lomalogue.com