Exercises + Projects for Personal Class Site

Exercises + Projects for Personal Class Site

1. Foundation Layout Demo
2. Javascript Basics Demo
3. Parallax Scrolling with flower images
4. CSS3  Basics (gradients, drop shadow, border radius, transparency, rotation)
5. CSS3 Transitions/Animations

Week 16 Day 2 - May 2, Thursday - Homework

1. Fill out course evaluations for ART370 by Sunday, May 5.
https://vandalweb.uidaho.edu/PROD/twbkwbis.P_WWWLogin?ret_code=I. 

Final project due for class critique on Tuesday, May 7, 8:00-10:00am 

What to submit to for final project:
2. USB Flash Drive with following Proj 2 files (organized and labeled as follows)
 >>Main Project folder with naming structure: LastName_Proj2
      + "Process Docs" folder (with PDF of proposal, wireframe, flowchart and concept sketches)

      + "Design Files" folder (both as native design program files PSD or AI and PDF version of final design layout)
      + "Web Files" folder (with appropriate HTML, CSS, javascript and images related website)

National Film Board Interaction Projects

Check out the National Film Board of Canada's Interactive Experience Projects

http://www.nfb.ca/interactive

Week 16 Day 1 - Tuesday, April 30 - Homework

1. Continue coding development for final project. Keep in mind there are 7 days left in the semester before our final critique.

Final project due for class review on Tuesday, May 7, 8:00-10:00am (all process, design and web files due on USB drive)

2. Fill out course evaluations for ART370 by Sunday, May 5.
https://vandalweb.uidaho.edu/PROD/twbkwbis.P_WWWLogin?ret_code=I.

Week 15 Day 2 - Thursday, April 25 - Homework

1. Continue coding development for final project. Keep in mind there is only 1 week left in the semester before our final critique. Be sure you manage the remaining part of the semester for coding, usability testing (scheduled for next Tuesday, April 30) and final critiques (Tuesday, May 7, 8:00-10:00am)

2. Fill out course evaluations for ART370 by Sunday, May 5.
https://vandalweb.uidaho.edu/PROD/twbkwbis.P_WWWLogin?ret_code=I.

Week 15 Day 1 - Tuesday, April 23 - Homework

1. Continue coding development for final project. Keep in mind there are only 1 1/2 weeks left in the semester before our final critique. Be sure you manage the remaining part of the semester for coding, usability testing (scheduled for next Tuesday, April 30) and final critiques (during finals week, Tuesday, May 7, 8:00-10:00am)

2. Fill out course evaluations for ART370 by Sunday, May 5.

https://vandalweb.uidaho.edu/PROD/twbkwbis.P_WWWLogin?ret_code=I.

CSS3 Transitions

CSS3 Transitions {via w3schools}
CSS selectors {via w3schools}
CSS3 Tranforms {via cssSandpaper}

Week 14 Day 2 - Thursday, April 18 - Homework

1. Continue coding development for final project. Keep in mind there are only 2 weeks left in the semester before our final critique. Be sure you manage the remaining part of the semester for coding, usability testing (scheduled for Tuesday, April 30) and final critiques (during finals week, Tuesday, May 7, 8:00-10:00am)

2. Fill out course evaluations for ART370 by Sunday, May 5.

https://vandalweb.uidaho.edu/PROD/twbkwbis.P_WWWLogin?ret_code=I. 

3. Upload CSS Transitions Exercise to class website by end of today.

Week 13 Day 2 - Thursday, April 11- Homework

1. Begin coding development for final project. Keep in mind there are only 3 weeks left in the semester before our final critique. Be sure you manage the remaining part of the semester for coding, usability testing (scheduled for April 23 + 25) and final critiques (during finals week, May 7, 7:30-9:30am)

Be sure you are frequently viewing your web documents in multiple browsers (Safari, Firefox, Chrome, Internet Explorer) and operating systems (Mac vs PC). 

Some CSS3 properties are not compatible (especially IE 9 and below). Although your document will never appear 100% identical in each browser, be sure the viewer does not have a negative experience based on your CSS styles or use of Javascript.

  

{via CXPartners presentation at FOWD 2012}

CSS3 Resources

CSS3 Solutions for Internet Explorer {via Smashing Magazine}
CSS3 PIE (Progressive Internet Explorer (IE compatibly for drop shadow, gradient, border radius)
cssSandPaper (CSS3 Javascript Library) - cube transformations
Elliot Jay - Progressive Enhancement  (presentation that addresses the balance between usability and aesthetics, should web design be boring due to cross browser incompatibility)

Week 13 Day 1 - April 9 - Homework

1. Work on image and media prep and project coding for final project. Keep in mind there are only 3 1/2 weeks left in the semester. Be sure you manage the remaining part of the semester for coding, usability testing (scheduled for April 23 + 25) and final critiques (during finals week, May 7 7:30-9:30am)

I will be conducting a CSS3 demo next class

Week 12 Day 2 - Thursday, April 4 - Homework

1. Continue to work on Final Project Layout Design (due next Tuesday, April 9, 8:30am). All sections due for review as PDF.

Week 12 Day 1 - Tuesday, April 2- Homework

1. Continue to work on Final Project Layout Design (due next Tuesday, April 9, 8:30am). All sections due for review as PDF.

2. Upload Z-Index Exercise and Parallax Scroll Exercise (with new image, text and class name content) by start of next class, Wednesday, April 4.

Week 12 - Demo Resources

Parallax Scrolling with JQuery {via F6 Design}
Horizontal Verzion of Parallax Scrolling demo {via github}
Parallax Scrolling for Mobile Devices
Lettering.js  {JQuery plugin supports increased typographic control web}
Firebug {Firefox supported web development tool to view edit, debug, and monitor CSS, HTML, JavaScript}

Painting Faculty candidate presentation by Nishiki Tayui

There will be another Painting Faculty candidate presentation by Nishiki Tayui, scheduled for today Monday, April 1 in the TLC 47 at 10:30am.

Earth Day Poster Competition

ANNUAL EARTH DAY POSTER DESIGN COMPETITION

About: Lewis Clark Recyclers hosts an annual poster contest to celebrate the observance of Earth Day. The winning posters will be featured on LCRI’s website and used to promote the annual Earth Day celebration in Lewiston, ID.

Prizes: There will be two $200 Grand Prizes awarded: One for People’s Choice and one for Judge’s Choice. The judges choice second place will receive $25.

The prize-winning artwork will be featured on the web-site and in other print and digital media. Runner-ups and other submissions may have the opportunity to be paid for use of their designs for marketing materials.

Judging Criteria:

• Overall visual impact 
• Skill level 
• Creativity 
• Originality 
• Polish 
• Effectiveness

Deadline: Submissions due April 8th

Please submit your poster design on a CD labeled with your name, email, phone number and title of the piece to Rachel Fujita in A&A room 100.

Submissions must be either pdf or psd les formatted as 24” by 36” at 300 dpi.

For more information or to submit art-work, please contact contest coordinator Robin Lopez at lopezr7@gmail.com 208.596.0605 

 

Week 11 Day 2 - Thursday, March 28 - Homework

1. Continue working on Design Layout for final project. Keep in mind final review of layout for each unique section with all intended content (image and text) due as PDF on Tuesday, April 9, 8:30am. 

Week 11 Day 1 - Tuesday, March 26 - Homework

1. Begin working on Design Layout for final project. Keep in mind final review of layout for each unique section due as PDF on Tuesday, April 9, 8:30am.

2. Post links to Javascript demo files onto personal class website

Javascript Resources

W3Schools Javascript Resource
JQuery - JavaScript Library
W3Schools JQuery Resource

JQuery UI (User Interface) Resource
Best Way to Learn JavaScript (great article from nettuts)
Code Academy --great learning tool when practicing new coding, has interactive learning tools for JavaScript

Week 10 Day 2 - Thursday, March 21 - Homework

1. Continue to work on research (text and image gathering) for Project 2. Moodboard is due for review next class as a PDF. Must consider following key features in mood board...

• Visual theme (via inspirational images)
• Color scheme (what colors will you use, between 2-5 colors)
• Textures (subtle backgrounds, visuals used to enhance depth/contrast)
• Type styles (font family, primary font vs secondary)

The visual language used in your moodboard should pre-empt your layout design ideas for project 2. Be sure to consider legibility, usability,  and visual hierarchy throughout the design process.

2. We will begin Javascript/JQuery demos next Tuesday

3. If you are on campus today, I recommend you attend the presentation of Melissa Wilkinson today in the TLC 47 at 5pm. Melissa is one of the candidates interviewing for the new Painting Faculty Position in the CAA.

There will be another Painting Faculty candidate presentation by Mark Bradley Shoup, scheduled for Monday, March 25 in the TLC 47 at 10:30am. 

AIGA Design Workshop With Shogo Ota - this Thursday

In addition to the Inspiring Design Futures Symposium that is taking place this week, the AIGA Student Chapter on campus has planned a design workshop session with CAA alum, Shogo Ota, on Thursday, March 21, 3-5pm in AAS Rm 104.

To check out some of Shogo's design work check out his company Tireman Studio.

Week 10 Day 1 - Tuesday, March 19 - Homework

1. Project 2 Concept Phase: Project Proposal, Wireframes, Flowchart due next class, Thursday March 21, 8:30am.

2. Be sure attend various Sessions of the Inspiring Design Future Symposium this Wednesday, March 20 in the Student Union Building.

Timeline/Information Graphic Examples

Project 2: Interactive Timeline Project

Description:

Working in groups of two, research, design and develop an interactive timeline project documenting the history and evolution of one of the following topics: Moving Image, Telecommunications, or Computers. Overall project should serve as an engaging, informational resource that introduces a concise history of media and technology developments throughout time.

Objectives:

+ Apply information and interface design fundamentals and principles to aide in creative problem solving

+ Collaborate effectively with group members throught conceptual, design and development phases

+ Use industry standard web authoring tools

Specifications:

+ Design layout should meet usability standards and current web design/development best practices

+ All artwork must respect copyright laws. Be sure to use MLA image citation for photographs covered under fair use policies

+ All web pages are to be generated with Dreamweaver and/or a text editing application.

+ Scripting languages to be used: HTML, CSS, and JavaScript.

+ If using other programmer’s code, please cite author and source.

+ Project should be compliant in desktop, laptop and mobile devices and browser compliant in Safari, IE and Firefox

Deadlines:

Concept Phase: Project Proposal, Wireframes, Flowchart due Thursday March 21, 8:30am

Design Concept Phase: PDF of Moodboard due Tuesday, March 26, 8:30am

Layout Design Phase: PDF of final design specs due Tuesday, April 9, 8:30am

Usability Testing: Week 16, Conduct usability surveys to target audience during April 28-May 4

Grading criteria (20% course grade):

Design Aesthetics —40% of project 2

Technical Skill—30% of project 2

Usability—20% of project 2

Process (Flowchart, Wireframe, Sketches, Mood Board, Usability Testing)—10% of project 2

Topic Research Research Starting points
Moving image (cinema, television, animation, documentaries/news reporting, video, zoetrope, Eadweard Muybridge, Georges Méliès, video art)

Telecommunications (telegraph, telephone, radio, image telegraphy, phototelegraphy, telefax, mobile technology, multimedia)

Computers (abacus, digital vs analog, electric telegraph, charles babbage, Memex, Bell Labs, ARPANET, Tim Berners Lee, Internet, World Wide Web)

Week 8 Day 2 - Thursday, Feb 28- Homework

1. Based on usability testing results, make reasonable revisions and modifications to Project 1 and repost to your class site. Formal class critique will take place for project 1 on Tuesday, March 5, 8:30.

 What to submit to for final project 1 grade:

1. USB Flash Drive with following Proj 1 files (organized and labeled as follows)

 >>Main Project folder with naming structure: LastName_Proj1
      + "Process Docs" folder (with PDF of proposal, wireframe and thematic concept sketches, **include screenshots of original website layout design if applicable)

      + "Design Files" folder (save final Design Layout for 6 sections as JPGs)
      + "Web Files" folder (with appropriate HTML, CSS, javascript and images related website)

PechaKucha Students Speak Edition @ Pritchard Thursday, Feb 28, 8:20pm

View high resolution 

List of vol. 4 Presenters:

Kathleen Burns: What, when, where, how, who? Public Art and Community

Hayman Wong:  To Live in a Cage

Bryce Blankenship: My Shortened Importance of Philosophy

Ellen Williams: Deep Sea: Shipwrecked

Miguel Elgueda: Living Communities:  Bringing live back into Communities

Sway Harner [:Moment of Thought:]

Tarin Leach: Art in Toms

Katelyn Dillon: The Underground:Recreating the Illicit

Avery Worrell: Enlisting in the Fun Brigade

Week 8 Day 1 - Tuesday, Feb 26 - Homework

Usability Testing for Project 1 will take place next class, Thursday, Feb 28 at 8:30am.

 What to submit:

1. USB Flash Drive with following Proj 1 files (organized and labeled as follows)

 >>Main Project folder with naming structure: LastName_Proj1
      + "Process Docs" folder (with PDF of proposal, wireframe and thematic concept sketches, include screenshots of original website layout design if applicable)

      + "Design Files" folder (save final Design Layout for 6 sections as JPGs)
      + "Web Files" folder (with appropriate HTML, CSS, javascript and images related website)

2. Upload updated index.html to your personal class website that includes links to process, design and web files of project 1.

Foundation FAQ

How to remove the triangle icon seen in foundation's pre designed drop down menus





1. Open the foundation.css (or foundation.min.css, depending on the external css file you are attaching in your html file)

2.  Search for (cmd +f) the following css rule:

 .top-bar ul > li.has-dropdown a:after { content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: white transparent transparent transparent; margin-right: 15px; margin-top: -2.5px; position: absolute; right: 0; top: 50%; }

3. Delete or comment out (use  css comments /* */ around whole rule )

Week 7 Day 1 - Tuesday, Feb 19 Homework

1. Continue web development for project 1. Be sure to check browser compatibility between Safari, Firefox and Internet Explorer. Final critique will take place next week Wednesday, Feb 28.

Week 6 Day 2 (Thursday, Feb 14) - Homework

1. Create rough HTML mockup of homepage for project 1. Be sure to check browser compatibility between Safari, Firefox and Internet Explorer. Upload for review onto your personal class site by Tuesday, Feb 19, 8:30pm.

Call for Submissions PechaKucha Night Moscow

The Prichard Art Gallery will be hosting PechaKucha Night Moscow vol. 4. Thursday, February 28th.  Proposal submissions for presenters (either solo, pairs, or groups) are now being excepted at uicaaexperience@gmail.com.  Proposals are still being accepted.  For more information on this call, please visit UI Art + Design PechaKucha Night's informational page

*PechaKucha Night – devised and shared by Klein Dytham architecture

Week 5 Day 2 (Thursday, Feb 7) - Homework

1. Continue Layout Design Process. Be sure to include actual text and image content (no placeholders or lorem ipsum) in each design layout for your chosen different pages/sections. 

Keep in mind PDF of 6 different pages/sections for project 1 due for review in next week, Tuesday, Feb 12, 8:30am.

2. Create homepage for your own ART370 site (file should be called index.html and placed in webpage folder on shared space). Spend some time applying HTML tags to personalize your personal class website, which will be used primarily in this class for demo/exercise submission. Home page should include: Your name and links to recent assignments (PDFs of project 1 process files --flowchart, wireframe, proposal, foundation tutorial). 

3. Explore Foundation components in additional to basic setup covered in today's demo. Upload foundation basics demo exercise (to your UI webspace) that includes a logo (placeholder), navigation (placeholder), image slideshow (using foundation orbit js), and footer (with contact information).

Accessing your UI class Webspace

URL to UI webspace will be in format of:
www.webpages.uidaho.edu/art370-vand1234

For example:
http://www.webpages.uidaho.edu/art370-moll234/

To publish or upload file to webspace
1. Cmd +K on mac to open connect to server window

2. Type in server address:
cifs://files.uidaho.edu/shared

3. Type in your vandal username and password

4. Look for webpages folder, drag and drop files to your folder (that lists your vandal user name)

Foundation Basics Demo

1. Download Foundation CSS (recommend selecting customize foundation css). This download will provide all css and javascript files necessary for foundation frameworks to work. To apply create a responsive layout website using foundation, you will need to include all files provided by zurb.

2. To assemble a responsive layout website using foundation, create a new html document, and  replace doctype tag with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3.  After doctype tag, delete existing opening <html> tag, and insert following code below. This is required for responsive layout to work with Internet Explorer

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html xmlns="http://www.w3.org/1999/xhtml" class="no-js" lang="en"> <!--<![endif]-->

4. Add following code inside <head> tag. This is required for responsive layout to adjust in size for mobile devices

  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />

5. Insert the following code inside head tag. This will attach Foundation supported stylesheets (css files must be placed in folder called "stylesheets")


<!-- Included CSS Files, use foundation.css if you do not want minified code -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">

  <!-- Custom Modernizr for Foundation -->
  <script src="javascripts/foundation/modernizr.foundation.js"></script>


6. Insert following javascript code before closing </body>


  <!-- Latest version of jQuery -->
  <script src="javascripts/jquery.js"></script>

  <!-- Included JS Files (Unminified) -->
  <!-- [JS Files] -->
  <!-- We include all the unminified JS as well. Uncomment to use them instead -->

  <!-- Included JS Files (Minified) -->
  <script src="javascripts/foundation.min.js"></script>

  <!-- Initialize JS Plugins -->
  <script src="javascripts/app.js"></script>
  
  
    <!-- Attach Orbitz Plugins -->
    
    <!--this script function will trigger the slideshow to activate-->
<script>
    $(window).load(function(){
      $("#featured").orbit();
      $('#featuredContent').orbit({ fluid: '16x6' });
    });
    </script> 
    
    <!-- attaches javascript file that controls slideshow settings -->
     <script src="javascripts/jquery.foundation.orbit.js"></script>


7. Explore the following resources to find code examples to integrate Foundation's grid structure, button styles, javascript add ons.

Additional Foundation Basic Setup 
Foundation Components (set up grid, type styles, buttons, drop down nav, etc)
Foundation Javascripts (Orbit - slideshow)
Foundation Framework Forum (find answers to FAQ issues)

Orbit Extras

*To hide Orbit timer, add the follow CSS rule in the app.css. This will keep the slideshow self running, but will hide visibility of the timer interface


.orbit-wrapper .timer { visibility: hidden; }

*To hide and show navigation buttons (< >) on hover, add the follow CSS rule in the app.css.


.orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }
.orbit-wrapper:hover .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

Week 4 Day 2 - Thursday, Jan 31 - Homework

1. Begin Layout Design Process. Home page layout due for review next class, Tuesday, Feb 5, 8:30am. Be sure to include actual text and image content (no placeholders or lorem ipsum) in design. Include variation of home page layout that visualizes various link states (normal, hover)

Keep in mind PDF of 6 different pages/sections for project 1 due for review in two weeks, Tuesday, Feb 12, 8:30am.

Typography and the Web

Typography Articles
List of Web Safe Fonts
List of Special Characters in HTML
Typography Speaks Louder Than Words
Why Typographic Choices Make a Difference
How to choose a Typeface
What Font to use?
Combining Typefaces
Type Guidelines and References for the web {great article by Smashing Magazine}
I Love Typography {articles, resources, fonts}
Web Font Services: The Good, Bad and Ugly

Web Type Services

@font-face kit generator

Google Web Fonts
Adobe TypeKit

More Web Font Embedding Services {via Smashing Magazine}

Font Foundries {not all fonts are created equal, and should not have been created at all}
Emigre
League of Moveable Type
Berthold Types
Font Shop

Don't Know What Font it is? Try WhatTheFont.com

Fixed, Liquid, Responsive Layout and Design

Fixed (width) Layout
All containers on the page have defined widths (pixels). A fixed (width) layout will not move in and out when you resize your browser window.

Fixed Layout example {via Max Design}


Fluid/Liquid Layout
All containers on the page have their widths defined in percents. Containers adjust in size (shrink/expand) based on browser window size.

Fluid/Liquid Layout Example {via Twitter Bootstrap}


Responsive Liquid Layout
Content containers react like liquid layouts, but sizing is determined by device characteristics. Device figures out browser window size and changes how the page appears (re-size images and optimize layout) in relation to the dimensions of the browser.

Adaptive Liquid Layout
Content containers react like liquid layouts, but sizing is determined by device characteristics. Web server (where web documents are hosted) detect device attributes (browser window size) and loads a version of the site that is optimized for its dimensions and native features.

Device Resolution Reference {via SpireLight Media}
960 grid system (grid templates for Fireworks, Photoshop and Illustrator available}
Liquid Grids the Easy Way {via Max Design}
Responsive Web Design by Ethan Marcotte {via A List Apart}
Web Aesthetics by Paul Robert Lloyd {via A List Apart}

Foundation 3 (Responsive Design created using CSS Framework system created by ZURB)
Twitter Bootstrap (Responsive Design created using CSS Framework system created by Twitter)

Design Tutorial Resources
WebDesign Tuts (visual focused tutorials)
PSD Tuts (interface focused tutorials using Photoshop)
Vector Tuts (interface focused tutorials using Illustrator)

Week 4 Day 1 Homework: Moodboard + Resources

1. Create a digital mood board for Project 1 (due next class, 8:30, Thursday, Jan 31. The overall visuals presented in your mood board should address the following:

• Visual theme (via inspirational images)
• Color scheme (what colors will you use, between 2-5 colors)
• Textures (subtle backgrounds, visuals used to enhance depth/contrast)
• Type styles (font family, primary font vs secondary)

The visual language used in your moodboard should pre-empt your layout design ideas for project 1. Be sure to consider legibility, usability,  and visual hierarchy throughout the design process.

Articles and Resources

Why Moodboards Matter {via webdesignerdepot.com}

25 Pro Tips for Moodboards {via creativebloq.com}

How a Website is Built: Design {via New Fangled Web Developers}

Pinterest

Style Tiles (style board template)

Project Proposals & Evaluations

Please download Project Proposal template from dropbox

Alternative to Writing Project Proposals...Project Evaluations {by Jonathan Wold via SmashingMagazine}

Tips to writing project proposals/evaluations

1)Do Research (read through all pages, read and analyze all content and quality of content, be sure to understand organization goals)

2) Outline the scope of the project(specifics of what will be done in planning, design, build and testing phases of project;apply Laws of Simplicity and SLIP and SHE models, list specific problems and solutions of site)

3) Create a timeline for the project (when design, content prep, development, testing deadlines will take place)

Week 3 Day 2 - Thursday, Jan 24 - Homework

1.Work on Planning & Conceptual Phase of Worst of the Web Project. Print outs of Project Proposal/Evaluation, Wireframes, Flowchart for chosen site re-design due for review Tuesday Jan 29, 8:30am. See proposal, wireframe and flowchart resources for examples.

Project Proposal/Project Evaluation should address

• Target Audience
• Summary of Website Goals/Mission
• Design/Usability problems and solutions

1)Do Research (read through all pages, all content, understand organization goals)
2)Outline the scope (what work will be done to project;apply SLIP and SHE model, list specific problems and solutions)
3)Create a timeline for the project (design, content prep, development, testing)

2. Begin gathering inspirational imagery and graphics to be assembled for Moodboard (due next Thursday). Collage based Moodboard (print or digital) or Project Specific Pinterest Board will be acceptable review formats. Be sure to take into consideration, color schemes, typographic styles (primary and secondary), inspirational style choices (photographs, textures, visual style).

Flowchart and Wireframe Resources

Flowchart Examples

Do you Need a Designer Flowchart {by Sabine Ahrens}

So You Want to Watch a Holiday Movie {by lemon.ly}

Lovely Charts (Free Online Flowchart and Wireframe application)
Sample flowchart from Wired.com
Another sample flowchart from Wired.com
Should I make more coffee? Flowchart

Image Copyright Flowchart
Fantastic flowchart diagraming the importance of getting permission to post copyright images online. Created and designed by Pia Bijkerk Erin Loechner and Yvette van Boven.

Wireframe Examples

Inspiration Feeds- 25 Examples
Zurb article about wireframe process, tips on design sketches, and sketching with intent/purpose


Flexible Framework and Prototyping
The Future of Wireframes
Foundation 3 --Created by Zurb flexible framework for building prototypes and production code on any kind of device

Group Discussion from Tuesday, Jan 22

Attributes of Effective Websites

After today's group discussion regarding the usability survey and reflection #2 assignments, the following list was generated to cite examples of top characteristics of good website design (based on design, usability and content related issues).

• Clear and straight forward branding /identity 
• Use of visual cues for links/buttons
• Consideration in text content (limited in amount, and width span)
• Visual consistency (styles, brand styles, placement of content)
• Each page is content focused (type of content/info serves a strong purpose for each page)
• Layout design is visually clean and to the point
• Content is visually engaging (dominance in color, imagery)
• Limit in amount of information presented at once
• Use of visual hierarchy
• Navigation is consistent and easily accessible
• Strategic organization/categorization in navigation elements
• Fast loading time (optimized media that is small in file size)
• Information should be helpful based on users needs and expectations
• Balanced/harmonious color scheme

Week 3 Day 1 (Tuesday, Jan 22) - Homework

1. Select a pre-existing (arts & culture) website the exhibits examples of poor usability, ineffective design, and/or flawed web development standards. Take 3 screen shots of website of choice and write up 5 examples of usability, design issues. This will be reviewed at start of next class.

Project 1: Worst of the Web

Download Project 1 specifications

Description:

Select a pre-existing (arts & culture) website the exhibits examples of poor usability, ineffective design, and/or flawed web

development standards. You will be asked to assess and analyze both content, design and development choices of your

chosen website, and create a new site that improves both design and development issues.

Objective:

+ Apply interface design fundamentals and principles to aide in creative problem solving

+ Assess current interactive design case studies and apply usability, design and programming standards

+ Use industry standard web authoring tools

 Specifications:

+ Design layout should meet usability standards and current web design best practices.

+ All art work and media assets must be original and/or copyright free. Imagery should be optimized via Fireworks.

+ All web pages are to be generated with Dreamweaver or a text editing application.

+ Scripting languages to be used: HTML, CSS, and JavaScript. No table, td, tr tags allowed.

+ If using other programmer’s code, please cite author and source

+ Your website should be browser compliant in Safari, Internet Explorer and Mozilla Firefox.

Deadlines:

Concept Phase: Print out of Project Proposal, Wireframe, Flowchart due Tuesday Jan 29, 8:30am.

Design Concept Phase: PDF of Moodboard due Thursday, Jan 31, 8:30am.

Layout Design Phase: PDF of final design specs due Tuesday, Feb 12, 8:30am.

Development Phase: Week 6-, Final project review due Thursday, Feb 28, 8:30am.

Grading criteria (20% course grade):

Design Aesthetics —40% of project 1

Technical Skill—20% of project 1

Usability—20% of project 1

Accuracy in Project Requirements—10% of project 1

Process (Flowchart, Wireframe, Sketches, Mood Board, Usability Testing)—10% of project 1

John Maeda + Jakob Nielsen Resources

Laws of Simplicity (blog)

Jakob Nielsen
User Testing Methods
Identify your Target Audience
Information Architecture Report

Class Exercise: Mind Maps of Website Categories

Week 2 Day 2 - Thursday, Jan 17 - Homework

In your original groups from the Mind Mapping Website, recommend to the person sitting on your right, a website you visit daily. For homework spend at least 10 minute browsing and navigating through this team-member recommended website and answer all questions on the Usability Survey. Bring completed Usability Survey to start of next class (Tuesday, Jan 22).

Download Usability Testing Survey (word doc)
Download Usability Testing Survey (PDF)