Designer's Responsibilities

Contribute questions to the client questionnaire. These are quesions you want to ask at the first meeting.

Create a designer sampler which you can use to show the client the various design options. - due by first client meeting
Designer Sampler Page
Examples of the sampler pages others designers have made
Meet with client to determine what they want for the look and feel of the site, do they have images you must use, a color scheme, etc.

 

Meet with instructor for Comps presentation - 10/1
A comp is a picture of what the finished web pages will look like, it is not an actual sliced web page. During this meeting the instructor will be viewing the PSD files for the opening screen, the second level pages and any 3rd level pages or non-standard pages. At this stage of the development cycle the PSD files are not sliced and there is no working HTML. You need to meet with your instructor and set up a 30 minute appointment to review the mock up. Appointments for this are available from 4:30 - 10:00 pm in 30 minute increments. You will bring in your PSD files for the opening screen, second level pages and any addtitional pages which need a unique design. Here is the form you can use to sign up for a meeting time.

Sign up for Comps meeting with Linda you can wait a few week to do this
Schedule of meetings with Linda

Create Comps, a creative brief and a portion of the deliverable. All 3 of these elements are part of the Web proposal which is presented to the instructor and then the client for approval

Comps(80 pts) DES - A mock up is a picture of what the finished web pages will look like, it is not an actual sliced web page. The mock up is flattened GIF or JPEG which is created in Photoshop and then optimized for display on the Web. The designer will produce mock ups for the opening screen, a second level page and any 3rd level or non-standard pages. After the client approves the mock the PSD images will be sliced and rebuilt using HTML and Javascript code.
learn more about comps
review design standards

Deliverables - you will provide information on the graphics portion of the deliverables page. Pass this along to the CD who will compile it into the final deliverables document. Be specific about what you are providing, what type of navigation, how many photos, are there various logo sizes, if there is a slide show - how many images are included, etc.
Review the graphics section of these deliverables
SRT - http://www.sonic.net/~webclass/BusWeb/srt-del.html
Petaluma Arts Council - http://www.thedrexlers.com/final/deliverables.html
TLT - http://www.sonic.net/~webclass/TLT/deliverables.html
Friends House - http://www.sonic.net/~webclass/BusWeb/friends/deliverables.html

Creative Brief [10] DES - This document serves as a written explanation and justification for the design you created. Often a large client will receive more than just graphical mock ups, they will have a multi page proposal which explains how this design ties in to the existing corporate look and satisfies the company goals for the web site. Creative Brief examples

present to instructor by 10/15 present to client by 10/22 [20 points]

Template Code - 10/29.
This is a more sophisticated version of the comp design created earlier, which included sliced images and HTML code. It can be built in Dreamweaver, FrontPage or GoLive or hand coded in an HTML editor. The code must be written so that content can be added without having the table crack. Images in Photoshop which display text need to be converted to HTML text, if a CSS file is to be used you need to create it.

The code only needs to be created for 1 second level page and a template explanation that explains how to make the additional pages needs to be included.

Template Explanation - due 10/15

Guidelines for creating a template explanation
Template Explanation - created by Linda Hemenway as a sample

examples of former student's template explanations

Joy Olsons Template - HTML, CSS and images
Template Explanation

Sally Archambault - Template - HTML, CSS, images, videos
Template Explanation (Word file)

Vickie Garwachki - Betty BioDiesel HTML. CSS, images
Template Explanation (PDF)

Create the splash screen (if one is required) - due 11/26. Create the index.html file - due 11/26

Test the site with the client - due 12/10
Please note that classmate testing begins as soon as the site is complete, I recomend you contact the client by 11/26. Keep track of your hours so you can assist the PM in creating a bid Assist in client handoff process due 12/17
Provide Web images, Templates and original PSD files to PM so they can be placed on hand-off CD. Provide written explanation of the images involved in the project which will be incorporated into the Client's Website Manual.

Special Note - If you are a designer who is working as a Project Manager you will need to design a home page and second level pages, navigation, color scheme and text formatting standards for the Web Project site.

Design Standards Site will be designed so that all navigation, the site name, and logo will fit on an 800 by 600 monitor (I recommend a width of 760-780 pixels to allow for a scroll bar along the right edge.) Millions of colors may be used Template must work in current versions of IE and Netscape and one previous version. All graphics must have alt tags Links must work if Javascript is disabled.

---

Examples and Explanations of the Comps process
A comp is a flattened GIF or JPEG which is created in Photoshop and then optimized for display on the Web. The PSD file will have numerous layers, however the JPEG or GIF will be a single image which is a snapshot of the finished site. If rollovers are planned they do not work at this stage.

It is a good idea to give the client a choice in design options. Creating 2-3 variations on the theme can sometimes make it easier for them to find a look they like. Presenting them with 5-7 options may prove confusing and overwhelming.

Weights & Measures Comps these comps created by Doyle Woodruff offered the client a few similar looks which were refined to a final design.

BATO Comps Sometimes the designer creates one layout and varies the color scheme. In the case of BATO by Linda McBee she created 3 looks which were very similar and had different color schemems

Puente Comps - is another example of a single layout with color variations. Bonnie Chun did an outstanding job of using color to create a sophisticated and attractive site.

Theatre Arts Comps.In some cases the designer creates 3 very different and unique looks which are not variations on a common theme. This was the case in the the Theatre arts department design. Each of the comps had a unique layout, photos and color. This is more work for the designer and is not required for the class. Having said that, some designers feel they achieve a better product as they move from one layout to the next. In the case of Theatre Arts the comp was the one chosen by the client.

Creative Brief Explained
This document has several uses functions. It serves as a written explanation and justification for the design you created. Also it helps the client understand the design and appreciate the finer points of your work. Finally it can help a future employer learn about your design rationale and appreciate your artisitic point of view.

Guidelines for the Creative Brief
HCA example
SRJC Culinary Academy
ArtQuest