Diseño

¿Cómo entregar personalidad a sitios basados en plantillas genéricas?

Para nadie es un secreto que algunos sitios web están hechos en base a plantillas genéricas. En este tipo de situaciones es ideal incorporar el diseño. Además, hay que pensar que los templates son el punto de partida para un sitio, más no el resultado final. Por ello, es importante la identidad que se le otorgue.

En este artículo revisaremos cómo identificar elementos de un proyecto y aplicarlos en otro nuevo, a partir de una plantilla prediseñada.

Uso de la paleta de color

La paleta de colores es uno de los aspectos elementales en un sitio web, ya que puede alterar la experiencia de un usuario o transformar un sitio de forma placentera. Por estas razones, el color es un factor elemental para comenzar a cambiar la identidad de una plantilla genérica.

Factores relevantes cuando se cambia la paleta de una plantilla

Estos son los tres aspectos más relevantes para considerar como factor de cambio en una plantilla.

• Identificar colores: Los colores corporativos de la marca deben estar presentes en la paleta.
• Discriminar los colores por primarios y secundarios: Debemos tratar siempre de mantener solo un color primario. Los secundarios deberán tener menos fuerza para no ensuciar la plantilla. Además, debe tener la posibilidad de utilizar la escala de grises.
• Evaluar estos cambios: Comprobar que los elementos relevantes como botones de llamado a la acción, links e íconos sigan siendo notorios.

Definiciones de formas

Los elementos como botones y cajas de contenido marcan una presencia especial dentro de un sitio, ya que tienen la capacidad de lucir serios, divertidos y dinámicos. Con unos simples ajustes en el radio de los vértices, los botones y las cajas del sitio lucirán diferentes.

Factores para tomar en cuenta al manipular vértices y formas

Manipular los vértices y las formas se relacionan en mantener la consistencia de lo que se quiere diseñar. La forma para lograrlo se relaciona en dos aspectos:

• Consistencia: Si decidimos cambiar una caja con bordes rectos a bordes redondeados, debemos asegurarnos que los elementos hermanos sigan el mismo estilo. De esta manera, se conserva la consistencia en el sitio.
• No excederse: Sobretodo en las cajas con texto porque quitan espacio interno visualmente y puede que el texto luzca con carencia de aire con respecto al contenedor. En estos casos es preferible optar por un radio sútil.

Uso de Tipografía

Hablar de cambios tipográficos es hablar de grandes cambios. Escoger la tipografía correcta es de vital importancia para darle identidad a un sitio web, especialmente cuando se escogen dos; una para los títulos y otra para el cuerpo. De cualquier forma, si debes escoger una o dos, esta decisión es difícil e importante, más aún si no manejas este tipo de factores.

Herramientas para elegir tipografías

Existen  algunos recursos que pueden ayudarte a escoger tipografías antes de cambiar la configuración de un sitio web. Hay dos de gran calidad las cuales recomendamos, a continuación:

Archetype: una herramienta en la que podemos previsualizar parejas tipográficas, funcionalidades y tamaños. ¡Muy útil!

Font Pair: Se puede escoger tipos de familia tipográficas con y sin serif y mezclarlas entre ellas. Resulta muy útil cuando se quiere hacer una rápida comprobación de tipografía sin entrar en mayores detalles.

Aspectos a considerar en un cambio tipográfico

Existe una serie de elementos a considerar para poder efectuar un cambio topográfico, entre las que se pueden mencionar están:

• Respetar la identidad de la marca: Si la marca que queremos incorporar en la plantilla tiene un manual de normas con una tipografía predefinida, deberíamos en consecuencia utilizar esta tipografía, a no ser que esta no sea apta para web. De todas formas, debemos tener clara la identidad de la marca para saber que familia tipográfica escoger.
• Comprobar que funcione a diferentes tamaños: Es un error común escoger tipografías que se ven bien sólo a cierto tamaño. En este sentido, la herramienta Archetype es muy útil.
• Cuidado con las versiones Light: Se ven muy bien gráficamente, pero te aseguramos que muchos usuarios no lo agradecerán. Esto es muy peligroso porque en pantallas de menor calidad desaparecen este tipo de tipografías. Lo recomendable es usar las familias tipográficas desde sus versiones normal, semibold y bold, y las versiones light dejarlas para textos mayores a 32pt.

Elementos de Iconografía

Como diseñadora este es uno de mis elementos preferidos. Se dice mucho con algunas líneas y en niveles de complejidad pueden ser casi tan importantes como los párrafos de texto. Por estas razones, es que la iconografía es un muy buen aliado al momento de dar identidad propia a un sitio. Desarrollar una familia iconográfica propia nos separa automáticamente de otros.

Recomendaciones para crear una familia iconográfica

Estos son los puntos más certeros para poder crear una familia iconográfica. Recuerda que siguiendo estos aspectos lograrás la mejor calidad.

• Identificar si la plantilla soporta subir iconografía propia: Muchas veces los íconos que vemos en plantillas son generados a través de fuentes iconográficas. Para poder personalizar fácilmente la plantilla debe permitir subir imágenes (jpg, png, svg).
• Peso visual: Es preferible seguir la misma línea gráfica de la iconografía preexistente, al menos en el grosor de las líneas, así no tendremos problemas de predominancia sobre botones de acción.

Definición de la Línea gráfica

Otro aspecto importante, pero en este caso no solo dentro del sitio, sino también fuera de él, es la línea gráfica. A través de ellas podemos lograr una apariencia totalmente diferente.

Elementos para definir una línea gráfica en una plantilla

Entre los elementos que definen una línea gráfica encontramos tres aspectos, los cuales harán la diferencia dentro del trabajo final.

• Utilizar imágenes de buena resolución: Toda la transformación de diseño que hemos hecho se puede ir por la borda si subimos imágenes de mala calidad.
• Mirar el conjunto: Para definir una línea gráfica eficiente, no sólo debemos buscar buenas imágenes. Una vista general nos dirá si se ve una línea gráfica definida o sólo un grupo de imágenes al azar.
• Conocer los tamaños: Algunas plantillas no adaptan las imágenes automáticamente al tamaño necesario y al insertarlas se verán diferentes unas de otras. Si la plantilla no ajusta el tamaño automáticamente, debemos nosotros predefinir un tamaño estándar para cada tipo de imagen.

Diferencias que entregan identidad

Repasamos diferentes elementos de una interfaz, a los cuales se puede recurrir para hacer que una plantilla genérica se vea totalmente diferente y refleje la identidad que queremos.

Dependiendo del tiempo y el conocimiento que tengamos, podemos cambiar uno o todos haciendo más o menos notoria la diferencia.

Aprender a cambiar estos elementos es un buen ejercicio para poner a prueba nuestro ojo crítico. Asimismo, podemos estructurar un diseño desde una base ya definida.