12 pasos para el diseño de una página web perfecta
Disertel
La guía infalible para crear el diseño de una página web perfecta
Al diseñar el diseño de un sitio web, aparecen algunos errores comunes que aparecen con frecuencia, especialmente con los pasantes y los nuevos diseñadores. En esta lista de pasos para el diseño del sitio web perfecto, cubrimos lo que cada nuevo desarrollador de sitios web que trabaja dentro de una agencia digital debe saber y hacer antes de comenzar un nuevo proyecto, y qué deben prestar atención durante el proceso para evitar cometer estos errores.
Estos principios cubren no solo los aspectos de diseño, sino también los consejos generales de flujo de trabajo que harán el trabajo bien. Sígalos y pronto estará en camino a crear diseños de sitios web profesionales.
01. Definir qué significa el éxito
Antes de comenzar el trabajo para tu página web, necesitas saber para qué se está diseñando. Además de la descripción del sitio, necesitas saber cuáles son las expectativas para él. Veamos un sitio de noticias, por ejemplo, ¿cuál es el objetivo? ¿Es para hacer tantas impresiones de anuncios como sea posible o para proporcionar la mejor experiencia de lectura? ¿Cómo se van a medir esos objetivos?
Los buenos re-diseños no son necesariamente los más llamativos, sino los que mejoran el rendimiento a lo largo del tiempo. Hablar con tus clientes antes de comenzar su diseño es clave para definir todo esto. Necesita aprender cuáles son sus inquietudes y objetivos más allá del SOW (statement of work).
02. Pon tus ideas en papel primero
Esto parece muy obvio, pero he descubierto con demasiada frecuencia que los diseñadores se lanzan directamente a su trabajo antes de pensar en el problema que intentan resolver. El diseño de una página web se trata de resolver problemas, y esos problemas no se pueden resolver a través de degradados o sombras, sino a través de un buen diseño y una jerarquía clara.
Piense en el contenido, el diseño y la funcionalidad antes de comenzar a dejar sombras. Asegúrese de que esos pensamientos estén en línea con los objetivos de su cliente y siéntase libre de compartirlos. Ningún cliente se ha quejado de ideas demasiado comunicativas.
03. Comienza a dibujar un boceto de alto nivel
Cuando me piden que cree una apariencia para un proyecto, lo primero que hago es crear un boceto de alto nivel que resuelva todos los problemas de diseño. El boceto es la interfaz de usuario que rodea el contenido y ayuda al usuario a realizar acciones y navegar a través de él. Incluye la navegación y componentes como barras laterales y barras inferiores.
Si abordas tu diseño de la página web desde esta perspectiva, tendrá una idea clara de cuáles serán sus necesidades de diseño cuando diseñe secciones más allá de la página de inicio.
04. Añadir una cuadricula
Es tan simple como parece. Antes de comenzar a diseñar cualquier cosa en tu página web, necesitas una cuadrícula adecuada. No hay excusas válidas para comenzar sin una cuadrícula, y si no lo hace, puedo asegurarle que el diseño no se verá tan bien. Una grilla te ayudará a estructurar el diseño de las diferentes secciones; lo guiará a través de los requisitos de tamaño de pantalla específicos, y le ayudará a crear plantillas receptivas, para que sea coherente en términos de espaciado y de muchos otros problemas de diseño para tu página web.
Para saber cómo hacerlo, eche un vistazo a esta guía para crear una cuadrícula que se adapta a todos los tamaños de pantalla
05. Elige tu tipografía
Explorar diferentes tipos de letra y colores es parte de la fase de descubrimiento de un proyecto. Yo recomendaría no usar más de dos tipos de letra diferentes en una página web, pero realmente depende de su naturaleza. En general, elija una fuente que sea fácil de leer para grandes porciones de texto, y sea más divertido con títulos y llamadas a la acción. No tenga miedo de usar fuentes grandes y sea creativo y consistente al usar la tipografía.
06. Selecciona el color para tu tema
Durante el proceso de elegir un conjunto de tipos de letra, debe comenzar a explorar qué colores usará en la interfaz de usuario, fondos y texto. Recomiendo usar un conjunto limitado de colores y tonos para la interfaz de usuario general.
Es importante aplicarlos consistentemente a través de la interfaz de usuario dependiendo de la funcionalidad del elemento. Piense en el diseño de sitios como Facebook, Twitter, Quora y Vimeo. Además de la interfaz de usuario, no debe haber ninguna restricción de color para ilustraciones o detalles gráficos, siempre que no interfieran con la funcionalidad de los componentes en la página web.
Si te quedas atascado, echa un vistazo a nuestra lista de aplicaciones gratuitas para elegir un esquema de colores.
07. Divide el diseño
Cuanto más simple es la estructura de la página web, más fácil es para los usuarios navegar. Cada sección de su página web necesita contar una historia; necesita una razón y un resultado final para el usuario. El diseño debe ayudar al contenido a resaltar cuáles son las piezas más importantes de esa historia.
En realidad, no debería haber demasiadas llamadas a la acción en una página: todo debería conducir a ese final ‘¿Qué puedo hacer aquí?’ Piense en el diseño más simple que pueda imaginar para un propósito simple y comience a agregar componentes que sean necesarios. Al final, se sorprenderá de lo difícil que es mantenerlo simple.
08. Repensar lo establecido
¿Realmente necesitamos un botón de búsqueda más? En la mayoría de los casos, la respuesta es no. Como diseñadores conformamos la forma en que los usuarios navegan por Internet, depende de nosotros decidir cuántos pasos tomará una acción simple y cuán eficiente será nuestro sitio.
Algunas convenciones están ahí porque funcionan, pero algunas están ahí porque nadie pasó el tiempo suficiente evaluándolas. Es importante repensar los patrones interactivos establecidos de todos los componentes para ver cómo podemos mejorarlos.
09. Piense en movimiento
10. Prototipo, prototipo, prototipo
Los prototipos son la mejor forma de probar las interacciones y la tecnología. Hay muchas herramientas de creación de prototipos que lo hacen más fácil hoy en día, y no es necesario ser un gurú de codificación para crear prototipos efectivos. Esta es otra forma más en la que puede entusiasmar y entusiasmar a su cliente con conceptos e ideas que de otra manera necesitarían mucha explicación.
11. Ponte a prueba
Animo a cada diseñador que se desafíe en cada proyecto. La innovación no siempre es un requisito para el proyecto, por lo que nos corresponde a nosotros encontrar algo nuevo. Los ejemplos de diferentes desafíos podrían incluir el uso de un nuevo sistema de grillas, la creación de un nuevo componente o incluso desafíos menores, como evitar los modos de fusión o el uso de un color específico.
12. Presta atención a los detalles
Esta afirmación ha sido usada en exceso últimamente, pero no siempre es visible en el producto final. Dependiendo del concepto detrás del proyecto, esa «atención al detalle» puede significar cosas diferentes.
Podría ser una interacción pequeña, una animación inesperada o un toque estético como un pequeño degradado en un botón o un trazo sutil alrededor de una caja en el fondo. Pero, en general, este toque es esencial, y será natural si realmente disfrutas de lo que haces.
