UI (User Interface) design is the design of user interfaces for software or machines, just like the look of a webpage or a mobile app, with a focus on maximizing usability and the user experience. The purpose of UI design is to make a simple, efficient and attractive user’s interaction with the interface. The good UI design clear the way for finishing the task, without creating unnecessary attention to itself.
The way that we diference if it’s UX or UI design is that UX design makes an interface useful and UI design makes an interfice beautiful and attractive.
In this exercice, we will learn about the most important things we need to design a webpage, a mobile app, etc.
Layouts let us to distibute the information in cohesive entities and organize it in the canvas.
The use and distribution of the layout, will have an impact on how the users find and perceive the information.
To organise and implement this layout we can use grid systems. It is common to use a 12 column grid.
If we create a correct hierarchy, users will improve the way to browse our content. Hierarchy can help us to differentiate the actions from the rest of the content.
To create a visual hierarchy we will use colour, typography and consistency.
Colours have signification and they transmit an emotion. So the colours in our designs will have a very important task. For example, we can transmit the personality of a company using the correct colours.
Also, we use colour to define sections and separate elements.
The easier way to start our design is creating a colour palette.
Typography is one of the most important things of our design because it is the essence of the 99% webpages. Different fonts and their sizes can help us to mark hierarchy. We can combine them but we can’t use too many styles (2-3 at maximum). These should be readable. On screen, it is better to use a sans-serif font.
Inside our design we will have a lot of elements and these should be consistent. It is necessary to create a unic style of elements (Buttons, Titles, Paragraphs…) and use them in all our design.
All this points should be responsive. A responsive design is what makes web pages render well in a variety of devices and window o screen sizes (Computer, Tablet, Mobile…)