[Track 8/8] Taqfy - UX and Frontend

[taki-tiler[bot]]

Ok, there is no more features to add to your project by now! Now, you'll just apply the concepts you've learned so far, as well as some practices we use here at Taqtile.

Step 1/4 - Thinking about components

Estimated time: 10 minutes

We ❤️ apps. And a crucial part when making a good app is the User Experience, a.k.a UX. Also, you've learned about componentization and how it contributes to make a good and usable app. So, this step is just a mental exercise. We have below two images representing 2 of the screens you developed so far: Login and Create User:

Looking at these screens, you can extract from them some components that can be (re)used. They are relatively simple to componentize, but, as you can imagine, there's not only one way of doing it, specially when the design gets more complex. So, before coding them in a hurry, let's take some minutes to think:

1. What components can be extracted?
2. Why we should extract them?
3. What attributes each of these components will contain?

After you answer these questions, go to next step to see our suggestions on how to componentize them. Then, you'll start coding these components.

Btw, as we are talking about UX, here are some references if you want to know more about it:

• Nielsen Norman Group
• Google Design
• Facebook Design

[davifelix5]

next

[taki-tiler[bot]]

Step 2/4 - Planning our components

Estimated time: 10 minutes

So, as promised, let's present our suggestions. First, we'd like to show this document, which is a nice Frontend guide and it has some conventions we adopt on our projects. It was not given to you on previous step on purpose, so you could think on your own. Based on it, we can answer the quesitons of the previous step:

1. What components can be extracted?

The way we thought about it, basically 3 components, as shown on the image below: H1 (Header1 - text component), Form field and button.

2. Why we should extract them?

Two of the most important reasons:

• We avoid possible code repetition on all places the component is used
• If some change is necessary, you can submit it on the component (if that's the case), and it will be propagated on all screens that it's used. So only one place on the code would require changes.

3. What attributes each of these components will contain?

There's not only one answer for this either. But, as general rule, a component can contain:

1. Style attibutes: sizes, formats, colors, margins, and every other style attribute that should look the same on all occurrences of the component.
2. Behaviour attibutes: interactions, different states, animations, etc.

So, for the components of question 1:

• H1: we can put inside the component the font family, size, weight (normal, bold, semi-bold, etc...) and color.
• Button: the style of the label, background color, borders, and also some behaviours, such as the state when clicked or loading.
• Form: we may consider that the form is a component made of sub-components. For the form of the example, these sub-components are the textfield to enter text, the label above it and a possible caption for errors, below the textfield. Each of these sub-components can have its own attributes.

[davifelix5]

next

[taki-tiler[bot]]

Step 3/4 - Styled components library

Estimated time: 1 hour

After some minutes of theory, it's finally time to put all the previous thoughts on code.

We'll start with a setup of some tools for our UX development. Here at Taqtile we use the Styled Components library, which helps us to styling our components in a very convenient way.

For now, your job is to install the library and understand at least the basic concepts. Try to use it creating a very simple component to check if it's working, and then go to next step.

[davifelix5]

next

[taki-tiler[bot]]

Step 4/4 - Turning theory into code

Estimated time: 8 hours

Now that you have the most important and powerful tool we use, let's turn our components of steps 1 and 2 into code!

To do that in a reasonable time, we will focus only on on Login and Add User, as we did before. Your job is to create some components and use them at both UIs, so you can see all of the thoughts of steps 1 and 2 on action.

Here are some specifications our "design team" is giving to help you build the components. You don't exactly need to follow all the detailed values if you don't want to. Whats's extremely important is to have those specs parametrized, as the values as not that important: we should design our code to change them easily if necessary.

H1:

• Text size: 24px
• Text weigth: bold
• Color: black #000000
• Margins: 20px top, 20px bottom

Button:

• Text size: 16px
• Text weigth: regular
• Background color: pick one 😉
• Text color: black or white (what better the contrast is with the background color)
• Height: 44px (it's important to have at least 44px so the user can click it comfortably)

You can add some things to this specs if you want, such as borders radius, gradient, icons, etc. Just be careful with the time you're spending on this styling.

Form

• Label on top:
  • Text size: 12px
  • Text weigth: regular
  • Color: gray #777777
  • Margins: 12px bottom
• Text field:
  • Border: 1px (can be full or only on bottom), color gray #777777
• Caption on bottom:
  • Text size: 12px
  • Text weigth: regular
  • Color: red (pick one)
  • Margins: 8px top

As the behaviour, your form should have two states:

• Normal: caption is hidden.
• Error: caption is shown and the 3 sub-components should be red. On the screens, this state will be triggered when the field is not filled or the condition not satisfied (do you remember track 3, step 2? 😁).

TIP: Anytime you implement a component, it's a good practice to test it isolated, so we can make sure it's working properly, including states/behaviours.