El diseño es uno de los puntos que mayor fricción producen durante el desarrollo de una web
Como diseñadora, soy testigo de la metamorfosis continua a la que se someten los procesos de diseño, con el objetivo de una mayor optimización del tiempo y de los recursos.
El problema reside en que desarrolladores y maquetadores no siempre se entienden, y esa fricción es la que provoca los retrasos y la falta de calidad en el proyecto. ¿Os ha pasado alguna vez?
Pues bien, de este problema nace una solución que va ganando más y más adeptos cada día, sobre todo entre los desarrolladores: Los frameworks.
«Un framework tiene como objetivo facilitar el diseño web mediante la componentización»
Pero, ¡Ojo! Esto suena más bonito de lo que es en realidad.
Nada es tan sencillo como lo pintan, y en cualquier proceso de desarrollo web, siempre va a ser necesario un diseñador. Especialmente para el proceso de personalización del framework, el cual puede llegar a ser muy tedioso y complicado.
Sin embargo, existe un framework que, personalmente, me ha sorprendido, y que vaticino, vencerá a su hermano mayor Boostrap.
Sí, estoy hablando de Semantic UI.
¿Qué es Semantic UI?
Este post no va dirigido a especificar sus virtudes y enumerar sus ventajas, que son muchas. Eso lo podéis ver a través de este enlace.
Hoy, quiero compartir con vosotros lo que para mí es la joya de la corona de Semantic UI: Los temas.
¿Cómo personalizar el diseño de una web en 10 minutos con Semantic UI?
- Crear un tema
- Personalizar el archivo site.variables (fuentes, colores, márgenes, fondos, etc.)
- Activar el tema
- ¡Tachán! Ya tenemos una web visualmente coherente
Vale, ya hemos visto los pasos para personalizar el diseño con Semantic UI, pero, la pregunta principal es:
¿Cómo funciona la personalización en Semantic UI?
Semantic, al igual que otros frameworks, se basa en componentes tales como grids, botones, formularios, headers, menús, segmentos y un largo etc.
Todos los componentes «beben» del tema. Así que, si modificas el tema principal, los demás componentes se actualizarán también.
Así pues, visualmente, los estilos de nuestra web genérica quedarían más o menos de esta manera:
Ilustración 1: Ejemplo de tema (Estructura semantic y simulación web)
Proceso de personalización web en 10 minutos con Semantic UI
1. Nuestro proceso de personalización expréss empieza creando un tema dentro de la carpeta: Semantic/src/themes
Crearemos dentro de una carpeta llamada globals, donde pegaremos el archivo site.variables de otro tema para poder modificarlo según nuestras necesidades.
¡OJO! En Semantic la nomenclatura es muy importante, así como el respeto de la estructura.
Ilustración 2: Estructura de carpetas de un tema en semantic
2. Ajusta tu archivo site.variables:
En este archivo se especifican los elementos más importantes de una web: fuentes, tamaños de letra colores, márgenes, paddings, enlaces, etc. Este archivo contiene más de 500 variables, pero no es obligatorio cambiarlas todas. Por defecto, todo aquello que no modifiques, mantendrá su aspecto default.
Ilustración 3: Algunas de las variables que se pueden modificar en este site.variables
3. Activa tu tema:
Cuando tengas listos tus cambios, tan solo debes ir al archivo semantic/src/theme.config y cambiar el @site por tu tema.
Ilustración 4: Vista del archivo theme.config donde se activa el tema
Una vez cambiado, y mediante gulp.js, Semantic generará un archivo scss global que sobreescribirá los estilos por defecto, y como consecuencia, toda nuestra web y todos sus componentes se actualizarán al nuevo estilo:
Ilustración 5: El ejemplo del resultado de nuestro tema (estructura semantic y simulación web)
¡Tachán! ¡Tu web actualizada en 10 minutos!
¿Fácil no?
Esto es solo una mínima parte de lo que se puede hacer con Semantic UI. Y lo más importante: ahorra tiempo tanto a desarrolladores como a diseñadores, y garantiza así un resultado de calidad.
¡Os animo a probarlo, estoy segura de que os encantará!
Si tenéis dudas, ¡Dejadnos un comentario y estaremos encantados de resolverlo!
