Student Showcase

Let’s take a look at any Wireframe a Responsive Website assignments that have been turned in.

How has the layout adapted to different screen sizes, and why? What is the hierarchy and what techniques could be used to achieve that affect?

Palantir Page Layout HTML & CSS

Wireframe Group Project

Work in a group of three (or four) to do wireframes for the content provided below.

As a team, decide on a general approach, then split up the work. One person make a wireframe for a screen at 1200 px or larger. One person for 768 px wide screen and one person for 480 px wide (if there is a fourth person in the group, add 320 wide version).

For this, you are not designing anything (such as color, type, and graphics). You are only thinking about LAYOUT and HIERARCHY. What is most important? and how are you going to get it on the page. You should also think about strategies for not showing all the content at once.

Each person in the group will turn in ONE wireframe for ONE screen size. Ideally, it will be clear that the three wireframes from a particular group go together. Communicate as you work.

NOTE: You do not need to include all the text in the content in the wireframe. The text is provided as a guide to let you know how much content there will be.

Page Content


Top Level Nav
– For Students
– For Staff
– Contact & Getting Here
– Sitemap


Main Nav
– Study
– Research
– About Us
– Business
– Alumni
– Departments
– Visit
– Jobs

Top Content
– Our Colleges (plus, photo & tagline)
– Visit School (plus photo & tagline)
– Free Online Course (plus photo & tagline)
– Postgraduate Scholarships (plus photo & tagline)

Find a Course Form
– undergraduate / postgraduate
– search field
– browse courses A-Z
– browse by department / subject area

Secondary Content
– Top 10 School Story
– News and Blogs
– Nine Unique Colleges
– Featured Video

Third Level Content (all are links except contact section)
1.    Navigation
⁃    Home
⁃    Study
⁃    Research
⁃    Business
⁃    Global
⁃    Alumni
2.    Quick Links
⁃    Undergraduate Degrees
⁃    Postgraduate Study
⁃    University Open Days
⁃    Conference Facilities
⁃    International Students
⁃    University Academics
⁃    Research Collaboration
⁃    Current Students
⁃    Job Vacancies
⁃    Library
⁃    Online Payments
⁃    Students’ Union
⁃    A-Z Index
⁃    Term Dates
⁃    Sitemap
⁃    Student Portal
3.    Social
⁃    Facebook
⁃    Twitter
⁃    Intstagram
⁃    Youtube
⁃    google+
⁃    foursquare
⁃    linkedin
⁃    Weibo
4.    Faculty and Departments
⁃    Arts & Social Sciences
⁃    Health & Medicine
⁃    Management
⁃    Science & Technology
⁃    Departments, Institutes  & Centers
⁃    The Work Foundation
⁃    Ghana
5.    Contact Us
⁃    College Name
⁃    Street Address
⁃    City, State Zip
⁃    Country
⁃    Phone

Fourth Level Content
– Legal Notice link
– Freedom of Information link
– Privacy Notice link
– Copyright Info