Cómo utilizar mosaicos de estilo HTML y CSS para poner en marcha su diseño
Ha pasado un tiempo desde Azulejos de estilo fueron traídos a este mundo por el genio de uno Samantha Warren. Para aquellos de ustedes que quizás los hayan mirado una vez y luego hayan olvidado lo que son, aquí hay una explicación rápida:
Los mosaicos de estilo son una especie de plantilla que le permite probar y obtener una vista previa rápidamente de varios colores, fuentes, texturas y otras opciones estéticas relacionadas con el estilo para sus diseños antes de crear una maqueta de alta fidelidad, pero después de que se hacen los marcos de alambre. Están destinados a ser presentados a clientes, partes interesadas o cualquier otra parte interesada bastante temprano en el proceso de diseño. De esa manera, puede superar las preocupaciones sobre la elección de la fuente y preguntas como «¿Podemos tener un rojo más llamativo?»
En pocas palabras, debería usarlos, aunque solo sea para usted. Puede parecer un gran problema agregar un paso más al proceso de diseño; pero puedo decirte por experiencia personal que vale la pena. Diseño en el navegador: mirar un lienzo de Photoshop en blanco puede ser abrumador; mirar fijamente una ventana de navegador en blanco parece ser mucho más difícil.
El sentido de dirección que proporciona la creación de un mosaico de estilo hace que diseñar el resto del sitio sea mucho más fácil. No es nada tan complejo o restrictivo como una guía de estilo; por lo tanto, brinda tanto un lugar para comenzar como la libertad de ajustar las cosas a medida que avanza.
Sin embargo, esto plantea un pequeño problema con los Style Tiles originales. Son PSD. Los diseñadores basados en navegador como yo querrán Style Tiles basados en navegador. Queremos ver cómo se verán estas cosas en la Web, después de todo, y en tantos dispositivos como sea posible.
Opciones prefabricadas
Varias personas ya nos han adelantado en ese frente. Hay plantillas prefabricadas para las personas que desean comenzar a crear Style Tiles en su navegador. Échales un vistazo:
El prototipo de estilo
La encantadora gente de Sparkbox creó un plantilla de mosaico de estilo receptivo basado en HTML y Sass. Es una de las opciones más simples, como se ve en la demostración, pero el código está bien comentado. Incluso fueron e incluyeron scripts opcionales para hacerlo compatible con IE 7 y versiones anteriores, en caso de que su cliente no haya actualizado su navegador en… para siempre.
Webstiles
Creado por Namanyay Goel, Webstiles tienen mucho en común con las otras soluciones de esta lista. Lo que los hace diferentes es que fueron construidos con el preprocesador Stylus CSS menos conocido (algunos dirían subestimado).
Azulejos estilo brújula
Si trabaja con el marco de Compass, junto con cosas como Ruby y Sass, intente Éste encendido para el tamaño. Se puede instalar como cualquier otra gema de Ruby, por lo que debería encajar perfectamente en su flujo de trabajo. Curiosamente, el texto del cuerpo se puede «generar» a través de una variable Sass y la contenido: atributo. Todo está diseñado para que nunca tengas que tocar el HTML.
Plantilla adaptable para baldosas de estilo
La Plantilla adaptable para baldosas de estilo trae algunas sombras paralelas bastante duras, pero responde y no usa nada más complicado que HTML y CSS clásicos. Sin marcos, sin preprocesadores, nada. Es un buen punto de partida si solo desea abrirlo en un editor de texto y listo.
Haz lo tuyo
Con tantas opciones prefabricadas, ¿por qué querría crear sus propios mosaicos de estilo HTML / CSS desde cero? ¿Parece una pérdida de tiempo? Bueno, sí y no.
Si está creando un sitio simple y aún no tiene todo el contenido planeado, o el cliente no lo ha enviado, una de las opciones prefabricadas funcionará bien. Sin embargo, si está creando una aplicación web compleja o un sitio muy grande con muchos tipos de contenido o elementos de interfaz de usuario distintos, es posible que desee crear una plantilla de mosaico de estilo desde cero.
Los existentes simplemente no tienen en cuenta la gran variedad de posibles tipos de contenido y elementos que existen. Por lo tanto, es posible que desee un mosaico de estilo que incluya un video, un reproductor de audio o un mapa incrustados. Es posible que desee uno que muestre una interfaz con pestañas o un menú de acordeón.
Si está creando un sitio que depende de ciertos elementos poco comunes de la interfaz de usuario, es posible que desee crear una plantilla de mosaico de estilo que incluya esas características.
No tiene por qué ser tan difícil. Simplemente configure un diseño simple de dos o tres columnas y comience a incluir los elementos visuales que serán más importantes para su diseño, según el contenido / la funcionalidad. Estos incluirán:
- muestras de color, patrón y / o textura;
- elementos tipográficos (encabezados, párrafos, elementos de lista, tal vez una cita en bloque);
- estilos de imagen (si planea incluir galerías de imágenes, por ejemplo);
- elementos de formulario más utilizados;
- cualquier elemento adicional de la interfaz de usuario que considere importante para el diseño, según el contenido y la estructura del sitio.
Por lo general, no es necesario crear un código listo para producción para todos los navegadores. Manténgalo simple, manténgalo en HTML5. A menos que esté utilizando un elemento de interfaz de usuario no estándar que deba codificarse desde cero en HTML y CSS, no se moleste con JavaScript.
¿La mejor parte? ¡Puede refinar y reutilizar todo el CSS relevante a medida que comienza a codificar su maqueta basada en navegador!
Conclusión
Vale la pena examinar los mosaicos de estilo si aún no los está usando.
Muéstrelos a los clientes, guárdelos para usted, use las opciones prefabricadas o haga las suyas propias… no importa. El simple hecho de tener ese sentido de dirección estilística hará que llenar esa ventana en blanco del navegador sea mucho más fácil.
Foto principal, estudio de diseño vía Anne-Sophie Leens
