Website Layout Homework

Website Layout Homework
Mary ET Boyle, Ph.D.
Department of Cognitive Science
UCSD
Use Photoshop to design!
• Design the look of your website using Photoshop.
• Pay particular attention to the dimensions of your image
• (use pixels as your units)
• your resolution would be best at 72 pixels per inch
because that is the monitor resolution for your webpage.
This is an example:
The instructions are basic layout suggestions.
You will be most successful if you keep the dimensions as suggested
You can use your own JQuery functions to animate your page
If you follow this layout, make sure that you follow the size of the “accordion”.
Rulers and guides
• View rulers and guides.
• Ruler units are best in inches.
• Guides will be placed to help you line up your page
elements.
• You will use that information in the next part when
writing your css page.
Background color
• Select a websafe color for your background.
• Fill in a layer – label it “background” in Photoshop.
• When you select your color – keep track of the color that
you are using – you will want to know the hexadecimal
color reference.
• The color picker is a handy tool for you to get that
information.
Add depth and reflection
•
Optional – hint – work with different layers to maintain flexibility.
•
You may add some artistic elements to your page –
•
Apple uses the gel buttons or the metal-look
•
Think about the overall look that you want to achieve.
•
Keep it subtle and not distracting.
•
Reference your pop art assignment if you want help with some of
the tools and techniques.
The following set of slides will provide an example of how to add depth and to your background
idea
Use your look and color scheme
Design your logo & images • Design your logo and image that reflects your style
• Be creative – as you design a logo, look at products
that you use and think about what makes that logo
good (or not so good!)
• Make a logo layer
Design your footer
• Pick a color that is complementary to your page.
• Be sure that you note the hex color number.
• The footer will be present on every page and will
contain links to your pages as well as copyright
information.
Your footer fonts and colors
• Pick a font that works for your style page.
• You will need to know that name of that font for
your style sheet later on.
• Pick two colors – a bright color that is associated
with your active page and a default color.
Main area of page
• Use a shape to define the main area of the page.
• You will need to note the hex color number of this
area too!
• Make your page visually appealing.
Button navigation bar
• Add your button navigation bar.
• Use shapes as shown below.
• You can use layer transparency to make it
interesting from a design perspective.
Make your active button
•
You will need to make an active button for each of the buttons in
your navigation bar.
•
Pick a contrasting color.
•
Add dimensionality if you want to be more artistic.
•
Think of font colors - perhaps you have two colors – one for the
default button color and one for the active button- or change in
style between the active button and the default button.
•
Keep track of the font colors that you are using.
Add your button labels
•
Use your layers!
•
Line them out nicely and pay attention to the little details –
center them – keep them on one line (perhaps use a guide to
help you!)
•
Use a font that is readable (and available on the web)
•
Think about a default font that a browser might use if it does not
have your preferred font available.
•
Plan ahead!
title
• You can name it anything that works for you.
• I require that you have your account on the page
so that it can be graded properly.
• Again – use layers and organize them into folders so
that your are not overwhelmed.
Content section
•
Design how the content is going to look.
•
Webpages are more readable when you have text in columns like a
newspaper - not straight across a page.
•
For this assignment – have three areas of text.
•
Think about the graphic elements that would go along with them and
incorporate them in your layout.
•
Notice how the guides are set to line up the text areas?
•
Hint: keep the size of your text box the same for all of them.
Search bar
• You will be adding a search bar to your page later
in the assignment.
• Best to design one now.
• Add an icon and features consistent with your page
design.
• Use a guide and note the location.
Download the Photoshop file for tab animation
•
Insert the layers from the Photoshop provided for the tab animation
section.
•
Please keep the size and number of tabs the same for simplicity sake.
•
The file name is:
o accordion-photoshop-file.psd
•
You can change the tab color to suit your design.
•
The text and font on the tabs can also be changed.
•
Three of the tab elements should be associated with work done in
this class
Save and turn in
• File name:
o cg3xzz-layout-design.psd
• Location:
o public_html/images