Estas 10 reglas del diseño gráfico deben practicarse hasta que se conviertan en tu memoria muscular.
Autor: Hoang Nguyen
Traducción de Gonzalo León
Illustration by Philip Nordström
Para completar verdaderamente un Producto — Diseño UX/UI, debes adquirir y aplicar diversos conocimientos en áreas de negocios, psicología humana, patrones de usabilidad, tecnología y habilidades interpersonales para extraer y analizar información.
Puede resultar abrumador para quienes recién comienzan su carrera en este campo, ya que el conocimiento es prácticamente ilimitado. Incluso limitandose a aprender en el área de nuestros conocimientos favoritos, ponerlos en práctica en el trabajo diario es otra historia.
Mi consejo es empezar por los más básicos e irlos repitiendo hasta que estén tan arraigados en tu memoria que no tengas que intentar recordarlos cada vez que los necesites. Asi pues, se convierten en un tipo de información similar a la “memoria muscular”, en un instinto que aplicas con cada nuevo proyecto de diseño.
1. LÍNEA Y TRAZO
Si la unidad más pequeña de la materia es el átomo, entonces los puntos son la unidad minima visual de las que se constituyen las imágenes . Al conectar dos puntos, podemos crear una línea recta, una línea curva o en ángulos. Combinando esas líneas y trazos, formamos elementos de diseño.
Cada línea y trazo nos darán sensaciones diferentes, pero en general, Línea y Trazo tienen tres propósitos principales:
- Ayuda a dirigir la mirada.
- Crear énfasis, resaltar
- Dar sensación de movimiento
Ver un ejemplo hecho por el autor Hoang Nguyen para Interactive Labs
En la página de inicio de InteractiveLabs, utilicé un trazo diagonal en el medio de la pantalla para llamar la atención sobre los patrones del logotipo y al mismo tiempo aumentar la dinámica del encabezado del sitio web.
Leer más:
Líneas de estado de ánimo: estableciendo el tono de su diseño
2. ESCALA Y TAMAÑO
A proper design has a proportion which befitting with the way people perceive something. In simple words, a proportion is intentionally determining the sizes of design elements.
Determining this will help:
-
- Draws attention to and from certain elements
-
- Create emphasis, drama
Let’s see the Jupiter detail page, the word Jupiter and the sphere right in the middle of the screen will quickly attract viewers. The size of this sphere stands out from the rest of the elements, adding remarkable effect to the overall design.
3. Color Scheme
It is redundant to re-mention the significance of colors. Colors are like waves of water that can propel a ship forward or overturn it to its doom.
As a result, we must be as careful as possible when selecting and creating a color palette and do not forget to use color principles and colors with meaning in computers, such as:
-
- Green: Successful
-
- Blue: Processing
-
- Yellow: Warning
-
- Red: Error occurred
In the profile screen example, I chose colors that are distinct enough to distinguish the types of information but harmonize when they are sticking together. For the rest of the designs, I kept the color neutral so that the viewers could quickly scan the information of the Pie chart.
4. Repetition
The most significant advantage of repetition is that it shows the brand element consistently and thus imprinted in the viewer’s mind.
Furthermore, using repetition skillfully can help connect individual components without relying on linking elements to make the design less cumbersome.
In this design, I purposely repeated small red, yellow, and green circles numerous times to create consistency with the illustration style in the beginning. To see more of the motion intent that helps guide the viewer’s eyes as they scroll down a web page, view the animation version.
5. Negative Space
Negative space is an area, a distance between the design elements. Thanks to these elements, this space can also have its shape and purposes.
Logo Designers — skilled at using creative methods of metaphor and metonymy, frequently employ negative space.
Hidden spaces are commonly used in UI Design to create breathing spaces and make an impression on the subject.
Enginetheme’s homepage is one of my favorite designs from my early design career. I used the hummingbird logo shape to demonstrate the combination of design and programming, leaving plenty of space around it to give it a “wow” factor.
6. Symmetry
The human eye is quickly drawn to and soothed by symmetrical structures. The more perfect the symmetry, the more beautiful we perceive it to be.
Thus, while an asymmetrical layout is usually a safe choice, it can occasionally bring tears of boredom.
The layout of Savy’s home screen (the application of TPBank that opens a savings book following clients’ target) shows symmetrical savings packages, making it easy for viewers to track information. Moreover, it also makes the layout pleasing to the eye.
7. Transparency
Transparency enables elements to interact with one another, resulting in fascinating visual effects. When layering different images in the same direction also helps to create movement in the design.
For the text to be readable but not monotonous, I used a large color array with a color tone suitable for the background and moderate transparency in the example design above. At the same time, I duplicated the background image again and deliberately aligned it to have deviated from the large image. I found the result quite impressive.
8. Texture Pattern
Ever since the realistic design style (Skeuomorphism) disappeared, the usage of textures or patterns received less attention for its shortcomings, such as confusion, increased application capacity, and so on. However, when used strategically, it can help your design come to life with depth and evoke surface tactile.
I used the same pattern as the geographical maps for the travel application’s login page, which increased the enjoyment and demonstrated the spirit of the product.
9. Balance
Symmetry is a balance with the same properties such as size, length, shape, etc. However, to create visual balance, it is not necessarily the same aspect.
Something long but small can balance something short but big. “Visual weight” is what we named it, and it makes the overall design harmonious without being boring.
In the Book section on this landing page, I made different line lengths, bends times, and the near and far positions to achieve visual balance.
10. Contrast
Having already mentioned the balance above, we can not leave out the contrast. Wow! Designing is such a complicated field.
Yes, designing is a complicated yet highly fascinating profession. The exciting thing is that there is no universal standard and that it requires the designer to adjust the principles to suit the context of use.
Generally, contrast is the difference between density, color, shape of design elements when we place them side by side. Moreover, it affects legibility, adding emphasis to the design and making it stand out.
When designing a dark background, pay close attention to the contrast of the text against the background for easy reading. A designer must distinguish between types of information so that viewers can easily find the necessary information in the same area.
There are times when I do not entirely recall or think as clearly as I write. However, as I previously stated, if you practice these principles long enough, they will become a design instinct. It will save us time and allow us to create better products.
Thank you for reading, and stay tuned for the last 10 rules!
