The Creative Process – OC WordPress Design Meetup

THE CREATIVE PROCESS

OC WORDPRESS WEB DESIGNERS MEETUP 07.01.2013

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

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

IT STARTS WITHTHE FIRST CALL

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


PAPER BY FIFTY THREEiPad app for sketching down ideas


WIREFRAMES

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


WEAPON OF CHOICEMany different options to use for wireframes


Wireframe.ccFree, premium coming soon

BalsamiqOne-time fee

Other popular systems: Mockingbird, MockFlow, Illustrator

MY CHOICEIllustrator & InDesign


ui8.netWireframe kit

GET INSPIRED

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


TYPECAST.COM

Compare 23,000 webfonts | Side-by-side

HTML & CSS Output | Mini style guide


INSPIRATION BOARDS – DROPMARK

Private boards | Share with clients

Add images, website links, and videos


THE DESIGN PROCESS

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


http://www.thegridsystem.org

http://www.thegridsystem.org

USING GRIDS


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

USING GRIDS


Making and Breaking the GridTimothy Samara

Discusses grid basics

Type treatment and grids

Breaking the grid

DESIGN PROCESS

2 home page designs

Typically final comp is a merging of the two designs


General Page Design | Any additional page designs

2 rounds of design revisions


DESIGN PROCESS

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


DESIGN DETAILS

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


FINISH STRONG

DESIGNER’S BLOCK

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)


WHAT IF YOU GET STUCK?

FINAL THOUGHTS

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


KEEP WORKING AT IT

nienstudios.com | @nienstudios

THANKS!