$30 off During Our Annual Pro Sale. View Details »

Designing Your App

Designing Your App

Presentation on design principles by Simon Rand

Rails Girls Dublin

February 09, 2013
Tweet

More Decks by Rails Girls Dublin

Other Decks in Design

Transcript

  1. Designing your app
    Rails Girls Dublin, February 2013
    @simonrand

    View Slide

  2. @simonrand
    Director @iorum (web & mobile developers)
    Designer
    Developer

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. As an entreprenuer/
    founder/doer..
    Design will help your
    idea be a success

    View Slide

  8. As a developer..
    Design will help you
    build your idea

    View Slide

  9. ..but before you build,
    design is about making
    sense of things

    View Slide

  10. Types of design
    IA (information architecture)
    UI (user interface)
    UX (user experience)
    Visual (aesthetic)

    View Slide

  11. It's the same process
    for every project you work on

    View Slide

  12. Information Architecture
    IA

    View Slide

  13. Leave your computer..

    View Slide

  14. View Slide

  15. Goal:
    To make an app for ideas

    View Slide

  16. Features:
    List existing ideas
    View an idea
    Add a new idea
    Edit existing ideas

    View Slide

  17. (Site/app/whatever) Map:
    List of ideas
    View idea New idea Edit idea

    View Slide

  18. New idea flow
    Click new
    idea link
    Fill out
    form
    Show idea
    page
    Show success
    message
    Form ok
    Return to
    form to fix
    Show error
    message(s)
    Form not ok

    View Slide

  19. New idea text wireframe:
    Standard elements:
    Logo
    Nav bar
    Unique elements:
    Page title: New idea
    Error message(s) (if required)
    New idea form:
    - Name
    - Description
    - Picture
    - Submit button

    View Slide

  20. Go back to your
    computer if you like..

    View Slide

  21. Visual Wireframe

    View Slide

  22. Wireframing tools:
    balsamiq
    Keynote/PowerPoint
    Omnigraffle
    Illustrator/Fireworks/Photoshop..

    View Slide

  23. No styling!

    View Slide

  24. You’ve been doing a bit of UI
    & UX design as you address
    the IA

    View Slide

  25. You can keep refining,
    but you have enough
    to start building

    View Slide

  26. Visual Design

    View Slide

  27. Not just about making
    things pretty
    (it is a bit)

    View Slide

  28. Also about refining UI & UX

    View Slide

  29. Do it with further wireframes/
    mockups or in the browser
    (more on that in a bit)

    View Slide

  30. Three key aspects

    View Slide

  31. Grids
    (thanks @broccolini)

    View Slide

  32. Favorites
    Comments
    Tracks
    wubdub273
    Bob Marley
    Jamaica
    IMAGE
    wubdub273
    Bob Marley - Chillout Mix
    Share 306 17 116
    | |
    House
    IMAGE
    wubdub273
    Live @ The Red Wine Sessions, SF
    Share 414 23 169
    | |
    Reggae
    IMAGE
    wubdub273
    Bob Marley Vs Marvin Gaye Mix
    Share 198 20 101
    | |
    Dubstep
    Dashboard You Tracks People Groups Upload & Share
    Hi wubdub273!
    LOGO
    | Settings | Inbox | Logout
    5 | 68
    Following Share
    wubdub.net

    View Slide

  33. Favorites
    Comments
    Tracks
    wubdub273
    Bob Marley
    Jamaica
    IMAGE
    wubdub273
    Bob Marley - Chillout Mix
    Share 306 17 116
    | |
    House
    IMAGE
    wubdub273
    Live @ The Red Wine Sessions, SF
    Share 414 23 169
    | |
    Reggae
    IMAGE
    wubdub273
    Bob Marley Vs Marvin Gaye Mix
    Share 198 20 101
    | |
    Dubstep
    Dashboard You Tracks People Groups Upload & Share
    Hi wubdub273!
    LOGO
    | Settings | Inbox | Logout
    5 | 68
    Following Share
    wubdub.net

    View Slide

  34. Favorites
    Comments
    Tracks
    wubdub273
    Bob Marley
    Jamaica
    IMAGE
    wubdub273
    Bob Marley - Chillout Mix
    Share 306 17 116
    | |
    House
    IMAGE
    wubdub273
    Live @ The Red Wine Sessions, SF
    Share 414 23 169
    | |
    Reggae
    IMAGE
    wubdub273
    Bob Marley Vs Marvin Gaye Mix
    Share 198 20 101
    | |
    Dubstep
    Dashboard You Tracks People Groups Upload & Share
    Hi wubdub273!
    LOGO
    | Settings | Inbox | Logout
    5 | 68
    Following Share
    wubdub.net

    View Slide

  35. A lot of people will ask you
    to add things like buttons
    and links and features to
    the design, but what you
    need is to think about is
    taking things away.

    View Slide

  36. Favorites
    Comments
    Tracks
    wubdub273
    Bob Marley
    Jamaica
    IMAGE
    wubdub273
    Bob Marley - Chillout Mix
    Share 306 17 116
    | |
    House
    IMAGE
    wubdub273
    Live @ The Red Wine Sessions, SF
    Share 414 23 169
    | |
    Reggae
    IMAGE
    wubdub273
    Bob Marley Vs Marvin Gaye Mix
    Share 198 20 101
    | |
    Dubstep
    Dashboard You Tracks People Groups Upload & Share
    Hi wubdub273!
    LOGO
    | Settings | Inbox | Logout
    That’s a lot of
    buttons.
    5 | 68
    Following Share
    wubdub.net

    View Slide


  37. Your profile
    Your likes
    Your sets
    Your groups
    Find friends
    Settings
    Log Out

    View Slide

  38. wubdub273
    Bob Marley
    Jamaica
    5 | 68
    Following Share
    wubdub.net
    IMAGE
    wubdub273
    Bob Marley - Chillout Mix
    Share 306 17 116
    | |
    House
    IMAGE
    wubdub273
    Live @ The Red Wine Sessions, SF
    Share 414 23 169
    | |
    Reggae
    IMAGE
    wubdub273
    Bob Marley Vs Marvin Gaye Mix
    Share 198 20 101
    | |
    Dubstep
    wubdub273
    Berlin Dance Party - Fall 2012 Techno
    | Stream | Explore 
    Your profile
    Your likes
    Your sets
    Your groups
    Find friends
    Settings
    Log Out

    View Slide

  39. Typography
    (thanks again @broccolini)

    View Slide

  40. Helvetica
    Stick with the classics...
    Georgia, Times New Roman, serif
    Arial, sans-serif
    Monaco, Times New Roman, monospace

    View Slide

  41. Heading
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
    feugiat nulla facilisis.
    Sub Heading
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
    feugiat nulla facilisis.
    Create clear hierarchy with heading font sizes

    View Slide

  42. Heading
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
    feugiat nulla facilisis.
    Sub Heading
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
    feugiat nulla facilisis.
    Increase the line height to increase readability

    View Slide

  43. Make sure the paragraph width isn’t too wide
    Heading
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit
    amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
    tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
    autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
    illum dolore eu feugiat nulla facilisis.
    Sub Heading
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit
    amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
    tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
    autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
    illum dolore eu feugiat nulla facilisis.

    View Slide

  44. Colour
    (thanks again @broccolini)

    View Slide

  45. Meaningful color
    Success
    Information
    Warning
    http://twitter.github.com/bootstrap

    View Slide

  46. ..but always keep
    colours simple!

    View Slide

  47. Dribbble.com
    Colourlovers.com

    View Slide

  48. IMAGE
    wubdub273
    Bob Marley - Chillout Mix
    Share 306 17 116
    | |
    House
    IMAGE
    wubdub273
    Live @ The Red Wine Sessions, SF
    Share 414 23 169
    | |
    Reggae
    IMAGE
    wubdub273
    Bob Marley Vs Marvin Gaye Mix
    Share 198 20 101
    | |
    Dubstep
    wubdub273
    Berlin Dance Party - Fall 2012 Techno
    Stream Explore 
    Search for artists and music
    wubdub273
    Bob Marley
    Jamaica
    5 | 68
    Following Share
    wubdub.net

    View Slide

  49. Research is sometimes a
    good tool, but don’t get
    caught up in trying to look
    like something else

    View Slide

  50. Realising your design

    View Slide


  51. rel="stylesheet" type="text/css" />



    <br/>body {<br/>padding-top: 60px;<br/>}<br/>





    RailsIdeas

    Ideas
    New idea






    Listing ideas



    Rubies are for
    Rails Girls



    Love to make is for
    Rails Girls



    Get excited and make things


    View Slide

  52. Cascading Style Sheets (CSS)

    View Slide

  53. .container:before, .container:after {
    display: table;
    content: "";
    zoom: 1;
    *display: inline;
    }
    .container:after {
    clear: both;
    }
    .container-fluid {
    position: relative;
    min-width: 940px;
    padding-left: 20px;
    padding-right: 20px;
    zoom: 1;
    }
    .container-fluid:before, .container-fluid:after {
    display: table;
    content: "";
    zoom: 1;
    *display: inline;
    }
    .container-fluid:after {
    clear: both;
    }
    .container-fluid > .sidebar {
    float: left;
    width: 220px;
    }
    .container-fluid > .content {
    margin-left: 240px;
    }
    a {
    color: #0069d6;
    text-decoration: none;
    line-height: inherit;
    font-weight: inherit;
    }
    a:hover {
    color: #00438a;
    text-decoration: underline;
    }

    View Slide

  54. ..and you get

    View Slide

  55. Don’t worry, use Bootstrap

    View Slide


  56. View Slide

  57. ..get all this

    View Slide

  58. ..but you can always
    change things..

    View Slide

  59. Don’t ever let visual
    design get in the way.

    View Slide

  60. You can always change
    something that looks
    bad but works.

    View Slide

  61. Something that works badly
    is a bigger problem.

    View Slide

  62. ..just always think about what
    you would like and makes the
    most sense to you and you’ll
    be grand.

    View Slide

  63. p.s.
    coders who can design are
    rare and very sought after

    View Slide