Identify what is bad interface design, navigation, functionality, interactivity, content distribution in a website or app and find a positive solution to that site.
Deadlines & Parameters:
Intro to Worst of Web
- 1) Due/posted before the beginning of Class 2 – Choose a “really bad, poorly designed web site” (either fine art or commercial) and post a list of at least 5 reasons why it is that bad.
- 2) On Class 2 – Present the “really bad site” you have chosen as well as the list of at least 5 reasons why it is that bad. Be ready to defend your reasons.
- 3) Class 3 – Proposed wireframe mock-up of (hand-drawn) redesigned homepage based on the content of the “really bad web site” you presented.
- 4) Class 4 – Proposal, Wireframe, Information Architecture. Images for the functional mock-up.
- 5) Class 5 – Finish and post to WordPress your flowchart, final mock-up with before and after photos.
- 6) Class 6 – Present a functional mock up for your new interface.
- 7) Class 7 – Present the final.
Your functional mockup needs to be fully functional – linkable still Photoshop layouts of the homepage – and must address the issues you presented on your proposal + wireframe + information architecture as not working in the original “bad” design presentation.
You have complete freedom to TOTALLY redesign the look and feel of your chosen site (that includes all graphics, content, type, layout, and navigation.)
This is not about a subtle “tweaking” of existing material – this is a COMPLETE redesign. You should also include the flowchart for your proposed navigation structure. Please compress any PSD into JPG redesign files and present them as an uploaded HTML page.
Grading Criteria: 25 pts
Due Class 2
- “Really bad site” posted by class time 1 pt
- “Really bad site” presentation of at least 5 relevance & interesting issues 1 pt
Due Class 3
- Presentation/posted “Really bad site” redesigned mock-up update 1 pt
- Finished Flowchart of Redesigned Site 1 pt
Due Class 4
- Proposal | Planning 1pt
- Site Map | Information Architecture 1pt
- Mock-up | Four Wireframes: 4 pt
- One Link
- Collect images to create the Digital Mock-up 1 pt
Due Class 5
- Site layout on Photoshop 4 pts
- One Link
Due Class 6
- HTML pages in Dreamweaver 1 pt
- Linking 1 pt
Due Class 7
- Finished four linked pages in HTML 8 points
- Sketch Mock-up & Grid
- Photoshop Basics
- UI Design Principles
- Visual Communication in UI Design
- UI Design Videos
- Information Architecture
- Design Principles: Unite, Emphasis & Focal Point