Beautiful & Useful

118 views

Published on

Some rules of thumb for building software that looks and feels great without designers.

Initial presentation of this talk at CompCon in Brisbane, October 2016.

Would love any feedback and comments on the content and presentation. Keen to continue to develop this talk for future conferences (Let me know if you know any where it would be appropriate!).

Hit me up on ash@ashguy.com / @theashguy to chat!

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
118
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Been up for 48 hours making games
    Apologies for any yawning

    This is my presentation <Title>
    Housekeeping
    First attempt in this format
    Always relevant topic
    I’d like this to become a stock talk
    Ask for questions & feedback.

    I’m not an academic.
    Presentation is entirely experience based.
    Rules of thumb that I use.
    You can break them and do great design.
    I’m just here to increase your velocity and reduce your stress.
  • Name, email, twitter, etc.
    UX/UI Focused Full Stack Dev, with a Business Background.
    Currently spend my time...
    Biarri Rail (Plug)
    ...Working with really smart super technical, non-designy people trying to make tools for use in incredibly complex environments by crusty old people in antiquated industries.
    Which is a hard problem, and hard problems are fun!

    Love of UX came from wanting to make games.
    Specifically Immersion
    Everyday Immersive Experiences

    This talk = raising the bar by helping more software projects move towards creating immersive experiences becasue -->
  • I believe Anyone can be a great designer.
    Process of building great anything = time & iteration.
    Given 1000 times as long a newbie can do the work of an expert.
    Experts then are folks who have build up patterns and rules that get to that place faster.
    I’m here to give you some of my rules
    Reduce mistakes & Time

    This talk is about 9 things,
    Easy enough for me to explain
    Easy enough to understand

    Some are technical, some are more process, most are opinions all are useful.
    Without further Adieu 
  • One of my favorite fantasy authors is an Australian chap– Ian Irvine.
    He does a lot of tips for writers, writing school stuff
    Read some of his articles
    “Reader expectations”
    …you only want to innovate on one part of your story. Build a world that feels familiar, that follows the same rules that your audience already knows, and use that to deliver the one obscure thing that creates interest.
    And I thought to myself… I’ll have that.

    Users hate friction, everything in your app creates it.
    UXer’s job is to reduce that friction.
    Rule: Save your innvoation for the core mechanic that makes whatever you’re building unique and great, and for the rest use stock standard patterns.
    For example: Apple, Google and Microsoft all have defined systems that play on the well established patterns taht you’re users understand.

    Bonus: Massively increased velocity / time spent on the important stuff.
    Double bonus: Reducing support burden on you will be way lower!
    Triple bonus: Not innovating too much helps early on in creating 
  • I’m assuming everyone here is of a technical nature.
    Rule number 2 is about defining your design as rules!
    Everything on your screen should have a reason for being where it is, and looking how it looks, based in your rules.
    New devs confusion.

    Rules for type: Typeface, Sizing, Weights, How much type! Language stuff
    Rules for layout: Where navigation is and what kind it is, where and why to use widgets, spacing and positioning of elements.
    Rules for colours, and patterns: What does a green button mean in your app?
    For imagery: How are you logos & iconography be used? What needs icons?

    When you define these things, also tell the reader why. Don’t just say.

    It matters less what these are, and more that you have them!
    Get started by basing your document off one of those big ones that the apples / googles / microsoft’s of the world has already done for you.
    Spin up a git repo, and your favourite text editor, and write some markdown. Make decisions once.

    Advantages:
    Brand
    Velocity & Onboarding
    REDUCES FRICTION

    Some of the things in the rest of the talk make great candidates for establishing consistency rules 
  • I don’t know why, but In my experience highly technical people often try to get as much onto the screen as possible at once.
    Pixels are a finite resource.

    Whitespace is your friend.
    Two things that whitespace gives you:
    Consistency tool to link like things.
    Associates common elements.

    Example.
    Describe panels, title, list, icon, icon content.
    Pull away all of the paneling.

    Rule: For any type of block on your page (title / button whatever), create rules for how it relates to the things around it.

    Interestingly, on mobile devices whitespace is your principal lever for layout.
    Also, as a bonus exercise why not try adding some whitespace to group common components in your code too.

    Onto the next one we have 
  • Often when we’re designing on the fly, we block things out.
    By the time we fill up the screen with everything we want, there are going to be a lot of artifacts around the place.
    Don’t necessarily see them by that point.

    Steve jobs popularised the idea of minimalism and simplification in design.

    Simplification process is to ask for everything.
    If you’re experienced at this you can do it on the fly and still understand what the whole is going to be like,

    Rule: Once you’ve got any screen and ask yourself “Is this critical for me to achieve the thing that I need to achieve here”. If its not, remove it. If you don’t know, remove it. If it is, leave it.
    Make sure you do this for each line, each panel etc.

    Advantages:
    Less stuff to implement!
    Less friction for the user!
  • Very brandy and emotional topic. Vibrancy.
    Don’t want to talk about that stuff, more the technical stuff.

    Think about colour as rules
    Start with a core pallette
    Kuler
    Image extraction
    Make sure it includes ones for your common button actions: positive, negative, warning

    Colour blindness.
    Green might mean stop!
    Know it was autumn because the leaves were a different shade of green.
    Shades & Patterns & Iconography
    Colour blindness plugins

  • Terminology lessons! (Super technical subject)
    Font vs typeface. Snooty type designers will complain if you say it wrong.

    Baseline – the bit that runs along the bottom of all the words, that the hangy ones (or decenders) hang over.
    Leading – The space between the baseline of one line, and the baseline of the next line. Make it bigger than the font-size or its going to overlap!
    Combination of these two is like padding and whitespace for your fonts.

    Serif – The pokey bits designed to make words easier to read.
    Sans Serif – When you have a font without serifs…
    Different people cite either being easier to read in differen situations– no conclusive studies.

    When you’re designing as a general rule of thumb choose a header and a body typeface.
    For headers feel free to choose typefaces with flair– use them super big.
    For the body, keep them simple so it always obvious to the user which characters are which.
    Add to the brand
    Help with grouping mechanisms

    A note on sizes... Type is measured in points. Use 16 or optionally 14 for your body copy. Make headers bigger.
    This is good because people can actually read your content!
    Other folks don’t need to go get glasses!
    Reduces friction.

    Some good resources
    Google fonts.
    Adobe Typekit
    Fonts.com
    Beware of licensing
  • Just no.

    Skip forward a slide.
    Skip back a slide.

    Ok ok, so gradients are one of my favourite topics to rant about– but the simplification is as follows.

    In the real world gradients are mostly understood to demonstrate depth.
    If you demonstrate depth incorrectly, it makes people feel uncomfortable.

    When building an interface you don’t want to make people uncomfortable.
    So in general, just don’t use gradients. Don’t even think about it and you’ll be fine.

    There are acceptable places to use gradients.
    When done right, they disappear.

    Advantages
    Not making your users feel gross without knowing why
    Reducing friction!
  • There is nothing new under the sun, so don’t be afraid of a little theft.

    Two things I want to talk about.

    Use the big libraries
    The big guys have spent millions of dollars on research to figure out that a button should bubble when you click it
    Its free! Use it

    Having things you like
    When you spend a lot of time building something out, you’re going to be proud
    Which means you’ll be blind to the faults of the thing you’re building.
    Harder to build something that is actually polished.
    I ran a web shop that employed a bunch of designer.
    Have a similar design / tool open next to you while you work & constantly compare.

    Advantages:
    Saves time
    Helps ensure consistency
    Helps question the reasons for things
    Gives you ideas about how you could solve something more concisely
    So reduces friction!
  • Begin with the end in mind / Never forget the goal of the user who will be using your screen.

    If you can get the job done with one click, do it
    No extra screens, including logos and junk.

    Decisions that the users have to make affect how quickly they can get things done.
    Limit the decisions they have to make.
    Pre-fill forms, if you cant lets show what it should look like
    Simplification principal, does this thing need to be here!

    Give the user feedback on how they’re progressing
    Work to be done
    Choose a metric that aligns with the goal
    Always display the current remaining work to be done front and center


  • Lets have some questions!
  • Beautiful & Useful

    1. 1. Beautiful & Useful Some rules of thumb for building software that looks and feels great without designers.
    2. 2. A. Guy ash@ashguy.com / @theashguy
    3. 3. SOME RULES You don’t talk about fight club.
    4. 4. Innovation A note on not freaking your users the hell out.
    5. 5. consistency Making design easy.
    6. 6. P add ing + About the human eye.
    7. 7. Simplification.
    8. 8. Colour What things look like to everybody.
    9. 9. Font / Type Opposites attract.
    10. 10. No.
    11. 11. -Theft- The art of heist.
    12. 12. What users want.
    13. 13. THE 1. Only Innovate one thing in any design. Save this for your main mechanic. Everything else should be established patterns. 2. Decide on a set of rules, and stick to them throughout. This helps establish brand, and focus your user. 3. Whitespace is important. Include your padding rules in your consistency. Separate groups of things by a larger gutter than things that should be grouped together. 4. Once you’ve got something, start looking at every single line & shape and ask yourself– what the hell is this thing for? 5. Don’t rely on Colour to distinguish one thing from another, but do use as part of your solution. Couple with pattern and shade. Lighten and darken 10% to create levels. Use swatches from Kuler. 6. Pair a Body and Header typeface. Make sure your body copy is at a min 14pt, but more like 16pt’s. 7. Friends don’t let friends use gradients. 8. Keep a design you love up while you work and constantly look at your design next to it. This will stop you falling in love, and give you plenty of inspiration. 9. Never forget what the user is trying to achieve on any screen. Make sure you’re giving them feedback on how they’re doing.
    14. 14. Go forth and build awesome things.

    ×