Admissions Sliced - Second Level Lesson

For many students this lesson will be an "above and beyond" activity since they may not be slicing up their admissions page. I felt this information would be useful when you began to work on a real Web site.

1. I opened the campus second level mock up - CD > CIS 58.53B Advanced Class > PSD Files > 2nd-level > campus-2nd-roll-sliced.psd. At this point I tried to plot out a strategy for where I would slice. I like to turn on all the rollover effects for the buttons so I can see where the effect begins and ends.

2. As I place my guides I make sure that the rollover images and major page elements are within the grid the guides provide. For example, when I place guides around the "admissions" button I want to make sure the dark blue area is within the guides. When I place guides for the sub-navigation along the left I make sure the blue box has room to display. The guides display in red below:

3. Here are the guides which slice the screen vertically:

1. Separates logo from photos, determines left edge of main navigation bar, separates the sub-navigation from the body text. Note that by slicing the sub-navigation so that there is extra white pixels along the left, the body text will never run into the sub-navigation text.
   
   
2. Separates "home" button from "student services"
3. Separates "student services" button from "admission"
4. Separates "admission" button from "faculty/staff"
5. Separates "faculty/staff" button from "administration"
6. Defines the left edge of the rollover boxes in the lower navigation area
7. Separates "administration" button from "news"
8. Defines the right edge of the lower rollover boxes

4. Now for the guides which separate the screen horizontally:

1. Separates photo strip from section and campus names.
2. Separates names from top of main navigation
3. Defines the bottom of the main navigation
4. Determines the top of the body text and the top of the first sub-navigation item.
5-13. Separates the sub-navigation items
14-18. Separates the lower navigation items

5. At this point I would switch to ImageReady, name the slices, create rollover effects as needed and then access File > Save Optimized As so ImageReady could do its thing.

6. Well let's slow down a little bit and take another look. When I turn on the layers for the "student services" page I find that some of the guides are in the wrong place.

The picture below uses lime green to show the 3 places where the page content changes on the "students services" page.

1. I see a problem in the area where the name "student services" displays in dark blue. The vertical guides which divided the main navigation fell in such a way, that the word "admissions" fell between the first and 3rd guides.

   
   
   The word "student services" is much longer, so the third guide splits it.

   
   
   to solve the problem I would need to add another guide which defined the far right edge of the section name.

   
   
   Before I place this guide, I would need to type in every section name to make sure they all fit. If one of the names does not fit, another option is to move "HEMENWAY STATE UNIVERSITY" over to the right so the section name has more room.

2. The second area of change which is the "student services" button displaying with a dark blue background has no problem with the original slices. I need to make sure that every blue background I create fits into the existing slice pattern, or move the slices.

3. Area 3 is a mess. The sub-navigation text for the admission page is unique because there are smaller text areas below the word "register". I have 2 choices at this point. First, I can redesign the admission page so that each navigational item is on one line and will thus match up with the student services sub-navigation. If I choose this option I need to move all the guides so they line up with the student services sub-navigation. The second option is to create 2 templates, one for the admission page and another for all the other second level pages which will have the text for sub-navigation match the student services mode.

   Neither option is fun or easy. The reason I bring this subject up, is that you will probably find yourself in a similar situation when you create a real Web site.

   There are 2 lesson learned here. One is to keep the design of your site as uniform from one page to the next to avoid these problems. Second, when designating an area of the screen for the section name or sub-navigation, look over the content and type in the biggest word and the smallest word to see how it looks. In the case of the section name I would want to try "news" and "student services".

   Finally I hope this demonstration helps you understand how truly complex these Web site layouts are. I often work with a design for days before I realize that part of the layout will not work for one specific page.

   view the sliced admissions page