Login




Forget password?
Create new account

Template Mockups

I've put together a few simplified mockups of templates to help you get an idea of what is possible in terms of layout. For the purposes of this assignment, you should give more detail than in these mockups, but take a look at the different options presented here. You can probably come up with some variations on these ideas yourself.

As you put together your mockup, don't forget to include a "skip to main content" or "skip navigation" link!

Logo in upper left, main navigation in a horizontal list below logo, subnavigation or extra links in a left column below the main navigation, main content to filling the largest space to the right of the subnavigation, and footer horizontally on the bottom

Same as above, but with sub-navigation to the right and main content on the left

Same as above, but with no sub-navigation column

Main navigation in left column instead of in a horizontal list; no subnavigation

Main navigation on the very top, above the logo in a horizontal list; subnavigation on the left in a column below the logo

Same as previous example, except there is no subnavigation column, and the logo takes up the full width of the screen, right below the main navigation

Same as above, except that the logo is first, taking up the full width, then the main navigation, also taking up the full width horizontally.

Logo is first, taking up full width; main navigation is in left column, next to the main content on the right, with footer on the bottom, taking up the full width

Same as above, except that the main navigation is on the right, and the main content is on the left

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.