Diseño Web - SEO - Marketing online

12 pasos para el diseño de una página web perfecta

21 Ago
2018
Habla con los clientes

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

Habla con tus clientes

Habla con tus clientes para averiguar cuáles son los objetivos

 

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

 

Ordena tus ideas para el diseño

Bocetos tempranos de una serie de ilustraciones sobre ciudades de todo el mundo

 

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

 

Dibujar una estructura básica te ayudará a estructurar el diseño

 

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

 

Un ejemplo de una cuadrícula 978 con una línea base de 10px

 

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

 

Una regla general es no utilizar más de dos tipos de letra diferentes en el diseño de un sitio web

 

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

 

Las herramientas como Color Hunt están diseñadas para ayudarte a elegir una paleta

 

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

 

diseños simples tienden a ser más fáciles de navegar

 

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

 

Los botones de búsqueda se están volviendo obsoletos

 

¿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

 

El movimiento es esencial cuando se diseñan experiencias interactivas

 

El movimiento es esencial cuando se diseñan experiencias interactivas. Ningún diseño puede juzgarse solo o como una compilación estática; cada componente se define por su relación con el sistema, y esa relación necesita que el movimiento se transmita adecuadamente. Motion puede ilustrar efectos dinámicos en el contenido o estados interactivos dentro de su diseño. Para ese segundo propósito, recomiendo llevar sus diseños un poco más allá en la creación de prototipos.

10. Prototipo, prototipo, prototipo

 

Prototipos es la mejor manera de probar las interacciones

 

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

 

Trabajo en progreso: vista detallada

 

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.

Disertel
autor

Somos expertos en diseños web, motores de búsqueda (SEO) y en Marketing OnlineDisertel Consultores y Desarrolladores con base en Las Palmas de Gran Canaria y en Santa Cruz de Tenerife – España. Nuestras competencias básicas se centran en el diseño / desarrollo de sitios web, móviles y SEO y en general en todo el mundo digital.Desde nuestra formación en 2003, nos hemos comprometido a entregar proyectos digitales excelentes e innovadores completados al más alto nivel posible por nuestro personal altamente calificado y experimentado.

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *