SMC Design Tech Test Site Demo

Process behind the alpha presentation

The planning and research went well with the project,  so much paperwork were not anticipated; as it turns out, this is a big project with tons of content, a lot or restructuring and unusable outdated content and images with a difficult goal of combining three distinctive ET, GD, IAD programs into one DT site. But after completing each preliminary research/step, the end results triumphed. Overall, the pre planning stages prime the stage for organizing this site.


After extensive research and laborious competitive analysis, the sitemap was painstakingly completed. The wireframes and the organization went smoothly. After more reviews, some unneeded pages in the sitemap were combined because of page redundancies and overlap.

The Sitemap

The website’s structure conforms with the strict grid format in sets of three columns or the “three bucket ” system created for GD, ET and IAD into one DT for organizing contents. This made it simple to organize the contents especially for the five main navigation landing pages. Initially, there is a jQuery sliders included in all the pages which is a bit much (but makes a stunning visual impact for presentation) which can be easily taken out since it resides in its own container div.

The Wireframes

At this time these are just two levels of navigation working only in the main navs., from point home (1) to the landing pages (2) which does not really give any real content. The real contents are usually in the third  or fourth levels since the landing pages are just that: a secondary introduction page similar to the home page.

The Front End

The design trends in new 2011 web design sites:

  • modern/very clean
  • spacious/roomy/lots of breathing room for fonts/images
  • minimal/sparse
  • lots of white with debossed textures and shadows
  • a big background image

The minimal concept–lots of white and lots of space for fonts to breathe is used for this site. Aller font from cufon, with its skinny elegant nature is embedded. The look and feel are contemporary, modern and open to satisfy the multi user personas.

  • The logo: Good Times–sans serif with its  roundish, open and contemporary feel
  • The color palette: the school colors of SMC  blue(turq) and white (lots and lots of the very palest grey and white combos and shadow texture) and an accent color of pale ocre yellow and pale green .
  • The images: the hues and saturation are changed to give the distinctive overexposed golden glow uniform in all the pages.

The Navigation

  • Main nav (all pages)in header–home, programs (with a dropdown for ET, GD, and IAD), about, faculty, gallery
  • Secondary Nav (all pages)in top right of header–prospective student, current student, admissions, alumni, and SMC corsair
  • Content Navs –in the body but consistently placed and organized for quick links to other pages
  • Tertiary Nav (all pages)above footer–mobile app, SMC corsair, facebook, twitter, rss
  • Footer Nav (all pages)-extended wide footer is used for usability ease and additional SEO potential

The Back End

The latest HTML5  CSS3 and  jQuery in conjunction with web kit and java script are used for this alpha presentation. This worked well in the latest new browsers like IE 9, Chrome,  Firefox over 4.0 versions. HTML5 is great, but there are still problems with browser cross-compatibility because the site’s CSS styling breaks for users with older browsers/computers.

The site is tested in the following:

  • Firefox 3.5 3.6 3.7 –CSS styling breaks in Mac or PC
  • Firefox 4 and above including 7–Works in Mac or PC
  • Chrome –Works in Mac or PC with newer processors
  • IE 8 — some CSS breaks –Windows XP do not support the latest HTML 5, CSS breakdown
  • IE 9 –Works great in Vista and Windows 7
  • Safari — Works great
  • Opera –Works great
For this site with the its potential multi-users not having the latest browsers and computers, HTML5 and CSS3 potentially could be limiting, so perhaps, this technology on the back end will have to change to strict HTML standards for more access as a recommendation.

The Screen Shots

(Main Nav landing pages: Home, Programs, About, Faculty, Gallery)

The Home Page:(Click image to go to actual live demo)

max macapagal

Programs Landing Page(Click image to go to actual live demo)

About Landing Page(Click image to go to actual live demo)

Faculty Landing Page(Click image to go to actual live demo)

Gallery Landing Page(Click image to go to actual live demo)

Advertisements
By max macapagal Posted in Posts