Introduction to Building Wireframes (with OmniGraffle)

  • Published on
    21-Apr-2017

  • View
    27.471

  • Download
    4

Embed Size (px)

Transcript

  • Davide Folletto Casali

    INTRODUCTION TO BUILDING WIREFRAMES

  • UX Designer Advisor

    NIGHT.EU

  • What do you do?

  • TODAY1 / Wireframes how to work with them 2 / Wireframes management how to use them effectively 3 / OmniGraffle Pro introduction

    90 Junior/Mid

  • PART 1 Wireframes

  • @hjmediastudios

    THE IDEA OF WIREFRAME COMES

    FROM 3D MODELLING

  • A website wireframe is a visual guide that represents the skeletal framework of a website

    Wikipedia:

  • Wireframing is a low-cost, rapid iterative design technique that offers one of the best methods for gaining design insight early

    Nielsen/Norman Group:

    http://www.nngroup.com/courses/wireframing-and-prototyping/

    http://www.nngroup.com/courses/wireframing-and-prototyping/

  • THERE ARE DIFFERENT QUALITIES OF WIREFRAMES

  • Even if wireframes display a single interface/page they are less like photos and more like movie stills

  • WIREFRAMES AS STORIES

    Ivor Beddoes@awfulshot

    http://www.flickr.com/photos/awfulshot/456852642/

  • WIREFRAMES AS STORYBOARDS

    FOR INTERFACES

    Ivor Beddoes

  • DIFFERENT WAYS TO TELL A STORY frame by frame, drawings key frames, textual descriptions key frames, spoken narrative

  • Even if the storyboard is not visible its still the foundation of wireframes

  • Wireframes are a static representation of a dynamic non-linear flow of activity

  • The wireframe represents also the very first moment when the project team sees

    everything coming together.

  • The minimal visual building block of a wireframe is the box.

    Box

  • Boxes usually contain a uniform kind of content, not the individual elements. However, its important to choose the right level of breakdown to support the discussion.

    Box

  • Content

    Box

    Box

    Box

    Navigation

    Logo

  • Lets wireframe Twitter. Boxes only.

  • User Page Navigation

    Global Navigation

    Multimedia Content of the User

    Who to follow suggestions

    Trends

    User profile

    User Stats Messages

    Tweets

  • N N N

    C C

    S S

    Box

    Box

    BoxBox

    Box

    Box

    Box

    Box

    This high level box view is implicit most of the time, but its incredibly useful when applied on a number of pages to ensure consistency and reusability.

  • Button

    Box

    Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

    TEXT

    BUTTONS

    IMAGES

    MORE...

  • Box

  • Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

    Expand

  • Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

    Expand

    Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

    Expand

    Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

    Expand

    Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

    Expand

    Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in

    OFTEN EACH HIGH-LEVEL

    BOX CONTAINS A REPEATING

    PATTERN

  • TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT

    MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY

  • Lets build a journey. Imagine Twitters registration process.

  • Home Reg. Form Confirmation

    LOGIN PROCESS The main steps of the journey

  • Home Reg. Form Confirmation Your Page

    LOGIN PROCESS How do we guide the user to the value?

    ?

  • Home Reg. Form Confirmation

    Email

    Your Page

    LOGIN PROCESS An e-mail based approach

  • Home Reg. Form Confirmation

    Email

    Your Page

    LOGIN PROCESS A more direct way to engage the user

  • Home Reg. Form Confirmation

    Email

    Your Page

    LOGIN PROCESS Review journeys for the edge cases: errors, problems, etc

    !

    !

  • LOGIN PROCESS The story is even bigger in reality

    Home Reg. Form Confirmation

    Email

    Your Page

    Tweet

    Third party Third party

  • 1 / Wireframes as stories

    2 / From boxes to elements

  • PART 2 Wireframes management

  • NAPKINS

    WHITEBOARDS

    HIGH LEVEL

    DETAILED

    HDAGILE APPROACH TO WIREFRAMING Ask yourself: Whats the level of detail I need to communicate effectively?

    PAPER SKETCH

  • Wireframes are made to be thrown away. They are steps in the process of design.

    Only the final one stays... until it gets developed.

  • In other words: they can be delivered as documentation but they are not for most of the process

  • THE INTERMEDIATE STEPS ARE VALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUS

  • AT EACH STEP YOU CAN test the journey discuss with management discuss with technical team share with other parties

  • WORK IN ITERATIONS

    do

    observe

    think

    dotL OOP

  • This works from startups to big enterprises

  • WEEKLY ITERATION Helps with project activities

    scoping, clarifies expectations, supports continuos progress review.

    WEEKLY MEETING Sets formal progress steps to help the client keeping the pace while being in touch with the project progress

  • Lets see an example

    PREPARE The first iteration is

    about understanding the problem.

  • Lets see an example

    WORKSHOP First wireframes made collaboratively by the stakeholders in a workshop, in groups.

    WHITEBOARD

  • Lets see an example

    TEST WITH USERS Take the whiteboards and

    formalize them in individual proposals to be tested.

  • Lets see an example

    REVIEW ALTERNATIVES In this review propose a few alternatives refining the solutions from the workshop.

    PAPER SKETCH

  • Lets see an example

    TEST WITH USERS Yup, again, if its possible. Try a more guerrilla approach maybe.

  • Lets see an example

    REVIEW FIRST DRAFT Ask explicitly to involve developers if it didnt happen before the review.

    HIGH LEVEL

  • 1 ITERATION = No review*

    * or review in a different next step (visual design? development?)

  • 2 ITERATIONS = Draft, then feedback, then refine

  • 3 / Wireframes as steps

    4 / Iterative approach

  • PART 3 OmniGraffle Pro

  • OmniGraffle Professional

  • Why Pro?

  • Wireframes

    IA

    Diagrams

    Interactive PDFs

    From sketches to HD prototypes

    HTML export

    Build any PDF

    Presentations

    Pixel perfect

    OmniGraffle is a powerhouse

  • No built-in collaboration

    No motion design

    ...even if it lacks some pieces

  • You can send them via email You can use them as prototypes You can use them for testing They show flows, not stills

    OMNIGRAFFLE CAN EXPORT INTERACTIVE PDFS THAT CAN BE USED AS PROTOTYPES

  • FUNDAMENTALS

  • select shape lines text freeform

  • Lets try!

  • Lets sketch Twitters wireframe

    User Page Navigation

    Global Navigation

    Multimedia Content of the User

    Who to follow suggestions

    User profile

    User Stats Messages

    Tweets

  • Lets sketch a single tweet wireframe

    Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.

    Expand

  • Lets sketch Googles homepage

  • Lets sketch Twitters homepage

  • Lets sketch Dropboxs homepage

  • Lets sketch Wordpress.com homepage

  • SIGN UP

    VIDEO

    LOGIN

    MORE INFO

    Lots of actions...

  • PROPERTIES: ACTION1. Properties panel 2. Action 3. Jump elsewhere 4. Switch to a Specific Canvas 5. Select canvas

  • INTERACTIVE PDF1. File Export 2. PDF vector image 3. Entire Document

  • TIPS

  • Shared LayersGrouping Smart Objects

  • Grouping

  • Shared Layers

  • Smart Objects

  • SET THE PAGE SIZE IN PX BY SPECIFYING THE PX (OR PT) UNIT

    BY HAND

  • ITS A GOOD IDEA TO KEEP THE ZOOM AT 100%, TO DESIGN AT THE RIGHT

    SCALE. KEEP ALSO THE HEIGHT SHORT TO FEEL THE SCROLL POSITION.

  • REVIEW THE KEYBOARD SHORTCUTS FROM PREFERENCES TO ADAPT THEM

    TO YOUR STYLE. REVIEW ALSO KEEP TOOL ACTIVE.

  • 5 / Basics of OmniGraffle Pro

    6 / Grouping, masters, smart objs

  • Bruno Munari

    To complicate is easy, to simplify is hard. To complicate, just add,

    everyone is able to complicate. Few are able to simplify.

  • Thanks.

    @Folletto