Provost Information Technology Office
Academic Services
Website Design Requirements Exercise PT.3 v2.3

Rev. on: 1/4/2016

Website Design Requirements Exercise Part 3 -

Page Layouts & Structured Content

Page Layouts

Page layouts are created for pages that need different arrangement (zones) for the content displayed on the page. You will want to define your Home Page and Default sub/inner-page layouts below at the beginning of this section (unless this has already been done). If you have a need for another page layout, you would describe and design it below (after the Home Page and Default sub-page layout).

We have included several examples of common sub-page layouts below. It is important to note that you will not have all of these shown below, as each one needs to be coded and built by us which takes time and may never be used. They are just meant to show you some examples of what can be done. Of course, after the launch of your site if it becomes critical to create new ones, that can be done at a later time. If you have special layout needs beyond what you decide for your “Default Sub-Page Layout”, you can design or pick one or two more from the options below.

We will need you to re-size the table columns/widths below to represent your preferred layout, add columns (Right Click & Split Cells), remove columns (Right Click & Delete Cells), add rows as necessary, move column walls left or right and type words in the cells/columns to describe the content you need in that zone/area to depict the layouts you need for your page content. Or, if one of the examples below meets your exact need, just identify which one(s), label it, and please delete the rest of the examples that you don’t need. You can also create new tables if you have a layout not shown below. Be sure to type in a Descriptive Layout Name so that PITO knows what type of content pages will use this layout.

The colors below are just an example and do not represent your actual template colors. You will not need to edit the colors below unless you wish to do so. If you do, please reference the Hex or RGB color codes you used if you can (see brand guide color code chart at the end of this document).

Layout Name: HOME PAGE LAYOUT

DEPT NAME/LOGO
Header
Top Menu
Slideshow or Banner
(100% Width)
Welcome / Goal or Mission / Critical Update or News / Call to Action Buttons
(25% Width)
News / (50% Width)
Content Body / (25% Width)
Events
Footer Links / Footer Links / Footer Links
Bottom Footer

Layout Name: DEFAULT SUB-PAGE LAYOUT


Header
Top Menu
(30% Width)
Related Links / (70% Width)
Content Body
All Footer Zones/Rows/Columns From Home Page

Layout Name: (type a descriptive name if you will use this)

DEPT NAME/LOGO
Header
Top Menu
(70% Width)
Content Body / (30% Width)
Related Links
All Footer Zones/Rows/Columns From Home Page

Layout Name: (type a descriptive name if you will use this)

DEPT NAME/LOGO
Header
Top Menu
(25% Width)
Side Menu of related /child page links / (50% Width)
Content body / (25% Width)
Rotating Pictures / Gallery
Success Story Spotlight
All Footer Zones/Rows/Columns From Home Page

Layout Name: (type a descriptive name if you will use this)

DEPT NAME/LOGO
Header
Top Menu
(25% Width) / (25% Width) / (25% Width) / (25% Width)
All Footer Zones/Rows/Columns From Home Page

Layout Name: (type a descriptive name if you will use this)

DEPT NAME/LOGO
Header
Top Menu
(50% Width)
Content Body / (50% Width)
Content Body
All Footer Zones/Rows/Columns From Home Page

Layout Name: (type a descriptive name if you will use this)

DEPT NAME/LOGO
Header
Top Menu
(100% Width) Content Body
All Footer Zones/Rows/Columns From Home Page

Layout Name: (type a descriptive name if you will use this)

Your Notes:

Structured Content

Content that is repeatedly entered and preferred to appear in the same consistent format (look, feel, size, color, etc.) should be structured and configured as a Custom Document Type. Custom Document Types allow you to structure your content so that each time it is entered it behaves like a template; you have a consistent look, feel & behavior. You can typically think of these content types as having associated fields that are consistent with each entry (e.g. Staff Profiles have a picture, name, title, phone number, e-mail address, bio of staff member for each one). Some examples of how clients have used this in the past are: staff bio/profile pages, news articles, events, deadlines, class / professional development descriptions. Normal page content does not need to be structured. Please keep in mind, when you create a document type, you are set in how it displays and it will require PITO development time to modify/change it, so use sparingly.

Doc Type Name: Staff Profile

Jim Kracht /
Executive Director
Office: 200 B3 YMCA Building TAMU Map (Link)
Phone: 979-458-4911
Email:
Bio: Jim likes golf, eating, and all things Academic Success related. Many wonderful background and biographical comments following. Many wonderful background and biographical comments following. Many wonderful background and biographical comments following.

Would turn out looking something like this on the webpage -

Jim Kracht /
Executive Director
Office: 200 B3 YMCA Building TAMU Map
Phone: 979-458-4911
Email:
Bio: Jim likes golf, eating, and all things Academic Success related. Many wonderful background and biographical comments following. Many wonderful background and biographical comments following. Many wonderful background and biographical comments following.

(NEXT STAFF MEMBER WOULD APPEAR HERE)

Please use the tables below to format the content for any special structured content you have including colors, bold, italics, underline, etc. Create a new table below for each custom document type you need. If you do not need any custom document types you may skip this section. Consider Structured content examples also for Views/Transformations of Document Types & Custom Document Types (e.g. news/event summaries or teasers on home page, stand-alone news page of categorized/date sorted news article teaser’s, full view for the entire news article, etc.

START HERE=>Doc Type Name: (TYPE DOCUMENT TYPE NAME HERE)

(add rows and columns here to structure your content, including colors, bolding, etc. for special repeated content types)

Doc Type Name: (TYPE DOCUMENT TYPE NAME HERE)

(add rows and columns here to structure your content, including colors, bolding, etc. for special repeated content types)

Your Notes:

Website Aesthetics

The way your website looks is very important in the design process. Some departments may be limited in the templates available for the design due to pre-determined designs.

One way to personalize the design of your website is by selecting a layout for your content. Even if your website template has been pre-determined, you may still have the ability to choose how your content is displayed on each page. For example, you can choose to have your content on a specific page in two columns or three columns. Every page or sub-page should have a design for how the information will be displayed. A good way to organize this information is to expand your sitemap outline and mark each clickable page with the desired layout for the content. You will design the actual appearance of your page layouts in the next requirements exercise.Here you can specify which pages should have which layouts (3 column, 2 column, 4 column, 2 column-split 20%/80%, etc).

However, most will at least have some flexibility in aesthetics. Background colors, layout colors, button/section colors are all areas where most departments can exercise flexibility. Of course, all color choices must follow Texas A&M University brand guidelines. Texas A&M Branding information and color palettes can be found at http://brandguide.tamu.edu/colors.html.

Brand Colors

The brand guide color palettes provide all approved colors that can be used for Texas A&M department websites. This guide is meant to be read both by row and by column. Colors that run across rows are complimentary (see red boxed row). The short columns provide different shades of the same colors to give depth and texture to your site (see green boxed column). Whereas the entire column contains complimentary colors and shades that are meant to be used together (see blue boxed column).

Your Notes:

Action Item / Assigned To / Due Date /

Page 1 of 10