WEB 200: Assignment 05

Visual Design
Rehabilitation Institute of Washington Visual Design, by Mike Sinkula

Using a stylized and/or a branded typographic, color and imagery treatments for your web page will help in the visual impact and aesthetics of your site.

Requirements

Complete a Visual Design Study for your project website. We will do this in stages.

  • Complete at least three visual design solutions for your home page and one main page (total of six pages) by mixing and matching typography, color and imagery treatments on top of your content (wireframe) layouts. Therefore, if you did not have your mobile wireframes situated in the phone of choice (operating system and model), you need to rework those wireframes. [Everyone: note on the wireframe phone OS/model.]
    • Due Tuesday 20 Feb at 7 pm: Desktop design
      • Home page, desktop, three design options (color, type)
      • One main page, desktop, three design options (color, type)
    • Due Tuesday 20 Feb at 7 pm:

      • Modify the style-palette.html file that you turned in on Sunday to include all three design palettes (color and type)
    • Due Thursday 22 Feb at 9 pm:
      • Complete style-palette.html
      • Complete set of desktop comps
      • In-work set of mobile comps
    • Due Saturday 24 Feb at midnight Friday 23 Feb at 9 am: 
      Mobile and desktop designs

      • Home page, mobile&desktop, three design options (color, type)
      • One main page, mobile&desktop, three design options (color, type)
    • Due Tuesday 27 Feb at noon Sunday 25 Feb at 8 pm: Peer feedback
      • As before, send the peer feedback to me via Slack DM. Be sure to follow the recommended feedback process.
      • Because I will pull this information together and share with each of you (probably via a Slack DM), late responses will not be counted or included.
    • Due Thursday 1 March Tuesday 28 Feb at 7 pm:
      • When you come to class, you should have finalized colors and type decisions and a final set of comps.
      • Create a new style palette, style-palette-final.html, and upload it to your staging server.
      • As before, send me a DM with a reflection of how you have incorporated this latest critique into your design thinking
      • Print the desktop and mobile versions (four pages total) and bring them to class. We will tape them to the wall and whiteboard.

The critique will take two forms: a peer critique as well as a critique from me.

 

 

Mobile wireframe mock up:
Pick a mobile device and your wireframe goes inside its container. Remember to note OS/model of the phone for which you are creating a design.

mobile-wireframes

 

Student links for critiques

  1. Chris: http://chrisavdesign.com/web200/ | comps: http://chrisavdesign.com/web200/comps.html
  2. Colin: http://www.colinmccrate.com/halms/staging.html | comps: http://www.colinmccrate.com/halms/visual-design.pdf
  3. Elizabeth:
    http://elizabethmbarney.com/simplyflawless/ | no comps linked here (at least one comp is posted to Slack)
  4. Ghada: http://edison.seattlecentral.edu/~gmessaoudi/web200/ | comps: http://edison.seattlecentral.edu/~gmessaoudi/web200/Desktop_VD.pdf and http://edison.seattlecentral.edu/~gmessaoudi/web200/Mobile_VD.pdf
  5. Jessica: http://jesspandesign.com/web200/project/stagingarea.html | comps: http://jesspandesign.com/web200/project/visual-design-desktop.pdf and http://jesspandesign.com/web200/project/visual-design-mobile.pdf
  6. Ken: http://rpcvjet.github.io/ | six links on his staging site
  7. Ling: http://edison.seattlecentral.edu/~lge/web200/200Theoryofwebdesign.html | no comps here
  8. Lisa: http://lisajhickey.com/web200/ |comps: http://lisajhickey.com/web200/visual-design-mobile.pdf and  http://lisajhickey.com/web200/visual-design-mobile.pdf
  9. Mark: http://markmendez.net/web200/WhiskerCity/ | no comps here
  10. Mariam: https://miminaz.com/mimi/web200/jodeesStage.html | comps: https://miminaz.com/mimi/web200/VDall.pdf and https://miminaz.com/mimi/web200/VDallM.pdf
  11. Shelly: http://www.ih-o.com/web200/ | comps: http://www.ih-o.com/web200/Visual-Design.pdf and http://www.ih-o.com/web200/visual-design-mobile.pdf