Mobile Website Design

View Pages: Homepage | Landing Page

For the SMC mobile redesign, I first focused on the content and structure of the site because I felt it could be better organized to feature both business-type activities like viewing fees and enrolling for classes along with explore/play features like a news feed and social media. This is why I ended up including one category for “Corsair Connect” which would be where students could log in and access the following links:

—Enrollment Services (shown in the demo):

i. View Class Schedule

ii. Check available Classes

iii. Add a Class

iv. Drop a Class

v. View Fees Assessment

vi. Pay Enrollment Fees

vii. Apply for Fee Waiver

viii. View Transaction Receipt

ix. View Unofficial Grades

x. View Student Records

—Purchase Parking Decal (below frame – not visible in the demo)

—Request Satellite Decal (below frame – not visible in the demo)

—View Profile and Preferences (below frame – not visible in the demo)

The other links on the homepage include a wide range of activities like accessing a campus map with parking information, a direct link to emergency services, news/event feed, Google Mail/Docs/Calendar, and more.

For the look-and-feel of the site, I tried to keep it as consistent with the main campus site as possible by incorporating their blue and gold colors, trebuchet font (used on the main site), and blue swoosh design (as seen in the header on the main campus site). I also incorporated the use of icons to the homepage to add visual interest and hopefully aid in finding links more quickly. I also made sure to make the lines 44 pixels apart but it was challenging to fit all the links on one screen on the homepage with this format.


In my initial web design comps (as seen here), I wanted to create one clean and classical design direction that could appeal to users of all three programs within the department (the yellow/gray site) and one that was purely graphical (the black and neon colored site). After my group critique it was decided that the navigation and overall interface of the more clean approach would work best for a department that needs to appeal to students and faculty attending the Entertainment Technology Program, Interior Architectural Design Program, and Graphic Design Program.

In terms of navigation, I tried to keep it as simple and straightforward as possible. I housed the 3 programs within one drop down navigation which allows students, faculty, and parents of students to quickly find information on their program of interest. I still can’t decide if the programs need an introductory landing page or not. I like the idea of it because I feel like the landing page as it is right now is a bit underwhelming for a design school. And, it could serve as a nice introduction to each program for prospective students who are not familiar with them. But, I also think that a programs.html page might seem a bit gratuitous when all the introductory information you need can be found directly on the “Overview” page of each program. I also included a “Why SMC?” navigation page which would act as an “About Us” page. I thought this page could be extremely important for both prospective students and their parents.

In terms of the look and feel of the site, I wanted to keep it clean since we are trying to appeal to 3 different program audiences. I chose the mustard color as my “pop” color because I think it is a nice accent off the main SMC page. I see it as more of a toned down version of the gold SMC color. While we don’t want our department to follow the look of the main campus page, I also think a little bit of commonality can be good since we do need to link back to the main site for information on things like “admissions” which will be a frequently used nav button. On many of the competition school graphic design sites, I found it to be jarring when you were navigating through their interface and suddenly linked back to the main site which was totally different in every way. I think a little bit of color consistency (even if it’s a different shade of the main site’s color) can help to unite the program under the SMC umbrella.

To view my completed midterm project, go here



What are wireframes?
Wireframes (aka ‘page schematics’ or ‘content layouts’) are non-design oriented sketches showing a rough layout of elements on a page. It serves as guide to let the designer know where to place navigation, logo, headers, main content, etc. They show hierarchy of information but do not represent how the information will appear graphically.

When do you not need to define key user paths?
If your site does not require the user to do anything task-oriented (like filling out forms or placing orders), you do not need to define key user paths. If you are trying to get users to complete a task like placing an order, defining the path they might take when navigating through the site – from finding the product to filling out forms to completing the order – is important. You want to make sure the path to placing and completing that order is easy and clear so as not to annoy the user and risk having them abandon their order.


What is a “site map?”

A site map sets the structure for a website. It is the blueprint upon which navigation and content is structured for a website. This is usually created by the person designated as the “information designer” on a project.

What are the two types of naming conventions that are addressed in the book?

  1. Organizational/Numeric Naming — ie 1.0, 2.0, 3.0, etc.
  2. HTML Naming — index.html, about.html, etc.

What are the “three views” discussed in the book involving the content of the site. And what are the differences between the three views?

This view sets the overall structure of a site (aka – sitemapping).

The Page–View is the organizing view. It is used to organize information on the website in a logical and meaningful way.

This view is the relationship of the pages to one another and considers how a user will navigate the site.

What is a “content audit?”

A content audit is a time to take a close look at every piece of content on a website and determine if it’s necessary to include on your redesigned site, and to help reorganize content in a more logical manner on the new site. This is typically something a client will do.