¿Cómo personalizar una web en 10 minutos? Semantic UI

avatar-montse.png

Escrito por
Senior UX Designer 22 junio, 2017

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ñadorEspecialmente 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? 

  1. Crear un tema 
  2. Personalizar el archivo site.variables (fuentes, colores, márgenes, fondos, etc.) 
  3. Activar el tema
  4. ¡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: 

semantic ui.jpg

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. 

semantic ui 2.png

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

semantic ui3.png

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. 

semantic ui4.png

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: 

semantic ui5.pngIlustració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!

ojo_07 ¿ Te gusta lo que lees? Suscríbete a nuestras newsletters