Diseñar en el navegador, consejos profesionales para que funcione para usted
Diseñar en el navegador solía asustarme. No porque me pareciera difícil, sino porque pensé que terminaría con un diseño compuesto por un montón de cajitas, algo tan genérico y soso que terminaría rehaciéndolo en Photoshop.
Ese miedo resultó ser completamente injustificado. No solo mis diseños se volvieron más enfocados, también los completé más rápido e involucré a los clientes antes en el proceso a través de la interacción y la discusión.
No es tan difícil como crees
El diseño es diseño. No importa si se hace en un programa de software o si se escribe en código. Diseñar en el navegador no es más difícil que diseñar en Photoshop. Como cualquier herramienta, necesitas usarla para aprenderla y eventualmente dominarla.
El diseño es un proceso iterativo, uno que se dificulta al trabajar para los clientes. A veces es difícil para los clientes imaginarse exactamente lo que está describiendo; El diseño en el navegador puede involucrarlos durante todo el proceso en lugar de solo en la fase de diseño.
Esencialmente, las fases de diseño y desarrollo se están fusionando y si eres naturalmente bueno en el diseño y el desarrollo de front-end, empezarás a diseñar en el navegador como un pato al agua.
Una de las principales ventajas de diseñar en el navegador es que podemos diseñar en función de expectativas realistas. A veces, el diseño en software puede crear problemas imprevistos para el desarrollo front-end. Los elementos de la interfaz de usuario pueden diseñarse de forma extraña o tal vez simplemente no tienen ningún sentido, es difícil explicarle a un cliente por qué cambió algo, no porque no lo entenderán, sino porque ya lo incluyó en el diseño y lo tenía. aprobado. Diseñar en el navegador se presta a la idea de simplicidad.
Tener un plan
Antes de siquiera pensar en diseñar, necesito tener un plan. El hecho de que esté usando una herramienta diferente no significa que mi proceso cambie. Me gusta tener un plan bastante sólido antes de comenzar a diseñar y necesito saber qué estoy diseñando, por qué estoy diseñando, para quién estoy diseñando, antecedentes del cliente y cualquier información de servicio o producto que necesite enfocar. en.
Después de determinar estas cosas, tendré una mejor idea sobre qué es el producto o qué hace el cliente, cuánto tiempo lo ha estado haciendo, qué lo distingue de su competencia, quién es su base de usuarios y cuál es el principal y el secundario. los objetivos del sitio web serán.
Personalmente me gusta tener documentación de todo. Por lo general, tengo documentación para el mapa del sitio, el contenido, las llamadas a la acción y la arquitectura del sitio. Para cuando empiece a diseñar, debería tener una estrategia clara para el diseño y todo el contenido debería haber sido recopilado.
Dibuja primero
Dibujar es clave si voy a diseñar algo en el navegador. Puedo delinear áreas de contenido con lápiz y papel, obtener comentarios e iterar rápidamente en la base de mi diseño.
Hago un boceto basado en el plan que describí anteriormente y me aseguro de tener todas las áreas de contenido y las llamadas a la acción establecidas. Dibujar debe ser rápido, no pierdas mucho tiempo perfeccionando nada. Debe ser lo suficientemente sólido para mostrárselo a un cliente, pero lo suficientemente descuidado como para que pueda terminarlo en menos de una hora.
A continuación, me gusta hacer un prototipo del sitio a partir de mis bocetos en HTML y CSS. El prototipo es una gran cantidad de cuadros grises con texto e imágenes para marcadores de posición. Las cajas grises actúan como contenedores para el contenido cuando empiezo a diseñar. El mayor beneficio de la creación de prototipos con código es que el cliente puede interactuar con el prototipo y ver cómo funciona la arquitectura del sitio, de esa manera, si algo está mal o necesita refinarse, podemos manejarlo ahora en lugar de hacerlo el día del lanzamiento.
Azulejos de estilo
Antes de que podamos comenzar a diseñar, necesitamos algún tipo de estilo en el que basar nuestro diseño. Necesitamos determinar los colores y fuentes que usaremos con posibles texturas y patrones. Aquí es donde entran en juego las fichas de estilo.
Azulejos de estilo fueron creados por Samantha Warren y los he estado usando por un tiempo. Ayudan a los clientes a ver una guía de estilo temprana y muy simple que podemos usar para comenzar a diseñar. Me gusta crear varios de estos para ver cuál prefiere el cliente de esa manera puedo reducirlo a uno. Encuentro que estos también son muy importantes en el proceso de aprobación y ayudan a prevenir el rechazo total.
Diseño
Ahora estamos listos para comenzar a diseñar. Si está acostumbrado a diseñar en un programa de software como Photoshop o Sketch, esto no es muy diferente. Usando nuestro archivo de prototipo, comenzamos a agregar contenido simulado en nuestro marcado. En este punto, sabemos exactamente qué se incluye en cada sección de contenido en el marcado y la cuadrícula ya se ha definido, por lo que no debería tomar tanto tiempo.
Ahora voy a empezar a colocar estilos en capas en mi contenido. Voy a agregar estilos base para el color, la tipografía y el diseño. Una vez que los estilos base estén terminados, me alejaré y lo miraré. Me gusta hacer capturas de pantalla de ciertas partes del diseño para consultarlas más adelante.
Refinamiento
Una vez que estoy satisfecho con la capa base, me gusta tomar notas sobre qué refinar. Basándome en esas notas, probablemente usaré Photoshop o Bosquejo para agregar textura o cualquier cosa con una sensación tangible. Photoshop y Sketch son excelentes herramientas para refinar elementos complejos de la interfaz de usuario rápidamente, por lo que guardo cualquier cosa que pueda ser difícil de codificar más de una vez.
La razón por la que hago esto es porque quiero que mi código base sea sencillo y limpio y cuanto más codifique, comente y elimine, más descuidado e hinchado se vuelve su código base.
Guarde y reutilice patrones comunes
Si tuviera que diseñar en el navegador desde cero cada vez, puede parecer que las cosas tardan una eternidad, pero si comienza desde una base personalizada, un marco, puede eliminar cualquier paso repetitivo. Para empezar, tengo una versión personalizada de Initializr que uso con una cuadrícula de respuesta personalizada integrada en Sass (http://sass-lang.com/). El uso de un marco personalizado me da una ventaja para la creación de prototipos y el diseño.
Tener una biblioteca de patrones de IU comunes también es una excelente manera de construir un prototipo rápido y hace que el diseño en el navegador sea más eficiente. yo suelo Texto sublime para codificar y una cosa que he aprendido a aprovechar son los fragmentos personalizados que puede crear. Agregué varias variaciones de navegación, listas, barras laterales y otros elementos comunes a mi lista de fragmentos para poder colocarlos rápidamente en mi marcado con una simple acción. También uso cuentas en Codepen y JSFiddle para guardar patrones. Dan Cederholm creó un gran tema de WordPress para almacenar patrones comunes llamado Peras. Utiliza publicaciones para almacenar código que puede editar en vivo en el front-end para probar y obtener una vista previa de los cambios.
Conclusión
La práctica y la aplicación práctica le ayudarán a diseñar mejor en el navegador. Lo más probable es que si realiza algún tipo de desarrollo de front-end, ya tenga un marco base desde el que comenzar y ya tenga algunos patrones comunes para usar.
Ahora todo lo que necesita hacer es comenzar a diseñar en el navegador y, finalmente, obtendrá un flujo de trabajo que sea eficiente y funcione dentro de su proceso. Con la práctica solo se volverá más rápido.
