The Creative Process – OC WordPress Design Meetup

1,598 views

Published on

A brief overview of the creative process we use to help with the design of websites.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,598
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

The Creative Process – OC WordPress Design Meetup

  1. 1. THE CREATIVE PROCESS OC WORDPRESS WEB DESIGNERS MEETUP 07.01.2013
  2. 2. ROBERT NIENHUIS Co-owner of Nien Studios Design & Creative Co-organizer of WordCamp Orange County Designer / Front-end Developer Designing websites for WordPress since 2007 nienstudios.com | @nienstudios Pronounced 9-house
  3. 3. A LITTLE TEENY, TINY DISCLAIMER Regarding the word “The” in “The Creative Process” Everyone’s creative process will be different for different types of projects The process shown here is the process I’ve pieced together from trial and error, and focus on website design Robert Nienhuis The Creative Process @nienstudios
  4. 4. IT STARTS WITH THE FIRST CALL
  5. 5. QUESTIONS, NOTES, SKETCHES Listen to the client, write down questions Establish goals of the project and target audience(s) If ideas start happening, jot / sketch them down Robert Nienhuis The Creative Process @nienstudios
  6. 6. PAPER BY FIFTY THREE iPad app for sketching down ideas Robert Nienhuis The Creative Process @nienstudios
  7. 7. WIREFRAMES
  8. 8. WHY WIREFRAMES? Determines content and functionality needed Creates a basic layout of the website before design begins Great for determining Responsive layouts Allows client, designer, and developer to be on the same page Robert Nienhuis The Creative Process @nienstudios
  9. 9. WEAPON OF CHOICE Many different options to use for wireframes Robert Nienhuis The Creative Process @nienstudios Wireframe.cc Free, premium coming soon Balsamiq One-time fee Other popular systems: Mockingbird, MockFlow, Illustrator
  10. 10. MY CHOICE Illustrator & InDesign Robert Nienhuis The Creative Process @nienstudios ui8.net Wireframe kit
  11. 11. GET INSPIRED
  12. 12. LAYOUT, TYPE, COLOR, & IMAGES Layout / Design Elements Dribbble, PatternTap, Behance, Pinterest Typefaces Dribbble, LostType, House Industries, FontShop, Typekit Color kuler.adobe.com, Pantone Matching System Images Instagram, Google Images, iStock Photo Robert Nienhuis The Creative Process @nienstudios
  13. 13. TYPECAST.COM Compare 23,000 webfonts | Side-by-side HTML & CSS Output | Mini style guide Robert Nienhuis The Creative Process @nienstudios
  14. 14. INSPIRATION BOARDS – DROPMARK Private boards | Share with clients Add images, website links, and videos Robert Nienhuis The Creative Process @nienstudios
  15. 15. THE DESIGN PROCESS
  16. 16. USING GRIDS “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” Josef Müller-Brockmann via www.thegridsystem.org Robert Nienhuis The Creative Process @nienstudios
  17. 17. USING GRIDS Robert Nienhuis The Creative Process @nienstudios Helps determine width & height of each element on the page Helps anchor content for a better flow of the website Easy to determine percentage for fluid / responsive websites
  18. 18. USING GRIDS Robert Nienhuis The Creative Process @nienstudios Making and Breaking the Grid Timothy Samara Discusses grid basics Type treatment and grids Breaking the grid
  19. 19. DESIGN PROCESS 2 home page designs Typically final comp is a merging of the two designs Robert Nienhuis The Creative Process @nienstudios
  20. 20. General Page Design | Any additional page designs 2 rounds of design revisions Robert Nienhuis The Creative Process @nienstudios DESIGN PROCESS
  21. 21. The subtle details are going to make your design stand out Think about how you can style: Headers (h1, h2, etc.) | Side Bar elements Images | UL and OL | Comment system | Background Robert Nienhuis The Creative Process @nienstudios DESIGN DETAILS
  22. 22. If you want your designs to turn out perfect on the front-end, prep the files yourself and callout CSS styles CSS Hat | Enigma64 For proper guidelines on how to prep designs, refer to: Photoshop Étiquette Robert Nienhuis The Creative Process @nienstudios FINISH STRONG
  23. 23. DESIGNER’S BLOCK
  24. 24. Take a break For me, a walk, video game, movie, or Disneyland (just something to take your mind off the project) Work on something else Sometimes the solution happens while working on a different project Collaborate Ask or hire someone you respect to help (be open to someone else’s critique, use it to make your work stronger) Robert Nienhuis The Creative Process @nienstudios WHAT IF YOU GET STUCK?
  25. 25. FINAL THOUGHTS
  26. 26. Keep up to date on trends Dribbble, HOW Magazine, PRINT, Comm Arts, CMYK Keep on task Wunderlist, or other task managers Be confident with your skills, but keep learning Code Poet, SkillShare Robert Nienhuis The Creative Process @nienstudios KEEP WORKING AT IT
  27. 27. nienstudios.com | @nienstudios THANKS!

×