SlideShare a Scribd company logo
Design 101
A quick start guide for developers
everyone
● Why you need design skills
● Design principles
‘I am a programmer.
I am not a designer.’
This statement, meant to empathise with a target audience of developers, is exactly the myth that we
need to stop perpetuating. If you are a programmer, the work that you do contributes directly to the
experience that the people using your product will have. Whether you know it or not, you are a
designer. Whether you know it or not, the work you do affects the design of the site or application you
are building. If you are aware of this fact, you can make a conscious effort to affect the design in line
with the needs of your users. If you are not aware of it, you will still be impacting the design of the
product, however you will be doing so without realising it and without thinking about the people who
will ultimately be using your product.
extract: http://aralbalkan.com/notes/design-is-not-veneer/
Why does bad design happen to
good code?
● Released without designers seeing it.
● Devs look at things differently.
● Don’t get taught how to design.
What are you going to learn?
● Identify patterns within the applications and understand why they are used.
● Learn to critique design properly
○ Using science and visual psychological principles
○ Beyond just “opinions”
○ Separate Form from Function and critique both separately.
● Understand why consistency matters to users.
● Collaborate more effectively, and feedback with more considered views
● Produce higher quality UI
● Learn to notice, seek and remember
Why are we doing this?
● Spot flaws in the UI and fix them before they ship, or point them out in
code reviews.
● Champion good design within your team.Understand the difference
between extending the design standards rather than breaking them
● Know when NOT to innovate
● Change company culture to improve the user experience
● Devs outnumber designers so inevitable devs will do design
Design is...
● NOT a veneer
● NOT added later
● NOT magic fairy dust
● NOT colouring in
● NOT art.
“Design is not just what it looks like
and feels like. Design is how it works.”
- Steve Jobs
Design is...
● Problem solving
● Attention to detail
● Planning
● Decision making
● Evolved
● Integral
● Simplicity
“Design is not just what it looks like
and feels like. Design is how it works.”
- Steve Jobs
Design is...
… a skill you can learn
Design principles
Contrast
Repetition
Alignment
Proximity
Also hierarchy,dominance, ratios, pattern recognition, closure.
Contrast
Creates hierarchy,
balance, dynamics and
rhythm.
Design 101 - a quick start guide
Contrast
If items are meant to be grouped, don’t just
make them similar make the identical.
If things aren’t meant to be grouped but look
similar - make them very different.
Green is more visible - has better contrast.
But red is more important!
Clash of the titans.
Repetition
We are always looking
for patterns
(even when there are
none)
Apophenia - finding patterns in meaningless data
Design 101 - a quick start guide
The pattern becomes
what we see.
We overlook what isn’t in the
pattern.
Especially if there is a lot of
information to process.
Spot the difference
We have a very strong ability to see the
exception in a pattern if it differs in specific
ways.
Gestalt - the mind understands external stimuli as whole rather than the sum of their parts.
Shape Colour Size
Hue Space Line weight
Pattern interruption
○ Grabs the users attention
○ Causes confusion and panic
○ Prevents the user completing a task
Details matter
● Colours
● Spacing
● Shapes
● Line thickness
● Fonts
● Icons
● Colours - call to actions, primary buttons
● Spacing - break up information in forms
● Shapes - create patterns
● Line thickness - choose one
● Fonts - less is more
● Icons - no icon salad
Alignment
Grids
Grids in graphic design refers to a series of
intersecting horizontal and vertical lines that
are used to structure content on a page.
Their roots are in traditional typography for
typesetting books but they can be used for
placement of any graphic design element in
print, web or multimedia. Grids act as a
framework that a designer can use to
organize content in a rational manner.
Fibonacci - mathematical sequence which is used to create the golden ratio used in aesthetics
Alignment
● Reduces cognitive load
● Flow - lines for eye to follow
● The brain fills the gaps to create closure
Design 101 - a quick start guide
Alignment
● Connect elements with each other
● Use the grid layout system
● Reduce the number of alignment points to a
bare minimum
ProximityWhitespace
Busy and loud
=
Bargain!
or a website from
the 90’s
Space = clarity and quality
Design 101 - a quick start guide
Design 101 - a quick start guide
Proximity
● Grouping and ungrouping
● Creates context and structure
Proximity
● Create smaller visual units
● Make it easier to complete small tasks
● Separate unrelated elements
● Don’t force users to hunt for related
elements
Example
Where’s Wally? the primary action?
Just
wrong!
Some things are just wrong!
Multiple layers of tabs...
Some things are just WRONG!
Centre alignment...
Some things are just WRONG!
Mystery meat
Some things are just WRONG!
Don’t scare people
Design 101 - a quick start guide
Your turn.
“We got nukes, we got knives, we got sharp sticks.”
Contrast
Repetition
Alignment
Proximity
Want to know more?
Thanks
Questions?

More Related Content

What's hot

3. production experiments
3. production experiments3. production experiments
3. production experiments
joe manship
 
Graphic design introduction
Graphic design introductionGraphic design introduction
Graphic design introduction
Saiful bin A. Kalam
 
Personality For Voice by Ozlem Williams
Personality For Voice by Ozlem WilliamsPersonality For Voice by Ozlem Williams
Personality For Voice by Ozlem Williams
Ozlem Kucukyilmaz Williams
 
Design in the wild
Design in the wildDesign in the wild
Design in the wild
Nicole Capuana
 
Design Thinking Sprint at Paris-Sud University — Nicolas Spehler
Design Thinking Sprint at Paris-Sud University — Nicolas SpehlerDesign Thinking Sprint at Paris-Sud University — Nicolas Spehler
Design Thinking Sprint at Paris-Sud University — Nicolas Spehler
Nicolas Spehler
 
Game prototyping 101
Game prototyping 101Game prototyping 101
Game prototyping 101
Rudrasen Sitoleh
 
Introduction to User Expereince
Introduction to User ExpereinceIntroduction to User Expereince
Introduction to User Expereince
Christina Wodtke
 
Design Thinking for Eduhacks 2017
Design Thinking for Eduhacks 2017Design Thinking for Eduhacks 2017
Design Thinking for Eduhacks 2017
Andee Pittman
 
3 Important tips about graphic designing for non-graphic designers
3 Important tips about graphic designing for non-graphic designers3 Important tips about graphic designing for non-graphic designers
3 Important tips about graphic designing for non-graphic designers
neelimadhir91
 
Who's Judging Whom - A Designer's Perspective
Who's Judging Whom - A Designer's PerspectiveWho's Judging Whom - A Designer's Perspective
Who's Judging Whom - A Designer's Perspective
Vlad Burca
 
Unit 301 - Lesson 10 - Make a Moodboard
Unit 301 - Lesson 10 - Make a MoodboardUnit 301 - Lesson 10 - Make a Moodboard
Unit 301 - Lesson 10 - Make a Moodboard
The English Martyrs School & Sixth Form College
 
Design Show.Ppt
Design Show.PptDesign Show.Ppt
Design Show.Ppt
jsturman
 
Collaboration challenges-for-designers-forced-into-remote-working-situations
Collaboration challenges-for-designers-forced-into-remote-working-situationsCollaboration challenges-for-designers-forced-into-remote-working-situations
Collaboration challenges-for-designers-forced-into-remote-working-situations
Robert Grossman
 
Visualisation Diagrams
Visualisation DiagramsVisualisation Diagrams
Visualisation Diagrams
hughes82
 
Studio Design Method by Benji Haselhurst of Parisleaf: A Branding & Digital S...
Studio Design Method by Benji Haselhurst of Parisleaf: A Branding & Digital S...Studio Design Method by Benji Haselhurst of Parisleaf: A Branding & Digital S...
Studio Design Method by Benji Haselhurst of Parisleaf: A Branding & Digital S...
FPRAGNV
 
Moodboards Cover Lesson
Moodboards Cover LessonMoodboards Cover Lesson
Moodboards Cover Lesson
hughes82
 
Career in Graphic Design
Career in Graphic DesignCareer in Graphic Design
Design sprint and incomplete briefs
Design sprint and incomplete briefsDesign sprint and incomplete briefs
Design sprint and incomplete briefs
Martin Andrle
 
The tiny internal agency
The tiny internal agencyThe tiny internal agency
The tiny internal agency
Zenan Liu
 
RESUME
RESUMERESUME

What's hot (20)

3. production experiments
3. production experiments3. production experiments
3. production experiments
 
Graphic design introduction
Graphic design introductionGraphic design introduction
Graphic design introduction
 
Personality For Voice by Ozlem Williams
Personality For Voice by Ozlem WilliamsPersonality For Voice by Ozlem Williams
Personality For Voice by Ozlem Williams
 
Design in the wild
Design in the wildDesign in the wild
Design in the wild
 
Design Thinking Sprint at Paris-Sud University — Nicolas Spehler
Design Thinking Sprint at Paris-Sud University — Nicolas SpehlerDesign Thinking Sprint at Paris-Sud University — Nicolas Spehler
Design Thinking Sprint at Paris-Sud University — Nicolas Spehler
 
Game prototyping 101
Game prototyping 101Game prototyping 101
Game prototyping 101
 
Introduction to User Expereince
Introduction to User ExpereinceIntroduction to User Expereince
Introduction to User Expereince
 
Design Thinking for Eduhacks 2017
Design Thinking for Eduhacks 2017Design Thinking for Eduhacks 2017
Design Thinking for Eduhacks 2017
 
3 Important tips about graphic designing for non-graphic designers
3 Important tips about graphic designing for non-graphic designers3 Important tips about graphic designing for non-graphic designers
3 Important tips about graphic designing for non-graphic designers
 
Who's Judging Whom - A Designer's Perspective
Who's Judging Whom - A Designer's PerspectiveWho's Judging Whom - A Designer's Perspective
Who's Judging Whom - A Designer's Perspective
 
Unit 301 - Lesson 10 - Make a Moodboard
Unit 301 - Lesson 10 - Make a MoodboardUnit 301 - Lesson 10 - Make a Moodboard
Unit 301 - Lesson 10 - Make a Moodboard
 
Design Show.Ppt
Design Show.PptDesign Show.Ppt
Design Show.Ppt
 
Collaboration challenges-for-designers-forced-into-remote-working-situations
Collaboration challenges-for-designers-forced-into-remote-working-situationsCollaboration challenges-for-designers-forced-into-remote-working-situations
Collaboration challenges-for-designers-forced-into-remote-working-situations
 
Visualisation Diagrams
Visualisation DiagramsVisualisation Diagrams
Visualisation Diagrams
 
Studio Design Method by Benji Haselhurst of Parisleaf: A Branding & Digital S...
Studio Design Method by Benji Haselhurst of Parisleaf: A Branding & Digital S...Studio Design Method by Benji Haselhurst of Parisleaf: A Branding & Digital S...
Studio Design Method by Benji Haselhurst of Parisleaf: A Branding & Digital S...
 
Moodboards Cover Lesson
Moodboards Cover LessonMoodboards Cover Lesson
Moodboards Cover Lesson
 
Career in Graphic Design
Career in Graphic DesignCareer in Graphic Design
Career in Graphic Design
 
Design sprint and incomplete briefs
Design sprint and incomplete briefsDesign sprint and incomplete briefs
Design sprint and incomplete briefs
 
The tiny internal agency
The tiny internal agencyThe tiny internal agency
The tiny internal agency
 
RESUME
RESUMERESUME
RESUME
 

Viewers also liked

A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables BusinessA UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
UIEpreviews
 
UX Methods and Games: Lessons Learned
UX Methods and Games: Lessons LearnedUX Methods and Games: Lessons Learned
UX Methods and Games: Lessons Learned
Stephan Engl
 
DxN presents Playing at UX by Elsa Bartley
DxN presents Playing at UX by Elsa BartleyDxN presents Playing at UX by Elsa Bartley
DxN presents Playing at UX by Elsa Bartley
Elsa Bartley
 
Make Your Stick Figures Work Harder: The 3 C's of Sketching
Make Your Stick Figures Work Harder: The 3 C's of SketchingMake Your Stick Figures Work Harder: The 3 C's of Sketching
Make Your Stick Figures Work Harder: The 3 C's of Sketching
Jason Ulaszek
 
Games for Health 2014 design tutorial
Games for Health 2014 design tutorialGames for Health 2014 design tutorial
Games for Health 2014 design tutorial
ferrarajc
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overview
Ben Melbourne
 
The importance of identity and vision to UX designers on agile projects
The importance of  identity and vision to UX designers  on agile projectsThe importance of  identity and vision to UX designers  on agile projects
The importance of identity and vision to UX designers on agile projects
johanna kollmann
 
Make Culture, Not War: The Secret to Great Teams & Organizations
Make Culture, Not War: The Secret to Great Teams & OrganizationsMake Culture, Not War: The Secret to Great Teams & Organizations
Make Culture, Not War: The Secret to Great Teams & Organizations
Teresa Brazen
 
Scrum secrets for integrating UX, design & development
Scrum secrets for integrating UX, design & developmentScrum secrets for integrating UX, design & development
Scrum secrets for integrating UX, design & development
Pieter Jongerius
 
Basic Instructional Design Principles - A Primer
Basic Instructional Design Principles - A PrimerBasic Instructional Design Principles - A Primer
Basic Instructional Design Principles - A Primer
Mike Kunkle
 
Gadu Gadu Widget (Przycisk)
Gadu Gadu Widget (Przycisk)Gadu Gadu Widget (Przycisk)
Gadu Gadu Widget (Przycisk)
GG Network
 
How does biology explain the low numbers of women in computer science? Hint:...
How does biology explain the low numbers of women in computer science?  Hint:...How does biology explain the low numbers of women in computer science?  Hint:...
How does biology explain the low numbers of women in computer science? Hint:...
Terri Oda
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and Archives
Ned Potter
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
Aaron Irizarry
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
Seth Familian
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
Drift
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
Leslie Samuel
 

Viewers also liked (17)

A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables BusinessA UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
 
UX Methods and Games: Lessons Learned
UX Methods and Games: Lessons LearnedUX Methods and Games: Lessons Learned
UX Methods and Games: Lessons Learned
 
DxN presents Playing at UX by Elsa Bartley
DxN presents Playing at UX by Elsa BartleyDxN presents Playing at UX by Elsa Bartley
DxN presents Playing at UX by Elsa Bartley
 
Make Your Stick Figures Work Harder: The 3 C's of Sketching
Make Your Stick Figures Work Harder: The 3 C's of SketchingMake Your Stick Figures Work Harder: The 3 C's of Sketching
Make Your Stick Figures Work Harder: The 3 C's of Sketching
 
Games for Health 2014 design tutorial
Games for Health 2014 design tutorialGames for Health 2014 design tutorial
Games for Health 2014 design tutorial
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overview
 
The importance of identity and vision to UX designers on agile projects
The importance of  identity and vision to UX designers  on agile projectsThe importance of  identity and vision to UX designers  on agile projects
The importance of identity and vision to UX designers on agile projects
 
Make Culture, Not War: The Secret to Great Teams & Organizations
Make Culture, Not War: The Secret to Great Teams & OrganizationsMake Culture, Not War: The Secret to Great Teams & Organizations
Make Culture, Not War: The Secret to Great Teams & Organizations
 
Scrum secrets for integrating UX, design & development
Scrum secrets for integrating UX, design & developmentScrum secrets for integrating UX, design & development
Scrum secrets for integrating UX, design & development
 
Basic Instructional Design Principles - A Primer
Basic Instructional Design Principles - A PrimerBasic Instructional Design Principles - A Primer
Basic Instructional Design Principles - A Primer
 
Gadu Gadu Widget (Przycisk)
Gadu Gadu Widget (Przycisk)Gadu Gadu Widget (Przycisk)
Gadu Gadu Widget (Przycisk)
 
How does biology explain the low numbers of women in computer science? Hint:...
How does biology explain the low numbers of women in computer science?  Hint:...How does biology explain the low numbers of women in computer science?  Hint:...
How does biology explain the low numbers of women in computer science? Hint:...
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and Archives
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Similar to Design 101 - a quick start guide

Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today
Ravi Bhadauria
 
Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2
Chad Udell
 
When & How to Hire a UX Designer
When & How to Hire a UX DesignerWhen & How to Hire a UX Designer
When & How to Hire a UX Designer
Erin Young
 
A Day in the Life of a Web Designer
A Day in the Life of a Web DesignerA Day in the Life of a Web Designer
A Day in the Life of a Web Designer
Anna Cook (she/her)
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
Ismail Norri
 
user interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdfuser interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdf
ssuser590cc81
 
Design Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris BernardDesign Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris Bernard
Chris Bernard
 
A Developers Take on Cooper
A Developers Take on CooperA Developers Take on Cooper
A Developers Take on Cooper
Adam Jordens
 
Startups • Working with designers
Startups • Working with designersStartups • Working with designers
Startups • Working with designers
eFounders
 
Copywriting for UX
Copywriting for UXCopywriting for UX
Copywriting for UX
Talisa Chang
 
UX class presentation
UX class presentationUX class presentation
UX class presentation
Theo V
 
Being a designer
Being a designerBeing a designer
Being a designer
Singsys Pte Ltd
 
Design, Behind the Scenes 2.0
Design, Behind the Scenes 2.0Design, Behind the Scenes 2.0
Design, Behind the Scenes 2.0
Jason Wright
 
Intro to User Experience
Intro to User ExperienceIntro to User Experience
Intro to User Experience
Usman Khan
 
How Do I UX?
How Do I UX?How Do I UX?
How Do I UX?
Dave Stadler
 
Rational Website Design
Rational Website DesignRational Website Design
Rational Website Design
WilliamVisconage
 
Graphic-Designing.ppt
Graphic-Designing.pptGraphic-Designing.ppt
Graphic-Designing.ppt
ExcellenceAcademy27
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
Jenica Welch
 
Ux4 indiedevs
Ux4 indiedevsUx4 indiedevs
Ux4 indiedevs
Juio Barros
 
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
Webflow
 

Similar to Design 101 - a quick start guide (20)

Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today
 
Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2
 
When & How to Hire a UX Designer
When & How to Hire a UX DesignerWhen & How to Hire a UX Designer
When & How to Hire a UX Designer
 
A Day in the Life of a Web Designer
A Day in the Life of a Web DesignerA Day in the Life of a Web Designer
A Day in the Life of a Web Designer
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
user interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdfuser interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdf
 
Design Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris BernardDesign Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris Bernard
 
A Developers Take on Cooper
A Developers Take on CooperA Developers Take on Cooper
A Developers Take on Cooper
 
Startups • Working with designers
Startups • Working with designersStartups • Working with designers
Startups • Working with designers
 
Copywriting for UX
Copywriting for UXCopywriting for UX
Copywriting for UX
 
UX class presentation
UX class presentationUX class presentation
UX class presentation
 
Being a designer
Being a designerBeing a designer
Being a designer
 
Design, Behind the Scenes 2.0
Design, Behind the Scenes 2.0Design, Behind the Scenes 2.0
Design, Behind the Scenes 2.0
 
Intro to User Experience
Intro to User ExperienceIntro to User Experience
Intro to User Experience
 
How Do I UX?
How Do I UX?How Do I UX?
How Do I UX?
 
Rational Website Design
Rational Website DesignRational Website Design
Rational Website Design
 
Graphic-Designing.ppt
Graphic-Designing.pptGraphic-Designing.ppt
Graphic-Designing.ppt
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
 
Ux4 indiedevs
Ux4 indiedevsUx4 indiedevs
Ux4 indiedevs
 
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
Life is not static - your designs shouldn't be either - No Code Conf 2019 Wor...
 

Recently uploaded

AI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptxAI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptx
Shayestha Fathima
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
chandadutta02102
 
New PPT Template for operations on field.pptx
New PPT Template for operations on field.pptxNew PPT Template for operations on field.pptx
New PPT Template for operations on field.pptx
hicham benkhelifa
 
Doreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemonDoreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemon
DanielNacorda4
 
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
ailynolive
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Mostafa Abd Elrahman
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Mostafa Abd Elrahman
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
TeeFusion
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
sonalibook860
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
ChiragSuresh
 
GRID integration of Wind energy conversion system
GRID integration of Wind energy conversion systemGRID integration of Wind energy conversion system
GRID integration of Wind energy conversion system
sulabhsachan
 
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista FashionsVista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Fashions
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Art by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising CampaignsArt by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising Campaigns
vsingram
 
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
sheetal singh$A17
 
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdfTemple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
taradcunha
 
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
MojtabaMeghdari
 
AIS degree offer diploma Transcript
AIS degree offer diploma TranscriptAIS degree offer diploma Transcript
AIS degree offer diploma Transcript
asazt
 
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
khloe sexy girl
 

Recently uploaded (20)

AI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptxAI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptx
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
 
New PPT Template for operations on field.pptx
New PPT Template for operations on field.pptxNew PPT Template for operations on field.pptx
New PPT Template for operations on field.pptx
 
Doreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemonDoreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemon
 
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
 
GRID integration of Wind energy conversion system
GRID integration of Wind energy conversion systemGRID integration of Wind energy conversion system
GRID integration of Wind energy conversion system
 
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista FashionsVista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista Fashions
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Art by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising CampaignsArt by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising Campaigns
 
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
Busty Girls Call Noida 🎈🔥9873940964 🔥💋🎈 Provide Best And Top Girl Service And...
 
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdfTemple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
 
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
 
AIS degree offer diploma Transcript
AIS degree offer diploma TranscriptAIS degree offer diploma Transcript
AIS degree offer diploma Transcript
 
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
 

Design 101 - a quick start guide

  • 1. Design 101 A quick start guide for developers everyone
  • 2. ● Why you need design skills ● Design principles
  • 3. ‘I am a programmer. I am not a designer.’ This statement, meant to empathise with a target audience of developers, is exactly the myth that we need to stop perpetuating. If you are a programmer, the work that you do contributes directly to the experience that the people using your product will have. Whether you know it or not, you are a designer. Whether you know it or not, the work you do affects the design of the site or application you are building. If you are aware of this fact, you can make a conscious effort to affect the design in line with the needs of your users. If you are not aware of it, you will still be impacting the design of the product, however you will be doing so without realising it and without thinking about the people who will ultimately be using your product. extract: http://aralbalkan.com/notes/design-is-not-veneer/
  • 4. Why does bad design happen to good code? ● Released without designers seeing it. ● Devs look at things differently. ● Don’t get taught how to design.
  • 5. What are you going to learn? ● Identify patterns within the applications and understand why they are used. ● Learn to critique design properly ○ Using science and visual psychological principles ○ Beyond just “opinions” ○ Separate Form from Function and critique both separately. ● Understand why consistency matters to users. ● Collaborate more effectively, and feedback with more considered views ● Produce higher quality UI ● Learn to notice, seek and remember
  • 6. Why are we doing this? ● Spot flaws in the UI and fix them before they ship, or point them out in code reviews. ● Champion good design within your team.Understand the difference between extending the design standards rather than breaking them ● Know when NOT to innovate ● Change company culture to improve the user experience ● Devs outnumber designers so inevitable devs will do design
  • 7. Design is... ● NOT a veneer ● NOT added later ● NOT magic fairy dust ● NOT colouring in ● NOT art. “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs
  • 8. Design is... ● Problem solving ● Attention to detail ● Planning ● Decision making ● Evolved ● Integral ● Simplicity “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs
  • 9. Design is... … a skill you can learn
  • 15. Contrast If items are meant to be grouped, don’t just make them similar make the identical. If things aren’t meant to be grouped but look similar - make them very different.
  • 16. Green is more visible - has better contrast. But red is more important! Clash of the titans.
  • 18. We are always looking for patterns (even when there are none) Apophenia - finding patterns in meaningless data
  • 20. The pattern becomes what we see. We overlook what isn’t in the pattern. Especially if there is a lot of information to process.
  • 21. Spot the difference We have a very strong ability to see the exception in a pattern if it differs in specific ways. Gestalt - the mind understands external stimuli as whole rather than the sum of their parts.
  • 23. Hue Space Line weight
  • 24. Pattern interruption ○ Grabs the users attention ○ Causes confusion and panic ○ Prevents the user completing a task
  • 26. ● Colours ● Spacing ● Shapes ● Line thickness ● Fonts ● Icons
  • 27. ● Colours - call to actions, primary buttons ● Spacing - break up information in forms ● Shapes - create patterns ● Line thickness - choose one ● Fonts - less is more ● Icons - no icon salad
  • 29. Grids Grids in graphic design refers to a series of intersecting horizontal and vertical lines that are used to structure content on a page. Their roots are in traditional typography for typesetting books but they can be used for placement of any graphic design element in print, web or multimedia. Grids act as a framework that a designer can use to organize content in a rational manner. Fibonacci - mathematical sequence which is used to create the golden ratio used in aesthetics
  • 30. Alignment ● Reduces cognitive load ● Flow - lines for eye to follow ● The brain fills the gaps to create closure
  • 32. Alignment ● Connect elements with each other ● Use the grid layout system ● Reduce the number of alignment points to a bare minimum
  • 35. or a website from the 90’s
  • 36. Space = clarity and quality
  • 39. Proximity ● Grouping and ungrouping ● Creates context and structure
  • 40. Proximity ● Create smaller visual units ● Make it easier to complete small tasks ● Separate unrelated elements ● Don’t force users to hunt for related elements
  • 41. Example Where’s Wally? the primary action?
  • 43. Some things are just wrong! Multiple layers of tabs...
  • 44. Some things are just WRONG! Centre alignment...
  • 45. Some things are just WRONG! Mystery meat
  • 46. Some things are just WRONG! Don’t scare people
  • 48. Your turn. “We got nukes, we got knives, we got sharp sticks.”
  • 50. Want to know more?