Qué hace que una web se vea profesional

La gente se forma una opinión de tu negocio antes de leer una sola frase. Mira la página, percibe si está cuidada o descuidada, y decide si se queda. Una web profesional no es la más llamativa: es la que se ve clara, coherente y terminada. En esta lección vas a ver diez señales que hacen que un sitio se vea profesional, con ejemplos de diseños reales que hicimos, y una revisión de diez minutos que puedes hacer en tu propia web.

Por qué importa el aspecto de tu web

Muchas veces, la web es el primer lugar donde un cliente conoce tu negocio. No puede ver tu local, oler tu cocina ni darte la mano, así que la página tiene que hacer ese trabajo por ti. Si se ve abandonada, con textos apretados, fotos borrosas y botones que no combinan, la gente supone que el trabajo detrás también está descuidado. No siempre es justo, pero así se juzga a un negocio que todavía no se conoce.

También pasa lo contrario. Una página ordenada y tranquila le dice al visitante que alguien cuida los detalles. Y calma la duda que aparece antes de cada compra o reserva: ¿este negocio existe de verdad?, ¿es bueno?, ¿me van a contestar?

Profesional no quiere decir caro, ni complicado. Los sitios que mejor se ven suelen hacer menos cosas, pero las hacen bien: dan un mensaje claro por vez, usan pocos colores y una o dos tipografías, muestran fotos con el mismo estilo y dejan mucho espacio libre.

Las diez señales de una web profesional

1. Un mensaje claro en cada pantalla

Mira la primera pantalla del diseño de Halden. Tiene un título, una frase y dos botones. Tu vista va primero al título, después a la frase y por último a los botones, porque el diseño la guía en ese orden. A esa jerarquía de la atención se le llama jerarquía visual.

Para lograrla, haz que lo más importante sea lo más grande, deja lo segundo más importante en un tamaño menor y dale menos peso a todo lo demás. Después quita lo que compite. Si dos elementos gritan con la misma fuerza, el visitante no sabe adónde mirar.

2. Espacio alrededor de todo

El espacio en blanco, o espacio negativo, es la zona vacía que rodea los textos, las fotos y los botones. No es espacio perdido: deja descansar la vista y muestra qué elementos van juntos. Las páginas amontonadas se ven baratas y cansan; las páginas con aire transmiten seguridad.

Deja bastante margen alrededor de los títulos, entre las secciones y junto a los botones. No llenes cada rincón solo porque hay lugar. Si dudas de que una sección necesite más aire, agrégale un poco y fíjate si mejora.

3. Letra fácil de leer

El texto es lo que más usa la gente en tu sitio, así que tiene que ser cómodo. Estos hábitos hacen que una página se vea profesional y se lea bien.

• Tamaño. En pantalla, 16 píxeles o más para el texto corrido es un mínimo habitual. El texto pequeño y gris le parece elegante a quien diseña, y agotador a todos los demás.
• Ancho de línea. Las líneas de unos 50 a 75 caracteres son las más fáciles de seguir. Un texto que ocupa todo el ancho de una pantalla grande cuesta mucho leerlo.
• Interlineado. Deja aire entre las líneas de un párrafo, más o menos una vez y media el tamaño de la letra.
• Dos tipografías como máximo. Una para los títulos y otra para el texto, o una sola familia en dos grosores. Una tercera casi nunca ayuda.
• Títulos claros. Los títulos deben verse bastante más grandes que el texto, y un mismo nivel tiene que verse igual en todas las páginas.

El diseño de Fielden muestra que no hace falta mucho. Usa una sola tipografía en dos grosores: la primera palabra del título va en negro y el resto en un tono más claro, y así consigue ritmo sin sumar otra fuente.

4. Una paleta de colores pequeña y estable

Elige un color principal, un color de acento para los botones y los enlaces, y neutros como blanco, negro y gris para todo lo demás. Usa el acento solo para las acciones. Los visitantes aprenden enseguida que lo que tiene color es lo que se puede tocar, y la página se vuelve más fácil de usar. Si tu logo tiene muchos colores, elige uno o dos que funcionen bien en pantalla y deja los otros dentro del logo.

5. Botones y estilos que combinan

La coherencia es la marca silenciosa de un diseño cuidado. Todos los botones tienen que compartir forma, esquinas y tipo de letra. Todos los enlaces deben verse como enlaces. Las separaciones entre secciones deberían ser parecidas, y los iconos tendrían que venir de una misma familia. En la pantalla de Fielden de arriba, el botón lleno es la acción principal y el botón con borde es la segunda opción, más discreta, pero los dos tienen el mismo tamaño y la misma forma, y por eso se nota que van juntos.

6. Fotos con un mismo estilo

Las fotos cuentan cómo eres. Imágenes nítidas y bien iluminadas de tu trabajo real, de tu local y de tu gente generan confianza. Fotos de distintas fuentes, con luces y colores diferentes, hacen que la página parezca armada con retazos. Si algunas de tus fotos son flojas, es mejor usar menos. Las próximas lecciones tratan las fotos y el video con más detalle.

7. Todo alineado en una cuadrícula

Las páginas profesionales están alineadas. Los textos empiezan en el mismo borde izquierdo, las columnas tienen el mismo ancho, las tarjetas la misma altura y los márgenes se repiten. No necesitas saber qué es una cuadrícula para notar el efecto: cuando las cosas se alinean, la página transmite calma; cuando casi se alinean, algo se siente raro sin que nadie sepa por qué.

8. Datos reales que dan confianza

Lo vago da desconfianza. Los datos reales dan tranquilidad. Pon la información práctica donde la gente pueda encontrarla: tu dirección, un teléfono que se pueda tocar desde el celular, los horarios, la zona donde trabajas, tu licencia o tu seguro si tu oficio los exige, nombres y caras reales, y reseñas verdaderas. En el diseño de Good Dirt, los horarios, la dirección de la calle y la distancia a un sendero cercano aparecen como texto simple en un mismo bloque.

9. Páginas que cargan rápido y no se mueven

Una página que tarda en aparecer, o que salta de un lado a otro mientras carga, parece rota aunque no lo esté. La velocidad también es parte del aspecto. En la lección 8 de esta serie vas a ver cómo medirla.

10. Cero cabos sueltos

Los pequeños errores se suman. Enlaces rotos, erratas, texto de relleno, el año pasado en el pie de página, una oferta que terminó hace meses, imágenes que no cargan, iconos de redes que no llevan a ningún lado y un nombre del negocio escrito de dos maneras le dicen al visitante que nadie cuida el sitio. Arreglarlos cuesta poco y cambia mucho la impresión.

Señales de que una web se ve improvisada

Usa esta lista como alerta. Si ves varias en un sitio, va a parecer improvisado, sin importar la calidad del negocio.

• Tres o más tipografías, o textos en muchos tamaños y colores
• Muchos colores muy vivos que compiten entre sí
• Fotos estiradas, pixeladas o muy oscuras
• Imágenes de archivo con apretones de manos y personas señalando una pantalla
• Texto sobre una foto cargada, sin nada detrás que ayude a leerlo
• Ventanas emergentes apenas se abre la página
• Música o video que arranca solo
• Un bloque largo de texto sin subtítulos
• Texto de relleno como Lorem ipsum, o una página que dice en construcción
• Enlaces que no abren nada, o un teléfono que no se puede tocar
• Un logo con versiones distintas en páginas distintas
• Demasiadas animaciones, que frenan la página y distraen del mensaje

Una revisión de diez minutos para tu web

Abre tu sitio en una computadora y recorre estos pasos. Anota cada problema y arregla primero los tres más grandes.

1. Entrecierra los ojos. Desenfoca la vista o aléjate de la pantalla. ¿Qué se ve primero? Debería ser tu mensaje principal o tu botón principal.
2. Cinco segundos. Muéstrale la primera pantalla a alguien durante cinco segundos y tápala. Pregúntale a qué se dedica el negocio y qué tocaría. Si no puede decirlo, esa pantalla necesita trabajo.
3. Celular. Abre la misma página en tu celular. ¿Se lee sin ampliar? ¿Puedes tocar cada botón sin equivocarte?
4. Toca todo. Haz clic en cada opción del menú, cada botón y cada enlace. Envía el formulario de contacto y confirma que el mensaje te llega.
5. Lee en voz alta. Lee las páginas principales en voz alta. El oído detecta erratas y frases torpes que el ojo se salta.
6. Pie de página. Revisa el año, la dirección, el teléfono y el correo.
7. Cuenta. Cuenta las tipografías y los colores. Más de dos tipografías o más de tres colores principales es una señal de alerta.
8. Compara. Pon tu primera pantalla al lado de la de dos competidores. ¿Se ve tan cuidada como la de ellos?
9. Pregunta. Pídele a alguien que no conoce tu negocio que te diga qué cree que vendes y si confiaría en él.
10. Corrige. Elige los tres problemas más grandes y arréglalos esta semana. Luego repite la revisión dentro de un mes.

Lo profesional depende de tu rubro

Una taquería y un estudio de abogados no deberían verse iguales. Un restaurante necesita fotos que den hambre, horarios y una forma de reservar. Un estudio de arquitectura necesita páginas tranquilas y fotos grandes de sus obras. Una tienda necesita fotos limpias de sus productos y una forma sencilla de comprar. Verse profesional significa verse como corresponde para la gente a la que quieres llegar.

Por eso conviene mirar ejemplos de tu propio rubro antes de decidir. Fíjate en qué mantienen simple, qué hacen grande y qué dejan afuera. Después pregúntate si tu sitio muestra el mismo cuidado.

Cómo cuida Good Sites Only el aspecto profesional

Cada sitio que hacemos parte de un diseño pensado para tu tipo de negocio. Los textos se escriben para ti, el sitio tiene versión para celular, la configuración de SEO y los formularios de contacto están incluidos, y el hosting también. Ves una maqueta los días 3 y 4, con una ronda de cambios, y el sitio terminado se arma y se revisa los días 5 y 6 para salir en línea el día 7. Para ver cómo queda cada rubro terminado, recorre nuestros diseños.

Preguntas frecuentes