IXD104 – The interface – Week 4

Should have done and posted

  • master apprentice exercises
  • mind maps
  • initial sketches
  • Research

————— Week 6 group critique and hand-in ——————–

It’s important to separate yourself from your final product to evaluate it – Is it functional? Does it answer the client brief?

The interface

  • A minimal, consistent colour pallet can be quite successful.
  • Show the design inside your selected device
  • Try not to make it too typographically busy
  • Create a brand for it also
  • UI cards

— DO NOT use photoshop, stick to Figma and illustrator —

Why illustration in UI?

A picture is worth a thousand words.

Illustrations can clarify by giving examples. It is a great way to convey ideas.

It is an efficient way of providing info to the user quickly and to many.

Think of onboarding screen of McDonnalds – great example.

Tips for sketching interfaces

  1. Its not about being a good artists but a good thinker.
  2. Use a thicker pen – forces you to draw bigger and eliminates unnecessary details – Sharpies. It’s about getting the ideas down as quickly as possible at the beginning.
  3. Draw straight lines – it shows confidence. Practice by joining dots and making circles – eventually muscle memory will kick in.
  4. Be thoughtful about colour
  5. Make them comprehemsive
  6. use the right equipment – muji fine liners look up, dotted paper can be helpful.
  7. time yourself – try doing crazy 8th – fold a piece of paper into 8 and spend 1 minute create a quick scketh in each sections

Illustration should be

  • Meaningful
  • recognisable
  • claryfiable
  • attractive
  • improving of the user experience and usability
  • not overloading the page or screen
  • Harmonic and corresponding with general stylistic concept

They can solve problems

  • Mark Boulton ( typographic designer ) Understand the problem, thoughtfully considering the client, the business, the market, the goals, the audience
  • Look at Apple website and how they narrate and use storytelling through visuals to sell their products
  • Quentin Blake

Mascots and characters

  • They can add a personality to any brand or product
  • Meomi look up
  • Can be iconic
  • Can be diagrammatic
  • data visualisation
  • Hyper realistic
  • Simple vectors
  • hand drawn – can add a certain charm

Illustration for UI

  • Onboarding – great way to introduce people to apps – eg tutorial pages
  • They can be used as achievement badges
  • Consider the audience and what approach would be appropriate
  • They can be simple and gently – don’t overdo it with gradients – it can become overpowering

Research

  • Focusing too much on one area can cause you to have a narrowed focus. Search different varied sources, this way you will develop a more diverse approach.
  • google image
  • Flickr
  • Dribble
  • StumbleUpon
  • Pinterest
  • Blogs
  • Brand guidelines
  • Books
  • Sketching – always start on pencil

Book recommendations

  • Visual families

Tasks

  • Netflix abstract tv show is a MUST watch. At least evaluate the Ian Spalter: Digital Product Design episode.
  • Create icons
  • Consider UI
  • Create visual mock ups from your wire frames (Illustrator/Figma) minimum of 3

 

Leave a Reply

Your email address will not be published. Required fields are marked *