Illustrating Interfaces

By now you should have done:

• Master apprentice exercises
• Mind-mapping ideas
• Sketches and wireframe

The Interface

1. Why illustration in UI?
2. Types on illustrating UI
3. Styles of illustrating UI
4. Workflow… illustrating UI.

The essence of illustration

• To clarify
• To make clear by giving or by serving as an example or instance
• To provide with visual features intended to explain or decorate.
• To show clearly

Tips for sketching interfaces

1. Use a thicker pen. – thick enough to prevent you focusing on tiny details.
2. Draw straight lines.
3. Be thoughtful about colour. – use to highlight components of what you are doing.
4. Make your sketches comprehensible. – clarity, show the walk through.
5. Use the right gear.
6. Time yourself.

Illustration in UI should be:

• Meaningful
• Recognisable
• Preferably straightforward and unambiguous
• Clarifying
• Attractive
• Harmonic and corresponding with general stylistic concept.
• Improving usability and user experience in general
• Not overloading the screen or page

 

Mascots and Characters

• Can add personality to any given brand or product. They can guide you through a digital product, very helpful in interfaces, can become a memorable element of those products.

Thematic

• These can visualise journeys, you can build them up layer by layer. There will be textures online.

Data Visualisation

• ­ Presenting information in a clear and concise form.

hyper-realistic.

e.g., the IPhone

Simple Vectors

• Can hold its own charm, e.g., the fail whale

Onboarding

This is a good way to introduce people to apps, to bring them onboard with initial screens to walk users through. Simple illustrations, with supporting text. Usually about 5 screens, not massively complex. You can have different elements and pieces, putting characters and figures together. Characters with same bodies but differences in glasses or hair. You can use it for rewards badges.

 

Theme and Style Illustrations

Pieces aimed at kids of a certain age with bright, strong colours fitting perfectly with that. Options can be diverse with what you can do. Be cautious in not overdoing it with gradients. If it becomes a main feature in what you are doing it can be overpowering. Remember consistency, heavier lines on the outside.

 

For Week 05

• Icons created.
• Consider UI.
• From your wireframes creating visual mock-ups/prototypes
• Minimum three screens

Note – critique in week 06, aim for 3 screens, mostly completed. New brief in week 06 also.

 

 

Ian Spalter – Digital Product Design

Abstract Episode (Netflix)

After watching the Abstract episode focusing on Ian Spalter’s work, it gave me a new insight into UI design, especially from the segment on the Instagram logo redesign. There’s more to a design that just designing. It’s all about how we use the app. A line that stood out to me was, ‘if I don’t know how to use your app after 5 seconds of using it then there is something wrong,’. I found this to be an interesting take as it is made me realise that the simpler the design is, the more engaging the UI/UX is. I tend to overcomplicate my work and it can become one of my downfalls. If I was to take away anything from watching that episode, it is to try to simplify my ideas, that it is not about reinventing the wheel, it’s about making it better.

Reference – Abstract (Netflix) Episode – Ian Spalter: Digital Product Design

 

Project Specific Research – notes

Look into different areas:

Movies

Tv

Documentaries

Online

• google images.
• Flickr
• Dribble
• Stumbleupon

Quick Research Ideas

Aliens

• Toy Story
• Star Wars
• Marvin the Martian (Looney Tunes)
• The Great Gazoo (Flintstones)
• Invaders Zim
• Nibbler (Futurama)

Spaceships

• The Jetsons
• Futurama
• Little Einstein’s

Planets

• The Planets (BBC TWO)
• The Universe (Netflix)

 

Self-Reflection

I found this week insightful for making my sketches/wireframes better. I found it difficult to know how to do wireframes, but this week’s content has helped me realise how to design them properly. I also found it would be good to look more into existing characters and illustrations that would fit my project, so I plan to research them and maybe draw some inspiration from outside of Pinterest and google search, I want to look at different shows and cartoon characters and elements. I plan to continue drawing up some screen layouts and start to digitise some screens for my travel app.