aiga web 101 — visual web design process
DESCRIPTION
Talk I gave on the visual design process for designing for the web.TRANSCRIPT
![Page 1: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/1.jpg)
VISUALWEB DESIGN PROCESS
.web101
Nov 4th, 2014
![Page 2: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/2.jpg)
HELLO.
.web101
![Page 3: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/3.jpg)
raleighfelton
raleighfelton
.web101
![Page 4: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/4.jpg)
Director of Design
SmashingBoxes.com
![Page 5: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/5.jpg)
BELIEVE INTHE PROCESSAlthough it is forever changing
![Page 6: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/6.jpg)
THERE ARE NO HARD & FAST RULESOnly a Road map
![Page 7: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/7.jpg)
RESEARCH& ASSESSMENT
![Page 8: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/8.jpg)
Example Questions
Why was the company created?
What do your users watch, what do they read, where do they browse?
How do you measure success?
Place yourself in the future. If your company could do anything or be anything, what would it be?
If you could communicate a single message about your company, what would it be?
![Page 9: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/9.jpg)
THINK ABOUT CONTENTWhat are we trying to solve.
![Page 10: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/10.jpg)
Je�erey Zeldman
CONTENT PRECEDES DESIGN. DESIGN IN THE ABSENCE OF CONTENT IS NOT DESIGN, IT’S DECORATION.
![Page 11: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/11.jpg)
Answer these in writing:
1. What is the purpose of the design?
2. What do we want to get across to the users?
3. Does/Can the design have a motif?
4. What story are we trying to tell?
![Page 12: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/12.jpg)
STARTPULLINGINSPIRATIONMood Board
![Page 13: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/13.jpg)
Where From? Anywhere really...
Dribbbledribbble.com
Pinterestpinterest.com
Designspirationdesignspiration.net
![Page 14: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/14.jpg)
Mood Board
![Page 15: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/15.jpg)
Mood Board
![Page 16: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/16.jpg)
OVERALLSTYLEStyle Tile
![Page 17: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/17.jpg)
Start Styling
Typography (Headline, Subhead and body)
Color Palette (use color theory)
Design Elements (buttons, forms, models, drop-downs, etc...)
Iconography Style
Photography
![Page 18: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/18.jpg)
Typography
fontsquirrel.com
google.com/fonts
typekit.com
fonts.com/web-fonts
![Page 19: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/19.jpg)
Color Palette
Dribbbledribbble.com/colors/
Adobe Kulercolor.adobe.com
![Page 20: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/20.jpg)
Design Elements
![Page 21: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/21.jpg)
Iconography
thenounproject.com
![Page 22: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/22.jpg)
Photography
tumblr.com / unsplash.com
![Page 23: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/23.jpg)
Style Frame
styletil.es/
![Page 24: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/24.jpg)
SKETCHSketching is for mistakes
![Page 25: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/25.jpg)
Loose Sketches / Final Comps
![Page 26: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/26.jpg)
DESIGNINGWhere To Begin?
![Page 27: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/27.jpg)
Our Mindset
Challenge Ourselves
Pay attention to the details
Don't be married to your design
Bring Developers into the project
Design comes first (not just visual design)
![Page 28: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/28.jpg)
Is it responsive?
Is it responsive for Browser, Tablet, Mobile?
If yes, is it mobile first?
If yes, design for small screen first.
![Page 29: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/29.jpg)
GRID?Yes, but rules are meant to be broken...
![Page 30: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/30.jpg)
Blank Document: Grid (my preference)
http://www.w3schools.com/browsers/browsers_display.asp
16 Column(browsers)
10 Column(mobile)
960px
![Page 31: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/31.jpg)
![Page 32: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/32.jpg)
![Page 33: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/33.jpg)
DEFINING STUFFSetting Styles
![Page 34: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/34.jpg)
http://css3.mikeplate.com/
![Page 35: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/35.jpg)
Template of each page
![Page 36: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/36.jpg)
Template of each page
![Page 37: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/37.jpg)
Tell A Story
Photography Icons/Copy
Illustration
![Page 38: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/38.jpg)
THEN...
![Page 39: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/39.jpg)
COLLABORATE WITH DEVS
![Page 40: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/40.jpg)
FEEDBACK AND REVISION AND FEEDBACK AND REVISION
AND FEEDBACK AND...
![Page 41: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/41.jpg)
IT'S NEVER GOOD ENOUGH.
![Page 42: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/42.jpg)
R. Buckminster Fuller
WHEN I AM WORKING ON A PROBLEM, I NEVER THINK ABOUT BEAUTY BUT WHEN I HAVE FINISHED, IF THE SOLUTION IS NOT BEAUTIFUL, I KNOW IT IS WRONG.
![Page 43: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/43.jpg)
MAKE GOOD INTERNETS...
![Page 44: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/44.jpg)
Q&A
![Page 45: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/45.jpg)
The Visual Design Process Workshop
1. Create Mood Board This should only shape your inspiration on how you want your site to feel.
2. Start Defining StylesChoose Color Palette
Choose Fonts
Pull Photography Style/Illustration
Create UI elements (buttons, forms, etc...)
![Page 46: Aiga Web 101 — Visual Web Design Process](https://reader036.vdocuments.mx/reader036/viewer/2022081404/559af3f11a28abc3708b47a3/html5/thumbnails/46.jpg)
.web101
raleighfelton
raleighfelton
THANK YOU