UI Recreation

Why is this important?

When you're starting out, you want to just start running. You think you can do it and you get frustrated when you can't make something look as good as you see it in your head. This is not because you don't have talent or affinity to being a designer--you just don't have the reps in yet!

But similar to working out, you wouldn't just go to the gym and start lifting weights, you would lookup workout plans from trusted sources and do what they do. THAT is why you're doing this. You are going to copy some really good UI and in copying every day, you will slowly find patterns in what one design is doing to the next. They say practice makes perfect, but really it's "perfect practice makes perfect" <3

Things to consider

Don't trace it. Tracing or designing right on top of the UI shot you're recreating will not get the same effect. You need to really find the ways they use shadows and border radius and spacing all by yourself. Eyeballing it will build in those patterns because you had to find it yourself.

Working with illustrations & images a lot of these UI shots will have beautiful imagery with transparent backgrounds or Illustrations that make it stand out. Don't spend too much time finding the right image or illustration. Find something online either on unsplash or a free illustration library. Then focus on composition and placement of the asset. Remember, you're not actually designing here, you're doing enough to mark your Task 1 complete!

Warnings

Do not steal the ui shot. These are not my designs and as such, I am attributing the creator(s) of the design. Please please please do not share your recreations as if they were your own. Instead, feel free to post a side-by-side of your recreation compared to the original and tag the original designer(s) like I have.

Expand on it. If you're feeling really excited about a style/vibe of a UI shot, feel free to create additional screens of the shot using the same style. Those would be great shots to share in Discord with the community!

UI Recreation

User Flow Mapping

Moodboarding

Initial Wireframes

Full Wireframes

High Fidelity