SlideShare a Scribd company logo
THE DESIGN PROCESSTHE DESIGN PROCESS
Things that I usually use and
do when I participate on a
project
byMonicaMessaggiKaya(June2013)
STEPSSTEPS
Meeting with people
projectmanager/otherdeveloper
Sketches
paper,post-it,napkin,paperbrowser
Low-fidelity Mockup
( )balsamiq Blockbooksexample
STEPSSTEPS
High-fidelity Mockup
(htmlprototype)
, , ,Bootstrap Foundation Gumby others
Interactions and Iteractions
present>fix/suggest/interrupt>develop>test
"Lather,rinse,repeat"
INSPIRATIONINSPIRATION
INSPIRATIONINSPIRATION
,magazines,leaflets, , ,
typography( - ),known ,
andallthat"designertalk"
, ,
,
books/articles/tweets/search
websites posters adverts
1 2 brands nature
COLOURlovers Kueler subtlepatterns
sidebar.io smashingmagazine
TECHNIQUESTECHNIQUES
sketch
(whole,part,detail)
copy & paste
("creativesteal")
"foundation first" approach
tweaks
(onexistingorpreviousprojectdesigns)
TESTINGTESTING
User testing / Usability / Accessibility
What?colour,font,labels,images,content,layout,steps,screensizesor
devices,OSs,browsers ( , )-"quickwins"Browserstack Zurbapps
When?ideallyoftenandearly
Who?colleagues,projectmanagers,users,ARACU
Why?catchpossibleproblems,discoveruseoffeature,identify
compatibledevices/browsers,makeitagoodexperience
"Stairway to Heaven"
'Causeyouknowsometimeswordshavetwomeanings.
TOOLSTOOLS
Paper,
/
,
, , (other )
/ /CSSpre-processors
( , , )
,javascript
Opera , ,"inspectelement"
paperbrowser
Balsamiq
SublimeText Notepad++
Photoshop,Illustrator Pixlr
Bootstrap Foundation Gumby FFF
SASS LESS
compass.app codekit codepen.io
jQuery
Dragonfly Firebug
Zurbapps
Browserstack
THOUGHTSTHOUGHTS
Thedesignprocesshasaflowbutdoesn'tneedtohaveallsteps
Getinspired!
Weallhaveblocks(designerordeveloper)
Usethetoolyouarecomfortablewith,
buttrytousethe"righttoolforthetask"
Test,evenwithjust3-5people
(notetoself!!!)
CREDITSCREDITS
"Inspiration"image: AugustEmpress
"EverythingwillbeOKintheend"image: (HP5267)HaroldsPlanet
image"That'sallfolks"
Theseslideswerecreatedusinghttp://slid.es/
http://monicams.com
@monicams

More Related Content

Viewers also liked

Apparel textile-webinar
Apparel textile-webinarApparel textile-webinar
Apparel textile-webinar
Anu Sri
 
Mnp report
Mnp reportMnp report
Mnp reportAnu Sri
 
Digital Manuscripts Toolkit
Digital Manuscripts ToolkitDigital Manuscripts Toolkit
Digital Manuscripts Toolkit
Monica Messaggi Kaya
 
Apparel textile-webinar
Apparel textile-webinarApparel textile-webinar
Apparel textile-webinar
Anu Sri
 
Presentation1
Presentation1Presentation1
Presentation1Caylin
 
Ankit Pandey (10BM60012) Summer Internship Project Report
Ankit Pandey (10BM60012) Summer Internship Project ReportAnkit Pandey (10BM60012) Summer Internship Project Report
Ankit Pandey (10BM60012) Summer Internship Project Reportankitpandey
 
10 ans de Styles : Numéro collector saveurs
10 ans de Styles : Numéro collector saveurs10 ans de Styles : Numéro collector saveurs
10 ans de Styles : Numéro collector saveurs
Altice Media Publicité
 
LEAD GENERATION 12-2015
LEAD GENERATION 12-2015LEAD GENERATION 12-2015
LEAD GENERATION 12-2015
Altice Media Publicité
 
Ankit Pandey (10BM60012) summer internship project report
Ankit Pandey (10BM60012) summer internship project reportAnkit Pandey (10BM60012) summer internship project report
Ankit Pandey (10BM60012) summer internship project report
ankitpandey
 

Viewers also liked (9)

Apparel textile-webinar
Apparel textile-webinarApparel textile-webinar
Apparel textile-webinar
 
Mnp report
Mnp reportMnp report
Mnp report
 
Digital Manuscripts Toolkit
Digital Manuscripts ToolkitDigital Manuscripts Toolkit
Digital Manuscripts Toolkit
 
Apparel textile-webinar
Apparel textile-webinarApparel textile-webinar
Apparel textile-webinar
 
Presentation1
Presentation1Presentation1
Presentation1
 
Ankit Pandey (10BM60012) Summer Internship Project Report
Ankit Pandey (10BM60012) Summer Internship Project ReportAnkit Pandey (10BM60012) Summer Internship Project Report
Ankit Pandey (10BM60012) Summer Internship Project Report
 
10 ans de Styles : Numéro collector saveurs
10 ans de Styles : Numéro collector saveurs10 ans de Styles : Numéro collector saveurs
10 ans de Styles : Numéro collector saveurs
 
LEAD GENERATION 12-2015
LEAD GENERATION 12-2015LEAD GENERATION 12-2015
LEAD GENERATION 12-2015
 
Ankit Pandey (10BM60012) summer internship project report
Ankit Pandey (10BM60012) summer internship project reportAnkit Pandey (10BM60012) summer internship project report
Ankit Pandey (10BM60012) summer internship project report
 

Similar to The Design Process

[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
DevDay.org
 
design process
design processdesign process
design process
Mikko Pyykkönen
 
Design Systems - Fit for Use
Design Systems - Fit for UseDesign Systems - Fit for Use
Design Systems - Fit for Use
Jeremy Hamman
 
Help Me Help You: Practical Tips for Designers from A WordPress Developer
Help Me Help You: Practical Tips for Designers from A WordPress DeveloperHelp Me Help You: Practical Tips for Designers from A WordPress Developer
Help Me Help You: Practical Tips for Designers from A WordPress Developer
daraskolnick
 
UX Prototyping and Personas 4-25-14
UX Prototyping and Personas 4-25-14UX Prototyping and Personas 4-25-14
UX Prototyping and Personas 4-25-14
Shilpa Thanawala
 
Making A Coffee Table
Making A Coffee TableMaking A Coffee Table
Making A Coffee Table
Yehezkiel Gulo
 
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 CD2Chad Udell
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Process
ugencarelle
 
Design Presentation
Design PresentationDesign Presentation
Design Presentation
Andreas Beining
 
Tips to improve as a graphic designer
Tips to improve as a graphic designerTips to improve as a graphic designer
Tips to improve as a graphic designer
Shahadath Hossain
 
Design Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design ProcessDesign Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design Process
uxpin
 
Design Thinking: Beyond the Bounds of Your Own Head (a phenomenological persp...
Design Thinking: Beyond the Bounds of Your Own Head (a phenomenological persp...Design Thinking: Beyond the Bounds of Your Own Head (a phenomenological persp...
Design Thinking: Beyond the Bounds of Your Own Head (a phenomenological persp...
Thomas Wendt
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Gessica Puri
 
UX skillsharing at Betahaus Sofia
UX skillsharing at Betahaus SofiaUX skillsharing at Betahaus Sofia
UX skillsharing at Betahaus Sofia
Damjan Obal
 
Design thinking and agile development
Design thinking and agile developmentDesign thinking and agile development
Design thinking and agile development
W. Alex Jansen
 
Design thinking and agile development
Design thinking and agile developmentDesign thinking and agile development
Design thinking and agile developmentInteractiveCologne
 
Resume 2011
Resume 2011Resume 2011
Resume 2011
Cathan Murray
 
Are Agile Projects Doomed to Half-Baked Design?
Are Agile Projects Doomed to Half-Baked Design?Are Agile Projects Doomed to Half-Baked Design?
Are Agile Projects Doomed to Half-Baked Design?
theinfonaut
 
Presentation when ideas take form
Presentation when ideas take formPresentation when ideas take form
Presentation when ideas take form
Jules Spanou
 
Modern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsModern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsAlan Roy
 

Similar to The Design Process (20)

[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
 
design process
design processdesign process
design process
 
Design Systems - Fit for Use
Design Systems - Fit for UseDesign Systems - Fit for Use
Design Systems - Fit for Use
 
Help Me Help You: Practical Tips for Designers from A WordPress Developer
Help Me Help You: Practical Tips for Designers from A WordPress DeveloperHelp Me Help You: Practical Tips for Designers from A WordPress Developer
Help Me Help You: Practical Tips for Designers from A WordPress Developer
 
UX Prototyping and Personas 4-25-14
UX Prototyping and Personas 4-25-14UX Prototyping and Personas 4-25-14
UX Prototyping and Personas 4-25-14
 
Making A Coffee Table
Making A Coffee TableMaking A Coffee Table
Making A Coffee Table
 
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
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Process
 
Design Presentation
Design PresentationDesign Presentation
Design Presentation
 
Tips to improve as a graphic designer
Tips to improve as a graphic designerTips to improve as a graphic designer
Tips to improve as a graphic designer
 
Design Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design ProcessDesign Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design Process
 
Design Thinking: Beyond the Bounds of Your Own Head (a phenomenological persp...
Design Thinking: Beyond the Bounds of Your Own Head (a phenomenological persp...Design Thinking: Beyond the Bounds of Your Own Head (a phenomenological persp...
Design Thinking: Beyond the Bounds of Your Own Head (a phenomenological persp...
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 
UX skillsharing at Betahaus Sofia
UX skillsharing at Betahaus SofiaUX skillsharing at Betahaus Sofia
UX skillsharing at Betahaus Sofia
 
Design thinking and agile development
Design thinking and agile developmentDesign thinking and agile development
Design thinking and agile development
 
Design thinking and agile development
Design thinking and agile developmentDesign thinking and agile development
Design thinking and agile development
 
Resume 2011
Resume 2011Resume 2011
Resume 2011
 
Are Agile Projects Doomed to Half-Baked Design?
Are Agile Projects Doomed to Half-Baked Design?Are Agile Projects Doomed to Half-Baked Design?
Are Agile Projects Doomed to Half-Baked Design?
 
Presentation when ideas take form
Presentation when ideas take formPresentation when ideas take form
Presentation when ideas take form
 
Modern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsModern UX, UI, and front-end tools
Modern UX, UI, and front-end tools
 

Recently uploaded

Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 

Recently uploaded (20)

Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 

The Design Process