Aquí hay algunas formas en que puede trabajar más rápido:
- Utilice marcos de front-end (como Twitter Bootstrap) que eliminan parte del dolor del desarrollo de front-end.
- Tales marcos vienen con restablecimientos CSS, correcciones de compatibilidad entre navegadores y otras clases de utilidades que facilitan la implementación de un diseño.
- Vienen con sistemas de cuadrícula sensibles y / o elásticos que le permiten crear diseños receptivos desde el primer momento.
- También vienen con una biblioteca de elementos de interfaz de usuario comunes que requieren muy poco código para usar y personalizar.
- El marco en sí mismo fomentará un buen flujo de trabajo y un proceso de desarrollo (por ejemplo, un proceso de construcción automatizado y otra automatización de tareas, mapas de código, LiveReload + watch para ver instantáneamente los cambios de código en el navegador, linting, pruebas, etc.)
- Use SASS o LESS para hacer que su código de estilo sea más conciso y fácil de mantener.
- Usar bibliotecas de utilidades como Bourbon, tan comunes pero tediosas para hacer en CSS (como modificar colores o acceder a atributos con muchos prefijos de proveedores o funciones avanzadas con diferente sintaxis entre navegadores) es rápido y fácil.
- Anime a su (s) diseñador (es) a utilizar un sistema de cuadrícula estándar, fuentes web, patrones de interfaz de usuario web estándar y componer sus diseños utilizando la biblioteca de interfaz de usuario de su marco de elección. De esta manera, no tiene que establecer manualmente los anchos / alturas / márgenes de cada elemento en la página e implementar 10 estilos de botones diferentes o un montón de otros elementos únicos. Además de tener un diseño más coherente, muchos de los elementos de la interfaz de usuario serán implementables en el marco de su elección a través de fragmentos cortos.
- Trabaja con tu diseñador desde el principio en el proceso de diseño mientras todavía están enmarcando e iterando a través de la experiencia de usuario. Esto le brinda la oportunidad de señalar cosas que no son posibles o apropiadas en la web. También le permite elegir un marco apropiado como punto de partida para que puedan comenzar a construir a partir de la interfaz de usuario de stock del marco (o especificar su diseño en términos del diseño del marco o del sistema de paleta de colores).
- Del mismo modo, haga que el diseñador también piense en términos y especifique en el PSD las variables de diseño global, por ej.
- Defina un esquema de color simple y uniforme: color primario y secundario, color de recorte, color de alerta / advertencia / error, etc. Cambiar el esquema de color del sitio solo debería requerir cambiar algunas variables en su archivo
colors.lesso_variables.scss. - Defina una pequeña cantidad de pilas de fuentes universales: fuente de visualización (H1, H2, H3, H4, etc.), fuente de texto, fuente de lista, fuente de etiqueta, fuente de botón (muchas de ellas deben heredarse entre sí). El diseño nunca debería requerir pilas de fuentes únicas, y cambiar la tipografía del sitio debería ser tan simple como cambiar el esquema de color.
- Del mismo modo, los anchos de canaleta, los anchos de columnas, los márgenes, el ledding, etc., deben especificarse solo una vez en su código y aplicarse universalmente en todo el sitio. Esto también mejorará el diseño y será mucho más fácil de implementar y mantener.
- Hacer que el diseñador haga esto señalará cuando tengan un diseño muy inconsistente entre las páginas / componentes de la página y los alentará a producir un diseño más profesional.
- Para proyectos más complejos, puede usar algo como Yeoman para iniciar / andamiar su base de código. Hay generadores de proyectos incluso para los temas de WordPress, por lo que puede eliminar una gran parte del trabajo tedioso compartido en la mayoría de los proyectos (configuración de la estructura de directorios, tareas gruñidoras, gestión de paquetes, escritura de código repetitivo, etc.).
