Creating a Design Concept

Customizing your Project's Design Direction

When it comes to designing anything from a website to an advertisement, it is pretty easy to lose track of your concept along the way. You can start with a BMW Mini and all the sudden find yourself in the midst of a project resembling more of a Daewoo than the quality German Engineered vehicle you were trying to portray. Often times it can be pretty easy for a designer to lose focus of the foundational elements of a design project, which allows this sort of 'design sidetracking' to happen. If you are a professional/unprofessional designer who often finds themselves in this circumstance, today's post should serve as a constructive tool for you. Today I will be discussing an in-depth design process to assist designers in maintaining a consistent project direction and concept while staying aligned with the goals and substance of the project.

  1. Color Scheme - If you are designing for a company, you will probably want to use the colors the company has already used to brand themselves. If the company does not have distinct colors yet, or their colors are somewhat felxible, I recommend checking out Adobe Kuler, an excellent color scheme resource, to pick your appropriate color scheme.
  2. Typography & Fonts - Usability is often a function of (among other things) legibility - a direct function of typographic styling. The importance of typography simply can not be ignored on a website or advertisement. Several of the most important aspects: Font, size, weight, line spacing, paragraph spacing, color, and hierarchy. These aspects can be varied somewhat throughout a project, but varying too many and/or too much can make the project lose consistency and redundancy - two pretty important design principles. Usually I don't use more than two fonts per project (potentially 3 if the logo is a typographic logo). Also, don't forget to evaluate your content when working with typography for a website or advertisements. If you have a ton of info, stick with a more simplistic, legible font, with fairly consistent styling throughout. If your content is lacking, often times you will want to dress it up a bit- widen your spectrum of fonts, and maybe throw in a few fun fonts and styling. For more information check out the Periodic Table of Fonts, or Six Revision's article on Typography Tools. You can also check out my previous resource post which features several more Typography Resources.
  3. Theme - Whether you realize it or not, pretty much every design project has a overriding theme present in its elements. A popular theme on the web is the Web 2.0 look, which tends to be identified with usability, legibility, icons, gradients, and reflections: see image. Other sample themes include Grunge: see Von Dutch; Retro/rounded: see Moose or Tutorial 9; Authentic: see Glocal Ventures; Class Act: see Live at Sandstone; and Bubbly/Animated: see Brian Handley Design.
  4. Supplements to the theme - Theme upplements include background images, textures, fabrics, patterns, whitespace, etc. Included in this is establishing your primary aesthetic direction: for example, will you be using straight lines with sharp points or circles, bubbles and rounded edges? Will your page feature drop shadows, reflections, gradients, etc? See Digital Web's Principles and Elements of Design for more ideas and suggestions for supplementing your project theme.
  5. Images - Your next step is to choose your image style. Will you be posting photographs on your page? If you are going for a classy portfolio look, photos are often a good way to supplement your theme. If you have a Retro theme, or a bubbly/cartoon theme, you probably will skip the photos and stick with Animations/Cartoons. Another big portion of this step is icons. If you are using a grunge theme, icons can be pretty hard to incorporate (although Smashing Magazine shows us some great grunge icons). If you are using a web 2.0 theme, icons are practically a no-fail.
  6. The Hierarchy - Establishing your hierarchy will not only help you establish your design, but it will also clearly define the most important aspects of the page/ad. Your hierarchy will be used to establish dominance for the most important aspects of your design, and emphasis to the key features. A company logo usually tends to be at the top of any design hierarchy. The logo is often (but not always) followed by the navigation. After the navigation tends to be the purpose. This can seem like it would be at the top of the hierarchy, yet if you are advertising car sales and the consumer can not remember who the company was in the advertisement - instead they simply remember some dealership that sold cars, you are not going to be the dominant thought in their head when they go out car shopping. The hierarchy goes into every detail of the design, and should be aligned with each element. The hierarchy is also very important in establishing a 'Call to Action,' which you can read more about in Boagworld's 10 Techniques for an Effective Call to Action article
  7. One of the most important steps in designing a website (designers can skip this step unless dealing with annual reports or books) is to characterize the navigation. When we characterize the navigation we are evaluating the amount of content we have, the number of sections in each category, and primary versus secondary navigations. At this point the designer needs to begin thinking more about his/her layout. Will there just be one primary navigation? This is good for a company who wants just a simple brochure presence with 'home' 'about' 'portfolio' and 'contact,' but once you step into territory above 5 -8 pages, categorization is pretty much a necessity. Possible navigations scenarios include drop downs, top navigation, side navigation, tabs, subnavs, page specific navs and more.
  8. Design Inspiration Resources - Based on what sorts of details you chose in the last steps, you can use design inspiration resources to see how other people have used these elements successfully in their designs. Remember never to use a resource as a template. To produce quality work, elements of uniqueness are incredibly important. But sometimes the work of others can serve to inspire and guide our design by generating ideas for the use of particular elements. For some great design resources, be sure to visit my post on the Top Design Galleries
  9. Template Resources - If you are still not quite there, template resources may help you better define places for specific elements on a page. Using the information you now know about your navigation, fonts, color scheme, you can begin constructing page layouts, and templates will often offer ideas on how to perfect them. Although I don't recommend you use an exact provided template (that kind of ruins the whole 'custom project' concept), you can use various templates as inspirtation to create your own unique wireframe layout. For CSS based web design templates, be sure to check out 101 Quality CSS & XHTML Free Templates from 1st Web Designer.
  10. Mock Up - Now you are prepared to use all the elements you have so carefully established to create a unified artistic vision for your project.

Elements to keep in mind:

  • KISS - Keep it Simple, Stupid!
  • Never ignore the concept of Usability

Be sure to let me know if you have any additional suggestions by Contacting me.

Labels: , ,

Bookmark and Share
posted by thewebutante at


Post a Comment

<< Home