The Creative Process – OC WordPress Design Meetup
-
Upload
nienstudios -
Category
Design
-
view
103 -
download
0
description
Transcript of The Creative Process – OC WordPress Design Meetup
![Page 1: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/1.jpg)
THE CREATIVE PROCESS
OC WORDPRESS WEB DESIGNERS MEETUP 07.01.2013
![Page 2: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/2.jpg)
ROBERT NIENHUISCo-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
![Page 3: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/3.jpg)
A LITTLE TEENY, TINY DISCLAIMERRegarding 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
![Page 4: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/4.jpg)
IT STARTS WITHTHE FIRST CALL
![Page 5: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/5.jpg)
QUESTIONS, NOTES, SKETCHESListen 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
![Page 6: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/6.jpg)
PAPER BY FIFTY THREEiPad app for sketching down ideas
Robert Nienhuis The Creative Process @nienstudios
![Page 7: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/7.jpg)
WIREFRAMES
![Page 8: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/8.jpg)
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
![Page 9: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/9.jpg)
WEAPON OF CHOICEMany different options to use for wireframes
Robert Nienhuis The Creative Process @nienstudios
Wireframe.ccFree, premium coming soon
BalsamiqOne-time fee
Other popular systems: Mockingbird, MockFlow, Illustrator
![Page 10: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/10.jpg)
MY CHOICEIllustrator & InDesign
Robert Nienhuis The Creative Process @nienstudios
ui8.netWireframe kit
![Page 11: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/11.jpg)
GET INSPIRED
![Page 12: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/12.jpg)
LAYOUT, TYPE, COLOR, & IMAGESLayout / 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
![Page 13: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/13.jpg)
TYPECAST.COM
Compare 23,000 webfonts | Side-by-side
HTML & CSS Output | Mini style guide
Robert Nienhuis The Creative Process @nienstudios
![Page 14: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/14.jpg)
INSPIRATION BOARDS – DROPMARK
Private boards | Share with clients
Add images, website links, and videos
Robert Nienhuis The Creative Process @nienstudios
![Page 15: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/15.jpg)
THE DESIGN PROCESS
![Page 16: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/16.jpg)
USING GRIDS“The grid system is an aid, not a guarantee.
It permits a number of possible uses and eachdesigner can look for a solution appropriate to hispersonal style. But one must learn how to use the
grid; it is an art that requires practice.”
Josef Müller-Brockmannvia www.thegridsystem.org
Robert Nienhuis The Creative Process @nienstudios
![Page 17: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/17.jpg)
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
![Page 18: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/18.jpg)
USING GRIDS
Robert Nienhuis The Creative Process @nienstudios
Making and Breaking the GridTimothy Samara
Discusses grid basics
Type treatment and grids
Breaking the grid
![Page 19: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/19.jpg)
DESIGN PROCESS
2 home page designs
Typically final comp is a merging of the two designs
Robert Nienhuis The Creative Process @nienstudios
![Page 20: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/20.jpg)
General Page Design | Any additional page designs
2 rounds of design revisions
Robert Nienhuis The Creative Process @nienstudios
DESIGN PROCESS
![Page 21: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/21.jpg)
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
![Page 22: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/22.jpg)
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
![Page 23: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/23.jpg)
DESIGNER’S BLOCK
![Page 24: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/24.jpg)
Take a break
For me, a walk, video game, movie, or Disneyland(just something to take your mind off the project)
Work on something elseSometimes 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?
![Page 25: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/25.jpg)
FINAL THOUGHTS
![Page 26: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/26.jpg)
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
![Page 27: The Creative Process – OC WordPress Design Meetup](https://reader033.fdocuments.in/reader033/viewer/2022051613/54c831b24a7959e93d8b4670/html5/thumbnails/27.jpg)
nienstudios.com | @nienstudios
THANKS!