Art-420 / Project-3 : Adaptive Web Design | Spring 2015

Posted by: Ping

Project Description
Design (or redesign) a fully functional adaptive website for an AIGA local chapter

Project Objective

The goal of producing the website is to learn about Adobe Muse CC 2014 by directly working in the software and learning its working process. The final goal of the project is to learn the AWD process and create a fictitious AIGA chapter website for a local AIGA club.

Project Concept

To produce a site concept for home page and website with an effective and interesting navigation system that enables visitors to get a quick understanding of how maneuver around the completed website. Your designs should include every element and detail that an audience would need to establish realistic and beneficial interaction.

Project Requirements of AWD

  1. Create 9-16 (380 X 570) layouts through master pages for a low resolution viewport (smartphone, e.g. iPhone)
    (an iPhone 6’s 4.7″ Retina Display could reach a resolution to 326 ppi / 1334 X 750)
  2. Create 9-16 (768 X 1024) layouts through master pages for a medium resolution viewport (tablet, e.g. iPad)
  3. Create 9-16 (1920 X 1080) layouts through master pages for a max resolution viewport (desktop, e.g. 21.5″ iMac)

Project Specific Requirements

  1. Design a functional and compliant website on desktop, tablet, and mobile versions
  2. Create a drop-down menu for a main navigation system
  3. Create a slideshow
  4. Create a list of activities
  5. Create a contact form
  6. Involve a video
  7. Add a social media widget
  8. Work with Typekit web fonts

Requirement of Mock-up Layouts

  1. Each team chooses three best designed web pages among all of your web pages. Based on those three selected pages, create one mock-up layout for each selected page (4200 X 3000 for each)
  2. Display each mock-up layout with multiple devices/viewports. (Click to check the Mockup Layout Examples)
  3. Add the URL of your website at the center of cover page of your pdf document (Helvetica 12 pt)
  4. You are not required to print the layouts, but place three mock-up layouts through InDesign, then export one pdf file into your project folder (Display URL on the cover page, then place three mock-up layouts through page 2 to page 4)

Project Working Process and Student Learning Outcome
In the process of building the website, students will learn the following

  • To create web pages by using Adobe Muse CC.
  • To learn the process of adaptive web design.
  • To learn digital page layout technique in emerging media.
  • To learn other related software, such as Dreamweaver CC, Photoshop CC and Illustrator CC that assist in building website.
  • To publish the website to a personal URL.

Project Type: Collaborative Project

Project Due Day: April 16, 2015
Date Range: March 24 – April 16 (3 Weeks)

Technology: Adobe Muse CC 2014 (8.3)
Adobe Muse is an emerging medium by Adobe Systems. The application is allowing designers to create websites for desktop, tablet, and phone platforms. It is available through Adobe Creative Cloud subscription.