Algunos consejos prácticos no filosóficos: puede comenzar a aprender cualquier cosa imitando a alguien que ya sabe cómo hacer algo.
Si desea una experiencia práctica muy rápida en el diseño de la interfaz de usuario, le sugiero que tome un ejemplo que le guste, como el que vinculó en su pregunta, y ¡cópielo! (Por supuesto, siempre que no lo distribuyas para producción o ventas, ya que eso te haría una mala persona).
No se preocupe por qué software tiene / qué software necesita y siga estos tres sencillos pasos:
1) Analizar los componentes. ¿Que ves? ¿Qué patrones emplea esta interfaz de usuario? (Piense en formas … Piense en piezas funcionales que vería en una página web en vivo o en una pantalla móvil. ¡Esta no es una pregunta capciosa, y la respuesta es más fácil de lo que piensa!)
- ¿Cuáles son las principales diferencias entre un director de arte y un diseñador gráfico?
- ¿Cómo se puede comenzar una agencia de diseño / desarrollo web con inversiones mínimas?
- ¿Qué tan grande es la diferencia entre un buen diseñador y un gran diseñador?
- ¿Es el conocimiento del análisis de datos una habilidad importante aplicable al futuro del diseño de UX?
- ¿Qué opinas del diseño de material de Android 5.0, que ahora también está en Google Maps? ¿Y si se compara con el diseño de la interfaz de usuario en iOS 8?
– Este ejemplo hace uso de muchos paneles rectangulares. Algunos paneles tienen claramente componentes funcionales, como el panel principal superior izquierdo que contiene una imagen de perfil y algunas estadísticas claras del usuario, y el panel superior derecho contiene un botón ‘Seguir’. Estos componentes sugieren que esta IU fue diseñada para ser una vista del perfil de un usuario (probablemente redes sociales) y un portal para que otro usuario indique interés en el usuario y permanezca conectado.
2) ¡ Haz esos componentes!
– Aprenda a usar la herramienta de rectángulo que viene con cualquier software basado en píxeles / vectores. Dibuja rectángulos! Incluso puede dibujar rectángulos para los botones, pero si desea redondearlos como en este ejemplo, su software puede tener rectángulos redondeados como una forma integrada o puede aprender cómo combinar trazados (¡Cómo combinar trazados en Photoshop!)
– Texto Elija una fuente que le guste y asegúrese de que sea legible.
– Preocúpese por la fotografía que este ejemplo usa en último lugar, ya que el fondo es meramente decorativo, por lo tanto, trivial para la interfaz. Las imágenes de archivo gratuitas de alta calidad son muy fáciles de encontrar. Yo personalmente recomiendo Unsplash.
3) (Si desea diseñar su propia interfaz de usuario original). Piense en cómo puede readaptar los ejemplos que desee para los fines que desea cumplir, ¡y luego hágalo!
– ¿Por qué el creador de este ejemplo construyó los componentes que hicieron? Bueno, dado que es una página de perfil, es importante que se enfatice la imagen del usuario y sus estadísticas, probablemente por eso hay un panel espacioso dedicado a ello. La otra funcionalidad principal es dar a los usuarios visitantes la oportunidad de ‘Seguir’ al usuario que aparece en la página, por lo tanto, un botón muy visible para eso.
– ¿Alguno de los propósitos de este ejemplo es similar al tuyo? Si es así, piense en la solución que usó este ejemplo y si puede usarlos por su cuenta. O, si no le gustó su solución, use su imaginación salvaje y pruebe algo propio.
Gracias por el A2A. El paso 3 es realmente donde se pone interesante, pero los pasos 1 y 2 son un uso práctico de lo que a la gente le gusta llamar “inspiración”. Enjuaga, lava y repite los tres pasos con muchos ejemplos que te inspiran, y mejorarás en poco tiempo, pero seguir estos pasos al menos con este ejemplo te ayudará a comenzar. ¡Buena suerte!