Every designer at the beginning of his career encounters new terms of which he does not know the meaning.
🤓 So this is my contribution, dedicated to those who are approaching the UI design.👌 I hope it will come in handy. What's the term you first heard that left you stunned?
Breadcrumbs
It's an element used as a navigational aid. It allows users to keep track and maintain awareness of their location within websites or software's. It's a best practice to make the parents clickable so the user can’ use it to navigate too.
The term is a reference to the trail of bread crumbs left by Hansel and Gretel in the German fairy tale of the same name.
60-30-10 rule
This isn't so specific for Ul, but a simple design rule that you can apply when choosing the colors of the elements and help to create a correct balance.
You'll have 60% of your dominant color, 30% for your secondary color and 10% for accent color.
This rule it's often applied for interior design.
Vertical rhythm
It's a repeated pattern used to keep vertical spaces between elements on an interface consistent with each other. Applying it to our designs creates familiar and predictable experiences and visually pleasant user interfaces.
8pt grid to space the height of the element is my fav to start creating vertical rhythm.
Padding
It's the space surrounding an element's content on an interface. Do not confuse it with the margin: the padding is inside, and the margin is outside the border.
Keep this in mind when you need to ask the developer to adjust the spacing.
Wizard
This pattern consists of a linear sequence of steps to complete a task. It's used when are required too many actions or really long forms, helping to divide these into smaller blocks (staged disclosure).
Caution: it can become complicated if there are related steps and the user has to switch between them.
Nobody likes forms
Stepper
Its function is to help the user to orientate himself during the execution of tasks (eg. in a wizard).
Important to highlight:
- Actual position
- Total number of steps (be transparent)
- Steps completed
- Steps to be completed
Was it helpful or did you already know these terms?