GRAPHIC USER INTERFACE DESIGNaszklarp/archiwum/2018/...Frontend developer & designer of web...
Transcript of GRAPHIC USER INTERFACE DESIGNaszklarp/archiwum/2018/...Frontend developer & designer of web...
GUI Design – Aneta Rosłan 2019
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
GUI Design – Aneta Rosłan 2019
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?
GUI Design – Aneta Rosłan 2019GUI Design – Aneta Rosłan 2019
SHOULD
DEVELOPER CARE?
I just want to write code
GUI Design – Aneta Rosłan 2019GUI Design – Aneta Rosłan 2019
DESIGN INTERFACE
What exactly do you mean?
GUI Design – Aneta Rosłan 2019
Good design properties
Hierarchy
Structure
Cohesion
Convention
Consequence
GUI Design – Aneta Rosłan 2019
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?
GUI Design – Aneta Rosłan 2019
Distinct repetition
• Distinct repetition
• Distinct repetition
• Distinct repetition
• Distinct repetition
• Distinct repetition
GUI Design – Aneta Rosłan 2019
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
GUI Design – Aneta Rosłan 2019
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