concept to comp refresh dc 09 2008
Post on 28-Jan-2015
105 Views
Preview:
DESCRIPTION
TRANSCRIPT
From Conceptsto CodeA two part presentationRefresh DCby Nguyet Vuong and Jason Garbernguyet@newwaydesign.comJason@sixtwothree.org
My name is Nguyet
I like Vietnamese subs
About Nguyet
• pronounced Nu-Way
• Sr. Designer for E-site Marketing (Sabre Holdings)
• Founder of Probonafide.com
• WCCCI - World Centers of Compassion for Children International
Part 1: From Concept to Comp
The WCCCI website
WCCCI - original homepage
Where to Begin?
Where to begin?
• Establishing some goals
• Conceptualize
• Layout
Establishing our goals
• Design Solutions begins by
• Defining the Problem
• Establishing Constraints
WCCCI - original homepage
• Text heavy, nothing stands out
• inconsistent navigation on top and on left.
• Mysterious user login.
Defining the problem
• What do you want this site to accomplish?
• What do you want your users to accomplish?
• What will keep a user on your site?
• What will encourage a user to return?
Site objective:
To improve site aesthetics through use of engaging photographs, colors, typography, ease of navigation, and add functionality for online donations, blogs and photo gallery.
Users objective
Learn about WCCCI and their work with children, get updated news on on-going projects and get involved.
Keeping users interested
Providing engaging and in-depth content
encourage users to return
Regularly updated content like news, photo galleries, and messages from Betty Williams through her blog.
Establishing constraints
• Content outline
• Text based navigational structure
• Visual Tones: warm, friendly, caring, light
• 3 Push marketings (whatʼs up with 3?)
Whatʼs up with 3?
Rule of Three
• Fundamental of how humans process
• Three is the smallest number of objects that create a pattern
• Combining pattern and brevity sticks
Homepage Goals
Set goals for the homepage design
Homepage Goals
Goal # 1 : Answer the question,“What is this place?”
Our mission is to create a strong political voice for children in areas of stress due to war, hunger or social, economic, or political upheaval and to respond to their expressed needs materially and emotionally.
WCCCI - original homepage
Homepage Goals
Goal # 2 : What do you want users to do?
• News & Events
• Centers of Compassion
• Get Involved
Homepage Goals
Goal # 3: Provide consistent, global navigation structure
Conceptualize
Conceptualizing
• Identify Your Users
• Early Explorations
• Develop Pencil Sketches
Identifying Users
• Market Research
• Looking at Competitors
• Creating Personas
User Audience
• Those who cares greatly about childrenʼs welfare
• WCCCI attracts people who are aware of international affairs/political leaders
• Highly educated people and they want to make a difference in the lives of children
Early Exploration
• Mood Boards
• Separate concept from form
• Build consensus in large groups
• Involve more people
• Prototype rapidly
WCCCI logo
Some mood boards
creating a warm, visual tone with various shades of blues for contrast
Visual tones - warm, friendly, compassionate, caring, light
Some mood boards
calming, muted visual tone with various textures and shades
Visual tones - warm, friendly, compassionate, caring, light
Some mood boards
reserved, somber, pensive visual tone.
Visual tones - warm, friendly, compassionate, caring, light
Pencil Sketches
• Thatʼs right, I said “Pencil”
• Visual wireframe thumbnails
• Rule of Thirds
Rule of third
Aligning a feature with these points creates more tension, energy and interest in a composition than simply centering the feature would.
Rule of third
Aligning a composition with these points creates more tension, energy and interest in the photo than simply centering the feature would.
Pencil sketches
• Main goals for homepage
• WCCCI Mission statement
• 3 push marketings
• Big masthead w/ call to action
• consistent nav structure
• Use crossed out rectangles for photos
• Use lines for text
Layout in Photoshop
Layout
• Design Principles
• Colors
• Grids
• Colors
Design Principles
• Emphasis - hierarchy of importance
• Contrast - visual differentiation of two elements
• Balance - visual weight
• Alignment - arrangement of elements
• Repetition - repeated elements to create unity
• Flow - path of a userʼs eyes through the page
Colors
• Color palettes are based on mood boards @kuler.adobe.com
• Use the Color Palette Generator - generate color combinations from key photographs @deGraeve.com/color-palette/
Hug - warm and friendly
Handshake - somber, professional
Lofty - light, airy, calming
Grids
Grids
• A reliable system for presenting information
• Grids present
• Ordered hierarchies
• Proportional relationships
• Clear visual paths.
Grids constraints
• screen resolution 1024 wide x 768 tall
Grids constraints
• Approximately 974 px wide by 650 px tall
Grids constraints
• take away left and right margins
• Approximately 960 px wide by 650 px tall
Grids constraints
• 9 columns spanning 96 px per column
• 12 px gutter space
Grids constraints
• 9 columns spanning 96 px per column
• 12 px gutter space
Comps
Comp 1
Comp 1Hug - warm, friendly
Comp 2
Comp 2Handshake - somber, serious
Comp 3
Comp 3Lofty - light, airy, calm
Final Comp
Final Comp-Combining the layout of comp 3 and color scheme of comp 1
Photoshop
Header
Nav & Masthead
Photoshop - header
Nav & Masthead
Gradient box
• rounded rectangular tool with 15px radius• click on “fx” icon at
bottom of Layers• choose gradient overlay
Push boxes
Push boxes
Resize rounded corners
• select layer• “command” & click on
“Vector mask thumbnail” in Layers to select box
• “command” + shift to select corners• “command” + T to resize
Push boxes
Clipping mask
• draw a rectangular box• Layers menu• Layers Style• choose “stroke”
Clipping mask
• place image layer on top of shape layer• select image layer and
right click on mouse• choose “Create Clipping
Mask”
Clipping Mask
Conclusion
• Define the problem and establishing constraints
• Conceptualize
• Layout
Part 2: From Comp to Code
Jason Garber
Questions?
top related