root
/
public
mirror of https://github.com/01-edu/public.git
14
27
Fork 3
Code Releases Wiki Activity
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.
5731 Commits
76 Branches
1 Tag
311 MiB
 
 
 
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
public/subjects/user-experience/piscine-ui/atomic-design
davhojt 51f2ae4b2a
docs(atomic-design): match audit exercise names to subject 		11 months ago
..
audit docs(atomic-design): match audit exercise names to subject 11 months ago
README.md docs(atomic-design): change order of exercises in quest to correct order 11 months ago

README.md

Browsing

Context:

Welcome to the 2nd quest of UI!

This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design.

Instructions

Among these 4 websites, make snapshots of these elements:

  • 1 template.
  • 1 organism.
  • 1 molecule.
  • 1 atom.

Websites:

  • Alibaba.
  • Booking.com.
  • Easyjet App.
  • Interrail.

Deliverables

  • A Figma file with 4 pages.
  • On each page, a screenshot of a template, an organism, a molecule and an atom.

Don't forget to:

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

Tips:

  • Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration canva but don’t overload your design with too much details!

Resources:

Quote:

  • User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.

Material Design

Instructions

Download this image which is a snapshot of 3 screens of Lyft, and detect the order in which the layers were set.

Deliverables

  • A Figma file with the image.
  • On each screen, indicate the layers order with numbers. 1 being the background image, 2 the element right on top, etc.

Don't forget to:

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

Tips:

  • 2 numbers can be switched as long as the layering of layers is respected.
  • Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration canva but don’t overload your design with too much details!

Resources:

Design system library

Instructions

Copy 10 elements from easyJet design system, including:

  • atoms.
  • molecules.
  • organisms.

Deliverable:

  • A Figma file including 10 elements from easyJet design system .

Don't forget to:

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

Tips:

  • You can use Avenir Book instead of easyJet’s font.
  • Explore Noun Project to get icons.
  • Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration canva but don’t overload your design with too much details!

Resources:

Library for climbing addicts

Instructions

You are part of a climbing group and volunteer to rebrand the website of your club.

Based on a moodboard, create a design system with at least 20 elements, including atoms, molecules and organisms and include multistates.

Deliverables

  • A Figma file with a moodboard for a climbing group including:

    • Pictures.
    • Colors (2 to 3 main colors).
    • Typography.

  • A Figma file with a library including:

    • At least 20 graphic design elements.
    • At least one atom.
    • At least one molecule.
    • At least one organism.
    • At least 5 multistate elements.

Don't forget to:

  • Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
  • Add a title within all written documents.

Tips:

  • Let’s be creative! Get inspiration from visuals before diving in.
  • Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
  • Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration canva but don’t overload your design with too much details!

Resources:

Library for a dating app

Instructions

You are asked to design a dating app.

Based on a moodboard you have composed, create a design system with at least 20 elements, including atoms, molecules and organisms, and include multistates.

Deliverables

  • A Figma file with a moodboard for a dating app including:

    • Pictures.
    • Colors (2 to 3 main colors).
    • Typography.

  • A Figma file with a library including:

    • At least 20 graphic design elements.
    • At least one atom.
    • At least one molecule.
    • At least one organism.
    • At least 5 multistate elements.

Don't forget to:

  • Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
  • Add a title within all written documents.

Tips:

  • Let’s be creative! Get inspiration from visuals before diving in.
  • Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
  • Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration canva but don’t overload your design with too much details!

Resources: