You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1.4 KiB

UI III - Ex 1 - Grids

Context:

Welcome to the 3rd quest of UI.

In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals:

  • Enrich your graphic general knowledge
  • Detect consistency, that helps users understand a digital product at the first glance.

Instructions:

Open these 5 images on Figma and draw lines and grids every time you find aligned elements.

Deliverables:

  • A Figma file including the screens with lines on top to show grids. One page per screen or frame.
  • Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
  • Add a title within the file.
  • Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details!

Resources: