Interactive Design I – Week 9

3 Comments

Session 1: We will start today with a brief post-mortem discussion regarding the Cycling Project. Following that, if you have not yet consulted with me about your final project please do so during our scheduled studio time today. Otherwise plan on showing me your project proposals so far for feedback.

Design Mockup's Look Like the Real Thing!

Session 2: Project Proposals are due today. We will also discuss the requirements for the Design Mockups component of the Final Web Application project. During the in-class demonstration we will look at adapting our template for the final project and creating some secondary navigation items under the primary navigation bar.

Relevant links:
Create a CSS3 Dropdown Menu
Another Simple CSS3 Dropdown Menu
CSS Menu Maker » Dropdown Menus

Assignment 5: Final Web Application (Component 2 – Design Mockups)
Due: Session 2, Week 10 (5% of final project grade)

Description:
Design three mockups of a single page for in-class critiques on session 2 of week 10. Mockups resemble the final web application’s interface and layout while wireframes are simplified boxes and text. Each mockup should include layout, color scheme, typesetting, graphics, and images. The mockups may differ from each other in the following ways: try different color schemes, select different typefaces and typesetting parameters, and experiment with the layout.

Requirements:
1. Design a minimum of three mockups for critique
2. Include distinct layout, color scheme, typesetting, graphics, and images for each mockup
3. Use Photoshop, Illustrator, or HTML/CSS to design the mockups
4. Render the mockups as either web graphics (PNG, PDF, GIF, JPEG) or HTML templates
6. Upload a the documents to Learn@UWStout before class on session 2 or week 10

Points Breakdown:
The mockups constitute 5% of the grade for the Final Web Application

3 thoughts on “Interactive Design I – Week 9”

  2. 1. https://www.gliffy.com/go/html5/launch?app=1b5094b0-6042-11e2-bcfd-0800200c9a66
    Although, it might be late because wireframes are due on Thursday, this could be helpful for future projects. It’s a wireframe generator. There are also many other versions of this app, i.e.: Mockingbird, Balsamiq, NinjaMock…etc.

    2. http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399
    An article that gives you tools and helpful tips about making a wireframe web design.

    3. http://boagworld.com/design/the-7-wonders-of-wireframes/
    In addition to this article, here’s another related one-http://www.skilledup.com/learn/graphic-design/designers-use-wireframes/ — both talk about why wireframes are helpful and why they are needed.

  3. Lea Verou is a web designer that has developed some sweet engines to test out / show / explain many attributes of web design.
    http://lea.verou.me/projects/

    Resources:
    Corner Shape Preview (http://leaverou.github.io/corner-shape/)
    – lets the user manipulate values to create corner shapes

    Animitable (http://leaverou.github.io/animatable/)
    – shows tons of animations and the codes to use them

    CSS Patterns Gallery (http://lea.verou.me/css3patterns/)
    – shows tons of patterns and the codes to use them

    plus many resources on her website

Comments are closed.