Concept To Comp RefreshDC 09 2008
0 likes315 views
Don't know how or where to begin a website, or looking to see how others go through the process? In the first of our two part "From Concepts to Code" series, Nguyet Vuong will present the process of designing a website from concepts to comp. She will demonstrate how to give an appropriate look and feel to a website and highlight portions of her design process. She will also cover both technical and creative techniques to get a project in motion.
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 Probona鍖de.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 De鍖ning the Problem Establishing Constraints
- 10. WCCCI - original homepage Text heavy, nothing stands out inconsistent navigation on top and on left. Mysterious user login.
- 11. De鍖ning 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 De鍖ne the problem and establishing constraints Conceptualize Layout
- 67. Part 2: From Comp to Code Jason Garber
- 68. Questions?