|
Lesson 7 - Creating a template & template explanation - Designers review mock ups with Instructor during lab
designers attend
10/1
This class has 2 portions - the one on one meeting with the
deisgners and the instructor to reivew each unique design,
and a general lecture on how to turn a mock up into a template
of lisced images and HTML code.
ONE ON ONE MEETING WITH THE INSTRUCTOR
Each designer will
schedule a 30 minute appointment with the instructor to review
their mock ups with Linda. This will occur during lab time
from 4:30-7 and 9-10. The forms listed below will help with
this process. Please bring your PSD files for the home page
and second level pages. If your site requires 3rd or 4th level
mock ups bring those as well. If you would like to review them
with me before the meeting, please put the mock ups on the
web as JPEGs or GIFS and then send me an email with the URL.
Designer Schedule Form
Schedule
of Appointments
Designers often ask me what happens during these meetings.
Well I usually look over the mock ups you have prepared and
offer advice or point out any problems I see. Sometimes I will
recommend a change which I feel makes for a more effective use
of space or a color scheme adjustment.
Lynn Crawford has allowed me to use his work as an example
of a layout adjustment. When he first showed me the second level
mock up this was his design.
Original second level mock up
There were several wonderful features to Lynn's design. He
had captured the "circuit board" look which the client
had requested, he was using the Santa Rosa Junior College campus
colors of red and blue, and the design was clean and simple.
My concern was that the navigation took up the upper half of
the page and so there was not much room for content on the second
level pages. Placing navigation at the top of the page is can
be problematic since it takes up extremely valuable screen real
estate and if the navigation expands then the area for content
shrinks.
I suggested that Lynn place the navigation along the left side,
while keeping the circuit board image at the top. The site name
and page location could be placed over the circuit board keeping
the electronic these. However by moving navigation to the side,
the content could be placed higher on the page. Finally, if
the navigation grows the left side has plenty of room to accommodate
the expansion without cutting into the content area.
This is the revised second
level mock up
Here is the mockup of the opening screen in which the navigation
is the primary design element and having it take up most of
the page is fine. My concern on this page came from the rollover
of text, which occurred when you rolled over each main category.
The heavy amount of text over text seemed messy.
Electronics home page
I suggested Lynn have the rollover text appear in the area
of "Welcome to the World of Tomorrow".
Reading about these changes and seeing how they were implemented
makes the process seem calm, logical, and easy. Well.... it
doesn't always work out that way. Lynn was extremely open to
my suggestions, the clients suggestions, and teammate feedback.
This attitude will help him succeed as an employee or an independent
contractor. Some designers become very defensive when suggestions
are made by the instructor, client, or team. When you get to
close to your work and become emotionally attached to the design,
trouble is sure to follow.
The purpose of this meeting is to point out problems early,
before the code has been written. I encourage you to be flexible
with the design, sometimes a little move here or there can make
a big difference.
LECTURE ON CONVERTING A MOCK UP TO A TEMPLATE
The lecture topics covered will include:
- slicing strategies
- converting the ImageReady code to usable HTML
- nested tables
- answer any question you may have about the templates
- Review Template explanations done by previous students
and answer any questions you have about the assignment.
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)
Designer Tips
Designers often create a mock up which need to
be modified to slice correctly.
- Try and make up a design which uses as few images as possible
and reuses images whenever you can.
- Nudge elements if needed so the slicing is efficient and
simple
- name all slices so images can be located easily
- use alt tags on all images
- refer to the storyboard for the link locations
- optimize images as gifs or jpegs as needed.
Review this web page which lists the step
by step process for moving from a mock up to a template
You may also want to review these nested table links
nested table overview
creating nested tables in Dreamweaver
example of a website that will crack without nested tables
CSS
file for the site
Creating a stretchy table
Content for these teaching materials were developed by Linda Hemenway.
If you have questions or comments on the material I can be contacted through
lhemenway@santarosa.edu
(707) 527-4855
Web site design by Jessica Hirsch - jessicahirsch@email.msn.com
Funding for these notes provided by Project FIVE and Project
PICTS supervised by Doug Garrison - Dean of the Petaluma Center.
This course is a core requirement for several Web Development Certificates.
Learn more at the Web Certification
site.
The CIS Department offers courses in the following areas: computer basics,
applications, graphics, web development, productivity, networking and programming.
Visit the CIS Web site.
|
