ART 87 | USER INTERFACE DESIGN
BRONX COMMUNITY COLLEGE | PROF. CLAUDIA JACQUES
ART 87 | USER INTERFACE DESIGN
BRONX COMMUNITY COLLEGE | PROF. CLAUDIA JACQUES

Project 1 | Worst of the Web

Objective:

  • Establish prior learning experience with web sites.
  • Describe and critique web sites, and articulate visual ideas using web-related terms.
  • Demonstrate basic understanding of UI (User Interface), UX (User Experience), Navigation and Interactivity in the design of user-friendly menus and navigation systems.
  • Use fundamental composition, color, and typographic principles effectively in the design of aesthetic and functional layouts for the web.
  • Demonstrate intermediate understanding of pixel-based imaging and resolution in the production of mockups and web images.
  • Apply understanding of digital imaging for web in the successful integration of images into web design.

Learning Outcomes:

Principles of User Interface Design | Theory

Elements and Principles of 2D Design | Theory

UI Design Development | Theory to Practice

Digital Imaging – Preparing Image Assets in Adobe Photoshop | Practice/Technical Skills

Prototyping – Adobe XD | Practice/Technical Skills

Considerations:

In this project you will experience the process of critiquing, conceptualizing, planning, redesigning and prototyping user interfaces for Web and Mobile.

Designing interfaces works in building blocks where one step is dependent on the previous, which is dependent on the one before that, and so on and so forth. As each individual step has its own complex procedures, the project is broken down in six (6) assignments so you can experience the different steps of designing user interfaces. in the context of a whole project – workflow.

Assignment 1: Worst of the Web

Assignment 2: Redesign Proposal, Site Map, Wireframe

Assignment 3: Web Redesign Mock-ups First Draft (Static) in Adobe XD

Assignment 4: Mobile Redesign Static Mock-up First Draft (Static) in Adobe XD

Assignment 5: Redesigns Mock-ups Second Drafts Prototyped (Dynamic) in Adobe XD

Assignment 6: Redesigns Final Mock-ups Prototyped (Dynamic) in Adobe XD

Your redesigned static digital mock-up 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 interactive prototype page.

The final four linked pages in XD interactive digital mock-up should be based on your static mock-up.

Four Final Interactive Prototype Pages:

  • Home
  • About
  • Contact
  • A Link Page

Specs:

  • Version for Web
  • Version for Mobile
  • Color Mode: RGB
  • Resolution Size: 72 dpi

 

Grading Criteria: 28 pts

Due Class 2

Assignment 1: Worst of the Web (4 pts)
Submit the work on Blackboard, under Work Submission / Assignments / P1 Assignment 1.

  • Share the URL – 1pt
  • Describe how the site makes you feel – Use at least two adjectives – 1 pt
  • Describe what the issues with the site are (at least three) based on the Principles of UI Design – 1 pt
  • Present the site and its problems to the class – 1 pt
Due Class 3

Assignment 2: Redesign Proposal, Site Map, Mock-ups (4 pts)
Submit the work on Blackboard, under Work Submission / Assignments / P1 Assignment 2.
You are expected to create a proposal sharing the information architecture (site map) and a new design by drawing wireframes for four pages (home page and a second page) for web and phone in Photoshop (jpg). 

Posted to Blackboard and presented in Class:

  • “Worst of the Web” site proposal – 1 pt
  • Site Map – 1 pt
  • “Worst of the Web” redesigned wireframe – 2 pts
Due Class 4

Assignment 3: Web Redesign First Draft in Adobe XD (4 pts)
Submit the work on Blackboard, under Work Submission / Assignments / P1 Assignment 3.
Design four pages (home page plus three others) for web in Adobe XD based on your proposed site map and wireframe.

  • Home page for Web in XD plus jpg or png image – 1 pt
  • A chosen content page (About, Product, Login, Contact, etc) for Web in XD plus jpg or png image – 1 pt
  • A second chosen content page (About, Product, Login, Contact, etc) for Web in XD plus jpg or png image – 1 pt
  • A third chosen content page (About, Product, Login, Contact, etc) for Web in XD plus jpg or png image – 1 pt
Due Class 5

Assignment 4: Mobile Redesign First Draft in Adobe XD (4 pts)
Submit the work on Blackboard, under Work Submission / Assignments / P1 Assignment 4.
Design four pages (home page plus three others) for mobile in Adobe XD based on your proposed site map and wireframe.

  • All four (4) pages for Web linked in XD – 1 pt
  • All four (4) pages for Mobile linked in XD – 1 pt
  • Screenshot of the web pages prototyped – 1 pt
  • Screenshot of the web pages prototyped – 1 pt
Due Class 6

Assignment 5: Redesigns Second Drafts Prototyped in Adobe XD (4 pts)
Submit the work on Blackboard, under Work Submission / Assignments / P1 Assignment 5.
Implement the web and mobile interactive prototypes in XD with four functional/linked pages each.

In Blackboard, under Work Submission / Assignments / P1. Assignment 5 post the link to your XD Project 1 | Assignment 5 with the pages/elements linked plus jpg or png images of the eight pages. All four pages for web should be linked, and all four pages for mobile should be linked.

  • All four (4) pages for Web linked in XD – 1 pt
  • All four (4) pages for Mobile linked in XD – 1 pt
  • Screenshot of the web pages prototyped – 1 pt
  • Screenshot of the mobile pages prototyped – 1 pt
Due Class 7

Assignment 6: Redesigns Final Drafts Prototyped in Adobe XD (8 pts)
Submit the work on Blackboard, under Work Submission / Assignments / P1 Assignment 6.
Finalize the web and mobile interactive prototypes in XD with four functional/linked pages each for midterm presentation.

  • Four pages prototyped in XD (link to XD) and their images are shared in Blackboard – 2 pts
  • Four pages prototyped in XD (link to XD) and their images are shared in Blackboard – 2 pts
  • Design addressed the issues presented on Assignment 1 – 1 pt
  • Design respects UI Principles – 1 pt
  • Design respects Design Principles – 1 pt
  • Presented work – 1 pt

Resources