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?