Visual layer & Styling

Design

Visual layer & Styling

🙋 Need help? Ask an expert now!

Visual layer & styling

Styles and branding is not only a visual part. Is much more than aesthetics but the way a brand communicates with it's users. How it is perceived by the market, by users.

Communicating the brand
When designing a user interface is important to align with the brand this interface represents.
Understanding the brand style guide, how the brand addresses to its users is key for a successful project. You need to understand brand history, language, tone and voice. How the brand used to communicate with it's users and transmit them information.

"Your design will be as good as you can defend it"

Following the eye
One of the most important things is where we focus the user attention. Think about the graphics, pictures and content you are adding, where are you bringing user's attention and where the call to actions are. This is one of the first things we need ot understand in order to guide users with style guides into the interface.

Typography
The web is 95% text. Is the most important tool to communicate, but it needs to be organized and hierarchized. When this happens the web structure and the relationship of different elements is easy to perceive and understand.


Image from Internet is Hard

More information about web styles…
https://material.io/design/typography/#applying-the-type-scale
https://internetingishard.com/html-and-css/web-typography/

Colors
Define the colors you aregoing to use on your design.
Primary, secondary and tertiary colors. Include neutral colors such as white and black or grey to highlight the other colors.

Icons
Icons help users understand the meaning of a content without the need of reading it. They guide us about the intention of this content, but this happens only when the icons are easy to recognize. If you see an icon you can not recognize or you don't understand what's behind, then is not helpful and the only thing it transmits is noise.

Think about easy concepts like… Contact, home, user, love.
And some others as… Property, feeling, space. They are more abstract or difficult to represent with a simple picture or icon. They require more attention. In this cases a icon is only a noise source, so is better to avoid using them.

Images
Be sure all the images you are using are aligned with brand identity and they transmit the values of the brand.
Is also important to think about the tone, contrast, color and saturation of the pictures we want to add in order to bring a consistent style.

Forms & buttons
This is one of the most important parts when we need to add information into a system or app.

Be sure to create the form with the right hierarchy and organize form content into meaningful groups for users(i.e. location, personal info or payments). That will make easier for users to fill in the form with their info.

Spacing
Spacing is a transparent element that helps grouping elements visually or isolating them to generate certain sensation, experiences or transmitting a message.
White space relaxes the eye and transmits order and serenity.

We design white spaces between text and color.

Documentation
Be sure to document all the design process on each step. It is a long and hard process, so explaining how things work, what is the intention of different elements, which of them are necessary and how they interact with users will help the team or professionals on the next phase. Take into account the elements that need to be explained to transmit the information by reading the document. Be precise and sharp.

Edit Me on GitHub!