Skip to content

Latest commit

 

History

History
32 lines (25 loc) · 2.88 KB

instructions.md

File metadata and controls

32 lines (25 loc) · 2.88 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.

Context

This is a special week for all of us. It’s the first time we get the chance to collaborate with our UX design students 🤩 Everything will 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
  • Your app should have reusable components
  • Your app should be responsive
  • Your app should look as close as possible to the given design
  • Your app's content will be translated using react-i18next into 2 languages. - English & a language of your team's selection -

Design Recommendations

You'll be handed a design by a fellow UX student at Technigo. Sticking to this design when you're building your project is important. If you're looking for an easy way to style your React project, give styled-components or tailwindCSS a try. They're both great tools that can help you bring the design to life without a lot of fuss.

Happy coding!