The Wireframe should have clean and non-graphic contents, with links functioning to let the client experience the navigation and see the contents in action.
Submit these materials to the client and get sign-off.
Each team member will use the wireframes as a guide to developing a layout. But, first, you will want to explore your creative options.
There is an article from Viget Labs that shows the early creative process they use. It is similar to our Style Board exercise.
The Viget team critiques all the mood boards and the final design is derived from the best of the everyone's Mood boards.
We will emulate the Viget process and everyone will contribute to the Inspiration boards. Individuals will create Mood boards.
Create inspiration boards which are fairly loose. These will have any graphic scraps and designed objects that feel right.
The team will meet to discuss the Inspiration boards to derive a list of target objectives, adjectives, design directions.
Each designer will use the objectives to guide the creation of a Mood Board, putting the objectives into a tangible design.The team will evaluate the M ood Boards.
Since we are all developing our individual portfolios, in addition to solving our client's problem, you should proceed using your best design senses and do not feel shy about using the group as a resource.
Begin with pencil sketches of the page layout. These should be small and quickly created. Indicate the location of the elements, the graphic styles, and the images and typography. Be thinking ahead, how you will divide the space and manage content using CSS.
Translate your rough pencil layout into mockup of the final page, using Photoshop another application. This mockup is a graphic image, not a coded page. Include a plan of the CSS layout you plan to use, and your plan for variable browser viewports and expanding contents.
The page you design will be more beautiful than the wireframes, but it will include the same information and functions. Keep it as simple as possible. The more you add to a design; the less important each element becomes.
This is where we may, or may not use the Slicing tools. Decide how sections of the page mockup will be fit into the page divisions. Use images where needed, and use background colors where possible to keep the file sizes down.
Select the portions of your mockup you need and save them out. The Slicing tools can do this, but be careful. It can be quicker to place guides on the page and select and copy the areas while snapping to the guides.
Add the graphics to your layout. Work slowly and test as you go. It can take a bit of trial and error to pull it all together. Test in several browsers as you proceed.
Meet with your group to check on everyone's progress. You will meet at the end of the process to review your work and make any refinements necessary. Plan your presentation to the client and arrange a meeting.
The clients will be providing information about their company to the design group. The clients should try to help the designers understand who the clients are and what they do. The designers will need to ask a number of questions to best meet the client's web site needs.
When the designers provide clients with plans and planning materials, the clients should give them careful consideration and let the designers know if they are meeting the client's needs.