Skip to content

Latest commit

 

History

History
34 lines (25 loc) · 2.5 KB

instructions.md

File metadata and controls

34 lines (25 loc) · 2.5 KB
Raw

Design Handoff Project - UX Design Collaboration Project

This week, you will experience a design hand-off from a UX design student and work on transforming that design into code. It is a landing page for a fitness club [’Gym”, “Yoga Studio”] and you will build it in React. We want you to think about how you want to structure the site and what components to create. Your mission is to follow the designs thoroughly, but keep in mind that the designs are made from students that are, like you, learning a new profession. Interpret the design kindly.

This is a perfect opportunity to explore fun npm packages to create an image carousel or make some fun animations if that’s included in the design.

Task

This is a special week for all of us, because we will collaborate with our UX design students 🤩 Everything might not run smoothly, but honestly - it doesn’t in a real work setting either. We will do this together 💪

  • Details do matter. Assume that all design decisions are intentional.
  • Be honest about any constraints. Try to implement the design, but if there's something that you feel you really can't do - speak up.
  • Since you will not be able to actually build the project until you've seen the design, we've put together a list of the elements that the UX designers have gotten in their project brief. If you want to get a head start before the design handoff, you could start by having a look at that and create some components:
    • A header section with a logotype and navigation
    • A main hero section and the rest of the page with all information needed for the user to register and key value preposition
    • UX copy (no lorem ipsum this time)
    • A form for user input (to register/sign up for the class)
    • Form states (active, passive, filled, errors)
    • A footer with relevant information
    • Any other information or building blocks you want to add to your landing page

After the design handoff, you will hopefully have a good idea of how to move forward with the design. Use your knowledge of React and feel free to use any npm packages that can make life easier for you. Remember to have fun 🥳

Requirements

  • The app should be built with React
  • Use one of these design libraries:
    • Styled components
    • Tailwind CSS
  • Your app should have reusable components
  • Make your app responsive (it should look good on devices from 320px width up to 1600px)
  • Your app should look as close as possible to the given design

Happy coding!