BRONX COMMUNITY COLLEGE | PROF. CLAUDIA JACQUES
BRONX COMMUNITY COLLEGE | PROF. CLAUDIA JACQUES

Project 1 | Assignment 6 | Final

Objective:

  • 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.

Introduction:

In Assignment 1, Worst of the Web, you identified a site that had several UI Design issues and articulated, based on the UI Principles what the issues were.

In Assignment 2, you developed a proposal, site map and wireframe to help you get familiar with the content and plan your information architecture such as site map and menu navigation, and define how the content will be organized in the pages through wireframe sketches

In Assignments 3 and 4 you expanded your understanding that UI Design is a complex process with many different parts (workflow), in Assignment 3, you will develop the he design for four (4) pages for Web in Adobe XD. You were also asked to do Tutorial 2 | Adobe XD Part 1 and Part 2 in order to familiarize yourself with XD and develop the needed skills to create the pages in the application.

In Assignment 5 you expanded the UI Design Workflow by improving your designs and linking the different pages and elements to create a the dynamic prototype. Make sure to do Tutorial 2 | Adobe XD Part 3 to learn the skills to develop prototypes in XD.

In Assignment 6 you will finalize your eight (8) pages – 4 for web and 4 for mobile, ensuring that the pages address the issues you identified in Project 1| Assignment 1 and the design is cohesive, functional and accessible. In Assignment 5 you expanded the UI Design Workflow by improving your designs and linking the different pages and elements to create a the dynamic prototype. Make sure to do Tutorial 2 | Adobe XD Part 4 to learn the skills of Making Changes Across Artboards in XD.

Considerations:

Design, Design, Design! Establish a Grid! Focus on Typography, Color and other Graphic Elements insuring that your assets (buttons, images, icons, favicons, etc) are consistent and promote Unity in the design and establish Visual Hierarchy.

I suggest you design this first sketch using Monochromatic Color Scheme and once the design is tight you explore Analogous or Complementary Color Schemes to enhance Emphasis and Focal Point, establish a stronger Visual Hierarchy and reading and interactivity Accessibility. Use this Color Calculator to help you define the colors based on the color schemes (also called Color Harmonies). https://www.sessions.edu/color-calculator/

Explore the different resources below:

Assignment Value:

8 points

Grading Criteria:

In Blackboard, under Work Submission / Assignments / P1. Assignment 6 post the link to your XD Project 1 | Assignment 6 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.

Finalize the web and mobile interactive prototypes in XD with four functional/linked pages each for midterm presentation.

  • Four pages for Web prototyped in XD (link to XD) and their images in PNG are shared in Blackboard 2 pts
  • Four pages for Mobile prototyped in XD (link to XD) and their images in PNG 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

Sample: