Week 8

Session 1: Today we will discuss the requirements for the Project Proposal component of the Final Web Application. The remaining time will be spent on individual consultations for finalizing your cycling project or Final Web Application concept approvals.

wireframe

Assignment 5: Final Web Application (Component 1 – Project Proposal)
Due: Session 2, Week 8 (5% of final project grade)

Description:
Write a one page project proposal that includes a title, project summary, wireframe, and feature list. Use Google Docs, Word, or Illustrator to create the proposal. Export the proposal as a PDF file and submit before class starts on session 2 of week 8.

Requirements:
1. Start the proposal with a title page (include your name, project name, my name, class title, etc.)
2. Secondly write a project summary that describes the scope of the project in two to five paragraphs
3. Thirdly insert a list of project features and a brief description of each feature
4. Include at least one wireframe to illustrate the layout of your project
5. Copy the PDF of the to your folder on the Dropoff Drive before class on session 2 of week 8

Points Breakdown:
The proposal constitutes 5% of the grade for the Final Web Application

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 9 (5% of final project grade)

Description:
Design three mockups of a single page for in-class critiques on session 2 of week 9. 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 the Dropoff Drive before class on session 2 of week 9

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

4 thoughts on “Week 8”

  1. http://webdesignmoo.com/2014/20-useful-css3-hover-effects-tutorials-2014/
    A useful article that includes a list of resources on how to create different kinds of hover effects on navigation bars/links.

    http://www.creativebloq.com/web-design/steps-perfect-website-layout-812625
    Article on how to create an effective web design layouts. It teaches you step by step on how to take a simple design concept and create it for the web.

    http://codepen.io/philhoyt/pen/ujHzd
    This article gives you CSS codes for drop down menus for your website. Might come in handy for the final project and future websites you’ll create.

  2. This is an article on the importance of wireframing as well offering some helpful links to some more wireframe resources.
    http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

    This article explains the pros and cons of using hamburger navigation on websites as well as offering some alternatives.
    http://www.webdesignerdepot.com/2014/06/how-to-solve-the-hamburger-icon-problem/

    Added this for some inspiration, several links to some creative web layouts.
    http://speckyboy.com/2011/09/29/breaking-the-norm-unusual-and-creative-web-layouts/

  3. http://sixrevisions.com/user-interface/website-wireframing/

    This article is a great guide to building wireframes and offers a lot of different resources to create them.

    http://www.hongkiat.com/blog/navigation-design-ideas-inspiration/

    This is an informative article that talks about designing great navigation menus and also offers a ton of different resources to check out.

    http://designshack.net/articles/layouts/15-tips-for-creating-a-great-website-footer/

    Thought this article might come in handy for some people when creating their final website. It gives some useful tips and examples for creating great designs for website footers.

  4. This website shows how innovative web designers can become using unusual navigation; I thought it would be a fun inspiration look at ideas everyone could build on for the final. Challenge out of the box.

    http://www.awwwards.com/websites/unusual-navigation/

    This website talks about the importance of proper website navigation, usage, styles and types. There are also further links provided to give more insight into usability of navigation for users.

    http://www.webpagemistakes.ca/website-navigation/

    This website shows how innovative web designers can become using unusual navigation; I thought it would be a fun inspiration look at ideas everyone could build on for the final. Challenge out of the box.

    http://www.awwwards.com/websites/unusual-navigation/

Comments are closed.