Website Layout Homework Mary ET Boyle, Ph.D. Department of Cognitive Science UCSD

Transcription

1 Website Layout Homework Mary ET Boyle, Ph.D. Department of Cognitive Science UCSD

2 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.

3 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.

4

5 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.

6 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.

7

8

9 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.

10 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

11

12

13 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

14

15

16 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.

17

18

19 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.

20

21

22 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.

23

24 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.

25

26

27 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.

28

29 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!

30

31 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.

32

33 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.

34

35

36 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.

37

38 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

39

40 Save and turn in File name: o cg3xzz-layout-design.psd Location: o public_html/images