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

1. THE CREATIVE PROCESS
OC WORDPRESS WEB DESIGNERS MEETUP 07.01.2013

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. 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. IT STARTS WITH
THE FIRST CALL

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. PAPER BY FIFTY THREE
iPad app for sketching down ideas
Robert Nienhuis The Creative Process @nienstudios

7. WIREFRAMES

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. 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. MY CHOICE
Illustrator & InDesign
Robert Nienhuis The Creative Process @nienstudios
ui8.net
Wireframe kit

11. GET INSPIRED

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. TYPECAST.COM
Compare 23,000 webfonts | Side-by-side
HTML & CSS Output | Mini style guide
Robert Nienhuis The Creative Process @nienstudios

14. INSPIRATION BOARDS – DROPMARK
Private boards | Share with clients
Add images, website links, and videos
Robert Nienhuis The Creative Process @nienstudios

15. THE DESIGN PROCESS

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. 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. 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. DESIGN PROCESS
2 home page designs
Typically final comp is a merging of the two designs
Robert Nienhuis The Creative Process @nienstudios

20. General Page Design | Any additional page designs
2 rounds of design revisions
Robert Nienhuis The Creative Process @nienstudios
DESIGN PROCESS

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. 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. DESIGNER’S BLOCK

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. FINAL THOUGHTS

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. nienstudios.com | @nienstudios
THANKS!