|
Designer Overview
During the meeting I hope to accomplish the following tasks:
- discuss the designer schedule and responsibilities
- define the terms "mock up" and "template" and review
deadlines for each
- answer any question you may have about your role as
Designer
- if you have met with the client, clarify the client needs
and analyze how the Web site design can meet those needs
- share contact information so that designers can form
an online support system to help each other during the
class.
DESIGNER LINKS
Class
Milestones - use
this document to help you organize
your time and energy.
Class Meeting
Schedule
Designer
Pitfalls -
this list of previous problems may
save you time and aggravation
Designer Sampler Page
Examples of the sampler pages
others designers have made
Sign
up for Comps meeting with Linda you can wait a few
week to do this
Schedule
of meetings with Linda
Designer's Responsibilities
Client Meeting
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
Attend the client meeting.
Make sure you leave with a clear
idea of the purpose of the site.
If possible leave iwth a rough
flow chart of the pages so you
can get an idea for the type of
navigation you will need.
Try and analyze your clients style
and determine how much they want
to be involved in the design process.
Do you have a free hand in the
design? If you are following a
template, which parts are required
and which parts allow for your
our creativity? Is there a color
scheme, logo, or image that must
be included? If the client shows
you a site that is crude and unprofessional,
gently suggest that one of the
sites you have located might be
more appropriate and explain why.
Use a gentle touch with the client.
Do not say anything negative about
their current site. If they criticize
their existing site, simply state
that you think you can improve
the design and give the site a
more professional, sophisticated
look.You never know who made the
current site and you do not want
to offend that person or a coleague.
Find out how involved the client
wants to be in the design. Do they
want to see the mockup as soon
as you have it ready, or will they
accept whatever you present at
the Web Proposal meeting. Some
clients are uncomfortable making
artistic decisions while others
want a to provide great deal of
input. Ask them to bring whatever
images might be useful to the content
meeting.
Relax and enjoy the experience.
This is a great group of people.
The clients are grateful for your
help, your teammates want to like
you. Everyone is nervous and a
bit confused - it will wear off
in about 18 weeks. :->. When you
attend the meeting dress in appropriate
business attire (suit and tie is
not necessary but maybe one step
above student grunge). If the client
seems really casual you can wear
whatever you want to the subsequent
meetings, but it never hurts to
look professional the first time.
Develop a plan for folks who are
late to the client meeting.
One final note - In rare cases
the client will ask for sonething
that is just awful. You can try
and explain why tht concept will
not work, but sometimes they do
not respond. In one case we had
a client who insitited on a specific
look - a purple page with a wheel
of fortune spinning navigational
wheel. In this case the designer
gave them what they asked for,
plus 3 attractive options. The
cleint abandoned the orgiginal
idea after seeing the other options
and the team produced an attracitve
and easy to use site Learn
more here.
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 the design
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 simulation
of what the finished web pages will look like, it
is not an actual web page. The mock up will have
the colors and if possible the logo of the client,
but the mock up will be only 1 page. If you [lan
on using a unique image for every page those images
are not presented in the mock up, just 1 page is
shown to the client. You may also have fake text
in the mock up, the actual content will be placed
by the CD. The
designer will produce mock ups for the opening screen,
a second level page and any 3rd level or non-standard
pages if they are needed for the site. After the
client approves the mock up the Desinger creates
instructions for how to make the other pages, and
produces any additional images which are needed to
create the site.
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 any images
the HTML code and the CSS file. It can be built in
Dreamweaver, FrontPage or GoLive or hand coded in
an HTML editor.Please validate the page to make sure
their are no XHTML or CSS errors in the code, before
you pass it on to the CD. I wouyld prefer that you
validate to XHTML 1.0 Strict.
You may design with any of the
millions of colors which can be
found in Photoshop - there is no
need to stick to 216 Web safe co,ors.
If you decide a page which has
a fixed width make it fit on a
screen with resolution of 800 by
600.
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.
Layout will
be done in CSS - nested table
layout with slices is no longer
supported by the program.
Template
must work in current versions
of IE, Firefox, Opera, and
Netscape and one previous version.
The sites must look acceptable
in each of these browsers, they
do not need to look identical,
that may prove to be an imposible
task. All pages must
pass the validator at http://validator.w3.org/
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.
JOY'S TEMPLATE AND IF POSSIBLE
THE 3 EARLIER VERSION
TEMPLATE CODE
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
|
