El conjunto de herramientas del diseñador: flujos de trabajo, software y sitios web

Al igual que los desarrolladores de software, los redactores de contenido, el personal de marketing, etc., los diseñadores deben tener un buen conjunto de herramientas que les ayude a afrontar el trabajo diario. Lo que hemos intentado hacer aquí es describir estas herramientas, flujos de trabajo y la forma en que puede combinarlos para acelerar su trabajo y reducir la posibilidad de errores y errores.

Recopilar información

Cuando llega un nuevo proyecto, las primeras horas se tratan principalmente de recopilar información sobre él: qué problemas enfrenta el cliente, cuáles son sus objetivos, qué les gusta, etc. Durante este paso crucial, el diseñador debe tratar de obtener tantos datos útiles como sea posible, que luego se utilizarán para tomar decisiones informadas.

Evernote

Evernote es un software increíble, no es solo una aplicación para tomar notas. Puede almacenar archivos, combinarlos en colecciones, etiquetas, grupos, etc. A través de su potente búsqueda puede hacer referencia a proyectos anteriores y así sucesivamente. Por supuesto, el lado más poderoso es cómo lo usas. Tienen una guía aproximada para algunos enfoques organizacionales.

Correo electrónico, holgura, zoom ...

El siguiente es otro obvio, pero hay una razón por la que lo agregamos: posponer una llamada, un mensaje o una videoconferencia podría ser un retraso importante en un proyecto. A menudo, la capacidad de compartir una pantalla y repasar maquetas, wireframes, conceptos y diseños es un salvavidas. Nunca olvides eso

Encuentra inspiración

Una vez que hay suficiente información, el siguiente paso es buscar inspiración: cómo debe verse una aplicación / sitio web, cuál es el estilo, cuál es el objetivo, etc. ¿Hay alguna idea interesante para usar nueva tecnología o diferentes tipos de medios? ? Todos los diseñadores buscan inspiración de izquierda a derecha: sitios web, libros, revistas, cualquier cosa.

Dribbble, Behance y sitios web similares

Por esta misma razón (y para que los diseñadores se jacten) existen sitios web como Dribbble. Allí, los diseñadores podemos buscar ideas y enfoques que resuelvan los problemas a los que nos enfrentamos actualmente. A veces, el objetivo es crear "una página de ventas genérica para el servicio A". Esa página de ventas tendría literalmente un par de párrafos con una foto de archivo. Totalmente un objetivo poco inspirador, pero es realista. Bueno, la combinación de colores, tipografía, espacios, etc. pueden ser un poco más únicos. ¡Quizás también pruebe diferentes diseños! Y la idea para eso puede provenir de una página de destino aleatoria publicada hace 3-4 años. ¡La página Descubrimiento de 99Design también es un buen lugar para buscar!

Awwwards

Colocamos sitios como Awwwards en una categoría separada, ya que en realidad muestran algo que se ha construido y se puede ver funcionando. Y lo que es más, se centra más en la forma artística, no tanto en “cualquier trabajo de diseño”. La mayoría de las veces, los sitios son tan pesados ​​que solo se pueden usar en máquinas de alta gama, pero aún así puede inspirarse en ellos.

Paleta de colores / marca

Para una construcción nueva, donde no hay colores predefinidos, uno de los pasos para comenzar a trabajar sería elegir algo que se ajuste al nuevo sitio. Hay dos formas de abordarlo: elija un esquema de color existente o establezca un color primario / secundario y trabaje alrededor del esquema completo en función de ellos.

ColorHunt

Los sitios web como Color Hunt proporcionan una colección de paletas de colores creada por la comunidad. Puede elegir y usar algunos directamente o elegir los colores principales para comenzar. No es tan bonito pero también similar es Color Lovers.

MarcaColores

BrandColors tiene un objetivo ligeramente diferente: proporciona una lista de las principales marcas y sus combinaciones de colores. Allí puede encontrar excelentes tonos y combinaciones que pueden inspirar su construcción. Los colores no están sujetos a derechos de autor, pero nuestro consejo es que juegues un poco con ellos en lugar de copiar y pegar todos los colores de lugares como Amazon, por ejemplo.

Activos premium y gratuitos

No siempre hay tiempo suficiente para trabajar en todos los componentes del sitio. A veces, es mejor tomar un paquete de iconos, una ilustración o una foto de archivo hecha por otro diseñador / fotógrafo y usarla directamente.

• Font-Awesome: una gran colección de iconos en forma de glifos de fuentes
• Envato Elements: gran selección de activos de primera calidad a un buen precio.
• Unsplash: gran colección de fotos gratuitas de alta calidad
• Generadores de SVG como squircley, getwaves, blobmaker
• Adobe Fonts (pago) y Google Fonts (gratis)

El mejor consejo aquí es encontrar algunos sitios como estos y tenerlos cerca, para reducir tanto como sea posible el tiempo y el esfuerzo que tiene que hacer para buscar y encontrar los mejores gráficos para el trabajo.

Las principales herramientas de diseño

Con el trabajo inicial fuera del camino, se trata de construir el diseño. Dado que todo el software progresivo para diseñadores tiene todas las herramientas necesarias para crear diseños web / de aplicaciones, omitiremos las herramientas de wireframing.

Figma

Nuestra opción principal para el trabajo de diseño en DevriX es Figma. Proporciona excelentes capacidades de colaboración, así como aplicaciones basadas en navegador a las que cualquier miembro del equipo puede acceder, ya sea Linux, Mac o Windows. Anteriormente usábamos Adobe XD, pero los miembros basados ​​en Linux no podían utilizarlo y Sketch está bloqueado solo en Mac.

Ilustrador / diseñador de afinidad

Para trabajos más personalizados, Illustrator o Affinity Designer son definitivamente algunas de las mejores opciones. En el último año o dos, las ilustraciones personalizadas son una de las partes más populares de los sitios web. Los gráficos grandes y coloridos dominan la mitad superior del pliegue y más experiencia en las herramientas adecuadas es definitivamente algo bueno que hacer. En este lugar, también podemos agregar software 3D como Blender para el renderizado de modelos 3D, que se pueden utilizar como activos en las páginas web.

Photoshop / Fotografía de afinidad

Photoshop fue el software líder para el diseño web. Eso puede sonar extraño hoy, especialmente porque tenemos todas estas excelentes herramientas que se enfocan principalmente en la web. Pero Photoshop sigue siendo una gran herramienta y, a menudo, la usamos cuando hay fotos que necesitan editar o recortar formas.

Presentación

Pero no es solo el trabajo de diseño, un PNG estático. Algunos diseñadores que se centran un poco más en los gráficos en movimiento y las interacciones. Una buena demostración de cómo deberían comportarse los elementos al pasar el mouse, deslizar el dedo o hacer clic ayudaría mucho al trabajo de los desarrolladores de aplicaciones para el usuario. Tanto Figma como Adobe XD pueden ayudar en eso, pero ambos también son limitados.

Adobe After Effects

After Effects se considera una de las primeras opciones para gráficos en movimiento. Proporciona todas las herramientas necesarias para representar todas las acciones y animaciones. Algo bueno para recordar a los diseñadores aquí es que las animaciones deben seguir las limitaciones de la web. Agregar desenfoque de movimiento no es algo que pueda hacer. Entonces, cuando ingrese a animaciones más avanzadas, definitivamente discuta eso con su equipo de desarrollo de front-end o lea más sobre animaciones en la web y lo que es posible. Lo mismo ocurre con UX y A11y.

Almacenamiento

Figma y Adobe XD se centran prácticamente en la nube, por lo que no debe preocuparse por perder trabajo, pero no todo es así: Photoshop, archivos de Illustrator, fuentes que ha descargado, fotos, etc., todo reside en su máquina.

Es mejor hacer una copia de seguridad y tenerlos accesibles todo el tiempo, especialmente si trabaja en más de una máquina. Y cuando se trata de compartirlos, es muy fácil.

Dropbox

La mejor opción para esto sería Dropbox. Con su aplicación de escritorio fácil de usar, vigilará sus archivos y los sincronizará con la nube tan pronto como realice cualquier cambio. A partir de ahí, compartirlos con el cliente o su equipo está a un solo clic de distancia.