Website Creation: STEP 1 – Design

JekkilekkiStep 1 – Design

This is the 2nd part of a 4-part look at my website creation process. Here I will present a list of the Design steps I generally take as I progress through any website creation effort. Hope you enjoy my list!

1. Research

  1. Design Brief – Request an initial design brief or meeting to clarify the desires of the client (I have a 5-page questionnaire that I sometimes use for this purpose).
  2. Inspiration #1 – View a collection of images/websites presented by the client which they like/dislike (for a better understanding of what the client wants).
  3. Branding – Take into account any existing logos, colors, or images that “brand” the client and think/talk about how to incorporate them.
  4. Functionality – Discuss and research site functionality options such as jQuery, menus, JavaScript, Flash, and so on.
  5. Inspiration #2 – Seek further inspirational images, sites, posts, to begin deciding what elements, styles, designs, or icons to incorporate into the design to capture the “feeling” the client hopes to invoke in viewers of their site.
  6. Data Collection – View the client’s currently existing site (if present), including all content on the site, all body text and images, and gather all that into one location (folder) from which to work once I begin designing.

2. Rough Drafts and Sketching Layouts

  1. Sketchbook – Bust out the handy sketchbook and start sketching 2-column, 3-column, 4-column, non-traditional layouts (usually using the “Rule of Thirds”).
  2. Page Elements – Roughly sketch the placement of elements on the page: logos, images, icons, and so on.
  3. Graphics – Roughly sketch (new) logos or (additional) graphics if necessary.
  4. Choice Sketch – Choose the best 3-4 (handful) layouts and sketch them out more neatly adding details, flourishes, textures, and so on.

3. Color Scheme Planning and Generation

  1. Brand Colors – Look at existing logos, images, or graphics to help determine basic colors of the brand (i.e. blue).
  2. Color Research – Research and think about what certain colors “say” (i.e. blue=professional feeling; white=purity, simplicity; in China red=lucky) and the image or feeling the client wants to express to their viewers and users.
  3. Fresh Colors – If the site is a redesign, try to find a way to make the existing color scheme “fresh” -> if not a redesign, try to find a way to make the chosen colors (blue) “original”.
  4. Color Scheme Generator – Use a color scheme generator to help find contrasting, complementary, triad colors, shades, tints, and so on.
  5. Color Palette – Build a color palette including brand colors, main site colors, basic font colors, link colors, border, background, and so on.
  6. Block Layout in PS – Build a basic block layout in Photoshop and try out a few different variations of colors in the layout blocks (to get a feel for what it could look like).

4. Photo editting and Graphics creation

  1. Image Collection –  Collect (or find, research, note, prepare) all photos available for use by this client (anything that shows what they do, who they are, where they’ve been, anything that defines them).
  2. Image Creation – Work up additional graphics in Photoshop (or Illustrator, for vector graphics) based on my earlier ideas and sketches.
  3. Image Editing – Retouch, edit contrast, take care of red-eye on the images that I’ll use in the main sections of the site (as page graphics, not in the photo album).
  4. Image Splicing – Sometimes I need to splice together two or more images to get the look I want, so I cut images and graphics and edit them together to create one larger image.

5. Photoshop Mock-ups

  1. Typography – Consider typography now as well. What kind will work best? Professional, Fancy, Graphic, Futuristic, Serif, Sans Serif, etc.
  2. Headings vs. Body Text – I often consider 2-3 different styles of typography for the sites, i.e. one kind for headings (maybe serif), one kind for body text (maybe sans serif), one kind for the logo or page heading (maybe fancy), and so on.
  3. Adding Elements in PS – I have my block layouts from my sketching sessions earlier, I also have most of my graphics made and collected, and most of my body text collected (from the research and collection phase), so it’s time to make good on that. Start to layout the elements on a page image in the existing block layout.
  4. Background – I also need to consider the background of the site: a pattern, texture, gradient, image, etc -> then make it.
  5. Finishing Touches – Finish placing all design elements on the page: images, textures, text, etc -> be sure colors, sizes, placement are all right and look good. Save the finished .PSD and make a .jpg image in a design folder for the client. One down.
  6. Additional Pages – Create additional content pages the client has specified, using the elements I’ve already gathered. (Pages can number anywhere from 1-10 additional pages). Save those, and add the .jpg images to the design folder for the client.
  7. ZIP and Send – ZIP the design folder containing the initial design mock-ups and send it all via email (with a nice note describing in detail everything I’ve done and incorporated) to the client and wait for feedback.

6. Redesign and Changes based on Initial design feedback

  1. Receive Feedback – Based on the initial mock-ups I send to my clients, I will almost always have some changes to make: from minor color changes, to huge overall layout changes (but major overhauls are usually call for an extra fee).
  2. Revise and Send – Send the second/third/etc mock-ups to client for feedback.
  3. Rinse, Repeat – Often, clients want to get the image “perfect” before signing off on the design. This often amounts to very minor changes with a slight text or color variation. I am usually happy to oblige and send updated designs.
  4. Sign Off – Approve the design.
  5. Receive payment
  6. Transfer design and copyright
  7. Ready for Code

Wow. All that work, and we’re only 1/3 of the way there. I’ll be honest when I say that this part of the process usually takes a minimum of one week (sometimes even up to one month) -> and that’s with me putting in 3-8 hours of work per day (I teach English in Korea full-time as well).

<– Go back to part 1

Continue to part 3: Code –>

What about you?

I’m still learning, and working to improve my speed and skills with web design. Is there anything here you particularly agreed with or found helpful? Or anything you disagreed with? Or perhaps you have additional tips to help improve the website creation process as a whole? Please leave me a comment!

4 Responses to “Website Creation: STEP 1 – Design”

  1. And Here I Thought IE 6 was Broken « Aaron Snowberger’s Home Abroad Says:

    […] share of headaches over these past few months. Every time I make a website, I have a process: from design, to code, and finally to fixing my code (particularly for IE). Wouldn’t it be great if just […]

  2. Jackson Says:

    Very good posting. Looking forward to seeing you write much more about this subject.

Leave a Reply to Website Creation: STEP 2 – Code « Aaron Snowberger’s Home Abroad Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: