GDS 271 Interactive Design
Project 2: Museum App
Instructor: Paul Young
To develop conceptual thinking skills. To communicate ideas visually and verbally. To apply design principles to real-world visual communication problems as it relates to web design.
To gain experience designing with Muse, a web prototyping tool for designers.
Design a virtual tour for a special exhibit at a museum or gallery. You may use images and text from current exhibits or existing archives. You may also make up a non-existing special exhibit of your favorite artist (avoid well-known artists or artists who already have a virtual tour published). Either way, you must follow the museum's branding scheme.
The virtual tour will serve as an app to be installed on touch screen kiosks and iPads for museum visitors. The app will also be made available to download to any mobile device.
- 12 pages minimum (including the landing page)
- Must be responsive
- Text: original or edited from public domain sources (i.e. wikipedia)
- Branding: original or copied from existing site
- Art: downloaded from existing site, Photospin or another legal source
- Typography: only clean readable fonts (unless discussed with the instructor first)
Your design must show an understanding of unity, emphasis, balance and color. When appropriate, utilize rhythm and depth as well.
1. Research for inspiration: Research existing museum and gallery websites. Look specifically for examples of clean visual branding, creative concepts, nice images, clean typography, innovative interactivity, and a good overall user experience. Publish your research on your Process Page for discussion (see example). Be sure to link to the site and cite the source.
2. Marketing Research: Research your client. What is your client's background? Who is the target audience? What are their marketing objectives? What does the competition look like? Analyze your research and write a written statement of objectives in the form of a memo (see sample brief ). In describing the "character" of the website, make use of the Vocabulary Wheel as a starting point. Publish your brief as a HTML file and make a link from your Process Page. Email the published link to firstname.lastname@example.org.
3. Develop the concept: In your sketchbook begin to conceptualize ideas for this project (see sample wireframe layouts ). Make at least 10 sketches of all possible directions you might take this project. Draw exactly how you intend to layout key pages of your site using traditional pen and paper or digital tools (try wireframe.cc or Balsamiq ). Edit your concepts down to your best three ideas and share them on your Process Page. Rough out site maps (see examples) as needed to explain your navigation scheme (try Coggle). Publish your wireframes/site maps on your Process Page for critique.
4. Prototype mock-up: Based on the critique of the above, create a prototype "mock-up" of key sample screens in Illustrator and/or Photoshop which will show the "look-and-feel" of the website. Place your art inside a 1024x768 ipad mock-up (one example). Generate web-ready JPEGs of your prototype "contract proofs" and publish them on your personal Process Page for critique. Also develop your site architecture by preparing the text for your website and publish a text-only website (see example).
5. Developing the master page(s): Revise your mock-up as needed, then extract the pixel elements and produce working "master page(s)" with Muse. Publish these page(s) as links from your personal Process Page for critique.
6. Final critique: Revise your "master page(s)" as needed, then produce a fully functional app. Publish your app as a link from your personal Process Page for critique. Prepare a presentation and "sell" the design to the client.
7. Grading: Based on the critique of the above, revise the app as needed. If necessary, make refinements until you are 100% satisfied with the project. Review your Process Page and make sure you have an accurate record of your process. You will not receive full credit for this project if any of the above elements are missing.
8. Extra credit: Submit your project into the annual student show by printing your screenshots and mounting them on foam board. Also prepare a screenshot of the same art (at 100%) and submit your project using the online entry form at gds.parkland.edu/show. Your project may win a cash prize and be published in a showcase of student work on Parkland's website.