Saltar al contenido

Cómo hacer que su sitio web se vea hermoso cuando no es diseñador

How to Make Your Website Look Beautiful When You’re Not a Designer

(Última actualización: 26 de febrero de 2019)

Puede que no parezca un gran problema, pero la apariencia de su sitio web es muy importante. En un estudio reciente de Forrester Research, descubrieron que una interfaz bien diseñada puede aumentar las tasas de conversión en su sitio web en un 200%.

Pero diseñar tu propio sitio web es difícil.

Por donde empiezas ¿Qué fuente debes elegir? ¿Qué color? ¿A dónde deben ir los menús? Estas, y muchas otras preguntas, pueden hacer que te des por vencido incluso antes de comenzar.

En esta publicación, le mostraremos algunas estrategias (y cinco consejos) para diseñar su sitio web usted mismo.

Paso 1: elige las herramientas que usarás para crear tu sitio web

Las muchas herramientas disponibles en línea son las que le permiten diseñar y construir su propio sitio web sin contratar a un diseñador web.

En este momento, hay dos tipos ideales de software que puede usar para diseñar su sitio web:

  1. Sistema de gestión de contenidos (CMS): Un sistema de gestión de contenido, como WordPress, es la herramienta más fácil con la que puede diseñar su sitio web. Esto se debe a que viene con plantillas, que son diseños de sitios web listos para usar que simplemente puede instalar y personalizar hasta obtener el aspecto que desea.
  2. Constructores de sitios web: Un creador de sitios web es una herramienta de arrastrar y soltar que le permite diseñar un sitio web profesionalmente sin ningún conocimiento especial. Usted controla el aspecto de todos y cada uno de los elementos (cuadro de texto, widget, botón, etc.) y puede cambiar su diseño y ubicación simplemente con el mouse.

Si desea terminar de diseñar su sitio web rápidamente, debe elegir un CMS. Pero si desea tener más control sobre el diseño de su sitio web, debe elegir un creador de sitios web.

Creador de sitios web por HostPapa

Paso 2: prepare la estructura alámbrica de su sitio web

Nota: Si va a utilizar un CMS y sus plantillas para el diseño de su sitio web, puede omitir este paso. Pero, si comenzará desde cero con un creador de sitios web, siga leyendo.

Si es realmente ambicioso sobre la creación de un diseño único para su sitio web, debe comenzar construyendo una estructura alámbrica.

Una estructura alámbrica es una representación estructural que muestra cómo se verá su sitio web. Piense en ello como el plano de su sitio web, que, como un plano para una casa, lo guiará sobre cómo construir su sitio web.

Aquí hay un ejemplo de una estructura metálica para el sitio web de Back To My Body:

Esta estructura metálica simple da una idea sólida de cómo se verá el tablero.

Muestra:

  • La estructura del sitio web.
  • La jerarquía de navegación del sitio web
  • Qué piezas de contenido irán a dónde

No es necesario que utilice software sofisticado para diseñar la estructura alámbrica de su sitio web. Simplemente puede usar un buen trozo de papel y un bolígrafo para crear una estructura metálica como esta:

Credito de imagen: El blog de Graybox

Y antes de comenzar a estructurar su sitio web, debe agregar esto Wirify bookmarklet a su navegador. Le mostrará los wireframes de sus sitios web favoritos cuando los visite. Es una excelente manera de inspirarse antes de comenzar a crear su primera estructura alámbrica.

Aquí hay una idea básica de los componentes esenciales que debe incluir en la página de inicio de su sitio web:

1. Logo: Coloca tu logo en la parte superior de tu sitio web.

2. Menús primarios y secundarios: A continuación, agregue la barra de menú que usarán sus visitantes para navegar por su sitio web.

3. Titular: ¿De qué se trata tu sitio web? Aquí, escriba una breve oración que explique lo que los visitantes pueden esperar de su sitio web o de su oferta.

4. Subtítulo: Justo debajo del encabezado principal, escriba algunas oraciones más que expliquen el valor que su sitio web o su producto / servicio proporcionará a sus visitantes.

5. Botón de llamado a la acción: ¿Cuál es la acción número uno que desea que realicen sus visitantes? ¿Comprar sus productos, suscribirse a su boletín informativo, suscribirse a su servicio? Coloque un botón cerca del subtítulo para que sea lo primero que vean sus visitantes.

6. Imagen de fondo: Ponga una imagen de fondo que represente los productos / servicios que ofrece. Si lo desea, también puede colocar un carrusel deslizante con varias imágenes.

7. Productos / Servicios: Debajo del pliegue (la parte de su sitio web que sus visitantes deben desplazarse para ver), muéstreles una lista de productos o servicios que ofrece, con la posibilidad de hacer clic en ellos para que puedan obtener más información.

8. Contenido: Si su contenido es una gran parte de su sitio web, puede omitir la sección de productos / servicios (que puede ir a otra página)

y enumere directamente sus últimos artículos.

9. Testimonios: Para establecer su credibilidad, intente reunir algunos testimonios positivos de sus clientes anteriores y póngalo al final de su sitio web (junto con cualquier garantía que desee ofrecer).

Para ser claros, esta estructura de colocación de contenido no es un conjunto estricto de reglas, sino más bien una pauta general que debe seguir al crear su primera estructura alámbrica.

Paso 3: Identifique qué páginas tendrá su sitio web

Antes de comenzar el proceso de estructura alámbrica (o editar una plantilla), usted decidirá qué páginas tendrá su sitio web. Y para hacer eso, tendrás que preguntarte cuál es la cosa número uno que quieres que haga tu sitio web.

¿Quieres que venda productos? Mostrar información y artículos? ¿De qué son capaces sus productos o servicios? ¿Presentar su empresa o negocio?

Una vez que responda esta pregunta, le resultará más fácil decidir qué páginas desea en su sitio web.

Aquí hay algunas páginas comunes que tienen muchos sitios web:

  1. Página principal
  2. Blog
  3. Sobre nosotros
  4. Contacto
  5. Precios

De estas páginas, la página más común en cada sitio web (que también tendrá su sitio web) es la página de inicio. Tradicionalmente, estas son las partes en las que se divide una página de inicio:

  • Encabezamiento: El encabezado generalmente incluye el logotipo de su empresa / negocio, el menú secundario y otros elementos como el cuadro de búsqueda, el widget del carrito u otra cosa.
  • Menú Primaria: El menú principal incluye enlaces de navegación a las páginas en las que sus visitantes estarán más interesados, y es fundamental para su sitio web. Esto puede incluir enlaces a sus productos, servicios, artículos y más. El menú principal generalmente incluye enlaces a categorías completas o secciones principales.
  • Menú secundario: El menú secundario incluye enlaces a páginas secundarias que no son centrales para su sitio web, pero que aún deben estar allí. Algunos elementos del menú secundario son «publicidad», «política de privacidad», «términos de uso» y más.
  • Contenido principal: Esta es el área principal de su sitio web. Presentará a los lectores a su sitio web y destacará sus últimos productos, anuncios, servicios y contenido.
  • Barra lateral: Una barra lateral puede incluir widgets como un formulario de suscripción, archivo, botones para compartir en redes sociales y otras CTA en las que puede que desee que actúen sus visitantes. La razón de esto es que los elementos de la barra lateral permanecen a la vista sin importar en qué página se encuentren sus visitantes.
  • Pie de página: Un pie de página actúa como la última red de seguridad para su sitio web. Aquí, puede colocar enlaces de navegación, mapa del sitio, formularios de suscripción, widgets y otras cosas en las que desee que hagan clic sus visitantes antes de abandonar su sitio. También puede agregar una política de privacidad, términos de uso y otras páginas importantes en su pie de página.

Una vez que enumere las páginas que desea, puede comenzar a crear la estructura de alambre de su sitio web, o comenzar a agregar las páginas a su plantilla en WordPress.

Ahora que conoce los conceptos básicos de la estructuración de su sitio web, aquí hay algunos consejos que debe tener en cuenta al diseñarlo.

1) Empezar con La estructura de navegación de su sitio web

Cuando los visitantes llegan a su sitio, deben encontrar fácil y rápidamente lo que están buscando. La buena navegación es responsable de hacer que eso suceda.

La forma de hacerlo es dividiendo su contenido en categorías y colocando los enlaces de estas categorías en sus menús primario y secundario.

Por ejemplo, si planea crear una tienda de comercio electrónico para vender maletas, su estructura de navegación podría verse así:

1. Una página de inicio (o página de destino)

2. Página de productos

a. Continua

  1. yo. Marca específica 1 página de destino
  2. ii) Página de destino específica de la marca 2
  3. iii) Página de destino específica de la marca 3

si. Talla mediana

  1. yo. Marca específica 1 página de destino
  2. ii) Página de destino específica de la marca 2
  3. iii) Página de destino específica de la marca 3

C. Grande

  1. yo. Marca específica 1 página de destino
  2. ii) Página de destino específica de la marca 2
  3. iii) Página de destino específica de la marca 3

3. Sobre nosotros

a. Quienes somos

si. Que hacemos

4. Pago

5. Blog

6. Política de la tienda

a. Política de privacidad

si. Envíos y Devoluciones

C. Preguntas frecuentes

Cuando diseñe la navegación de su sitio web, recuerde mostrar solo los elementos de menú esenciales en su sitio web. Una buena práctica es limitar los enlaces en los menús principal y secundario a siete elementos o menos.

El sitio web de Microsoft es un gran ejemplo de esto.

Su menú principal solo tiene cuatro enlaces, es decir, Tienda, Dispositivos, Software y Aplicaciones. Cada elemento del menú tiene su propio menú desplegable, que conduce a otro menú que se muestra en el lado derecho.

Esta forma inteligente de categorizar los elementos del menú facilita a los usuarios encontrar lo que desean y evita la sobrecarga de información al mismo tiempo.

Al utilizar inteligentemente las categorías y subcategorías, y al crear menús desplegables, usted también puede simplificar la navegación de su sitio web y facilitar a sus visitantes la navegación a través de su sitio web.

Además, crear una estructura de navegación lo ayudará a decidir cuántas páginas necesita para su sitio web y hacia dónde debe ir cada página. Esto será especialmente útil si está creando una estructura alámbrica para su sitio web.

2. Cree una guía de estilo para su sitio web

Dedicar tiempo a crear una guía de estilo para su sitio web es una de las cosas más efectivas que puede hacer para que su sitio web sea hermoso.

Su guía de estilo dicta no solo cómo se verá su sitio web, sino también cómo se verán sus páginas de redes sociales, pancartas publicitarias y otros activos de medios digitales.

Hay cinco componentes principales de una guía de estilo. Discutamos brevemente cada uno:

  1. Historia de la marca

Lo primero que debes hacer es presentarte al mundo:

¿Quién eres tú? ¿Por qué existes? ¿Cuál es tu misión? ¿Cuál es tu visión?

Estas preguntas son importantes porque, no solo la historia de su marca lo ayudará a atraer al público adecuado, sino que también lo ayudará a establecer las bases para la «personalidad» del diseño de su sitio web.

¿Será chic y jazzy? Cálido y profesional? Genial y corporativo? ¿Divertido y enérgico?

La única forma en que podrá decidir esto es si tiene una historia de marca, acompañada de una visión, una declaración de misión y un conjunto de valores fundamentales.

  1. Logo

Lo siguiente que debe decidir para su sitio web es su logotipo. Existen muchas herramientas que le permiten diseñar su logotipo de forma gratuita. Pero si desea optar por algo más profesional, puede contratar a un diseñador de mercados como Fiverr, Upwork y 99Designs.

  1. Paleta de color

Su sitio web debe tener un color que colocará en elementos como el logotipo, los menús de navegación, los fondos, las imágenes y las ilustraciones.

Para comenzar, debe elegir una combinación de tres colores para su sitio web:

  • Un color primario
  • Un color secundario
  • Un color terciario

Este útil cuadro de Lado positivo muestra una excelente manera de elegir una combinación de tres colores para su sitio web. Para el combo perfecto, los tres colores deben ser equidistantes entre sí en el círculo que, cuando están conectados, forman un triángulo perfecto.

Según ellos, combinar colores de esta manera «produce un efecto de alto contraste al tiempo que preserva la «armonía». Dicha composición se ve vibrante incluso cuando usa colores pálidos e insaturados.«

Puede aplicar el color primario con diferentes matices al fondo y los elementos de su sitio web. Su fuente puede tener el color secundario y debe ser oscura. Sus colores terciarios se pueden usar junto con sus colores primarios y secundarios para que se destaquen y, por lo tanto, deben ser neutros.

Aquí hay una hoja de trucos rápida, cortesía de 99designs, sobre las diferentes emociones evocadas por un color específico para que pueda decidir cuál se adapta a su sitio web:

  • rojo – pasión, importancia, atención
  • naranja – alegría, simpatía, vitalidad
  • Amarillo – felicidad, optimismo, advertencia
  • Verde – naturaleza, estabilidad, prosperidad (crecimiento)
  • Azul claro – tranquilidad, confianza, apertura
  • Azul oscuro – profesionalidad, seguridad, formalidad
  • Púrpura – realeza, creatividad, lujo
  • Rosado – feminidad, juventud, inocencia
  • marrón – resistente, terroso, anticuado
  • Blanco – limpio, virtuoso, saludable
  • gris – neutralidad, tristeza, tenue
  • Negro – potente, sofisticado, nervioso
  1. Tipografía

En diseño web, las fuentes son una gran parte del diseño general de su sitio web. Esto se debe a que «hablan» a sus visitantes y les muestran qué tipo de personalidad tiene su sitio web.

¿Quieres lucir lujoso, elegante, importante o informal? Elegir una buena tipografía es la mejor manera de transmitir ese aspecto.

Credito de imagen: MarkoSimić

Como regla general, hay tres fuentes que debe elegir para su sitio web. Más que eso y su sitio web se volverá confuso para sus visitantes.

  • La primera fuente es tu fuente principal. Esta fuente se utilizará en títulos en todas partes de su sitio web y, como tal, debe verse grande, audaz y exigir la atención de cualquiera que la vea.
  • La siguiente fuente es su fuente secundaria. Esto se usará para el texto. Esta fuente debe ser fácil de leer, con mucho espacio y no debe ser cursiva ni tener un diseño extraño. Sin embargo, debería ser fácil de escanear.
  • Finalmente, la última fuente que desea en su sitio web es la fuente de acento. Esta fuente se usará en botones de CTA, barras de menú y como acento a sus fuentes primarias y secundarias.

Una cosa que debe tener en cuenta es que, si bien las fuentes serán diferentes, deben complementarse entre sí. Para comprender cómo hacerlo, puede navegar por sitios como Dribbble y Awwwards para tener una idea de cómo los diseñadores profesionales combinan diferentes fuentes.

  1. Imágenes e ilustraciones

Su sitio web necesitará imágenes o ilustraciones, o una combinación de ambos. Las imágenes en su sitio web serán directamente responsables de evocar las emociones de sus visitantes.

Es por eso que elegir el tipo correcto de imágenes es crucial para que su sitio web establezca el tono correcto con su audiencia.

Por ejemplo, si vende zapatos en su tienda de comercio electrónico, querrá imágenes enérgicas de personas corriendo, caminando, escalando y haciendo otras actividades de alta intensidad. No querrás una imagen de una persona durmiendo en su cama.

No solo es importante elegir la imagen correcta, también es importante asegurarse de que sea de alta calidad y se vea genuina.

3. Asegúrese de que el diseño de su sitio web se vea limpio y utilice espacios en blanco

Hoy en día, las personas tienen períodos de atención extremadamente bajos. Es por eso que debe asegurarse de que su sitio web se vea limpio en el momento en que sus visitantes lleguen a él.

Si sus visitantes encuentran su sitio web confuso, no volverán. Y, de las personas que abandonan su sitio web debido a una mala experiencia, 88% tienen menos probabilidades de volver alguna vez. Pero, por el lado positivo, si implementa una apariencia limpia de su sitio web, aumentará las tasas de conversión hasta un 400%.

Para asegurarse de que su sitio web se vea limpio, use mucho espacio en blanco en las imágenes de sus productos, elementos de navegación y tipografía.

Esto hace que sea fácil para sus visitantes «escanear» su sitio web y digerir la información presentada. Le ayudará a aumentar el enfoque en las partes del sitio web que desea.

El fondo negro que ves aquí en el sitio web de Apple no es inútil. Actúa como un espacio en blanco que se centra en lo que importa, es decir, el menú de navegación, el encabezado y la imagen del iPhone.

4. Encuentre la «Voz» de su sitio web

En la vida real, el tono en el que le envías mensajes de texto a tu mamá y papá probablemente sea diferente de la forma en que le envías mensajes a tu mejor amigo. Del mismo modo, el «tono» de su sitio web será diferente dependiendo de la audiencia a la que sirve.

Si está dirigido a los millennials y es un elemento de productividad, es posible que desee hablar con una voz «divertida». Por otro lado, si trata con los CEO de Fortune 500, es posible que desee que su sitio web hable en un tono más profesional.

Nuevamente, la historia de su marca juega un gran papel al decidir esto.

Aquí, puede ver cómo Basecamp, un sitio que proporciona software de productividad, habla a su audiencia, es decir, profesionales de la tecnología y nuevas empresas.

Para establecer efectivamente el tono de su sitio web, le recomendamos que contrate a un redactor para que escriba el contenido de su sitio. Pueden trabajar con usted y ayudarlo a encontrar el mejor tono de voz para su sitio web.

5. Optimice la experiencia del usuario (UX) de su sitio web

Steve Jobs dijo una vez que «el diseño no es como se ve, es cómo funciona».

Lo mismo se aplica al diseño de su sitio web.

No importa cuán hermoso sea su sitio web, o cuántas animaciones y gráficos tenga; si no se carga correctamente, perderá visitantes y, Más importante aún, sus ventas.

Para asegurarse de que esto no suceda, es importante optimizar su sitio web para obtener velocidad y rendimiento. Aquí hay tres formas de hacerlo:

  • Cree una versión móvil de su sitio web: Hoy, más personas acceden a Internet desde sus teléfonos. Por eso es importante hacer que su sitio web sea «receptivo», lo que significa que carga la versión móvil cuando se accede desde teléfonos.
  • Use una red CDN para cargar su sitio web rápidamente: Una red CDN almacena sus archivos multimedia en servidores de todo el mundo, por lo que cuando los usuarios solicitan acceso a su sitio web, se los dirige a un servidor más cercano a su región. Esto hace que su sitio web se cargue rápidamente para todos sus visitantes, sin importar dónde se encuentren.
  • Comprime tus imágenes con un compresor de imágenes: Un compresor de imágenes simplemente reduce el tamaño de las imágenes y gráficos en su sitio web para que se cargue rápidamente.

Al centrarse tanto en el diseño como en el rendimiento de su sitio web utilizando estos consejos de diseño, podrá hacer que su sitio web sea un placer para buscar a sus visitantes.

Y, si bien estos consejos no lo convertirán en un diseñador web profesional de la noche a la mañana, lo ayudarán a crear un sitio web hermoso para su próxima empresa comercial en línea o proyecto paralelo.

¿Está usted en el proceso de diseñar su sitio web usted mismo? ¿Has encontrado algún desafío? ¡Cuéntanos todo en los comentarios!