What I’m Building: Art and Art History Redesign: Part 4 Degree Page Elements and Content
In my last post, I wrote about Initial Sketches and Page layout. At this stage I will use our content management system’s “playground” to build each page offline and experiment with content types as solutions to the limitations and constraints. Once I have built each page, it will be a matter of migrating the content to the live pages.
One of the most important pages to design is the degree page. As we have learned from our analytics analysis, our target audience navigates directly to degree pages from our search bar. This means we need to pay careful attention to the language we use on our page for the best SEO. We also need to include all of the elements that the university has mandated for inclusion on this page.
We will need to include:
- a call to action,
- the degree summary
- program description
- application information
- learning outcomes
- links to degree requirements
- transfer information
- ranking information
We have decided to include:
- alumni testimonials
- Department contact information
- Link to the events calendar
- Entrance requirements
- Careers outcomes
- Unique banner
- 2 hero images
We may also include:
- Additional opportunities
- Study abroad
- Honors
- Specific course offerings
- Internships
- Exhibitions opportunities
Zones:
The site has three zones: A (central), B (right) and C (Left).

In our web layout and structure explorations, we have decided to eliminate left hand navigation and so we will be working with a layout that just included zones A and B.
After much experimentation, I will be using the following basic web structure:
Banner | |
Horizontal Navigation | |
Hero Image | Call to action |
Degree Description | Degree Requirements |
Secondary Image | Program of Study |
Secondary Description | Alumni Testimonial |
Learning Outcomes | Ranking Information |
Portfolio review information | Contact Information |
Technical/Equipment information | Calendar of Events link |
Emphasis/ Honors Information | |
Internships and Careers | |
Exhibition Information | |
Transfer Call to Action | |
Standard University Footer |

Which once I chose the content items from the types available in our CMS, we have this as a basic structure:
Of course when we are optimizing this for mobile we are working with a single zone. So our chart will look like this:
Banner |
Horizontal Navigation |
Call to action |
Degree Requirements |
Program of Study |
Hero Image |
Degree Description |
Secondary Image |
Secondary Description |
Alumni Testimonial |
Learning Outcomes |
Portfolio review information |
Technical/Equipment information |
Emphasis/ Honors Information |
Internships and Careers |
Exhibition Information |
Transfer Call to Action |
Ranking Information |
Contact Information |
Calendar of Events link |
Standard University Footer |
I will use this basic pattern to create the photography, Digital Design, Art History, and Visual Art Degree pages. Standardizing this content will also serve another function. Departmentally we have many content contributors, and this will allow us to standardize how we check for updates. It will be easy to create a form that says: “Check your alumni quote, your primary content, images, and submit any updates to the web manager.”
Overall, I am pleased with this layout and I think we are going to have an exciting page that informs our target audience.
Next steps:
Project Management: Identifying and collecting content, teaching others how to write for the web, introducing a sprint.