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 the link to the “Comments” field below with 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 – You are expected to create a proposal offering the information architecture (site map) and a new design by drawing mock-up/wireframes for two pages ( home page and a second page). Post to your WordPress site.
- 4) Class 4 – Create a static digital mock-up (photoshop jpg) redesigned homepage based on the site map and wireframe.
- 5) Class 5 – Present a functional interactive mock-up for your new interface in html. Share files with CJ.
- 6) Class 6 – Present the final interactive mock-up with four functional/linked pages in html.
Your redesigned static digital mockup doesn’t need to be fully functional – it can be a still Photoshop layout of the homepage – BUT it must address the issues you pointed out 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.
The final four linked pages in html interactive digital mock-up should be based on your static mock-up (Photoshop version).
Four Interactive Mock-up Pages:
- A Link Page
- Use Resolution for Desktop: 1024 x 768 pixels each page
- Color Mode: RGB
- Resolution Size: 72 dpi
Grading Criteria: 20 pts + Posting 4 pts
Due Class 2
- “Really bad site” research, link and presentation of at least 5 relevance & interesting issues 2 pts
- Posted by class time 1 pt
Due Class 3
- Presentated “Really bad site” site proposal 1 pt
- Presentation/posted Site Map. 1 pt
- Presentated “Really bad site” redesigned wireframe 2 pts
- Posted Proposal + Site Map + Wireframes by class time 1 pt
Due Class 4 & 5
- Collected images and content to reproduce the digital mock-up with four pages. 2 pts
- Created four digital mock-up pages in Photoshop addressing the found issues. 4 pts
- Linked the four pages to create an interactive mock-up. 4 pts
Due Class 6
- Shared the interactive mock-up files and presented “Really bad site” redesigned with the 5 issues addressed 2 pts
- Interactive mock-up has proper file organization. 2 pts
- Posted interactive mock-up link (created by Prof. Jacques) 2 pts
- Photoshop: Image Optimization
- Mock-Up Site Tutorial
- File Management: https://youtu.be/7YB6FxYvQr4
- Sketch Mock-up & Grid
- Photoshop Basics
- Visual Communication in UI Design
- UI Design Videos
- Information Architecture
- Design Principles: Unite, Emphasis & Focal Point