3.20.2009

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
  • DON'T FORGET THE MESSAGE!

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

Labels: , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

2.16.2009

Developing a Development Plan

The Essential Steps for Designers & Developers to evaluate projects

Often the most difficult aspects that businesses offering development and design services tend to face involves the planning stages. Because I, myself, have noticed the all too often occurrence of problems as a result of poor planning, I thought it was important to outline and discuss important planning steps for design & development projects in today's post.

  1. Step 1: Client Questionnaire. The client questionnaire is a multi-page document with in-depth questions covering all sides of the development process. This document will determine the rough scope of work and relevant information to that as well as the website budget and timeline. Aesthetics, purposes, goals, points of contact, and add-ons need to be encompassed in the client questionnaire. For assistance creating a client questionnaire, see Big Slick Design's article 46 Questions for a web design project. Also be sure to use your own personal experiences when developing a questionnaire. For example: I have encountered many people who simply did not feel capable of creating their own website or brochure content. Because of this, I included a question in my client questionnaire about whether they would be capable of creating their own content. I also gave them brief information about the fees associated with content assistance below the question so they could make an informed decision. Click on the image below to view The Design Group's client questionnaire for web development clients. The Design Group's Client Questionnaire for Web Development Projects
  2. Step 2: Brainstorming. Following the receipt of the completed client questionnaire, the onset of the brainstorming stage begins. This step involves individual brainstorming sessions. One of the most efficient ways to go about this step is to make copies of the completed client questionnaire for each person to separately read over and take notes on any questions, concerns or ideas that arise while doing so. This course of action prevents groupthink which can be detrimental to the development process.
  3. Step 3: Group Discussion. After each individual team member has gone over the questionnaire thoroughly, a group discussion should ensue. This allows for all concerns to get out in the open and tentative planning stages begin to form. No one's ideas or concerns are to be ignored or brushed off, and no one should be left out of the conversation. It is important that any foreseen issues are reconciled at this stage and all potential problems are troubleshooted. This prevents potential issues from squeezing through the cracks and prepares the team for the requirements meeting.
  4. Step 4: Requirements Meeting. The requirements meeting is a meeting where the team sits down with the client and discusses a plan of action. Each side clarifies any ongoing concerns and the design/development team begins to get more of a first-hand feel for what the client is looking for. While some discussion during the requirements meeting will come from the answers found in the client questionnaire, some discussion should be unique to develop project clarity and a common ground for the project scope.
  5. Step 5: Statement of Work (SOW). Before any actual design or development work begins, a bulletproof contract outlining the basic information about the project ought to be created. This contract should be signed by the client and kept in your files for legal purposes. The Statement of Work ought to cover the project scope, special features, basic design elements (colors, etc.), browser testing or printing specifications, schedule, hours and fees. The Statement of Work also serves as the foundational element of the Project Outline.
  6. Step 6: Sitemap. This step can be skipped in design projects that do not require any website development work. The Sitemap is simply a diagram of all website pages and a guideline for site navigation. Sitemaps can be color coded and quite detailed (which often brings the need for a key), or they can be simple representations sketched out on paper. I find that to help everyone on the development team throughout the project, a detailed sitemap is the way to go. You may review the sample sitemap below (which happens to be a sitemap I used for a client) for basic guidelines and ideas. The Design Group's sample sitemap
  7. Step 7: Design Wireframe. The project wireframe will outline the design of the project and is important for conceptual purposes in regards to both the design/development team as well as the client.The Design Group's Sample Wireframe The wireframe supplements the sitemap to create an informative bundle that allows the team and the client to visualize the website on the whole. It also brings to light those potential issues that have somehow squeezed by in the last six planning steps. This wireframe will additionally be serving as the premise for the mock-up design.
  8. Step 8: Project Outline. The project outline is based on the foundation set by the Statement of Work, but emphasizes more of the aesthetics and specific functionality of the project. It can be divided into sections, some of which ought to be included: project goals, timeline, colors, typefaces, logos, features, pages, user testing, and programming. This not only specs out this distinct areas of the project, but it also builds your SOW into a detailed project plan for the design/development team to reference.
  9. Step 9: Team Approval. Perhaps one of the most important steps in the process, the Team Approval Phase involves members of the team evaluating the sitemap, wireframe and project outline for its accuracy and documenting any issues that remain items of concern. It may seem repetitive to do this at this point, but this allows for everyone to approve all aspects of the project one final time, and identify any growing concerns before they get out of hand. This stage also presents the team with a more vivid picture of where the project is heading.
  10. Step 10: Mock-Up Design. The final preparatory stage in the design/development process involves the translation of the wireframe into a clean and accurate mock-up design. This stage is the culmination of the planning process and should accurately depict the design and functionality proposed in the last nine steps.

Labels: , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments