Skip to content

Latest commit

 

History

History
32 lines (26 loc) · 2.34 KB

instructions.md

File metadata and controls

32 lines (26 loc) · 2.34 KB

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 React code. 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.

Instructions

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 start thinking about what components to create: A mobile wireframe including:
    • Attention grabbing hero section
    • Information elements answering the following questions;
      • Why, are we doing this?
      • Who, are we targeting?
      • What, are we offering?
      • How, are we solving the problem?
    • Trust Indicators (Social Proof From Happy Customers or Endorsements From Trusted Brands)
    • CTAs

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 use Styled components
  • Your app should have reusable components
  • The UX students' task was to create a mobile wireframe, but you should still try to make it look good on devices from 320px and up
  • Your app should look as close as possible to the given design
  • Follow the guidelines on how to write clean code

Happy coding!