Diseños web para negocios, explicados uno por uno

El diseño de una web es mucho más que colores y tipografías. Es un conjunto de decisiones sobre qué ve primero el visitante, qué lee después y qué se le invita a hacer. Una panadería, un hospedaje y un estudio de arquitectura necesitan respuestas distintas. En esta lección recorremos ocho de nuestros diseños, uno por uno. De cada uno verás a qué tipo de negocio le queda bien y qué ve el visitante: la distribución, la tipografía, los colores y las secciones a medida que baja por la página. Todos son sitios de concepto que diseñamos nosotros, así que los nombres, los precios y los datos que aparecen son ejemplos.

Cómo leer un diseño

Cuando miras cualquier sitio web, cinco cosas explican casi toda su personalidad. Entrena la vista para notarlas, y elegir un diseño te va a resultar mucho más fácil.

• Distribución. Cómo está organizada la página: una imagen grande, muchas pequeñas, columnas, una historia larga por la que se baja.
• Tipografía. El estilo de las letras. Las pesadas y estrechas suenan fuerte, las finas y anchas transmiten calma, una letra con serifas curvas se siente clásica.
• Color. Una página clara se siente abierta y una oscura se siente dramática. Un solo acento vivo le dice a la vista dónde tocar.
• Imágenes. Fotos de productos, de lugares, de personas o dibujos. Crean el clima más rápido que cualquier palabra.
• La acción principal. Lo único que la página te pide hacer: reservar, agendar, comprar, pedir una visita.

Ocho diseños, uno por uno

Heyday: para quien fabrica un producto estrella

Le queda bien a. Un negocio que hace o vende un producto principal en una gama corta de modelos, como un taller de bicicletas, un fabricante de muebles o una marca de producción pequeña. El visitante tiene que enamorarse de una cosa, entender qué la hace distinta y dar un primer paso.

Qué ve el visitante. Una página de blanco cálido, un título negro y delgado en una letra de palo seco liviana y una sola bicicleta turquesa con una sombra suave. Una barra negra arriba anuncia paseos de prueba, el encabezado tiene el icono de una bolsa y un botón negro, Book a test ride, y una fila de tres datos breves recorre la parte de abajo. Al bajar, la página pasa por el modelo principal, sus piezas, cinco colores, la colección completa, comentarios de ciclistas, cómo cuidar la bicicleta, un vistazo al taller y un formulario para pedir un paseo de prueba.

Eclore: para un producto premium con una historia

Le queda bien a. Un producto premium que se vende por la sensación: perfumes, velas, cosmética, joyas o chocolate fino. Sirve para marcas que quieren ser admiradas antes de ser comparadas.

Qué ve el visitante. Una página color arena con la sombra suave de hojas de palmera, una nota en letra cursiva rosada sobre un titular grande en una elegante tipografía con serifas, y un bloque de hielo con flores en el centro. El encabezado es discreto: pequeñas mayúsculas espaciadas, un icono de bolsa, un botón Click for sound y un botón oscuro, Reserve. Más abajo hay un manifiesto breve, tres notas de aroma, el frasco con opciones de tamaño y un botón Add to bag, una sección sobre el taller con un formulario para reservar una visita, citas breves de clientes y una invitación a un boletín.

Kern: para una tienda con muchos productos

Le queda bien a. Una tienda en línea con varias líneas de productos, como alimentos y bebidas, suplementos o equipo, donde los clientes recorren, comparan y agregan artículos al carrito.

Qué ve el visitante. Una franja arriba con las condiciones de envío, un encabezado ordenado con Shop, About y Journal a la izquierda y los iconos de acceso, búsqueda y carrito a la derecha, y una foto a pantalla completa de un corredor en la montaña. Una enorme palabra KERN color crema cruza la parte superior de la foto, la frase Powered by the field queda abajo a la izquierda y un botón con borde, Shop now, abajo a la derecha. Más abajo, la página muestra filas de productos con botones Add to cart, una declaración, sabores, la historia de las barras, productos agrupados por objetivos como músculo, fuerza, resistencia y equilibrio, fórmulas, un diario y un formulario del boletín.

Good Dirt: para un restaurante o una cafetería

Le queda bien a. Restaurantes, cafeterías, bares y panaderías. La página tiene que abrir el apetito, mostrar el menú, decir cuándo atiendes y dejar reservar.

Qué ve el visitante. Una página color crema coronada por el nombre en letras enormes y extrapesadas, una línea pequeña que dice dónde está la cocina y cinco enlaces del menú con forma de etiquetas de papel, con Reserve en naranja quemado. Una nota color óxido invita a arrastrar las verduras de un lado a otro, lo que vuelve juguetona la primera pantalla. El resto de la página incluye un menú con fotos de los platos, precios y filtros para necesidades alimentarias, un calendario de temporada, una sección sobre las granjas, un plano de mesas para reservar, un bloque claro con horarios y dirección y un pie de página que repite el nombre en letras grandes color crema sobre verde oscuro.

Lodestar: para un hospedaje o una estadía

Le queda bien a. Hospedajes, cabañas, posadas, retiros y alquileres vacacionales, donde el lugar y el clima son el producto y la acción principal es reservar noches.

Qué ve el visitante. Un cielo nocturno azul oscuro y casi negro con una franja pálida de estrellas, y un titular en una letra con serifas suave: A lodge under the darkest sky in Colorado. El menú es pequeño y espaciado, con un botón durazno, Book a night, arriba a la derecha. Abajo, datos breves del lugar, como la altitud y la cantidad de farolas cercanas, acompañan a un segundo botón durazno. La página sigue con un techo de vidrio sobre la cama, seis cabañas de tres tamaños, un calendario lunar para elegir las noches, lo que está incluido y un formulario corto para pedir fechas.

Snowmelt: para excursiones y actividades al aire libre

Le queda bien a. Operadores turísticos, guías, empresas de equipo y escuelas, y cualquier actividad que la gente reserva por fecha.

Qué ve el visitante. Imágenes a pantalla completa de agua que corre con fuerza, el nombre del río y del pueblo en pequeñas mayúsculas, y un titular en una gruesa letra de placa, Follow the snowmelt. Un botón naranja con forma de píldora, Pick your run, y otro con borde, Check dates, resaltan sobre el agua oscura, y una franja con datos del río recorre la parte de abajo. Más abajo hay un mapa de los rápidos, los niveles de dificultad, un calendario de reservas que muestra un resumen del viaje a medida que eliges, una cita sobre una escena de cañón a todo el ancho, una lista de lo que incluye cada lugar, reseñas breves y una invitación final a reservar.

Halden: para un estudio que vende su trabajo

Le queda bien a. Arquitectos, diseñadores de interiores, constructores, fotógrafos y consultores, donde la calidad del trabajo habla por sí sola y la acción principal es iniciar una conversación.

Qué ve el visitante. Una página blanca con un dibujo a lápiz de una casa junto a un lago, y un titular muy grande y muy liviano en dos tonos: Drawn for the lake. Una frase explica la idea, un botón negro lleno invita a ver las casas y un botón con borde inicia una conversación. El menú es corto y toda la página es tranquila. Al bajar, el dibujo se convierte en la casa, y la página pasa por una serie de proyectos, fotos de ambientes con vista, el enfoque del estudio, un proceso de cuatro pasos y una invitación final a escribir.

Aster: para una empresa de servicios del hogar que da cotizaciones

Le queda bien a. Instaladores de paneles solares, techadores, electricistas, empresas de calefacción y aire acondicionado y otros oficios donde el cliente quiere una estimación antes de una visita.

Qué ve el visitante. Una foto aérea a pantalla completa de filas de paneles solares alrededor de una torre, un titular blanco muy grande, Sunlight, well kept, y un pequeño bloque con una frase simple y un botón blanco, Check your roof. Unas etiquetas pequeñas de letra monoespaciada le dan a la página un aire técnico. Más abajo, unas secciones negras con letra blanca explican cómo se arma el sistema, muestran un video de los paneles y dan los números, y una calculadora de ahorro invita al visitante a probar con tres respuestas. La página termina en una sección naranja brillante con un formulario corto para reservar una visita al techo.

Más diseños para más tipos de negocio

Estos ocho son solo una parte de la gama. Nuestra página de diseños incluye también a Fielden, para una marca de ropa, Ridgeborn, para equipo de montaña, Highway Roast, para café, y varias empresas de energía: Heliora, Solvia, Aeolis y Norvane. Cada uno está pensado para su rubro, con su propia distribución, tipografía y clima.

Cómo elegir entre ellos

No elijas un diseño porque sea el más lindo. Elígelo porque encaja con la forma en que deciden tus clientes. Estas preguntas ayudan.

1. ¿Qué hacen tus clientes en tu sitio? ¿Reservan, compran, piden una cotización o miran tu trabajo? Elige un diseño cuya primera pantalla ponga esa acción primero.
2. ¿Cómo deciden? ¿Por una sensación, por el precio, por las pruebas o viendo el trabajo? Un restaurante vende con fotos y horarios, un estudio con proyectos y un oficio con una estimación rápida.
3. ¿Qué clima deben sentir? ¿Calma, fuerza, lujo, cercanía, aire técnico? La tipografía y el color de un diseño llevan buena parte de eso.
4. ¿Qué imágenes tienes? Un diseño armado alrededor de grandes paisajes necesita paisajes excelentes. Uno armado alrededor de dibujos o de productos necesita eso.
5. ¿Tu mejor cliente confiaría en él? Muéstrale la primera pantalla a alguien que se parezca a tu cliente ideal.

Una guía rápida: si tomas reservas, mira Good Dirt, Lodestar y Snowmelt. Si vendes productos, mira Heyday, Eclore y Kern. Si tu trabajo es tu propuesta, mira Halden. Si das cotizaciones, mira Aster.

Haz tuyo un diseño

Un diseño es un punto de partida. Tu nombre, tu logo, tus colores, tus fotos y tus textos lo transforman en tu sitio. La estructura, el orden de las secciones y la forma en que la página guía al visitante vienen de lo que funciona para tu tipo de negocio. Si un diseño tiene algo que te encanta y algo que no, dilo cuando revises la maqueta. Recuerda que todo lo que ves en esta lección es de concepto: los negocios, los precios y los datos son ejemplos, y los tuyos serán los tuyos.

Cómo trabaja Good Sites Only con los diseños

Todos los sitios que hacemos parten de un diseño pensado para tu rubro. Escribimos tus textos, incluimos el hosting, la versión para celular, la configuración de SEO y los formularios de contacto, y ves la maqueta los días 3 y 4, con una ronda de cambios. El sitio se arma y se revisa los días 5 y 6 y sale en línea el día 7. Los paquetes dependen de la cantidad de páginas: Basic hasta 15, Pro de 15 a 30 y Large para más de 30. Recorre todos nuestros diseños y anota los dos que sientas más cerca de tu negocio.

Preguntas frecuentes