UX/UI feedback

[renatadev]

Amazing job 💫

Here's a little doc with some feedback

[Joepock123]

Wow @renatadev this is legendARY!

[Joepock123]

Feedback

Storybook

Fantastic that you managed to use storybook with the amount of time you have for this project. You can also allow your stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of Storybook, mainly helpful as you’re design was made in a mobile, this is not a priority but it can be a nice thing to learn for the future, have a look here:

https://github.com/storybookjs/storybook/tree/master/addons/viewport

It’s all about the user

• Font size seems a bit too small in the home page, even for the mobile breakpoint.
• Consistency is key: some body fonts are larger than others, not only in the general content but also in the buttons.
• Back button should be at the top left corner to give a smoother experience to the user.
• Workshop button should be more descriptive for the user, e.g: Go to workshop / See workshop
• Text for buttons should be more consistent, either all uppercase, only first letter uppercase, etc… but just pick one!
• Don’t assume that something in your UI is obvious for your users, buttons should look more like buttons. Give them hover states, a cursor pointer, a bit of a shadow! All of this could make such a difference and at the moment there’s nothing more than a background indicating that this is a button, but the tags are the same, let’s differentiate them
• Workshop header image could have an opacity to it to bring the tags to life. They’re currently blending it too much, difficult for an user to see these. Make a statement of them!
• Remove text decoration from your links to match your designs, this is a quick fix. If they’re clickable then make your own style/decoration for them that aligns with your designs/colour scheme.
• Make the workshops card to have a smoother shade like the ones from your designs. I guess the purple is just a trial but this colour is out of your colour scheme.

Styled components + buttons

One of the main reasons for using syled components is to re-use the styles as much as possible. We don’t want to repeat ourselves over and over… Giving a standard style for our buttons will be a lot easier to re-utilize and to style on top of them. With this I mean, you should have one style for your standard button that will be implemented across the entire website and on top of that one sigle style you can implement variations of it.

Have a look here and take a good look at the section called Adapting based on props and Extending Styles these are really helpful to know and to implement when some of the things we want to change are only bg colour/text colour/ etc.

General
You’re project is looking fabulous, I’m well impressed with everything you have achieved, from UX/UI to all bits of your code. Looks amazing!

I’m also completely amazed that you’ve implemented so many goodies in this project (like storybook), I’m loving it!

You’re doing amaing! Keep it up.