Date post: | 07-Jul-2015 |
Category: |
Design |
Upload: | raleigh-felton |
View: | 388 times |
Download: | 2 times |
VISUALWEB DESIGN PROCESS
.web101
Nov 4th, 2014
HELLO.
.web101
raleighfelton
raleighfelton
.web101
Director of Design
SmashingBoxes.com
BELIEVE INTHE PROCESSAlthough it is forever changing
THERE ARE NO HARD & FAST RULESOnly a Road map
RESEARCH& ASSESSMENT
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?
THINK ABOUT CONTENTWhat are we trying to solve.
Je�erey Zeldman
CONTENT PRECEDES DESIGN. DESIGN IN THE ABSENCE OF CONTENT IS NOT DESIGN, IT’S DECORATION.
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?
STARTPULLINGINSPIRATIONMood Board
Where From? Anywhere really...
Dribbbledribbble.com
Pinterestpinterest.com
Designspirationdesignspiration.net
Mood Board
Mood Board
OVERALLSTYLEStyle Tile
Start Styling
Typography (Headline, Subhead and body)
Color Palette (use color theory)
Design Elements (buttons, forms, models, drop-downs, etc...)
Iconography Style
Photography
Typography
fontsquirrel.com
google.com/fonts
typekit.com
fonts.com/web-fonts
Color Palette
Dribbbledribbble.com/colors/
Adobe Kulercolor.adobe.com
Design Elements
Iconography
thenounproject.com
Photography
tumblr.com / unsplash.com
Style Frame
styletil.es/
SKETCHSketching is for mistakes
Loose Sketches / Final Comps
DESIGNINGWhere To Begin?
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)
Is it responsive?
Is it responsive for Browser, Tablet, Mobile?
If yes, is it mobile first?
If yes, design for small screen first.
GRID?Yes, but rules are meant to be broken...
Blank Document: Grid (my preference)
http://www.w3schools.com/browsers/browsers_display.asp
16 Column(browsers)
10 Column(mobile)
960px
DEFINING STUFFSetting Styles
http://css3.mikeplate.com/
Template of each page
Template of each page
Tell A Story
Photography Icons/Copy
Illustration
THEN...
COLLABORATE WITH DEVS
FEEDBACK AND REVISION AND FEEDBACK AND REVISION
AND FEEDBACK AND...
IT'S NEVER GOOD ENOUGH.
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.
MAKE GOOD INTERNETS...
Q&A
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...)
.web101
raleighfelton
raleighfelton
THANK YOU