graphic user interface designaszklarp/archiwum/2018/...frontend developer & designer of web...

GUI Design – Aneta Rosłan 2019

GRAPHIC USER INTERFACE

DESIGN

Aneta Rosłan

for developers


Aneta Rosłan

Frontend developer & designer

of web applications at In4mates

Different projects

• 4-month, startup, from the start to the end

• over 5-years, credit simulator and processor,

continously developed

• over 1-year, internal tool


Content

• The Purpose

• Should developer care about design?

• How to design

• Information design and structure

• Basic design principles

• Examples

GUI Design – Aneta Rosłan 2019GUI Design – Aneta Rosłan 2019

THE PURPOSE

Why do we create applications?


The reason


The Purpose

USER GOALTOOL

CONDITIONS


SHOULD

DEVELOPER CARE?

I just want to write code


WHAT IS THE PROFIT


The interface is essential


Better evaluation and communication


More valuable work


Work with graphic designers


DESIGN INTERFACE

What exactly do you mean?


Good design properties

Hierarchy

Structure

Cohesion

Convention

Consequence


Structure


Cohesion


INFORMATION ARCHITECTURE


Questions

• What is your main content?

• What are main – the most important – views?

• What are users goals?

• How can you split information?

• Which sections/functions are connected?

• What should be the most easy to access?

• How other applications solves similar problems?


BASIC DESIGN PRINCIPLES


Proximity and space – groups


Alignment – creates structure


Repetition – creates structure


Contrast – makes hierarchy


Contrast and repetition


Low contrast


Distinct repetition

• Distinct repetition






CONTRAST

distinct


EXAMPLES

Problems & solutions


Schema


Credit simulator


Templar


TestTool


Fonts


SUMMARY

Remember


Summary

Make your user’s life simpler.

1. Create information structure

2. Ensure consistency, follow convention

3. Remember about:

1. Proximity

2. Alignment

3. Repetition

4. Contrast


Sources and other materials

• „Designing with the Mind in Mind”, Jeff Johnson

• „DTP od podstaw”, Robin Williams

• „Design Tips” by Steve Schoger, Adam Wathan

https://twitter.com/i/moments/994601867987619840

• https://cantunsee.space/ Select the design that is more

correct

• https://material.io/design/ Best practices of user interface

design by Google

https://twitter.com/i/moments/994601867987619840

https://cantunsee.space/

https://material.io/design/


THANK YOU!

graphic user interface designaszklarp/archiwum/2018/...frontend developer & designer of web...

Documents