Cómo diseñar y diseñar un sitio web (sin habilidades de diseño)

Si está intentando crear sitios web independientes para clientes, o simplemente está tratando de construir su cartera, es posible que haya encontrado este enigma:

¿Cómo construyes un sitio web si no tienes habilidades de diseño web?

Aquí hay algunas opciones:

  • Podría contratar a un diseñador web para crear el diseño para usted, pero los (buenos) diseñadores no son baratos.
  • Puedes encontrar un diseñador barato en Fiverr o Upwork, pero sabes que puede ser arriesgado.
  • O bien, puede descargar un tema o plantilla gratuita o premium, pero a veces no hacen todo lo que usted desea.

Otra opción para usted es aprender algunas habilidades básicas para diseñar y diseñar sitios web, y construir su propio front-end.

(Spoiler: ¿Quiere avanzar y ver el producto terminado? Haga clic aquí.)

Ahora, no vas a convertirte en un diseñador increíble en el tiempo que te lleva leer este artículo. Y para sitios web complejos, puede terminar necesitando trabajar con un diseñador profesional.

Pero creo que puede aprender a planificar y diseñar sitios web simples que funcionarían para la mayoría de las pequeñas empresas.

Este método implica:

  • Aprender los conceptos básicos de cómo se crean visualmente los sitios web
  • Investigando diseños web existentes para obtener inspiración e ideas para usted.

¡En realidad es la estrategia que usé para crear mi propio sitio web! Por supuesto, es un diseño bastante simple, nada demasiado elegante. Pero a veces simple es todo lo que necesitas.

Una vez que conozca los conceptos básicos de cómo diseñar y diseñar para la web, podrá crear sitios web personalizados que puede utilizar para su cartera y clientes independientes.

Y, por supuesto, cada sitio web que construyas te dará experiencia. Con el tiempo, podrá crear diseños cada vez más complejos a medida que continúe practicando su oficio.

Estos son los pasos principales de este proceso:

  • Decide lo básico de tu sitio web
  • Planifica el diseño de tu sitio web
  • Poner el diseño juntos
  • Desarrollar el producto final

Cada paso será impulsado por la investigación: mirar otros sitios web para ver qué hacen y extraer las partes que desea reutilizar para su sitio web.

Una nota importante: no estoy abogando en absoluto por que robes CSS o imágenes que no son tuyas. (Por un lado, no aprenderá nada con un trabajo de copiar y pegar).

La idea aquí es obtener ideas y conceptos creativos, y usarlos para crear algo similar.

Decide lo básico de tu sitio web

Antes de comenzar a elegir colores o fuentes, respondamos algunas preguntas generales sobre este sitio web:

1. ¿Qué tipo de negocio promoverá el sitio web?

¿Una pizzería, un estudio fotográfico o una librería? Cualquier tipo de negocio podría beneficiarse de un sitio web, por lo que puede elegir cualquier cosa.

Para nuestros propósitos aquí, elegiremos una cafetería ficticia llamada Central Coffee. Porque a todos les gusta el café, ¿verdad?

2. ¿Qué páginas tendrá el sitio web?

Algunas páginas comunes serían la página de inicio, sobre la página, la página de contacto y las páginas específicas de la industria en la que se encuentra el negocio.

La mejor manera de descubrir las páginas y otros aspectos estructurales generales del sitio web es realizar una investigación rápida en línea.

Investigue sitios web existentes

Consulte otros sitios web existentes para tipos similares de empresas. Mire 3–4 de estos sitios web y vea qué páginas tienen.

Intente notar cómo está diseñado el sitio web y tome notas sobre:

  • Qué páginas tiene el sitio web,
  • Cuál es el estilo general,
  • Qué fácil es navegar y encontrar cosas,
  • Y cualquier otra cosa que despierte tu interés.

Un buen lugar para encontrar sitios web de ejemplo es Theme Forest. Tiene un montón de plantillas de sitios web gratuitas y premium y temas de WordPress. Y si te quedas con los temas más populares, sabes que generalmente serán ejemplos de buenos diseños.

Aquí hay un ejemplo de cafetería de un tema que encontré.

The7

Páginas:
Sitio web de una página con las secciones: Inicio, Acerca de, Ubicación, Ofertas, Menú, Noticias, Prensa, Publicaciones de blog

Estilo:
Moderno y limpio, con buenas fotos.

Navegación:
Fácil de navegar

Y aquí hay algunos sitios web que encontré en una búsqueda de "cafetería en Chicago":

El café del agujero de gusano

Páginas:
Página de inicio, blog, ubicación / contacto, oportunidades de trabajo

Estilo:
Algo moderno; las fotos de la tienda son más nostálgicas

Navegación:
No es obvio de inmediato que se trata de una cafetería. Es un poco difícil navegar por el sitio.

Calles Caffe

Páginas:
Un sitio web de una página, las secciones son: Inicio, Caffe (Acerca de), Menú, Asado, Time Machine (jugos), Formulario de contacto

Estilo:
Simple y moderno (Squarespace)

Navegación:
Bastante fácil de navegar. Me gusta la barra de menú adhesiva en la parte superior que te desplaza hacia abajo a cada sección.

Construir café

Páginas:
Un sitio web de una página, las secciones son: Página de inicio, Acerca de, Horas, Ubicación, Tienda, Catering, Eventos, Contacto

Estilo:
El diseño simple es una combinación de fotos de ancho completo entre secciones de fondo blanco con texto.

Navegación:
Bastante fácil de navegar

Café Sawada

Páginas:
Página de inicio, Acerca de, Comida y bebida, Prensa, Contacto y horario, Nuestros restaurantes, Empleos

Estilo:
El diseño se trata principalmente de la fotografía, y el texto parece casi una ocurrencia tardía

Navegación:
Es un poco difícil de navegar: casi no vi el menú de hamburguesas en la esquina derecha.

Escriba notas para su propio sitio web

Ahora, después de mirar varios sitios web de cafeterías, tenemos una idea mucho mejor de qué características son comunes. Y tenemos algunas ideas de lo que creemos que funciona y no funciona.

Según su investigación, ahora puede comenzar a escribir notas para su propio sitio.

Para Central Coffee, creo que vamos a seguir con un sitio web simple de una página, con las siguientes secciones:

  • Encabezamiento
  • Casa
  • Acerca de
  • Menú
  • Localización / Contacto
  • Pie de página

Planifica el diseño de tu sitio web

Ahora que hemos descubierto el esqueleto del sitio, desarrollaremos cada página o sección con los elementos que queremos incluir en cada una. El diseño que terminaremos haciendo también se llama estructura metálica.

En la estructura alámbrica, no estamos diseñando exactamente nada, lo que significa que todavía no hay fuentes, colores o fotos. Solo estamos averiguando el tipo de contenido que queremos y aproximadamente dónde estará en la página. Es más como un plano o un diagrama en este momento.

Encabezamiento

Me gusta la barra de navegación superior que se encuentra en la página de demostración de Seven Coffee y el sitio web de Caffe Streets.

Sin embargo, en ambas páginas está centrado, y prefiero alinearlo a la izquierda, con el logotipo primero y las secciones después.

Eso es para la versión de escritorio. Para tabletas y dispositivos móviles, solo tendremos el logotipo y el menú de hamburguesas en el encabezado de forma predeterminada.

Al hacer clic en la hamburguesa, se abrirá un menú fuera del lienzo que se deslizará desde la derecha para mostrar la navegación de la sección.

Casa

Como se trata de un sitio de una página, la "página de inicio" será lo que verá inicialmente en la pantalla cuando cargue el sitio web. Y me gusta cómo Seven Coffee tiene un pequeño lema debajo del nombre.

Creo que aquí tendré una imagen de fondo (como Build Coffee) con el texto encima. Será lo mismo tanto en computadoras de escritorio como en dispositivos móviles.

Acerca de

Todos los sitios web tienen una breve sección Acerca de, algunos con fotos. Pondré un párrafo sobre el café y también incluiré algunas fotos del interior de la tienda para atraer a los usuarios a que quieran visitarnos.

Menú

Cada uno de los sitios web maneja los menús de manera diferente:

  • Seven Coffee tiene una cuadrícula de elementos de menú con precios,
  • Caffe Streets solo tiene una lista de artículos,
  • y Build y Sawada enlazan a archivos PDF del menú.

Personalmente odio cuando estoy navegando por un sitio web en mi teléfono y tengo que descargar un PDF. Así que me limitaré a un menú simplificado con bebidas y alimentos, e incluiré algunas fotos.

Localización / Contacto

Quiero poner la ubicación, el horario y la información de contacto en la parte inferior del sitio web. Supongo que los usuarios comenzarán en la parte superior del sitio y se desplazarán hasta la parte inferior.

Poner el llamado a la acción en la parte inferior responderá la pregunta, "¿qué pasa ahora?". ¡Ayudará a los visitantes a tomar medidas, específicamente al obtener indicaciones para llegar al café y, con suerte, visitarlo!

Pie de página

El pie de página será bastante mínimo. Solo será un pequeño bar con información de copyright.

La estructura metálica completa

Aquí están los wireframes completos del escritorio y la versión móvil del sitio web. Los creé usando una herramienta gratuita en línea llamada Mockflow. Le permiten crear un proyecto de forma gratuita y tienen planes pagados si desea más de un proyecto.

Es bastante fácil de usar, y me gusta la opción de estilo incompleto porque es divertido

Decidir las especificaciones básicas de diseño.

Nuevamente, no vamos a crear estilos súper detallados y elegantes. Sin embargo, necesitamos descubrir algunos de los conceptos básicos. Cosas como:

Esquema de colores

La combinación de colores es simplemente los diferentes colores que está utilizando en el sitio web. Piense en ello como pintar y decorar su casa. Por lo general, querrá quedarse con tonos neutros como grises y blancos, para la mayoría de los espacios. Y uno o dos colores de acento brillantes para los elementos importantes que desea resaltar, como enlaces y botones.

Si necesita algo de inspiración de color, Canva tiene algunas paletas de colores de muestra que puede probar.

Para el sitio web de Central Coffee, voy a usar la Colección Otoño de ese enlace de Canva: es una paleta de colores cálidos basada en marrones.

Estoy tratando de evocar ese sentimiento nostálgico y acogedor asociado con las cafeterías.

Fuentes

Volviendo a los sitios web, casi todos usan una fuente sans-serif (letras que no tienen el "serif", o las barras finales en texto de máquina de escribir).

Elegiría una fuente simple para la mayoría de su texto, y luego puede ir un poco más elegante con una fuente de mayor peso para los títulos y titulares.

Google Fonts es un excelente lugar para buscar fuentes que puede cargar en su sitio web de forma gratuita. Simplemente no obtenga demasiados, porque cada familia de fuentes, peso y estilo agregarán carga adicional al sitio.

Imágenes / Fotografía

Elija un estilo o estado de ánimo general que se ajuste al tipo de negocio que es el sitio web. Para una cafetería, generalmente querrás ir con imágenes atractivas con luz suave, sensación acogedora o nostálgica para tomas interiores, personas charlando y relajándose en la cafetería, e imágenes de comida y bebida.

Para ilustraciones y logotipos, existen algunas herramientas gratuitas de diseño gráfico en línea que vienen con imágenes que puede usar en su sitio web. Algunos ejemplos son:

  • Canva
  • Vectr
  • Snappa

Construye el sitio web

Ahora tenemos wireframes para decirnos en general cómo se presenta todo. Y tenemos nuestras referencias de diseño, para ayudar a guiar los estilos frontales.

Como no tenemos un diseñador para crear PSD detallados, seguiremos adelante y comenzaremos a construir el sitio web a partir de los wireframes que acabamos de dibujar.

Así es como generalmente me acerco a construir el front-end de un sitio web:

  1. Configurar los archivos del sitio web
  2. Crea y estructura las carpetas y archivos.
  3. Ponga en marcha el corredor de tareas. (Estoy usando Gulp para este proyecto).
  4. Cree un archivo HTML separado para cada plantilla.

Luego, siga estos pasos para cada plantilla HTML:

  1. Cree la estructura esquelética con los elementos HTML básicos.
  2. Desarrolle los elementos de la página uno por uno.
  3. Para cada elemento, agregue los estilos CSS, primero asegurándose de que cada sección esté distribuida correctamente.
  4. Compruebe cómo se ve la página en el navegador mientras trabaja, y continúe haciendo correcciones.

Asegúrese de que su sitio web sea receptivo

Mientras crea un sitio, generalmente es una buena idea verificar que sus estilos se vean perfectos en computadoras de escritorio, tabletas y dispositivos móviles.

Puede verificar fácilmente los estilos de escritorio en su propia computadora, con diferentes navegadores. Para dispositivos móviles, puede usar las herramientas de desarrollador de Chrome, que emula sitios web en varios dispositivos móviles.

Tenga en cuenta que cualquier herramienta de emulación no será 100% exactamente como lo verá el teléfono o tableta real. Entonces, cuando pruebe sus estilos, eventualmente querrá verificarlo en un teléfono real cuando el sitio web esté en Internet.

Aquí hay algunos emuladores de dispositivos que puede usar para probar la visualización del sitio web:

  • Responsinator.com (gratis)
  • Screenfly de Quirktools (gratis)
  • Browserstack (pago): Browserstack le permite probar máquinas virtuales en dispositivos reales.

¡El producto terminado!

Aquí hay una captura de pantalla del sitio web de Central Coffee terminado:

Puedes ver el sitio real por ti mismo en mi página de Github.io.

Y así es como diseñé y construí un sitio web, sin tener que contratar un diseñador.

¡Espero que hayas encontrado útil esta publicación! Déjame saber cualquier idea que tengas en los comentarios a continuación.

¿Te gustó este artículo? ¡Presiona (o mantén presionado ) el botón de aplaudir , para que otras personas también puedan encontrarlo!

¿Estás interesado en aprender a codificar? Escribo tutoriales y otros artículos sobre aprendizaje de desarrollo web en mi sitio, coder-coder.com.

Regístrese aquí para recibir correos electrónicos sobre nuevos artículos.