Concept To Comp RefreshDC 09 2008
0 likes318 views
The document outlines a two-part presentation by Nguyet Vuong and Jason Garber focusing on developing the WCCCI website from concept to code. It discusses the goals, user objectives, and design constraints for the site, emphasizing the importance of visual tone, navigation, and content to enhance user engagement. Part two addresses the transition from design comp to coding, with technical details and methodologies for implementation.
Concept To Comp RefreshDC 09 2008
- 1. From Concepts to Code A two part presentation Refresh DC by Nguyet Vuong and Jason Garber nguyet@newwaydesign.com Jason@sixtwothree.org
- 2. My name is Nguyet I like Vietnamese subs
- 3. 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
- 4. Part 1: From Concept to Comp The WCCCI website
- 5. WCCCI - original homepage
- 8. Where to begin? • Establishing some goals • Conceptualize • Layout
- 9. Establishing our goals • Design Solutions begins by • Defining the Problem • Establishing Constraints
- 10. WCCCI - original homepage • Text heavy, nothing stands out • inconsistent navigation on top and on left. • Mysterious user login.
- 11. 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?
- 12. 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.
- 13. Users objective Learn about WCCCI and their work with children, get updated news on on-going projects and get involved.
- 14. Keeping users interested Providing engaging and in-depth content
- 15. encourage users to return Regularly updated content like news, photo galleries, and messages from Betty Williams through her blog.
- 16. Establishing constraints • Content outline • Text based navigational structure • Visual Tones: warm, friendly, caring, light • 3 Push marketings (whatʼs up with 3?)
- 17. Whatʼs up with 3?
- 18. Rule of Three • Fundamental of how humans process • Three is the smallest number of objects that create a pattern • Combining pattern and brevity sticks
- 19. Homepage Goals Set goals for the homepage design
- 20. 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.
- 21. WCCCI - original homepage
- 22. Homepage Goals Goal # 2 : What do you want users to do? • News & Events • Centers of Compassion • Get Involved
- 23. Homepage Goals Goal # 3: Provide consistent, global navigation structure
- 24. Conceptualize
- 25. Conceptualizing • Identify Your Users • Early Explorations • Develop Pencil Sketches
- 26. Identifying Users • Market Research • Looking at Competitors • Creating Personas
- 27. 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
- 28. Early Exploration • Mood Boards • Separate concept from form • Build consensus in large groups • Involve more people • Prototype rapidly
- 29. WCCCI logo
- 30. Some mood boards Visual tones - warm, friendly, compassionate, caring, light creating a warm, visual tone with various shades of blues for contrast
- 31. Some mood boards Visual tones - warm, friendly, compassionate, caring, light calming, muted visual tone with various textures and shades
- 32. Some mood boards Visual tones - warm, friendly, compassionate, caring, light reserved, somber, pensive visual tone.
- 33. Pencil Sketches • Thatʼs right, I said “Pencil” • Visual wireframe thumbnails • Rule of Thirds
- 34. Rule of third Aligning a feature with these points creates more tension, energy and interest in a composition than simply centering the feature would.
- 35. Rule of third Aligning a composition with these points creates more tension, energy and interest in the photo than simply centering the feature would.
- 36. 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
- 38. Layout • Design Principles • Colors • Grids • Colors
- 39. 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
- 40. Colors Hug - warm and friendly • Color palettes are based on mood boards @kuler.adobe.com Handshake - somber, professional • Use the Color Palette Generator - generate color combinations from key photographs Lofty - light, airy, calming @deGraeve.com/color- palette/
- 41. Grids
- 42. Grids • A reliable system for presenting information • Grids present • Ordered hierarchies • Proportional relationships • Clear visual paths.
- 43. Grids constraints • screen resolution 1024 wide x 768 tall
- 44. Grids constraints • Approximately 974 px wide by 650 px tall
- 45. Grids constraints • take away left and right margins • Approximately 960 px wide by 650 px tall
- 46. Grids constraints • 9 columns spanning 96 px per column • 12 px gutter space
- 47. Grids constraints • 9 columns spanning 96 px per column • 12 px gutter space
- 48. Comps
- 49. Comp 1 Comp 1 Hug - warm, friendly
- 50. Comp 2 Comp 2 Handshake - somber, serious
- 51. Comp 3 Comp 3 Lofty - light, airy, calm
- 52. Final Comp Final Comp- Combining the layout of comp 3 and color scheme of comp 1
- 53. Photoshop
- 54. Header
- 55. Nav & Masthead
- 57. Nav & Masthead
- 58. Gradient box • rounded rectangular tool with 15px radius • click on “fx” icon at bottom of Layers • choose gradient overlay
- 59. Push boxes
- 60. Push boxes
- 61. 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
- 62. Push boxes
- 63. Clipping mask • draw a rectangular box • Layers menu • Layers Style • choose “stroke”
- 64. Clipping mask • place image layer on top of shape layer • select image layer and right click on mouse • choose “Create Clipping Mask”
- 65. Clipping Mask
- 66. Conclusion • Define the problem and establishing constraints • Conceptualize • Layout
- 67. Part 2: From Comp to Code Jason Garber
- 68. Questions?