Los mockups de interfaz de usuario (UI) ayudan a responder a las principales preguntas visuales.
El objetivo de este artículo es ayudar a crear mockups UI más rápidos, sin sacrificar la calidad de tu trabajo.
1. Primero dibuja tus ideas
Hacer un esbozo en dibujo es rápido, fácil y sin riesgos.
Antes de la sumergirte en píxeles y dimensiones de cuadrícula, esbozar tus pensamientos puede ser útil como un primer borrador para organizar tus ideas y experimentar un poco.
Es más sencillo poner a prueba un concepto en un boceto que en un formato digital. Incluso se pueden esbozar un par de composiciones diferentes y decidir sobre la mejor después de verlas.
2. Comienza con las pantallas para móvil
No importa si estás diseñando maquetas, wireframes , o prototipos, diseña primero la pantalla más pequeña. El diseño de la pantalla para móvil es el mejor ejercicio de diseño Responsive.
A partir de la versión más pequeña, continúa luego con la ampliación a pantallas más grandes pero sólo con los elementos principales. Añade el contenido secundario en versiones posteriores.
El diseño de la pantalla móvil primero afronta la composición más problemática en primer lugar, por lo que es más fácil mantener una experiencia consistente en las pantallas más grandes.
3. Utiliza herramientas compatibles entre Wireframing y la creación de prototipos
Los mockups son sólo un eslabón en la cadena del proceso de un diseño. Su eficacia depende tanto del wireframe previo como del prototipo posterior. Y los tres procesos funcionan mejor cuando se digitalizan.
Los diseñadores tienden a preferir el software hecho para efectos visuales en lugar de diseño, algo como Photoshop o Sketch. Permiten más opciones para el diseño gráfico, pero pueden causar complicaciones cuando se transfiere al software de creación de prototipos.
Del mismo modo, los wireframes y los prototipos tienen su software propio, con más opciones para la interactividad, patrones de interfaz de usuario, bibliotecas personalizables y elementos smart.
Algunas herramientas para el wireframing y prototipado permiten a los usuarios integrar directamente archivos de Photoshop y Sketch, ayudando a los diseñadores a añadir elementos interactivos a estos documentos estáticos con un simple arrastrar y soltar.
Este ahorro de tiempo permite a los diseñadores crear mockups con el software que prefieran, y reintegrar los documentos en el proceso de diseño cuando quieran.
4. Elige tu software de diseño UI
Entre Sketch y Photoshop, cada uno tiene sus seguidores. Uno no es necesariamente mejor que el otro, depende más de los gustos del diseñador.
Esto no quiere decir que Sketch y Photoshop son lo mismo. Sketch ofrece una gran cantidad de características de diseño diferentes de Photoshop, mientras que Photoshop tiene unas capacidades visuales más avanzadas.
Si aún no te has decidido, prueba los dos y mira a ver cual de ellos es el que mejor te funciona. Lo más probable es que te sientas más cómodo con uno que con otro.
5. Inspírate en buenos ejemplos
A veces la mejor manera de aprender es simplemente observar.
Estudia otros ejemplos visuales e intenta determinar lo que hacen bien, y cómo se pueden utilizar esas prácticas en tu sitio.
Si necesita ayuda para encontrar inspiración, echa un vistazo a estas galerías, la mayoría de las cuales se actualizan diariamente:
6. Elimina elementos innecesarios
Visualmente hablando, las interfaces desordenadas no son eficaces. Distraen, además de afectar negativamente a la comprensión, capacidad de búsqueda y legibilidad. Por estas razones, dispón el mínimo número de elementos.
Al utilizar menos elementos, das más fuerza a los que mantienes. Incluso si no estás utilizando un estilo minimalista, los elementos innecesarios diluyen el contenido principal, minando así tus objetivos más importantes. Si no es necesario para el UX, deshazte de él.
Procedimiento para decidir los elementos que deben quedarse y los que no:
- Construye un inventario de contenidos de todos los elementos futuros en una página
- Da prioridad a estos elementos y elimina los que no son necesarios
- Muestra los elementos restantes en una jerarquía visual basada en la importancia
- Crea bloques de contenido basados en las categorías de elementos
- Añade o quita bloques en los layouts de acuerdo a la prioridad
7. Implementa un sistema de rejilla
Al igual que cualquier otro instrumento de trabajo, los sistemas de rejilla han evolucionado para facilitar las tareas cotidianas de los diseñadores. Mientras que algunos todavía se niegan a utilizarlos, son beneficiosos.
Un sistema de rejilla organizada permite ajustar con precisión las alineaciones, los espacios en blanco y los contenidos al píxel.
Mientras que las rejillas horizontales son las más utilizadas, una rejilla vertical todavía puede ser útil, especialmente con la tipografía.
8. Utiliza elementos UI e iconos gratuitos
Dibujar cada botón, icono y gráfico puede llevar mucho tiempo, a veces tanto como la propia maqueta. Ayúdate de los kits UI gratuitos como éste para ahorrar tiempo.
Hay muchos kits para Photoshop y Sketch, y también se puede encontrar recursos adicionales para aplicaciones.
9. Utiliza vectores
Los gráficos muestran las imágenes con un conjunto fijo de píxeles (las fotografías y los videos), mientras que los vectores alteran la cantidad de píxeles en base a la resolución y el tamaño de la pantalla (se pueden escalar sin pérdida de calidad). Siempre que sea posible, utiliza gráficos vectoriales.
Los gráficos vectoriales escalan rápidamente, adaptándose a las pantallas retina en dos o tres veces el tamaño. Photoshop y Sketch fueron diseñados con esto en mente. En Photoshop las formas y los trazados personalizados son vectores de forma automática, y Sketch ofrece soporte vectorial de forma predeterminada.
Echar un vistazo a estos elementos vectoriales gratis para empezar.
10. La tipografía Web-safe
Para evitar problemas más adelante, comienza con las fuentes compatibles con Web en la fase de mockup. No verificar si una fuente se puede utilizar online hará que tengas que dedicar trabajo extra más tarde.
El uso de fuentes predeterminadas como las Google fonts o estos 653 recursos tipograficos gratis evita una gran cantidad de tiempo en el diseño de mockups.
Pero no te limites. Si un proyecto requiere de una fuente única o personalizada, vale la pena utilizar recursos adicionales. Sólo asegúrate de que es segura para Web antes de usarla.
11. Herramientas de color ahorran tiempo
Al igual que la elección de las fuentes correctas, la elección de los colores correctos también ayuda a ahorrar tiempo. Es útil el uso de herramientas de color gratuitas y online.
A menos que seas un virtuoso del color, dar con una combinación de colores a partir de cero puede ser tedioso y lleno de callejones sin salida. Las herramientas de selección de color aceleran el proceso.
Por ejemplo Cohesive Colors, un proyecto libre en GitHub, ofrece esquemas de color basados ??en los colores introducidos y distintas variables. Otra opción es Paletton, un selector de color de rueda, también libre. Pero estos no son los únicos: echa un vistazo a la lista de 28 herramientas de color de Creativebloq.
12. Duplica capas
Si bien esto puede parecer algo obvio, vale la pena mencionarlo. Desarrolla el hábito de duplicar capas para volver a crear estilos similares.
Por ejemplo, si utilizas el mismo botón en diferentes páginas, si tienes texto que se repite, si tienes un gráfico que está sólo ligeramente modificado, etc. Duplicar el original es un atajo fácil.
13. Utiliza la capa Composición (Photoshop)
Quienes están familiarizados con Photoshop es posible que conozcan el panel de composición de capas, y lo útil que es. Básicamente, se ahorra "instantáneas" de un archivo PSD, con ciertos grupos y capas ocultas. La ventaja es la posibilidad de crear múltiples pantallas o páginas en un mismo documento, usando la selección de capas para todos.
Esta característica hace más fácil la organización. Sin embargo, sólo está disponible para Photoshop.
14. Denominación adecuada de los archivos y las capas
Las capas y los archivos pueden convertirse rápidamente en un caos, especialmente si guardas archivos con capas individuales.
En aras de la organización, nombra correctamente los archivos y las capas con algún tipo de convención. No sólo hace que la construcción del mockup sea más fácil permitiendo encontrar los elementos más rápido, también es útil para todo el equipo de trabajo. Recuerda que los desarrolladores tendrán que acceder a tus mockups en algún momento.
15. Control de las versiones
Mientras que los desarrolladores ya saben todo acerca de la gestión de control de versiones, los diseñadores no se han acostumbrado todavía. Puede ser difícil de conseguir, pero afortunadamente herramientas como Pixelapse pueden ayudar.
Lo que se gana con el control de versiones es la posibilidad de acceder / volver a los estados anteriores, (de ahí el nombre de "control de versiones"). Esto es mucho más fácil que guardar una colección de archivos con el nombre v1 , v2 , v3 , etc.
16. Almacenar los archivos en el sitio correcto
Con todos los elementos nominados correctamente y organizados, lo que necesitas para almacenarlos es un lugar donde los miembros del equipo puedan acceder a ellos fácilmente. Las dos opciones básicas son:
- intranet
- servicio basado en la nube (es decir, Dropbox …)
17. Sé independiente
En otras palabras, no te acostumbres a pedir ayuda a los demás si te encuentras con un problema. A menos que a quien la pidas sea Internet.
Investigar un poco online puede responder al 95% de tus preguntas, por lo que piensa que Google puede ahorrar tiempo tanto a ti como a tu equipo.
Como punto de partida mira esta lista de blogs de diseño. Lo más probable es que otros diseñadores hayan tenido tu problema antes, y publicado las soluciones en uno de esos blogs.
18. Haz vista previa en dispositivos en vivo
Una cosa es ver un mockup en una ventana de Photoshop o de Sketch, y otra muy diferente es verlo en directo en la pantalla prevista. Las vistas previas dan una idea de lo que tu maqueta será después de la codificación.
Lo más útil es exportar imágenes completas o bien utilizar una herramienta como Skala Preview, que permite ponerte a prueba en una amplia gama de dispositivos.
Comentarios