Cómo comenzar con el diseño de la interfaz de usuario

Nunca empiece con la herramienta. Aprenda los fundamentos del diseño, la teoría del color, UX (experiencia del usuario) y HCI (interacción humano-computadora). Cuando comprenda cómo manipular los datos para controlar la experiencia, podrá crear interfaces increíbles.

Luego encuentre la herramienta que funcione para usted. Hago todas mis maquetas en Illustrator. Hay mucho desacuerdo sobre este punto, pero Photoshop es realmente un editor de imágenes. Illustrator, Inkscape o Fireworks están mejor diseñados para el diseño.

ACTUALIZAR> También estoy experimentando con Sketch ahora. Es más intuitivo y mucho menos costoso que Illustrator. No tan maduro, pero está llegando allí.

ACTUALIZAR A LA ACTUALIZACIÓN > Estoy de acuerdo con Sketch. Para el diseño puro de la interfaz, es lo mejor que hay ahora. Tiene sus limitaciones, pero con la plataforma de complementos JSTalk creo que se pondrá al día rápidamente. En la versión 3.2 ya ha mejorado considerablemente mi flujo de trabajo. Dado que Illy era mi principal herramienta de Adobe, también dejé Pshop por Pixelmator, que es más simple. Sketch + Pixelmator ha sido un dúo poderoso.

¡Bienvenido a GD.SE!

Para ser honesto, no creo que realmente necesites ser un gurú de Photoshop para diseñar tus interfaces de usuario. Especialmente si está haciendo web, y terminará codificando todo de todos modos, las habilidades que necesitará para presentar algunas maquetas y estructuras alámbricas no deberían tomar mucho tiempo para aprender. Photoshop es bastante intuitivo, pero esto, por supuesto, no significa que no tendrá una cierta curva de aprendizaje. La cuestión es que, si está diseñando para la web, probablemente debería hacerlo en el navegador y simplemente usar Photoshop para algunos gráficos y para probar cosas en el diseño.

Puede comenzar con algunos tutoriales básicos, solo para comprender cómo funciona el programa (capas, efectos de texto, formas, cosas así). Una vez que lo obtenga, puede seguir los tutoriales que lo guían a través de un proceso y lo ayudan a lograr un resultado, ya que generalmente cubren algunas de las técnicas que usará más adelante. Algunos tutoriales como estos , enfocados en una web, podrían ser muy útiles.

Ahora sobre el concepto, siempre hago el mío en lápiz y papel. Photoshop es genial para ciertas cosas, pero no para todo. Hay herramientas mucho mejores para la creación de prototipos, como Balsamiq (premium) o Pencil (gratuito y de código abierto). Son más rápidos y fáciles de usar.

Como mencionan los vestidos de paisano, es importante aprender los conceptos básicos del diseño . Hay muchos buenos recursos enumerados aquí en GraphicDesign para que pueda comenzar, que puede encontrar fácilmente revisando la etiqueta de recursos y ordenándolos por votos. Debería leer muchos de los recursos provistos si desea convertirse en un buen diseñador de cualquier cosa.

En cuanto a los recursos específicos de UI, encontré que este curso de UX es un buen comienzo. Entra en detalles de la mayoría de los aspectos del diseño de la interfaz de usuario, aunque siempre hay más que puedes aprender. Lo importante es seguir reglas probadas , Erik Kennedy ideó algunos buenos conceptos básicos ( parte dos aquí ), y crear mucho trabajo . Practica implementar las reglas que aprendes para reforzarlas en tu mente y ver de primera mano qué funciona y qué no. Hacer que otros usen su interfaz después de cada gran iteración también es muy útil, ya que recibe comentarios antes de que el producto esté "terminado".

También es importante mantenerse actualizado y tener UX en mente. UIGifs envía un correo electrónico una vez a la semana con algunos diseños de interfaz de usuario encantadores, recomiendo suscribirse. Muzli también publica una lista mensual que es más larga pero que no se ocupa al 100% de la interfaz de usuario. UserFlowPaterns es un gran sitio para ver deliciosos ejemplos de buenas prácticas puestas en aplicaciones de una manera concisa. UserInterface.io también publica algunos gifs geniales. Hay muchos otros, pero estos son mis favoritos en este momento.

En los tiempos modernos, como sugiere Yisela, no tenemos que trabajar en PS, pero podemos comenzar a diseñar directamente en el navegador (o un editor para cualquier plataforma en la que estés trabajando). Si bien puede que no sea lo mejor hacer esto siempre , hay muchas ventajas. Este artículo entra en un poco más de detalle en cuanto a cuándo y cómo hacerlo.

Creé una lista de recursos para ayudar a los principiantes a comenzar con el desarrollo web que espero sea muy útil para usted si termina haciendo su trabajo en código. La ventaja de hacer su diseño en código (o alguna otra forma intermedia de hacerlo como WebFlow ) es que ya tiene la mayor parte de su próxima etapa hecha, acelerando todo el proceso. No es obligatorio, por supuesto, pero también lo ayuda a pensar en términos de lo que es posible y las mejores prácticas al implementarlo a medida que diseña.

Suponiendo que lo que está diseñando es receptivo, lo que significa que se ve bien independientemente de la pantalla en la que se vea, debe diseñar pensando primero en los dispositivos móviles . Lo primero en dispositivos móviles nunca debe considerarse como lo más importante para dispositivos móviles, lo que implicaría que mientras lo hagamos funcionar en teléfonos y tabletas, estaremos bien. En su lugar, piense en ello como más pequeño primero o más pequeño luego más grande en el orden temporal de consideración. Al comenzar con el tamaño de pantalla más pequeño que planeamos admitir, sabemos que estamos prestando atención a los aspectos más vitales de nuestro sitio o aplicación, y el resto es jugoso. Si desea obtener más información sobre cómo desarrollarse de esta manera, escribí al respecto en mi blog personal.

Lo más importante que puede hacer para mejorar en el diseño de la interfaz de usuario es crear interfaces de usuario y hacer que los usuarios den su opinión sobre ellas, y hacerlo con frecuencia.

Ayudar a los usuarios es todo el objetivo, ¡así que hazlo! La aplicación de reglas a medida que las aprende es excelente, ya que ayuda a reforzarlas en su mente y, al mismo tiempo, mejora su diseño. Lo más probable es que tus diseños huelan mal por un tiempo, ¡pero está bien! Este video da una buena explicación de por qué - en esencia es porque nos pasa a todos, pero lo lograrás si sigues intentándolo :)

¿Dónde puedo aprender y mejorar mis habilidades con Photoshop y cómo puedo empezar a trabajar en un concepto?

Como dijo @plainclothes, nunca te concentres en las herramientas.

Dominar Photoshop no te convertirá en un diseñador web. Al igual que dominar cómo usar un horno no te convertirá en un chef.

Photoshop, Illustrator, Sketch, etc. Estas herramientas te ayudan a crear prototipos de alta fidelidad .

Las aplicaciones con salida de alta fidelidad le brindan demasiadas opciones para jugar en primer lugar . Diluyen tu enfoque y te abruman.

Tener más herramientas disponibles de las que necesita solo retrasará su comprensión del proceso de pensamiento que conforma el diseño de un sitio web.

Obsesionarse con el posicionamiento, los colores o los tipos de letra "perfectos en píxeles" en este punto solo lo distraerá de la fase de pensamiento.

Esto no es diseño.

Esto es “jugar al diseño”, un juego que además de ser una forma divertida de procrastinar, también te hace perder una gran cantidad de tiempo cada vez que lo juegas.

Cuando recién está comenzando, su enfoque debe ser hacer que sea lo más fácil posible para usted aprender los componentes básicos de un sitio web. Y luego ponte a usarlos.

Lo que me lleva a la respuesta de su otra pregunta:

A veces, cuando trato de hacer un trabajo de diseño, mi mente se queda en blanco o se confunde porque hay demasiadas referencias que me gustan y es difícil para mí determinar qué diseño prefiero.

¿Qué pasaría si te dijera que hay una manera rápida y fácil de sacar todas estas referencias de tu cabeza?

Se llama dibujar.

Probemos algo juntos, ¿de acuerdo?

Elija un bolígrafo y una hoja de papel ahora.

En realidad, los bolígrafos son para mariquitas. Adelante, elige un marcador. Uno gordo.

Ahora dibuje un boceto muy rápido del diseño del sitio web que desea explorar.

Luego compáralo con ese otro diseño en el que estabas pensando.

Al igual que:

Estos son prototipos de baja fidelidad .

En la etapa de exploración de ideas, eso es suficiente.

A diferencia de las aplicaciones para la creación de prototipos de alta fidelidad (Photoshop y similares), los bocetos de sitios web de baja fidelidad hacen que sea más difícil obsesionarse con los detalles. El objetivo es sacar tus ideas de tu cabeza para que puedas pensar en ellas y comparar diferentes opciones. La permanencia del papel y la falta de precisión inherente del rotulador es lo que te limita.

Tus cajas de herramientas te envuelven . Y esto no es tan malo como usted puede pensar. Este encajonamiento limita el grado de complejidad en el proceso de diseño.

En otras palabras, los bocetos con marcador lo acercan al "diseño" real y mantienen los detalles, con los que de otro modo jugaría inquieto, fuera de su camino. Por ahora.

Espero haberte ayudado.

El texto de arriba es un extracto de un post que publiqué aquí .

En cuanto a idear un concepto/diseño de diseño:

Comience por decidir qué tipo de sensación desea que tenga su diseño:

• Tema más claro o más oscuro
• Limpio (corporativo, tipográfico o diseños con muchos íconos) o lleno de muchos elementos gráficos
• ¿Uso de fotos? Quizás el fondo sea una imagen enorme que afectará a todo el diseño.

Luego, decida dónde se colocarán sus elementos principales.

• ¿Tu menú será vertical u horizontal? ¿Estará en la parte superior de la página o en la parte inferior?
• ¿Qué espacio quieres reservar para tu cabecera? ¿Dónde y qué tan grande será? ¿Qué habrá dentro del encabezado: un banner, un logotipo, tu menú? ¿El encabezado tendrá bordes claros o estará detrás del contenido?
• ¿Habrá un pie de página? ¿Qué tan grande y qué tan importante es?
• etc...

Todo esto dependerá del tipo de sensación que estés buscando. Explore una colección de buenos sitios de diseño web para inspirarse.

Una vez que haya decidido la sensación del diseño y el posicionamiento de sus elementos, puede comenzar a diseñar los elementos específicos.

Estás haciendo dos preguntas separadas y no todas relacionadas.

¿Dónde puedo aprender y mejorar mis habilidades con Photoshop?

Empezaría con Google y los libros. Hay mucha información escrita sobre el uso de PhotoShop en línea y en forma de libro.

¿Cómo puedo empezar a trabajar en un concepto?

Esto, esencialmente, es más sobre el pensamiento creativo. Hay, por supuesto, muchos libros y sitios web que pueden ayudar con esto. Pero este es un tema amplio en sí mismo.

Lo que podría ayudar es simplemente tomar un lápiz y obtener un bloc de dibujo. Si necesitas trabajar en una idea, esboza, esboza, esboza y esboza un poco más.

El diseño de la interfaz de usuario es un área fascinante y hay mucho que aprender. En primer lugar, ¡bienvenido! No se desanime si las cosas no son 100% perfectas desde el principio, es un campo en constante evolución, y creo que cualquier diseñador de interfaz de usuario le dirá que tomó al menos 2 años antes de producir un trabajo del que estuvieran realmente orgullosos. Para mí fue aún más largo.

Lo dividiré en 5 áreas diferentes:

1. Reuniendo tus pensamientos
2. Construyendo con contexto
3. Empezando
4. Construyendo la interfaz de usuario
5. Implementando la interfaz de usuario

Voy a suponer que se trata de una aplicación web de algún tipo (sensible o no, no importa). Muchos de los mismos pasos prevalecen en el diseño de aplicaciones móviles y de escritorio, así como en los sitios web de marketing.

1. Reuniendo tus pensamientos

Este es bastante simple. Mencionaste "Sé lo que es un buen diseño y una buena interfaz de usuario". ¡Excelente! Comience a tomar notas mentales de las piezas que le gustan de sus interfaces de usuario favoritas y de los sitios web mejor diseñados. ¿Qué los hace tan efectivos? ¿Cuáles son las piezas que utilizan (componentes reutilizables)? ¿Qué hacen que simplemente tiene sentido?

Comience a guardar esto como notas, sitios web y diseños. Por ejemplo, tengo una enorme carpeta de marcadores de "inspiración", anoto cosas con Evernote y me gustan fragmentos en Dribbble.

No se limite a identificar un buen diseño, pregúntese POR QUÉ es un buen diseño y comience a pensar en cómo haría que decisiones e ideas similares funcionen en su propio diseño. Sinceramente, creo que simplemente apreciar una gran cantidad de trabajos de diseño diferentes, hacerse muchas preguntas y pensar en el diseño te lleva aproximadamente al 50% del camino. El resto es solo ejecución.

2. Construir con contexto

En cualquier proyecto, producto o diseño en el que esté trabajando, hay una razón detrás. Cada persona que usa o interactúa con ese diseño tiene una razón para estar allí, ya sea escribiendo una publicación de blog, buscando algo, recopilando información o interactuando con otros usuarios. Averigüe qué está haciendo un usuario y construya todo alrededor de eso.

Trabaje con gerentes de producto, partes interesadas, clientes, otros desarrolladores o diseñadores, con quien pueda hablar.

Un gran ejemplo de esto en la práctica es fantasma . Querían simplificar los blogs y crear una interfaz de usuario potente. Aquí hay una muestra de su editor backend. Algunas suposiciones que podrían haber hecho: la mayor parte del tiempo se dedicará a escribir/editar publicaciones de blog. El foco está en el contenido. Espacio de trabajo sin desorden. Traer activos externos (como imágenes) es una tarea común. La mayoría estará familiarizado con Markdown básico (pero, bueno, mostremos una vista previa en vivo para aquellos que no lo están).

Estas suposiciones probablemente fueron discutidas y conocidas antes de que se llevara a cabo cualquier "diseño". El contenido para el diseño de edificios es muy importante.

El punto es: necesita saber lo que está construyendo, quiénes son los usuarios, y debe anotarlos antes de dibujar cualquier cosa. Los clientes u otras personas en el proyecto aprecian este enfoque, porque se trata menos de lo que usted quiere y más de lo que querría un usuario.

3. Primeros pasos

Esta es la primera vez que debería preguntarse: ¿ cómo debería ser?

Aquí es donde las cosas comienzan a ponerse muy subjetivas. Muchos diseñadores renuncian a las estructuras alámbricas y los bocetos y comienzan en Photoshop. Muchos saltan Photoshop o cualquier aplicación de escritorio y empiezan a diseñar en el navegador. No hay pasos siguientes correctos .

Por el bien del argumento, recomiendo esbozar ideas y trabajar en algún tipo de estructura alámbrica, especialmente si recién está aprendiendo. Sin embargo, no tienes que hacerlo. Puede esbozar ideas en un bloc de notas o tal vez en Balsamiq . Tal vez armar algunos mosaicos de estilo . Tal vez un tablero de humor . Tal vez súbase a Dribbble y arroje un montón de artículos en un " cubo ". Tal vez busque en los sitios de la competencia y esboce algunas ideas basadas en lo que están haciendo.

En este punto, comience a desarrollar sus ideas de manera visual. El diseño, el color, la tipografía, las imágenes, la marca, los componentes de la interfaz de usuario repetibles e incluso las animaciones son todos importantes; lo que es más importante es cómo encajan todos juntos en su objetivo de crear una gran interfaz de usuario para sus usuarios.

Un último punto es que estoy muy de acuerdo con el concepto detrás de Atomic Design . Básicamente, la idea es crear elementos consistentes y repetibles en todo el sitio, y luego la idea es simplemente organizar los componentes en cada página que diseñe. Definitivamente algo sobre lo que vale la pena leer, es una forma muy útil de comenzar a conceptualizar sus interfaces.

4. Construcción de la interfaz de usuario

Tienes los usuarios y los conceptos básicos abajo. Con suerte, tiene algunos esquemas e ideas de estilo listos para usar. Ahora viene la parte fácil: juntarlo todo.

Uso Photoshop, Sketch, Illustrator y diseño en el navegador, todo según el proyecto. La herramienta no es importante, ya que ha sido conducida a casa una docena de veces.

Lo importante es que te guste la herramienta que utilizas . Honestamente, deberías divertirte con él, y si sientes que una herramienta es difícil de usar o limita tus ideas, prueba otra cosa. Si te gusta Photoshop, no hay absolutamente nada de malo en usar Photoshop. Haga lo que sea correcto para usted: siempre puede buscar y considerar otro software y herramientas en el futuro.

Un paso importante en la creación de la interfaz de usuario es recopilar comentarios. Clientes, miembros del equipo o usuarios reales. Trate de evitar lanzar cualquier diseño sin recibir comentarios de una variedad de personas. Repita, pruebe las suposiciones y no tenga miedo de borrar el diseño y comenzar de nuevo.

Aquí hay un ejemplo de una maqueta de alta fidelidad bien ejecutada.

Algunas conclusiones: buena tipografía, uso claro de colores, botón brillante y grande, y buen diseño (el fondo claro con los "cuadros" de color blanco ayudan a dibujar la idea en los formularios). Más específicamente: estados personalizados en los elementos del formulario, ilustraciones de marca (el estilo de arte lineal en la ilustración del documento) y el aspecto personalizado de los elementos "codificados" con una fuente monoespaciada. Incluso las pequeñas consideraciones de UX, como la opción "Verificar más tarde" o la opción "recomendada", son un gran toque.

Al crear una maqueta como esta, la idea es que la mayoría de los elementos ya fueron diseñados o pensados. Cosas como los colores, la tipografía, los tratamientos de formularios, los estilos de los botones, los elementos de marca o las ilustraciones, etc., deberían haber sido pensados ​​o considerados antes de armar toda la interfaz de usuario.

5. Implementando la interfaz de usuario

En este punto, ha realizado un trabajo de diseño final y ahora es el momento de implementarlo. No estoy seguro de si planea hacer un trabajo de implementación o simplemente trabajar en maquetas solo gráficas. Pero, incluso si no está implementando su interfaz de usuario, debe comprender qué es y qué no es posible en el mundo de HTML y CSS.

Por lo general, esta etapa requiere que trabaje con un desarrollador front-end para crear sus plantillas de manera que pueda entenderlas. Comuníquese con sus desarrolladores temprano y con frecuencia sobre cómo les gustaría que se entregue la interfaz de usuario.

Algunos puntos rápidos sobre la implementación:

1. Aprenda a usar un lenguaje CSS compilado como Sass, SCSS o LESS. Definitivamente vale la pena el tiempo.
2. Cree cada componente reutilizable como un componente reutilizable en su CSS. Trae tantas variables y piezas reutilizables como puedas.
3. Cree una guía de estilo para sus desarrolladores que muestre todos los componentes reutilizables. Súper útil cuando una página necesita construirse rápidamente y tienen las piezas que necesitan para armar algo.

Consejo de Photoshop: ¡utilice la función de copia de CSS para ayudar con la implementación! Herramienta muy útil para principiantes, pero nunca use este código como final. Mírelo más como una herramienta de aprendizaje (ayuda a cerrar la brecha entre la maqueta y la implementación).

TL;RD

1. Comience a recopilar ideas sobre lo que es una buena interfaz de usuario y un buen diseño. Tome notas, guarde marcadores, etc. Este "catálogo de pensamiento" es lo que impulsa muchas de las decisiones que toma el diseñador.
2. Profundice realmente en lo que está diseñando y quiénes son los usuarios. Inicie discusiones, escriba objetivos y suposiciones, y asegúrese de que todos estén en la misma página.
3. Comience a trabajar en maquetas y estructuras alámbricas de baja fidelidad, así como en los primeros intentos de guías de estilo y delineación de componentes reutilizables. Muchos diseñadores dirán que hay un orden particular para estos artículos, pero honestamente, cualquier orden funciona.
4. Cree maquetas de alta fidelidad. Use Photoshop, Illustrator, Sketch, cree en el navegador, lo que le parezca mejor. Puedes usar todas las herramientas, o solo una.
5. Impleméntalo. Dado que cada producto/proyecto es diferente, no hay mucho que decir. Sugeriría escribir siempre su propio CSS siempre que sea posible; es un gran aprendizaje.
6. Diviértete e inspírate. No se obsesione con las herramientas o las mejores prácticas. Con el tiempo descubrirás lo que te gusta, en este momento el paso más importante es crear, construir y buscar mejorar constantemente.

¡Buena suerte!