Hasta ahora esta semana, te hemos mostrado Cómo crear un sitio webAhora, veremos cómo crear el diseño perfecto para tu pequeño rincón de Internet. Al final de este artículo, sabrás cómo hacer lo siguiente:
- Crea una página web desde cero
- diseño de pagina web
- Cómo probar el marco de un sitio web
- Cómo crear un prototipo de sitio web
- Cómo aplicar tu marca a tu sitio web
Antes de comenzar, considere su tiempo y sus objetivos
En esta sección, analizaremos en detalle el diseño de un sitio web, desde los primeros bocetos hasta la producción final. Es muy importante tener en cuenta que crear sitios web grandes y de calidad es un proceso iterativo que requiere mucho tiempo.
Ese proceso comienza ahora, pero continuará... para siempre. La web es un ámbito en constante cambio y se espera que siga evolucionando. Siempre estará trabajando en su sitio web a medida que mejora su rendimiento con el tiempo o cambia los objetivos de su sitio web para reaccionar a los cambios en el mercado.
Para poner algo en marcha rápidamente, debes ser muy estratégico con respecto a lo que elijas hacer primero. No necesitas lanzarte con TODO de inmediato. Mira hacia atrás a tus objetivos y describe cómo luciría el sitio web más pequeño posible para cumplir con esos objetivos: un producto mínimo viable.
Ahora, concentra toda tu atención en lograrlo. Si te excedes demasiado pronto, te quedarás estancado durante semanas. Sé inteligente con el trabajo que decides emprender.
Tal vez lo único que puedas lograr esta semana sea crear un sitio web de una sola página con tu logotipo prototipo y el texto "próximamente". Eso es definitivamente mejor que nada y te permite ampliarlo más adelante.
Crear un sitio web puede parecer una tarea abrumadora, pero a medida que planifique su sitio web, se dará cuenta de qué páginas son absolutamente esenciales para el lanzamiento y qué páginas se pueden agregar más adelante. Es mejor crear un sitio web más pequeño y de alta calidad que crear un sitio amplio con muchas páginas que contienen contenido deficiente o faltante. No perderá nada si elimina estas páginas adicionales desde el principio. Se espera que los sitios web evolucionen y cambien con el tiempo y puede ampliar fácilmente su sitio web después del lanzamiento.
Planificación de una página web
Cuando comiences a crear tu sitio web, lo primero que debes considerar es con qué páginas lanzar tu sitio web y cómo vas a vincularlas entre sí para que los usuarios puedan encontrar fácilmente el contenido que creas.
Es muy importante que la navegación sea correcta. Si los visitantes no encuentran rápidamente lo que buscan, se irán tan rápido como llegaron.
Esto se suele solucionar con una barra de navegación que permanece bloqueada en la parte superior de la página cuando el usuario se desplaza hacia abajo. La navegación en el 95 % de los sitios web se presenta en forma de una barra en la parte superior que se contrae en un ícono cuando se trata de sitios móviles. Por lo tanto, es esencial elegir las páginas de nivel superior adecuadas para colocarlas en esta barra de navegación. No es necesario que todas las páginas tengan enlaces en la parte superior, ya que esto hará que la barra se abarrote muy rápidamente, lo que dificultará la navegación.
Si tu sitio web requiere muchas páginas, incluso desde el lanzamiento, tendrás que agruparlas en categorías y colocarlas en menús desplegables en tu barra de navegación. Habrás visto esto muchas veces en sitios web de moda donde tienen una gran variedad de productos divididos en múltiples categorías. Por lo general, utilizan paneles desplegables grandes y espaciosos para adaptarse a esto. Los mejores ejemplos logran mostrar una gran variedad de opciones de forma clara sin que se convierta en un montón desordenado de menús dentro de menús. Si estás planeando un negocio de moda o cualquier negocio con una amplia gama de productos, vale la pena dedicar mucho tiempo aquí a lograr una navegación correcta. Si las personas no pueden encontrar tus productos, tampoco podrán comprarlos.
Vuelva a consultar su investigación de mercado para comprender qué podrían querer lograr sus visitantes al visitar su sitio web y llévelos a ese punto lo más rápido posible y con la menor confusión posible.
Su investigación de mercado también debería ayudar a informar el diseño general de su sitio web.
diseño de pagina web
Una de las cosas que hay que tener en cuenta a la hora de diseñar una página web desde cero es el diseño.
La semana pasada, vimos cómo crear un mood board para ayudar a establecer el aspecto y el estilo de tu marca y reunir inspiración. Deberías recurrir a esto nuevamente para tu sitio web. Incluso podrías crear un mood board completo dedicado a la inspiración para sitios web. Una vez más, hay muchos recursos que muestran diseños de sitios web increíbles.
A continuación se presentan algunos recursos que puede utilizar para ayudarle con este proceso:
- Artículos del sitio web Abduzeedo
- Ejemplos de sitios web de Dribbble
- Ejemplos de sitios web de Behance
- Ejemplos de sitios web de Pinterest
Creación de wireframes de sitios web
El wireframing es un paso común y sumamente útil en el diseño, ya sea que esté creando un sitio de destino de una sola página o una tienda de comercio electrónico expansiva.
Le permite jugar rápidamente con los diseños sin tener que elaborar diseños de alta calidad. El wireframing se puede hacer con lápiz y papel y el proceso implica simular cada página web utilizando líneas y cuadros para indicar dónde se puede colocar el contenido. Esto le permite generar diseños rápidamente e imaginar el flujo de la página sin dedicarle una gran cantidad de tiempo. Use esto para considerar la ubicación de sus llamadas a la acción (CTA), imágenes, bloques de texto y navegación.
Prototipo de sitio web
Este es un paso adicional que puedes dar al crear tu sitio web. Es mucho más fácil de lo que parece, ya que no requiere codificación, ya que existen muchas aplicaciones diseñadas para que este proceso sea rápido y sencillo.
La idea es digitalizar sus wireframes (aún puede usar marcadores de posición para texto e imágenes) y usar el software de creación de prototipos para vincularlos entre sí para que pueda obtener una idea aún más clara del flujo y la navegación del sitio.
Puede crear imágenes estáticas en escala de grises de sus diseños de wireframe en software de imágenes como Photoshop y luego subirlas a estos sitios de creación de prototipos. Los sitios le permitirán vincular varios prototipos para crear una maqueta de su sitio web que puede previsualizar y probar.
Muchas de estas aplicaciones te permitirán realizar diseños directamente dentro del software:
Puede comenzar a utilizar sus prototipos para determinar dónde colocará sus mensajes para que sean más efectivos. A medida que reemplaza el contenido de marcador de posición con contenido real, asegúrese de que esté funcionando para lograr su estrategia. Cuando alguien llegue a su página de destino, ¿sabrá exactamente qué hace su empresa en unos pocos segundos? ¿El sitio web los está llevando rápidamente hacia las acciones que desea que completen los usuarios?
Por supuesto, esto tiene tanto que ver con los mensajes en sí como con dónde se colocan y se presentan en la página.
Diseño de sitios web de marca
Una vez que hayas establecido tus diseños ideales, tu marca los cumplirá de manera natural. Debes aplicar el trabajo que completaste la semana pasada a tu sitio web, ya que la coherencia es clave para construir tu marca. Tu sitio web debe tener un aspecto adecuado y encajar con el resto de tus actividades de marketing y comunicación.
La imagen de marca que haya elegido será fundamental para crear un sitio web atractivo y cautivador. Las imágenes de alta calidad son esenciales para garantizar que su sitio web se vea nítido en muchos tamaños diferentes. Una imagen borrosa crea una mala primera impresión.
El logotipo que diseñaste en la semana de la marca debe ser tu primera opción. Asegúrate de que esté visible en la parte superior de tu sitio web en cada página. Muchos sitios web lo incorporarán en el menú de navegación superior, que probablemente estará en todas las páginas. También puedes usar el logotipo para la navegación; al hacer clic puedes regresar a la página de inicio del sitio.
Ubicaciones de colores de la marca
La aplicación de la paleta de colores de su marca en su sitio web garantiza que su marca se transmita con claridad; esto por sí solo puede ser suficiente para que su sitio web sea reconocible al instante. El color principal de su marca debe aparecer de manera uniforme en todo su sitio.
Estos son los lugares habituales donde colocar el color principal de su marca:
- Encabezados de navegación
- Colores de fondo del banner superior (tenga cuidado si tiene un color dominante)
- Títulos y subtítulos de páginas
- Hipervínculos de texto
- Colores de los botones (aunque es posible que desees elegir un color contrastante para que tus CTA se destaquen)
- iconos de colores
- Superposiciones sobre tus fotos de archivo
Puedes usar los colores secundarios de forma similar para crear interés, variación y contraste. Solo sé coherente con tu método de aplicación. Recuerda que puedes usar tu software de creación de prototipos para experimentar tanto como quieras. Probar variaciones e iterar en tus diseños es la clave para llegar rápidamente a un diseño final con el que estés satisfecho.
Elegir las imágenes adecuadas
Para elegir buenos gráficos para su sitio web, debe utilizar los recursos de marca que describimos cómo crear en la semana 8. A continuación, se ofrecen algunos consejos adicionales para aplicarlos a su sitio web:
- Asegúrate de que las imágenes que elijas complementen el texto que escribas para acompañarlas. Deben respaldar el mensaje claro que intentas transmitir.
- Tenga cuidado al colocar texto sobre imágenes, ya que puede afectar la legibilidad. Aplicar un color de acento sobre la parte superior puede ayudar a reducir el ruido de fondo.
- Las imágenes de gran tamaño pueden afectar los tiempos de carga. Siempre puedes guardarlas como archivos JPEG para comprimir el tamaño del archivo si este es el caso.
- Evite productos que parezcan demasiado genéricos o falsos. Son muy obvios y dañarán la confianza y la autenticidad de su sitio web (más sobre esto más adelante).
- No exageres con las imágenes. Las imágenes son muy poderosas y pueden distraer si se usan en exceso. Recuerda los objetivos de tu sitio web y asegúrate de que cada imagen tenga una función y no los obstaculice.
Centrarse en el sitio web
Otro elemento fundamental del diseño web es la forma en que se escribe y presenta el contenido de forma que la gente se tome el tiempo de leerlo. Escribir ensayos sobre productos en la página de inicio no funciona y no resulta lo suficientemente atractivo.
Parte de esto se soluciona utilizando una fuente web clara, con un buen contraste, tamaño y espaciado. Si utiliza temas integrados en una plataforma de sitio web, existen muchos temas que naturalmente tienen una gran legibilidad incorporada. Sin embargo, esto es solo la mitad de la batalla. La fatiga de lectura, especialmente en las pantallas, es muy real y debe ser inteligente para asegurarse de escribir y ubicar su texto de una manera que realmente se lea.
Siga estas pautas:
- Asegúrese de que su copia sea clara y evite ambigüedades.
- Mantenga la estructura de las oraciones simple. Evite palabras y combinaciones complejas.
- Vaya al grano rápidamente.
- Divida grandes cantidades de texto en bloques separados, más pequeños, con su propio título.
- No intentes transmitir demasiado de una sola vez. Decide el mensaje que cada bloque de texto intenta transmitir y cíñete a él.
- Utilice imágenes junto al texto para animar a la gente a leer.
- ¡Utilice espacios en blanco! Deje un espacio generoso (relleno) alrededor de su contenido para que no quede abarrotado.
Cómo asegurarse de crear un sitio web optimizado para dispositivos móviles
Es sumamente importante que su sitio web funcione sin problemas en teléfonos móviles y tabletas, ya que muchas personas consumen contenido a través de estos dispositivos. ¡Google incluso penalizará los sitios web en sus búsquedas si no cumple con esto!
Afortunadamente, esto es bastante fácil hoy en día. La mayoría de los temas estándar que vienen con una plataforma de sitio web deben utilizar un diseño "responsive". Esto significa que a medida que disminuye el ancho de la pantalla, el contenido se ajustará automáticamente para adaptarse a este nuevo tamaño, ¡perfecto!
De todas formas, vale la pena comprobar que las imágenes y los vídeos que estás usando siguen siendo visibles cuando se reducen de tamaño y que el texto sigue siendo legible. Si no tienes varios tipos de tabletas y teléfonos móviles, es posible que te preguntes cómo comprobarlo. La forma más rápida es agarrar el borde izquierdo o derecho de tu navegador (asegúrate de que no esté en pantalla completa) y arrastrarlo hacia la izquierda o la derecha para hacer que la ventana sea más grande o más pequeña. Verás que el contenido de tu sitio web se ajusta mientras lo haces y así podrás analizar tus diseños en diferentes tamaños. También hay un método más preciso que implica el uso de una herramienta que está integrada en el navegador Chrome:
- Haz clic derecho en tu página web
- Haga clic en "Inspeccionar" (aparecerá un panel)
- En la parte inferior izquierda de este nuevo panel hay un ícono de una pantalla y un teléfono (alternar barra de herramientas del dispositivo)
- Haga clic en este icono
Ahora, en la parte superior, tienes varias barras grises que te permiten simular cómo se ve tu navegador en resoluciones específicas. Incluso hay un menú desplegable para elegir los teléfonos y tabletas más populares y las resoluciones que utilizan. ¡Genial!
Ya sea que elijas crear el sitio web de tu empresa tú mismo o contratar a una agencia para que lo haga por ti, existen muchos costos asociados con el diseño de un sitio web. No solo tendrás que pagar por el nombre de dominio, los costos de alojamiento y la plataforma web que elijas, sino que también habrá tarifas de mantenimiento constante del sitio web.
Si contratas a una agencia de diseño para que lo haga por ti, esto supondrá un gran coste para tu startup. Debes considerar si tus fondos cubrirán este coste o si será más barato hacerlo tú mismo. Como hemos demostrado en los últimos artículos, crear un sitio web es mucho más fácil de lo que crees. Si bien existen costes asociados con ambos enfoques para diseñar tu sitio web, debes determinar cuál es más factible para ti.
Resumen
Al diseñar un sitio web, piense en cómo quiere que se represente su marca. Es probable que su sitio web sea una de las primeras impresiones que los clientes tengan de su marca. Esto significa que es fundamental que transmita el mensaje correcto. También debe asegurarse de que su sitio web sea fácil de usar y que pueda usarse en una amplia gama de dispositivos. Un sitio web que no se ve bien en dispositivos móviles puede hacer que un usuario lo abandone.
Vuelva a su estrategia y piense en cómo puede utilizar su diseño para alentar a sus usuarios a moverse por el sitio web de la manera deseada para lograr su objetivo deseado.
Una vez que haya diseñado y lanzado su sitio web, querrá comprobar si realmente cumple su propósito.
