UI Design: User interface design
Find out what is UI Design and how to design users graphic interfaces to make them coherent with your brand’s identity.
UI Design, or User interface design is the discipline based on the graphic designing of user interface for softwares and machines.
UI Design begins with the creation of materials and informations that are going to compose our interface.
We start from the creation of a kit composed by:
- Color palette (background color, buttons color, colors that will compose our interface)
- Font to use
- Character style (font, character dimension… the body will have its own setting while title and subtitle have a different one)
- Components, all those objects proposed in all our pages like buttons for example. Creating a single button and making it a component makes it possible for us not to have to create a new one when we need it. Components are completely customizable.
1 – Observation
It’s a way to find out which parts of a website or an app make the users insecure and reduce conversions.
During the analysis stage a reviser will use various methods and instruments to analyze the interface’s issues.
We could talk about content inventory, as it is about valuating the quality of all photographic and graphic content present in the website/app to be.
If the website is already active we examine which content is weaker through the site’s analytics, improving it with the help of targeted campaigns.
Observation anyway allows to shed light on other aspects too such as competiton’s evaluation, which is evaluating our site’s value proposition and usability through the study of strenghts and weaknesses of actual and potential competitors, the establishment of a product’s key features (brand, experience and product) and the identification of a project’s problems and the respective solutions.
2 – Design – Personas
“Personas” are true ideal customer identikits.
They represent needs, behaviors, interests and aspirations of real users and are defined based on the informations that are collected from various sources.
Infromation helps the designer create a unique UI Design for the website, thought for being ad hoc for the target.
2 – Design – Use cases
Use cases are descriptions of how users navigate the app or website and what’s their response. They’re represented as a sequence of simple passages, starting with the user’s goal and ending when the goal is reached. This will help the designer structuring the website in a simpe and practical way.
3 – Drawing
A website map is a diagram of a website’s pages, organized hierarchically. This phase is necessary before the designer’s “creative” process, known as wireframe.
Wireframes are the instrument used to communicate design ideas about the website structure.
To create wireframes specific programs are used (MockFlow, Sketch, Adobe XD…) or even paper and a pen.
The mockup
Compared to the wireframe, the mockup has all the content of the pages and the styles
- Images
- Pictures
- Icons
- Texts
- Buttons
So the mockup is the complete and final result of our website/app.
4 – Keyword: mobile first!
The trend is always more about browsing with the smartphone, for this reason in the last few years designers switched the desktop view design, as the main phase of the project, with the mobile view.
Components of the website will be adapted and moved in the space taking into account the screen’s measure, as for characters and spacing.
Where to start
There are aspects in particular that have to be considered to keep coherent the design with the brand’s identity.
UI design pushes to take the most accurate choices in terms of language and style, taking care of the font and the character style (dimensions, colors…), of the colors palettes (main and secondary) for every component and graphic elements such as icons and various buttons.