SlideShare a Scribd company logo
Introduction to
Building 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 of
arranging elements to best accomplish a
particular purpose
No fonts
No colour
No graphics
Wireframe fidelity

Low                                 High
Sketching     Paper     Mock up      Code
            Prototype   Software   Prototype
Why make wireframes?
Concept Exploration
Concept Exploration
Layout Content on Pages
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Documentation
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Documentation
Minimize Risk
Why designs fail?
Why designs fail?

Users aren’t motivated to achieve goals
Why designs fail?

Users aren’t motivated to achieve goals
Users don’t understand how it works
Why designs fail?

Users aren’t motivated to achieve goals
Users don’t understand how it works
Users don’t see things
Sketching
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
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 or
the 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 user
achieves them.

No assumptions about the system interface.

Can be used to compare different interface
design alternatives in a fair way.

Can be personal, practical or false goals.
Exercise –
Write down 3 goals for your site/app
Goals
Personas
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
Goals
Personas
Tasks
Describe the steps necessary to achieve
the goals.

Can vary with the available technology.

Broken down into steps for task analysis, and are
recombined into sequence of steps for scenario
development.
Exercise –
Write down a task for one goal for
your site/app
Features & Scenarios
a.k.a “making designers and
developers love you”
Protect revenue
Increase revenue
Manage cost
Increase brand value
Make the product remarkable
Provide 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 or
a hover/tap state to your sketch.
Site maps
A site map is a visual overview
 of each section of a site/app
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Demo –
Site map for favourite places site
Exercise –
Create a site map for your site/app
Paper prototyping
Introduction to Building Wireframes - Part 1
Demo –
Favourite places site
Exercise –
Paper prototype your site/app
Five books
worth reading
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Introduction to Building Wireframes - Part 1
Thanks!

  Rik Lomas, Lomalogue Ltd
  @riklomas
  rik@lomalogue.com

More Related Content

PPSX
5.5 ways to be awesome
PDF
Digital Art Using Gimp and Inkscape
PDF
Controlling Project Size for Student/Hobby Videogame Development
PPTX
Y2B Sprint 1 Results
PDF
Robot flash tutorial
PDF
Animation part3 d
PPTX
6. production reflection(2)
PPT
Things to consider when designing websites
5.5 ways to be awesome
Digital Art Using Gimp and Inkscape
Controlling Project Size for Student/Hobby Videogame Development
Y2B Sprint 1 Results
Robot flash tutorial
Animation part3 d
6. production reflection(2)
Things to consider when designing websites

Viewers also liked (20)

PDF
Introduction to Building Wireframes (with Keynote)
PDF
Introduction to Building Wireframes - Part 2
PPTX
JOOMLA
PPTX
Website introduction
PPTX
Limit to dvd
PDF
Beyond Basic Content Management: An Introduction to Drupal Administration
PDF
The very introduction to content management systems
PPT
Joomla Beginners Overview Of Day
PPTX
Introduction to web content management
PPSX
Create your first WordPress website – an introduction to WordPress
PDF
Content Marketing Strategy Guide (2013)
PPT
Introduction to blogs and blogging
PPTX
Word press as an example of wcms
PDF
Building better content creation with wysiwyg fields and custom formatters
PPTX
WordPress as CMS(Content Management System) - CMS로써의 워드프레스
PPT
Programming paradigm and web programming
PPT
Introduction to Web Programming - first course
PPT
Introduction To Website Development
PPT
Website Introduction
PDF
Website Layout and Structure
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes - Part 2
JOOMLA
Website introduction
Limit to dvd
Beyond Basic Content Management: An Introduction to Drupal Administration
The very introduction to content management systems
Joomla Beginners Overview Of Day
Introduction to web content management
Create your first WordPress website – an introduction to WordPress
Content Marketing Strategy Guide (2013)
Introduction to blogs and blogging
Word press as an example of wcms
Building better content creation with wysiwyg fields and custom formatters
WordPress as CMS(Content Management System) - CMS로써의 워드프레스
Programming paradigm and web programming
Introduction to Web Programming - first course
Introduction To Website Development
Website Introduction
Website Layout and Structure
Ad

Similar to Introduction to Building Wireframes - Part 1 (20)

PDF
User Interface is King: Developing a Web App UI
KEY
From Specification To Success
KEY
Pivotal tracker presentation 10-13-2010
DOCX
Purpose1. To identify how you view leadership2. To exp.docx
PDF
Smalltalks 2011 - Bringing BDD ideas to Pharo
PDF
7scenes 101
PDF
Alas, No Mind Meld: Designer-Developer Communication for a Harmonious Future
PDF
File Upload 2015
PDF
Cucumber & BDD
PPTX
7.Advanced Scripts in Scratch.pptx
DOCX
Unit 11 assignment 4 evaluation
PPTX
Android User Interface Design
PDF
Turn Concepts to Reality Using Prototyping and Feedback Loops
PDF
How I ignored, discovered then loved design patterns - Abdelkader Bouadjadja
PDF
UX & UI Design 101
PDF
Bootstrapping Recommendations OSCON 2015
PDF
Bootstrapping Recommendations with Neo4j
PPTX
Development pro forma
PPTX
Development pro forma
PDF
Serendipity by Design - IxD S. America 13
User Interface is King: Developing a Web App UI
From Specification To Success
Pivotal tracker presentation 10-13-2010
Purpose1. To identify how you view leadership2. To exp.docx
Smalltalks 2011 - Bringing BDD ideas to Pharo
7scenes 101
Alas, No Mind Meld: Designer-Developer Communication for a Harmonious Future
File Upload 2015
Cucumber & BDD
7.Advanced Scripts in Scratch.pptx
Unit 11 assignment 4 evaluation
Android User Interface Design
Turn Concepts to Reality Using Prototyping and Feedback Loops
How I ignored, discovered then loved design patterns - Abdelkader Bouadjadja
UX & UI Design 101
Bootstrapping Recommendations OSCON 2015
Bootstrapping Recommendations with Neo4j
Development pro forma
Development pro forma
Serendipity by Design - IxD S. America 13
Ad

Recently uploaded (20)

DOCX
actividad 20% informatica microsoft project
PPTX
areprosthodontics and orthodonticsa text.pptx
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
PPTX
Media And Information Literacy for Grade 12
PDF
Phone away, tabs closed: No multitasking
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PPTX
joggers park landscape assignment bandra
PDF
Quality Control Management for RMG, Level- 4, Certificate
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
actividad 20% informatica microsoft project
areprosthodontics and orthodonticsa text.pptx
BRANDBOOK-Presidential Award Scheme-Kenya-2023
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
Media And Information Literacy for Grade 12
Phone away, tabs closed: No multitasking
pump pump is a mechanism that is used to transfer a liquid from one place to ...
joggers park landscape assignment bandra
Quality Control Management for RMG, Level- 4, Certificate
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
Tenders & Contracts Works _ Services Afzal.pptx
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
YOW2022-BNE-MinimalViableArchitecture.pdf
AD Bungalow Case studies Sem 2.pptxvwewev
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"

Introduction to Building Wireframes - Part 1