Sistemas de diseño, no diseños
No importa cuánta experiencia tenga un diseñador con el diseño interactivo, es casi imposible predecir todos los elementos necesarios para lanzar y mantener una experiencia digital. Como diseñador, incluso si puede predecir hasta el último diseño y elemento de UI, seguramente habrá cambios o adiciones en el camino que son literalmente imposibles de tener en cuenta.
Si tiene suerte, sus programadores tienen suficiente sentido de diseño para manejar estos ajustes para usted, pero un codificador típico no le dará al diseño la cantidad de atención detallada que un diseñador le gustaría.
Cuando se necesitan cambios en el diseño, el diseñador podría regresar y burlarse de cada cambio, o en su lugar, podemos comenzar a pensar en el diseño digital en términos de sistemas, no diseños, que se pueden aplicar a todos y cada uno de los elementos de un sitio web o aplicación de manera organizada y estándar.
Esto no significa que dejemos de diseñar diseños todos juntos. Esto solo significa que necesitamos reconocer los sistemas que evolucionan de nuestros diseños, y debemos asegurarnos de seguir las reglas de nuestro sistema a medida que agregamos más diseños y más vistas.
Sistema Basics
Al diseñar un sistema, por ejemplo, para un sitio web, tiene sentido comenzar con un diseño estático. Sin embargo, a medida que evoluciona el diseño, los temas y estilos de diseño comunes comenzarán a revelarse, y un diseñador necesita reconocer estos temas y estilos como elementos del sistema emergente para que puedan aplicarse de manera consistente en todo el resto del sitio.
Si tienes un sitio web elegante y nuevo y te quedas con esquinas redondeadas y sombras pequeñas y ligeras, esos estilos se convierten en parte de tu sistema. Si tiene en cuenta la línea azul de los cuatro píxeles debajo de su menú, es posible que desee diseñar ventanas emergentes con un borde azul de cuatro píxeles, esquinas redondeadas y una pequeña sombra de gota de luz, pegada a su sistema.
Esta consistencia es excelente para el diseño y la usabilidad, pero también hace que sea mucho más fácil para un desarrollador agregar un nuevo elemento de página en el futuro que coincida o complementa el diseño.
El concepto es simple para los diseñadores, pero puede que no sea para programadores que estén más preocupados por escribir código eficiente. Aquí es donde entran en juego las guías de estilo, pero en proyectos más pequeños, todo lo que se necesita es un documento de Photoshop bien diseñado.
¿Dónde empiezo?
Si el concepto de sistemas de diseño tiene sentido, entonces puede estar preguntándose cómo comenzar. Si bien todos van a tener su propio proceso, me gusta comenzar con un solo diseño estático, generalmente la página de inicio si estamos diseñando un sitio web.
Luego, además de la página de inicio, a menudo ayuda al menos comenzar algunas páginas secundarias que sabrá que podrían tener otros elementos necesarios. Una vez que el sistema visual comienza a desarrollarse, es hora de hacerlo oficial.
Tome lo que tiene frente a usted y agregue los elementos faltantes que sean estándar o muy comunes a todos los diseños basados en la web. Esto incluye cosas como ventanas emergentes, consejos de herramientas o íconos de "ayuda", todos los niveles de etiquetas de encabezado (H1, H2, H3, H4, H5 e incluso H6), otros iconos comunes y cualquier otra cosa que se encuentre diseñando para cada sitio web que construya. Ayuda a pinchar un poco en la web para ver qué elementos aparecen en otros sitios que potencialmente tendrían sentido en su sitio.
Dependiendo de qué tan complejos sean los diseños que haya elegido, es posible que deba crear un diseño de "guía de estilo", que no es una página real, pero eso contiene ejemplos de tantos elementos como sea posible, diseñado usando el sistema y se diseñó como si fueran elementos reales en una página real.
[Critte ID = "Attachment_1186" align = "alignnone" width = "640"]
Este archivo de diseño de alueoptics.com es un buen ejemplo de una guía de estilo. [/Título]
¿entonces qué?
Una vez que los elementos mismos estén en su lugar, comience a pensar en los estados. Un gran porcentaje de los elementos en su página necesitará estados flotantes, estados activos, estados seleccionados, estados discapacitados, etc. Incluso un H1, por ejemplo, se beneficiaría de un estado flotante, porque puede haber un H1 dentro de una caja que se encuentra en un estado flotante.
[Trite ID = "Attachment_1188" Align = "AlignNone" Width = "691"]
Este ejemplo de Infomc.com muestra el estado de columnas "desplazamiento" en el pie de página.
y finalmente ...
Una vez que su sistema esté bastante bien cuidado, no olvide uno de los pasos más importantes de todo este proceso. ¡Termine de diseñar el sitio! Use su sistema recién creado para construir cada última página en su mapa del sitio y/o estructuras de alambre. Esto ayudará a desarrollar aún más el sistema, y también servirá como una guía necesaria para codificar el sitio, cuidar los casos de esquina y asegurarse de que la usabilidad y el contenido se consideren tanto como la estética del sistema.
La tarea de terminar todo el diseño es inmensamente útil cuando la entrega a un codificador o cambia la mentalidad y comienza a codificarlo usted mismo. Terminar un sitio basado en un sistema también es una gran tarea para los diseñadores junior que están aprendiendo el oficio y pueden beneficiarse de un poco de orientación o estructura.
A menos que su desarrollador también sea un diseñador, es probable que prefiera que no tuvieran que tomar ninguna decisión de diseño. (No te sientas mal. ¡Estoy seguro de que tampoco querrían que tomes ninguna de sus decisiones de código!)
Pero saber esto significa que todos necesitamos luchar contra la tentación de ser flojos, y debemos dar la mayor orientación posible a nuestros desarrolladores.
Consultas de medios
Ya sea después de este proceso o durante este proceso, también es necesario diseñar diseños cada vez más grandes de algunas de las páginas para que su sistema pueda ajustarse a diferentes tamaños de pantalla y consultas de medios. Con suerte, estas cosas encajarán en su lugar con poco esfuerzo, pero nuevamente, ayuda a crear estos diseños y elementos para eliminar cualquier confusión posible mientras codifica.
A veces, los diseños cambiarán por completo debido a los tamaños de pantalla, y en estos casos, deberá crear un nuevo diseño utilizando su sistema.
Conozca su CSS
Para llevar los sistemas de diseño y el proceso de diseño digital un paso más allá, los diseñadores deben aprender CSS básicos o al menos sus límites. De esta manera, podemos tomar pequeñas decisiones (o compromisos) para garantizar que los elementos de diseño se puedan crear con CSS (en lugar de imágenes) siempre que sea posible.
Por ejemplo, una mentalidad de sistemas significa que las imágenes son un poco más limitantes de lo que solían ser. Si está utilizando una imagen para crear una caja o incluso un borde en una caja, deberá asegurarse de que sea escalable o dividida de tal manera que pueda acomodar un área de 20 píxeles tan bien como un área de 1000 píxeles. Dado que de todos modos debe hacer esto para un diseño receptivo, no debería ser una carga adicional.
Además, si su menú tiene una sombra de caída que se puede construir con CSS en lugar de una imagen, es realmente simple que el programador aplique esa sombra de caída a una punta de herramienta o una ventana emergente. Además, las imágenes basadas en CSS ahorran tiempo de carga y se ajustan para cosas como la pantalla Retina, donde las imágenes pueden no.
Sin embargo, una cosa a evitar es demasiado compromiso de diseño en nombre de CSS. Esto no debería ser demasiado difícil. La mayoría de los diseñadores se sorprenderían de lo que un buen codificador puede hacer con CSS en estos días, y nadie debería sacrificar la estética porque "no se puede hacer con el código". De hecho, todavía tengo que ver nada que literalmente no se puede hacer con el código.
También conozca sus sprites
Un truco no tan nuevo, pero recientemente popular es el CSS Sprite. Los sprites de imagen son un muy buen ejemplo de cómo podría ser un sistema de diseño, en lugar de solo un diseño. Podemos crear una cuadrícula de iconos o elementos de la interfaz de usuario en un solo archivo de imagen, preocupándonos cómo se ven juntos, no exactamente a dónde van en cualquier diseño dado. (Nadie puede predecir hasta el último lugar que puedan ser necesarios.) Aquí hay una explicación más sobre
CSS Sprites
.
Se está haciendo
Los sistemas de diseño ya existen como un medio para acelerar el diseño y la iteración. Muchos desarrolladores usarán ayudantes como
Twitter Bootstrap
y
JQuery UI Temas
Para agregar rápidamente el diseño a una aplicación o sitio web centrado en la función.
Estas herramientas son, en términos muy simples, conjuntos de estilos y sprites de imagen que se pueden aplicar a cualquier código para crear una apariencia y sensación distintas. Aplican todos los principios que he estado discutiendo aquí, menos la naturaleza personalizada del diseño desde cero.
Para el diseño de la web o la aplicación personalizada, estos pueden ser un poco "cortador de cookies", pero el concepto es el mismo si descarga un sistema o lo diseña personalizado.
Pero ten cuidado ...
Abogo en gran medida a partir de una página en blanco para cada nuevo sitio web o aplicación que cree (o más específicamente, a partir de una estructura de alambre). Esto lo obliga como diseñador a pensar y crear físicamente hasta el último detalle. Cuando los detalles ya se ven bien, nos olvidamos de ellos, y luego los dejamos al azar o al status quo. Esta no es una forma de crear un diseño de vanguardia o inspirador, pero funciona muy bien si su objetivo es cumplir con una fecha límite o entrar bajo presupuesto.
Usted hace la llamada en eso, pero animo a mi personal a crear diseños totalmente personalizados casi el 100% del tiempo. Así es como creamos sitios web totalmente personalizados, que es una forma en que nos destacamos de nuestra competencia. Aunque hay una serie de elementos de interfaz de usuario comunes que construimos cada vez que creamos un nuevo sitio web, somos muy conscientes de no caer en esa trampa de "estilo web moderno" en la que se caen muchos sitios nuevos. Francamente, todos se ven bien, pero todos se ven iguales.
Bueno, sabía todo eso
Bien, pero tienes que hacerlo. Como esta idea es bastante lógica, veo a muchos diseñadores que piensan que están haciendo esto, pero no hacen un esfuerzo adicional. Pueden pensar que un desarrollador puede ver los elementos de diseño en una página y aplicarlos a otra, pero ese no siempre es el caso.
Si valora y respeta los procesos de diseño y diseño como lo hacen la mayoría de los diseñadores, tiene poco sentido pasar las responsabilidades de diseño a un compañero de equipo que no solo se centra en otras cosas, sino que también es poco probable que esté capacitado en el diseño.
Solo recuerda esto
Cada vez que comience un proyecto que tenga algo que ver con Digital, cambiará en algún momento. Eso es inevitable, porque es demasiado fácil y barato actualizar el diseño digital, y en el mundo de ritmo rápido de hoy, todo necesita una actualización constante. Ayuda a tu futuro yo y a tus futuros compañeros de trabajo construyendo con eso en mente. Ponga el tiempo extra y el pensamiento por adelantado para desarrollar un sistema de respiración vivo que pueda crecer con la base de usuarios, crecer con tendencias y crecer orgánicamente con el tiempo. ||– 102
Este archivo de diseño de alueoptics.com es un buen ejemplo de una guía de estilo. [/Título]
¿entonces qué?
Una vez que los elementos mismos estén en su lugar, comience a pensar en los estados. Un gran porcentaje de los elementos en su página necesitará estados flotantes, estados activos, estados seleccionados, estados discapacitados, etc. Incluso un H1, por ejemplo, se beneficiaría de un estado flotante, porque puede haber un H1 dentro de una caja que se encuentra en un estado flotante.
[Trite ID = "Attachment_1188" Align = "AlignNone" Width = "691"]
Este ejemplo de Infomc.com muestra el estado de columnas "desplazamiento" en el pie de página.
y finalmente ...
Una vez que su sistema esté bastante bien cuidado, no olvide uno de los pasos más importantes de todo este proceso. ¡Termine de diseñar el sitio! Use su sistema recién creado para construir cada última página en su mapa del sitio y/o estructuras de alambre. Esto ayudará a desarrollar aún más el sistema, y también servirá como una guía necesaria para codificar el sitio, cuidar los casos de esquina y asegurarse de que la usabilidad y el contenido se consideren tanto como la estética del sistema.
La tarea de terminar todo el diseño es inmensamente útil cuando la entrega a un codificador o cambia la mentalidad y comienza a codificarlo usted mismo. Terminar un sitio basado en un sistema también es una gran tarea para los diseñadores junior que están aprendiendo el oficio y pueden beneficiarse de un poco de orientación o estructura.
A menos que su desarrollador también sea un diseñador, es probable que prefiera que no tuvieran que tomar ninguna decisión de diseño. (No te sientas mal. ¡Estoy seguro de que tampoco querrían que tomes ninguna de sus decisiones de código!)
Pero saber esto significa que todos necesitamos luchar contra la tentación de ser flojos, y debemos dar la mayor orientación posible a nuestros desarrolladores.
Consultas de medios
Ya sea después de este proceso o durante este proceso, también es necesario diseñar diseños cada vez más grandes de algunas de las páginas para que su sistema pueda ajustarse a diferentes tamaños de pantalla y consultas de medios. Con suerte, estas cosas encajarán en su lugar con poco esfuerzo, pero nuevamente, ayuda a crear estos diseños y elementos para eliminar cualquier confusión posible mientras codifica.
A veces, los diseños cambiarán por completo debido a los tamaños de pantalla, y en estos casos, deberá crear un nuevo diseño utilizando su sistema.
Conozca su CSS
Para llevar los sistemas de diseño y el proceso de diseño digital un paso más allá, los diseñadores deben aprender CSS básicos o al menos sus límites. De esta manera, podemos tomar pequeñas decisiones (o compromisos) para garantizar que los elementos de diseño se puedan crear con CSS (en lugar de imágenes) siempre que sea posible.
Por ejemplo, una mentalidad de sistemas significa que las imágenes son un poco más limitantes de lo que solían ser. Si está utilizando una imagen para crear una caja o incluso un borde en una caja, deberá asegurarse de que sea escalable o dividida de tal manera que pueda acomodar un área de 20 píxeles tan bien como un área de 1000 píxeles. Dado que de todos modos debe hacer esto para un diseño receptivo, no debería ser una carga adicional.
Además, si su menú tiene una sombra de caída que se puede construir con CSS en lugar de una imagen, es realmente simple que el programador aplique esa sombra de caída a una punta de herramienta o una ventana emergente. Además, las imágenes basadas en CSS ahorran tiempo de carga y se ajustan para cosas como la pantalla Retina, donde las imágenes pueden no.
Sin embargo, una cosa a evitar es demasiado compromiso de diseño en nombre de CSS. Esto no debería ser demasiado difícil. La mayoría de los diseñadores se sorprenderían de lo que un buen codificador puede hacer con CSS en estos días, y nadie debería sacrificar la estética porque "no se puede hacer con el código". De hecho, todavía tengo que ver nada que literalmente no se puede hacer con el código.
También conozca sus sprites
Un truco no tan nuevo, pero recientemente popular es el CSS Sprite. Los sprites de imagen son un muy buen ejemplo de cómo podría ser un sistema de diseño, en lugar de solo un diseño. Podemos crear una cuadrícula de iconos o elementos de la interfaz de usuario en un solo archivo de imagen, preocupándonos cómo se ven juntos, no exactamente a dónde van en cualquier diseño dado. (Nadie puede predecir hasta el último lugar que puedan ser necesarios.) Aquí hay una explicación más sobre
CSS Sprites
.
Se está haciendo
Los sistemas de diseño ya existen como un medio para acelerar el diseño y la iteración. Muchos desarrolladores usarán ayudantes como
Twitter Bootstrap
y
JQuery UI Temas
Para agregar rápidamente el diseño a una aplicación o sitio web centrado en la función.
Estas herramientas son, en términos muy simples, conjuntos de estilos y sprites de imagen que se pueden aplicar a cualquier código para crear una apariencia y sensación distintas. Aplican todos los principios que he estado discutiendo aquí, menos la naturaleza personalizada del diseño desde cero.
Para el diseño de la web o la aplicación personalizada, estos pueden ser un poco "cortador de cookies", pero el concepto es el mismo si descarga un sistema o lo diseña personalizado.
Pero ten cuidado ...
Abogo en gran medida a partir de una página en blanco para cada nuevo sitio web o aplicación que cree (o más específicamente, a partir de una estructura de alambre). Esto lo obliga como diseñador a pensar y crear físicamente hasta el último detalle. Cuando los detalles ya se ven bien, nos olvidamos de ellos, y luego los dejamos al azar o al status quo. Esta no es una forma de crear un diseño de vanguardia o inspirador, pero funciona muy bien si su objetivo es cumplir con una fecha límite o entrar bajo presupuesto.
Usted hace la llamada en eso, pero animo a mi personal a crear diseños totalmente personalizados casi el 100% del tiempo. Así es como creamos sitios web totalmente personalizados, que es una forma en que nos destacamos de nuestra competencia. Aunque hay una serie de elementos de interfaz de usuario comunes que construimos cada vez que creamos un nuevo sitio web, somos muy conscientes de no caer en esa trampa de "estilo web moderno" en la que se caen muchos sitios nuevos. Francamente, todos se ven bien, pero todos se ven iguales.
Bueno, sabía todo eso
Bien, pero tienes que hacerlo. Como esta idea es bastante lógica, veo a muchos diseñadores que piensan que están haciendo esto, pero no hacen un esfuerzo adicional. Pueden pensar que un desarrollador puede ver los elementos de diseño en una página y aplicarlos a otra, pero ese no siempre es el caso.
Si valora y respeta los procesos de diseño y diseño como lo hacen la mayoría de los diseñadores, tiene poco sentido pasar las responsabilidades de diseño a un compañero de equipo que no solo se centra en otras cosas, sino que también es poco probable que esté capacitado en el diseño.
Solo recuerda esto
Cada vez que comience un proyecto que tenga algo que ver con Digital, cambiará en algún momento. Eso es inevitable, porque es demasiado fácil y barato actualizar el diseño digital, y en el mundo de ritmo rápido de hoy, todo necesita una actualización constante. Ayuda a tu futuro yo y a tus futuros compañeros de trabajo construyendo con eso en mente. Ponga el tiempo extra y el pensamiento por adelantado para desarrollar un sistema de respiración vivo que pueda crecer con la base de usuarios, crecer con tendencias y crecer orgánicamente con el tiempo. ||– 102