¿Cuál es su proceso para crear un diseño de interfaz de usuario hermoso y funcional para web y / o móvil?

Answer 1

Soy un profesional independiente. No sé si mi enfoque es “común”, pero esto es lo que hago para diseñar sitios hermosos.

Tengo una gran biblioteca de inspiración en mi computadora y en Pinterest. No recopilo imágenes solo para proyectos futuros en mente, sino solo porque inspiran algo en mí. De hecho , he llegado a pensar que recolectar inspiración desde cualquier lugar (cualquier medio, sin la web en mente) te hace un mejor diseñador

Diseñando para UI para el cliente, comienzo con lápiz y papel. Si lo necesito, tendría Pinterest o Ember abiertos para la inspiración, y solo garabatear ideas en papel. Esto es rápido y te olvidas de las “limitaciones”.
No soy un artista por mucho, solo garabateo y anoto cosas. Si sentía la necesidad, incluso le había mostrado al cliente estos trozos de papel, pero no formaba parte de “el” plan.

Luego, si el resultado final es complejo, entraría en Photoshop (algunas personas usarían fuegos artificiales, soy un fanático de Photoshop) y traduciría mis garabatos en una idea más cristalizada, pero nunca busco detalles cuando uso Photoshop es una cintura innecesaria. hora.

Hay muchas ocasiones en que los garabatos en papel me han ayudado lo suficiente y no necesito photoshop. (o después de Photoshop) Empiezo a codificar el sitio en HTML y CSS. Para este proceso utilizo las siguientes tecnologías / software (en una Mac):

• texto sublime (un editor de código genial)
• MAMP
• Chrome (con sus características sass)
• SASS / CSS (si no sabes qué es sass, aprende, es genial)
• HTML (con un poco de php, solo en caso de que necesite bucles muy básicos o lo que sea)

Luego, después de hacer esto y obtener una buena respuesta del clint. Tomo el resultado final y lo hago interactivo, agregando lo que el proyecto requiera (ya sea: PHP, WordPress, etc.)

Sus preguntas parecen preguntar sobre el elemento creativo, enfatizaría fuertemente la inspiración de la colección, una vez que se “obliga” a hacerlo, entonces comenzará a ver oportunidades de diseño en (casi) todo lo que ve. Y a veces te hace sentir que la investigación ya está hecha

Hace mucho tiempo vi un video en el que esta directora de arte dijo que estaba en una reunión donde el cliente le dijo que necesitaban un logotipo y que ella podía crear uno allí mismo. El cliente no estaba contento, pensaron que necesitaría investigar antes de pensar en la idea. Ella dijo (algo así): años de investigación realizados aquí vienen con el logotipo allí y luego. – desafortunadamente no puedo recordar dónde vi esto, pero este documental me hizo comenzar a recopilar inspiración.
¡Incluso tengo diseños impresos colgados en las paredes de mi habitación! Y todo por el documental que no recuerdo dónde lo vi.

Desde que apareció el diseño receptivo, paso cada vez menos tiempo (que requiere perfección) en Photoshop. Porque hacer un diseño html “aproximado” (si no completo), es más fácil y / o más productivo que producir 3 o más bocetos en Photoshop. Entonces photoshop ahora es solo para dar vida rápidamente a algo complicado que los garabatos en papel no fueron suficientes. Y, por supuesto, el photoshop es esencial para trabajar con imágenes.

Editado: 16 de mayo de 2016

Esto es un Respuesta muy antigua, mi flujo de trabajo ha cambiado mucho (hago todo el trabajo usando el terminal en lugar de mamp, por ejemplo). Pero acabo de encontrar el video que menciono anteriormente: lo encontré en un disco duro viejo que estoy limpiando.

La artista de la que hablaba se llama Paula Scher.

Opero con mucha fuerza con mis instintos, y realmente, si no lo consigo en la primera grieta, lo consigo en la segunda, y si no lo consigo en la segunda, casi nunca lo consigo … es un proceso muy intuitivo para mí, nunca he sido un refinador, mis mejores trabajos han sido grandes golpes audaces que llegaron muy rápido. Y es muy problemático porque a muchos clientes les gusta comprar el proceso, y creo que no están obteniendo el valor de su dinero, como si lo resolviera demasiado rápido.

Dibujé el logotipo del banco de la ciudad después de la primera reunión, lo dibujé en una servilleta y salí … no tardó, ya sabes, es un segundo. ¿Cómo puede ser que hables con alguien y se haga en un segundo? Pero se hace en un segundo, se hace en un segundo treinta y cuatro años. Se hace en un segundo y cada experiencia, cada película y todo lo que hay en mi vida que está en mi cabeza.

¡Muy genial!

Answer 2

El proceso de diseño es algo que varía de un diseñador a otro. Creo que todos deberían conformarse con las herramientas y el flujo de trabajo que mejor se adapten a esa persona.

Las agencias y los principales estudios de diseño a veces tienden a tener un flujo de trabajo de diseño bastante complejo. Hay muchos elementos UX como crear personajes de usuario y contar historias que normalmente no sigo en mi proceso de diseño web diario. Por supuesto, el diseño de aplicaciones y productos web requiere esos pasos, ya que son realmente esenciales. Como principiante, no tiene sentido seguir un proceso de diseño realmente largo, si no puede administrarlo más tarde. Siempre debemos experimentar y decidir qué flujo de trabajo funciona mejor para nosotros.

Yo uso un simple proceso de diseño de 5 pasos. Me tomé un tiempo para crear una infografía simple para explicarla hace algún tiempo. Ahora puedo enviar esto a un cliente simplemente en lugar de explicarlo una y otra vez a todos.

Aquí está mi flujo de trabajo:

Los softwares pueden variar:

• Para crear wireframes , puede usar Balsamiq, Mockplus, Mockingbird, Wireframe.cc, una herramienta mínima para enmarcar alambres y muchos otros. Personalmente prefiero UXPin.
• Para crear maquetas de alta fidelidad , la mayoría de los diseñadores de interfaz de usuario en estos días usan Sketch 3. Yo uso Photoshop y ahora Figma. Figma es realmente genial y casi exactamente como Sketch 3. Adobe XD es la versión de Adobe de Sketch, pero todavía tiene mucho camino por recorrer.
• Para la creación de prototipos, las personas utilizan todo tipo de herramientas, desde InVision hasta Principle. El principio es una aplicación sólida, si eres un usuario de iOS, te sugiero que no busques más, es simplemente el mejor.

---

Espero que esto ayude. Buena suerte en su transición de una impresión a un diseñador web. Solo dale tiempo y sé regular con la práctica.

Answer 3

Diseño sitio web de principio a fin y comencé como freelance.

El método que uso es una variación del diseño de la experiencia del usuario. No está diseñando un sitio web para usted o su cliente. Estás diseñando para usuarios. Entonces, investigue un poco sobre el diseño de la experiencia del usuario, especialmente en el campo del diseño de sitios web. Esto lo ayudará a crear sitios web que tengan valor para sus usuarios, lo que significa valor para sus clientes debido al flujo de tráfico y clientes potenciales. Debe tener valor para el usuario antes de que invierta su tiempo. Un gran diseño es uno que se ve muy bien pero también es funcional. Debe recordar que los usuarios no visitan su sitio web porque se ve bien. Tome Quora, que es muy simple y sencillo. Se ve limpio y fácil de encontrar cosas. Los usuarios desean escribir una pregunta rápida y que otros la respondan rápidamente. Por lo tanto, agregar mucho brillo y glamour solo va a frustrar o distraer a los usuarios de la razón por la que visitan este sitio web y crea una experiencia desagradable .

He aprendido mucho de diferentes fuentes, pero This Week In: ​​Webdesign realmente me ayudó mucho. Puede verlos en Ustream o ver episodios en el tubo http://www.youtube.com/show/this … Incluso tuvieron algunos episodios en los que le muestran cómo implementan todo y utilizan un sitio web de clientes reales.

Algunas etapas / frases que puede implementar en sus proyectos:

1. Briefing
Aquí pasa tiempo con su cliente para comprender lo que quiere lograr a través del sitio web. Te enteras de su empresa, empleados, clientes, etc.

2. Estrategia
Aquí usted determina qué propósito está cumpliendo el sitio web para su cliente y los usuarios que van a usar el sitio web. ¿Por qué los usuarios van a visitar el sitio web? ¿Qué necesitan del sitio web? ¿Quienes son?

Por ejemplo, los usuarios vienen a nuestro sitio web para revisar libros y descubrir qué libros son buenos, etc.

3. Alcance
En esta frase, usted determina qué características utilizará en el sitio web. Las funciones que utiliza deben centrarse en su estrategia y también determinar si tiene los recursos para las funciones y qué recursos necesitará. En este punto, también se realizará su colección de contenido, así como la investigación SEO. También decidirá si su sitio web debe estar disponible en diferentes formatos y qué formatos, esto debería estar relacionado con su investigación de usuario.

Por ejemplo, un cuadro de búsqueda para que el usuario pueda encontrar fácilmente libros, una sección de lanzamiento más reciente, una sección de revisión de usuarios para que otros usuarios puedan recomendar libros. Tendremos que comenzar con una base de datos de 1000 reseñas de libros, etc.

4. estructura
Aquí determinará cuáles son las mejores maneras de mover a los usuarios a través de su contenido y sitio web. Trazará y documentará el flujo de información, cómo se mueve el usuario de un punto al siguiente.

Por ejemplo, si el usuario hace clic en el enlace de revisión, qué sucede, a dónde van y qué encuentran y ven en la siguiente pantalla.

5. Esqueleto
Aquí es donde le das huesos a tu sitio web. Usted diseña el diseño en forma de marcos de alambre, ya sea básico o más estructurado. Por lo general, no se coloca contenido y se usan símbolos para mostrar qué irá a qué parte del sitio web.

Por ejemplo, un marco de alambre que muestra dónde estará la navegación principal frente al contenido principal.

6. superficie
Aquí es donde todo se une. Aquí es donde diseñas el diseño, la apariencia, el estilo, la sensación o tu sitio web. Aquí es donde verá cómo se ve. ¿Qué tan grandes serán los encabezados? ¿Qué colores usas para el fondo y por qué? Qué colores para qué tipo de contenido. Cada cosa que coloque visualmente en el diseño debe tener una función relacionada con las frases anteriores.

Por ejemplo, fondo azul claro para relajar a los usuarios. Texto gris claro para los encabezados principales para un alto contraste para atraer la atención hacia los encabezados. Texto grande rojo sobre fondo blanco en el banner principal para crear foco en la venta.

7. Representación
Aquí lo presentará al cliente. No solo les muestre lo que ha hecho, sino que explique las características y cómo funcionan y se relacionan con el usuario y su cliente. Cuantas más sonrisas obtengas para cada función, más probable será que tu cliente quede impresionado. Si solo le muestra a su cliente el diseño, le dirá sí o no. Al explicarle a su cliente puede ver cómo funciona todo y por qué hizo ciertas cosas.

Por ejemplo, el cuadro de búsqueda que colocamos en la parte superior. Lo hicimos grande para que sea claramente visible para que los usuarios puedan usarlo para buscar preguntas ya formuladas o algunas que quieran responder. Hemos agregado un botón grande para que los usuarios puedan hacer una pregunta fácilmente. Hemos agregado un pequeño icono rojo para nuevos avisos en el botón de inicio. Los colores rojos muestran urgencia y tiene el número de avisos en el icono.

8. Desarrollo
Una vez que el cliente está satisfecho, lleva el proyecto al desarrollo donde se codifica, se prueba y luego se activa.

De esta forma, crea un gran diseño que tiene funcionalidad y hace que los usuarios inviertan tiempo porque encuentran valiosas todas las características de su sitio web.

El tiempo que toma depende del tamaño del sitio web y la calidad que desea producir. Si desea crear un mejor sitio web, tendrá que invertir más tiempo para completar la frase diferente.

El software que uso:

• Abode Photoshop, Illustrator, Fireworks, Flash para diseños, diseños e imágenes
• Dreamweaver para la codificación. No use editores de texto, ya que toma demasiado tiempo y demasiada energía para codificar. No utilice los programas de wysiwig, ya que su opción de funcionalidad será limitada. Dreamweaver puede ayudarlo a codificar y evitar errores.
• Microsoft Project para gestión de proyectos
• Microsoft Visio para wireframes, diagramas y diagramas de flujo para la documentación del proyecto

Tiendo a alejarme del CMS (Sistema de gestión de contenido) ya que usan plantillas. Si puede diseñar y codificar sus propias plantillas, entonces esto es genial. En la mayoría de los casos, descubro lo que mi cliente quiere editar y diseño una interfaz para ellos muy similar a CMS.

Mi opinión es que CMS toma una plantilla de diseño y basa el contenido en el diseño. Para User Experience Design, se trata de tomar contenido y crear un diseño basado en el contenido.

Espero que encuentres algo útil.

Answer 4

Creo que Quora User es una gran respuesta. Felicitaciones Aurel.

Si por ninguna otra razón, Photoshop se ha movido a donde debería estar en el proceso. Es decir, en 2015, para su información: me gusta pensar en el futuro, su función debería ser apoyar el proceso y no ser la característica. Photoshop en sí mismo no es una herramienta de diseño web. Es una herramienta de edición y creación de imágenes. Tenía sentido hace años.

Es hora de moverse.

PSD a HTML / CSS también podría ser una máquina de fax en este punto. Pensar y trabajar en esos términos agrega una capa innecesaria al proceso. El tiempo es dinero, ¿correcto? Más importante aún, también puede dar como resultado diseños que no son tan fáciles de convertir en marcado.

Francamente, me he cansado de que los “diseñadores web” se quejen de que su imagen en Photoshop no se ve exactamente igual una vez que está marcada. Disculpe (mientras respiro) pero … ¡No, mierda! Usaste un martillo cuando deberías haber usado un destornillador. ¿Que esperabas? A esos “diseñadores web” les digo: 2007 llamó por teléfono y quiere recuperar su herramienta de diseño web.

Es hora de moverse.

Dicho esto, sugeriría echar un vistazo a algo como Pingendo ( http://www.pingendo.com ). Es una herramienta de “creación de prototipos” para Bootstrap (CSS Framework). Si bien no lo ayudará con ningún PHP (como mencionó Aurel), podría, si es necesario, ser capaz de simularlo con JavaScript (lenguaje de programación) o uno de sus sabores (por ejemplo, jQuery). O simplemente deje el PHP para un paso posterior en su proceso. En cualquier caso, herramientas como Pingendo le permiten trabajar directamente en “modo de fabricación”.

Sí, aún usarías Photoshop para crear y editar piezas del rompecabezas. El beneficio es que Pingendo sería su herramienta principal para el ensamblaje y la fabricación. Es decir, sus “prototipos” sin duda estarían mucho más cerca de lo real (que un PSD de Photoshop, eso es seguro).

Aparte de eso, no pienses demasiado en la solución. Hay muchos sitios web bonitos con UI elegantes y creativas que en última instancia ofrecen una experiencia subóptima, o simplemente son inútiles (desde la perspectiva del visitante / usuario). Con más y más personas haciendo cada vez más su conexión a Internet en una pantalla pequeña (léase: dispositivo móvil) es muy fácil dejarse atrapar por la pantalla “esto se ve tan genial en mi 24”. Desafortunadamente, una pantalla de 24 “es Un caso de uso muy marginal. No seas ese diseñador. Por favor.

Es hora de moverse.

Answer 5

El diseño y desarrollo web puede ser un negocio complicado. Sabemos por experiencia personal que desarrollar y diseñar un proceso de diseño web que funcione puede parecer un verdadero desafío.

Por lo tanto, permítanos ayudarlo a identificar un proceso de diseño web que pueda ayudarlo a entregar construcciones de sitios web de calidad de manera rápida y efectiva.

Un buen diseño web y proceso de desarrollo mantiene informado al propietario del proyecto y hace transparente lo que sucede durante el curso del desarrollo. También favorece la retroalimentación y las aportaciones continuas del propietario del proyecto y del equipo de desarrollo involucrado. Con estas cualidades en mente, este es nuestro proceso.

Wireframing es el primer paso

Los wireframes del sitio web (y el mapeo del sitio) son esencialmente una guía visual que es representativa del marco esquelético de un sitio web. La estructura metálica proporciona el andamiaje para la estructura que será su sitio web.

En el mundo del diseño, hay un dicho común de que el contenido es el rey, y es algo que defendemos cuando se trata de todo lo digital. Comprender esto es especialmente importante al planificar y diseñar su sitio web.

Crear una estructura alámbrica lo ayudará a decidir qué contenido agregará a su sitio web y qué contenido es extremadamente importante para mostrar. La estructura alámbrica es la arquitectura de nivel base en la que crea la jerarquía estructural de su sitio web y le proporciona una representación visual general de su futuro sitio web.

Diseño del sitio web

Después del proceso de tramado, puede comenzar a armar el diseño de su sitio web. Aquí es donde comienzas a desarrollar tu sitio web. Por lo general, el diseño del sitio web lo realiza el diseñador, junto con la colaboración de un desarrollador web. El diseñador usará programas como Sketch y Adobe Illustrator para armar este diseño.

Diseñando el sitio web

Según el resumen, una vez que se hayan aprobado tanto la estructura como el diseño, recibirá comentarios y reversiones. Una vez que todo esto esté finalizado, puede pasar al desarrollo real de su sitio web. Cuando se trata de comentarios, reversiones y revisiones del sitio, es importante que su proceso facilite el diseño impulsado por el crecimiento.

El diseño impulsado por el crecimiento (o GDD) es una respuesta al proceso tradicional de diseño de sitios web. GDD es un enfoque ágil que se centra en un proceso iterativo de diseño y desarrollo web mediante el cual todos los interesados ​​están involucrados en el proceso, que está en curso.

El diseño tradicional del sitio web se centra en un sitio web como un gran proyecto que resulta en un proyecto terminado. El diseño impulsado por el crecimiento ve un sitio web como un mecanismo en constante cambio y evolución que requiere una revisión, rediseño y reurbanización consistentes. Esto hace que el proceso sea ágil ya que se requieren aportes continuos de todas las personas involucradas.

El enfoque de Scrum para ejecutar proyectos es ágil e iterativo, de la misma manera que lo es el diseño impulsado por el crecimiento. Por lo tanto, se emparejan bastante bien juntos.

Scrum se clasifica como un marco ágil para completar proyectos complejos, como el diseño de sitios web y proyectos de desarrollo. Con scrum, la atención se centra en sprints o iteraciones cortas de trabajo que tienen una longitud fija. En el caso de nuestra agencia, ejecutamos nuestros sprints durante una semana a la vez durante la fase de diseño.

Al final del sprint, llega el hito o la revisión del sprint donde discutes los objetivos que has logrado y cuáles fueron tus desafíos. Scrum está estructurado para hacer que un proyecto general sea digerible y todas las tareas en su cartera de pedidos se hacen mucho más fáciles de manejar mediante este enfoque.

Al comienzo de un sprint, el scrum master (facilitador) establece todos los objetivos o tareas que deben completarse. Dentro del sprint, todos los días se realiza un stand-up diario para determinar lo que cada miembro del equipo ha logrado y por qué fueron desafiados. Una tarea se mueve de la cartera de pedidos a una fase “en proceso” y finalmente a una fase completa. En la retrospectiva y la revisión, se brinda retroalimentación y se realiza una revisión del trabajo completado para el sprint.

El diseño y desarrollo web es colaborativo

Scrum se adapta a las necesidades de la naturaleza colaborativa del proceso de diseño y desarrollo web. A lo largo del proceso, hay comunicación entre el diseñador y el desarrollador. El desarrollador expresará lo que funciona cuando se le presente un diseño y el diseñador intentará hacer coincidir el diseño con la funcionalidad.

El diseño y el desarrollo web ya no deben quedar atrapados en el proceso de cascada donde los diseñadores y desarrolladores trabajan en silos y un sitio web se considera un gran proyecto que debe completarse.

Hoy en día, el desarrollo de sitios web es un proceso colaborativo e iterativo impulsado por información de la audiencia y comentarios consistentes de diseñadores y desarrolladores.

Leer más: https://mo.agency/web-design-and …

Answer 6

La belleza podría ser muchas cosas. Para mí, un sitio web hermoso no solo se ve bien, sino que tiene una excelente experiencia de usuario que funciona perfectamente y ofrece los resultados para el cliente.

Los clientes vienen en todas las formas y tamaños. Algunos querrán ver algo tangible por su dinero, por lo que en este caso se podrían requerir maquetas y visuales. Tomando en cuenta la respuesta de Mark, a veces soy “ese diseñador”. No puedo ver que esto cambie pronto. Hay un pequeño grupo de celebridades web que parecen pensar que no mostrar a los clientes ningún elemento visual es algo bueno. Tiendo a estar en desacuerdo …

… Sin embargo, otros clientes confiarán en usted para liderar el camino para que pueda tomar una dirección más creativa utilizando paneles de ánimo, collages de elementos y prototipos.

De cualquier manera, esbozar ideas, conceptos de funcionalidad, trazados, buscar inspiración en otros sitios y aplicaciones: todo está en juego, independientemente de las expectativas del cliente.

Tiendo a evitar marcos como Bootstrap y Foundation. Hay fragmentos útiles para utilizar, pero no quiero que mis sitios se vean iguales y actúen igual. Me gusta escribir y probar mi propio código en lugar de examinar el de otra persona.

Tiendo a usar Illustrator para maquetas y visuales simplemente porque prefiero trabajar con vectores. También puedo exportar SVG amigables con la retina desde Illustrator.

Uso Sublime Text para el código, Codekit para compilar mis archivos SASS, Duo ( http://helloduo.com ), Chrome e IE para previsualizar y probar.

Answer 7

Sketch es una excelente alternativa a Photoshop si estás en una Mac. Personalmente, no paso demasiado tiempo con el diseño, ya que la mayoría de las veces el producto final puede no ser exactamente el mismo píxel a píxel que el diseñado.

En términos de desarrollo, si se siente cómodo con PHP, consulte Laravel, un marco ordenado que hace la vida mucho más fácil con los muchos matices del desarrollo de PHP.

Answer 8

El buen diseño de UI y UX hace que su sitio web sea atractivo para los visitantes.

Puedes diseñar usando Photoshop / Dreamweaver.
Puede usar el sistema CMS como WordPress y Joomla.