Roles Defined - designers
This lesson is devoted to clarifying the role of the Designer. During the meeting I hope to discuss the following topics:
- prepare for the first client meeting
- help develop a communication plan
- attend the first client meeting
- work on a design for the site
- meet with instructor for comps presentation
- contribute to the web proposal
- develop template code and a template explanation
- create the home page and splash page if there is one
- visit this page to get a laugh and gain some perspective http://theoatmeal.com/comics/design_hell
at the Designer meeting......... - share 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.
Prepare for the first ClieNt meeting - Review the client questionnaire and add or modify any questions you feel are required to obtain information about the site and it's design.
Review the client's existing Website and become familiar with it's content, logo, photos, and current design. You may also want to research other web sites of a similar subject to gather ideas. Finally you may also want to find 2-3 sites which have a look and feel you think would work well with this client. these sites may be about the same subject or not.
Prepare a designer sampler which you can use to show the client the various design options. This page will not only help you with the current client, it will help you if you decide to do freelance Web Development. Clients often do not know what they want until they are shown an example.
HELP develop a communication plan - The most common problem among teams is a lack of communication. Since some of our students will be participating online it is essential that everyone set aside time to check their email and respond to it. Please make sure that you clearly understand your responsibility regarding team communication and feel comfortable with it.
As the class progresses and issues arise, I always refer to the team communication plan before trying to resolve the issue.
It is also essential that you get a sense of how to effectively communicate with the client. Do they want to see several design options or only one? Will they review the site during the production phase or wait until it is done? There are not any right or wrong answers here, just confusion vs clarity.
Attend the first client meeting - Make sure you leave with a clear idea of the purpose of the site. If possible leave with a rough flow chart of the pages so you can get an idea for the type of navigation you will need. This will eventually become the storyboard.
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 own 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.
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.
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 colleague.
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 something that is just awful. You can try and explain why that concept will not work, but sometimes they do not respond. In one case we had a client who insisted 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 client abandoned the original idea after seeing the other options and the team produced an attractive and easy to use site. See wheel of fortune and attractive mock ups.
work on a design for the site - This process varies from team to team. Some designers have a private design meeting with the client. Others may send email with URLs and use email or the phone to gain client feedback. In other groups the client may have given the designer "carte blanche" to proceed with the design (this is rare, don't count on it). Designers may ask for feedback from their team, the instructor, or other colleagues. Feel free to send me a note if you are stuck or confused.
Meet with instructor for Comps presentation - A comp is a picture of what the finished web pages will look like, it is not an actual HTML / CSS code with any images that need to be made.
During this meeting the instructor will most likely be viewing the PSD files for the opening screen, the second level pages and any 3rd level pages or non-standard pages. We will discuss a strategy for recreating the PSD file in CSS.
In some cases the student is more comfortable creating a comp with CSS instead of in Photoshop. the decision is up to each designer.
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 additional pages which need a unique design or CSS / HTML for these pages.
To sign up for an appointment to meet with me, visit the class message board and select "Show Comps to Instructor" remember the password to the message board is "messages"
Contribute to the Web Proposal - The designer will create the storyboard, page mock ups or comps, a creative brief, and send the CD the design portion of the deliverables.
Storyboard - This is a series of boxes which are a picture of the site. Use one box for each page to show the hierarchy of the site. view Friends House example
Comps - 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 De singer 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 these deliverables || SRT || Petaluma Arts Council || TLT || Friends House ||
Creative Brief - This document serves as a written explanation and justification for the design you created. 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 artistic point of view.
Guidelines for the Creative Brief || HCA || SRJC Culinary Academy || Art Quest
Finally you will need to obtain the client's sign off on the design. Hopefully you have communicated with them since your first meeting, and they will accept your design.
Develop Template Code and a template explanation - The template is created using HTML, CSS, and all required Web images. This code can be built in Dreamweaver or hand coded in an HTML editor. Please make sure the template meets the site design standards.
You will provide code for 1 second level page and a template explanation which will explain how to make the additional pages. All images needed to make the second level pages will be included. If there are 3rd level pages or other pages which do not fit the second level model, code and images for those pages also need to be provided.
During the meeting I will validate the code (HTML, CSS, 508) and look it over to see if anything seems odd. I will review the template explanation to insure that it is complete and easy to understand. Although our meeting is for 30 minutes, if you and the CDs want to remain and discuss the template, feel free.
Template code examples
WRS template code - Joy Olson
Template Explanation (Word file)
Wilowside Template - Sally Archambault -
Template Explanation (Word file)
Betty Biodiesel Template - Vickie Garwachki
Template Explanation (PDF)
Create the home page and splash page if there is one - All designers will create the home page if it does not follow the model of the second level page. If there is a splash page the designer may make it or may assign it to someone else on the team. This is especially true if the splash page has Flash.
I encourage the designers to work on the second level template code first. Than after that is handed off, you can work on the index or splash pages.
Answer Production Questions - As the CDs begin to work with your template code they may have questions about CSS, the use of header, images, etc. make yourself available to them, but don't pester them. It can be hard to let go of the site, but page production is the responsibility of the CD.
Test the site with the client - For some groups the client testing is the first time the client has seen the actual site, while in other groups the client has been viewing the site during the production process. You will contact the client, provide them with testing questions, and create a report based on their feedback.
Contribute to the final bid - Keep track of your hours so you can assist the PM in creating a bid. The WorkLog document may help with this task. Work Log (Word)
Assist in client handoff process - Provide Web images, Template code and original PSD files to PM so they can be placed on hand-off CD. Provide a written summary of everything you have contributed to the Client's Manual.