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 muchas cajas pequeñas, algo que era tan genérico y sosa que terminaría rehaciéndolo en Photoshop.
Ese miedo resultó ser completamente injustificado. No solo mis diseños se enfocaron más, sino que también los completé más rápido e involucré a los clientes más temprano en el proceso a través de la interacción y la discusión.
El diseño es diseño. No importa si se está haciendo en un programa de software o si está escrito en código. Diseñar en el navegador no es más difícil que diseñar en Photoshop. Como cualquier herramienta que necesita usar para aprender y eventualmente dominarlo.
El diseño es un proceso iterativo, que se hace más difícil 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 a lo largo del proceso en lugar de solo 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 en el desarrollo del front-end, tendrás que diseñar en el navegador como un pato lleva al agua.
Un beneficio importante del diseño en el navegador es que podemos diseñar en base a expectativas realistas. A veces, el diseño en software puede crear problemas imprevistos para el desarrollo del front-end. Los elementos de la interfaz de usuario podrían diseñarse de forma poco clara o tal vez simplemente no tengan ningún sentido, es difícil explicarle a un cliente por qué cambió algo, no porque no lo entiendan, sino porque ya lo lanzó en el diseño y lo tuvo aprobado. Diseñar en el navegador se presta a la idea de simplicidad.
Antes de siquiera pensar en diseñar, necesito tener un plan. Solo porque estoy 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 servicio o información del producto que necesitaré enfocar. en.
Después de determinar estas cosas tendré una mejor idea de lo que es el producto o lo que hace el cliente, cuánto tiempo lo han estado haciendo, qué los diferencia de su competencia, quiénes son sus usuarios y cuáles son los principales y secundarios. objetivos del sitio web van a ser.
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.
El boceto es clave si voy a diseñar algo en el navegador. Puedo analizar áreas de contenido con lápiz y papel, obtener retroalimentación e iterar rápidamente en la base de mi diseño.
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. El boceto debe ser rápido, no pierdas mucho tiempo perfeccionando nada. Debe ser lo suficientemente sólido como 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 prototipar el 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. Los cuadros grises actúan como contenedores para el contenido cuando realmente empiezo a diseñar. El mayor beneficio en 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á desactivado o es necesario refinarlo, podemos manejarlo ahora en lugar de hacerlo en el día de lanzamiento.
Antes de que podamos comenzar a diseñar, necesitamos algún tipo de estilo para basar nuestro diseño. Necesitamos determinar los colores y las fuentes que usaremos con posibles texturas y patrones. Aquí es donde las fichas de estilo entran en juego.
Azulejos de estilo fueron creados por Samantha Warren y los he estado usando desde hace 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 evitar el rechazo rotundo.
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 prototipo comenzamos a agregar contenido falso en nuestro marcado. En este punto, sabemos exactamente lo que está pasando 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 comenzar a poner estilos en capas en mi contenido. Voy a agregar estilos básicos de color, tipografía y diseño. Una vez que terminen los estilos base, me alejaré y lo miraré. Me gusta hacer capturas de pantalla de ciertas partes del diseño para hacer referencia más adelante.
Una vez que estoy satisfecho con la capa base, me gusta tomar notas sobre qué refinar. En base a esas notas lo más probable es que use 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 UI rápidamente, así que guardo todo lo que pueda ser un problema codificar más de una vez
La razón por la que hago esto es porque quiero que mi base de código sea delgada y limpia y cuanto más codifique, comente y elimine, más descuidada e hinchada se volverá su base de código.
Si tuvo que diseñar en el navegador desde cero cada vez, las cosas pueden parecer que demoran para siempre, 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 construida 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 comunes de UI también es una gran 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 es a los fragmentos personalizados que puede crear. He añadido 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 llamados Peras . Utiliza las publicaciones para almacenar el código que puede editar en vivo en el front-end para probar y obtener una vista previa de los cambios.
La práctica y la aplicación práctica te ayudarán a diseñar mejor en el navegador. Lo más probable es que si hace algún tipo de desarrollo de aplicaciones para el usuario, ya tiene un marco base desde donde comenzar y ya tiene algunos patrones comunes para usar.
Ahora todo lo que necesita hacer es comenzar a diseñar en el navegador y eventualmente 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.