Contenido

• Al paso
• Método 1 de 2: Las 3 reglas básicas
• Método 2 de 2: Pautas
• Consejos
• Advertencias

Diseñar un gran sitio web puede parecer una tarea abrumadora, pero siempre que tenga en cuenta los conceptos básicos, encontrará el proceso interesante y divertido. ¡Se trata de más que solo una buena apariencia! Le mostraremos los conceptos básicos y algunas pautas generales para ayudarlo a diseñar sitios web que la gente visitará una y otra vez.

Al paso

Método 1 de 2: Las 3 reglas básicas

1. Regla 1:Escuche a su cliente. Es posible que esté diseñando "el sitio web más grande del mundo en la historia del universo y más allá", con negros intensos, fuentes refinadas y colores brillantes y artísticos para un sitio que grita "¡explorame ahora!" Desafortunadamente, su cliente quería una barra de menú naranja con letras de color rosa brillante y naranja. Lo han despedido y su mejor sitio web, al que el cliente tiene derechos, está en algún lugar de su disco de respaldo, sin que nadie lo vuelva a ver.
   • Estudie la identidad corporativa de su cliente. Haga que el cliente le muestre algunos sitios web que le encantan. Esto no solo te dará una idea de lo que les gusta, sino que también te dará algunas ideas de diseño en las que quizás no hayas pensado.
   • Si pensaba que estábamos bromeando sobre el sitio web naranja y rosa, considere este sitio genial y sofisticado:
2. Regla # 2:Conozca a su audiencia y lo que buscan y adapte su diseño en consecuencia. La razón por la que las personas tienen sitios web es porque quieren que otras personas los vean. Puede ser informativo o comercial, o para entretener a un público objetivo específico. Su trabajo como diseñador es saber para quién está diseñando y mantenerlos en la página cuando lleguen allí.
   • Podrías pensar: "Si se ve bien, se quedarán". Pero este no tiene por qué ser necesariamente el caso. Tomemos el caso de los bienes raíces, por ejemplo. Aquí tienes un sitio con un diseño limpio y divertido. Tiene mucho espacio en blanco que le da un aspecto abierto, colores brillantes y un formato de pantalla ancha moderno con enlaces en un lugar destacado:
   • Ahora eche un vistazo a este enfoque para vender bienes raíces en la misma área: desordenado y muy ocupado, colores apagados y cubierto de publicidad.
   • ¿Adivina cuál funciona mejor para quienes buscan una casa? Correcto, el que casas! Cuando las personas buscan "casas en venta en Santa Mónica", no les importa cómo se ve un sitio. No quieren leer sobre el agente inmobiliario ni ver bonitas fotografías de la ciudad. Quieren ver casas.
3. Regla # 3:Escucharte a ti mismo. Entiendes lo que quiere el cliente y sabes lo que busca tu mercado. ¡Ahora es el momento de prestar atención a usted, el diseñador!
   • Cree una plantilla en el software de gráficos de su elección. Haga los elementos de su página en diferentes capas (para que pueda modificar las cosas más tarde sin destruir toda la plantilla). Estos elementos pueden ser:
     • Encabezamiento. Este es un elemento que es el mismo en todas las páginas de su sitio. El encabezado consta del título y el logotipo del sitio, así como enlaces a otras partes del sitio web (por ejemplo, Acerca de, Contacto, etc.). Visualmente y prácticamente, esto unirá todo. Es una buena práctica vincular el primer botón de una barra de menú a la página de inicio.
     • Por ejemplo, echemos un vistazo a Apple:
     • Como ocurre con la mayoría de las cosas de Apple, su página de inicio tiene un diseño muy limpio y sencillo. Tenga en cuenta la barra de menú en la parte superior, con temas lógicos para cada botón, más un campo de búsqueda; siempre es una buena idea si su sitio lo admite. Ahora echemos un vistazo a la página de inicio de uno de los botones, el iPad, para ver algunos elementos:
     • La barra de menú cambia solo oscureciendo el botón del iPad.
     • El tema de la página de destino se muestra en letras negras grandes.
     • Aparecerá un nuevo submenú para que pueda obtener más información sobre el producto. Si hace clic en uno de estos botones, verá que cada página ofrece contenido nuevo según el tema, pero será idéntico en diseño y distribución.
     • A menudo, cada tema principal en su barra de menú tendrá diferentes subtítulos para que usted los complete. En lugar de crear una segunda barra de menú, puede usar menús emergentes como este ejemplo de Musicians Friend:
     • Barra lateral. Esto aparecerá en muchas páginas de su sitio, pero no necesariamente en todas, lo determina el contexto. Sin embargo, es un elemento muy importante y debe diseñarse cuidadosamente para que sea intuitivo y no demasiado abarrotado. A diferencia de la barra de menú, el contenido de una barra lateral puede ser muy dinámico. Eche un vistazo a estas dos barras laterales de la comercializadora de bienes raíces Trulia La primera es para compradores:
       
       

Método 2 de 2: Pautas

1. Diseña una buena interfaz de usuario. Coloque los diversos elementos del sitio web, como el título, las barras laterales, los logotipos, las imágenes y el texto en el mismo lugar en cada página para que su sitio sea navegable e intuitivo.
   • Mantenga el mismo encabezado en la parte superior de cada página. Ya sea que el contenido de su sitio permita o no una gran cantidad de elementos repetidos, asegúrese de que la parte superior de cada página sea la misma.
   • Usa la lógica en tu diseño. Los elementos de una sola página deben estar ordenados lógicamente por importancia o tema; las diferentes páginas del sitio también deberían serlo.
2. Crea un estilo consistente. Donde el diseño debe dar consistencia estructural a su sitio, el estilo debe proporcionar armonía temática.
   • Cíñete a dos o tres colores principales y asegúrate de que combinen bien.
   • Evite usar demasiados estilos o tamaños de fuente; si desea alternar algunos, utilícelos de la misma manera en cada página.
   • Utilice hojas de estilo en cascada (CSS) para mantener un estilo uniforme y facilitar el cambio de elementos en todo un sitio web sin tener que ir a cada página por separado.
3. Maximice la legibilidad. Para que su texto sea más fácil de leer, puede dividirlo en partes más pequeñas.
   • Utilice subtítulos y el espaciado adecuado para separar cada una de las partes.
   • Use letras en negrita o de diferentes tamaños para mostrar la jerarquía y la importancia de los temas.
   • Preste atención a cómo trata el texto. No haga la fuente demasiado pequeña y aumente el interlineado para facilitar la lectura de grandes trozos de texto. Los fragmentos de texto grandes son más difíciles de leer; divídalo en párrafos más pequeños.
4. Haga que su sitio web sea legible universalmente. Utilice HTML estándar y evite etiquetas, funciones y complementos que solo están disponibles para una marca o versión de un navegador.
   • Si bien la mayoría de los navegadores y computadoras modernos pueden manejar imágenes complejas, todo se verá más elegante si reduce y optimiza sus imágenes para la web. Sopese la importancia de la calidad frente a la importancia de la velocidad.
5. Pruebe su sitio web. Asegúrate de eso cada enlace funciona como era de esperar, y las imágenes aparecen correctamente.
   • Es posible que desee organizar algunas pruebas de usuario haciendo que los miembros de su público objetivo prueben la claridad y facilidad de uso de su diseño y brinden comentarios sobre su sitio web.
6. Publique su sitio web. Compre un nombre de dominio si aún no lo ha hecho. Compruebe periódicamente si los enlaces siguen funcionando y escuche las sugerencias que los visitantes le envían por correo electrónico.

Consejos

• Si bien puede diseñar el diseño en función de su propia visión personal o de las cosas que ha visto en otros sitios, puede ser más fácil comprar un diseño listo para usar.
• No bombardees al visitante con fotos lindas y especiales. La animación flash, los colores brillantes, los fondos estampados y la música que se reproduce automáticamente al cargar la página eran experimentos divertidos en los años 90, pero ahora asustarán a los usuarios. Utilice fondos simples que contrasten con el color del texto para una máxima legibilidad.
• Siempre puede utilizar CSS para optimizar el espacio entre párrafos.
• Para los visitantes con discapacidades auditivas o visuales, puede subtitular videos, transcribir audio y agregar un mensaje de accesibilidad. Si bien las tablas pueden ser una forma eficaz de organizar la información, es posible que los visitantes con discapacidad visual que utilizan software lector de pantalla no escuchen el material en el orden correcto.
• Deje que sus visitantes ahorren tinta: use una hoja de estilo separada para imprimir páginas.
  • Apague las imágenes de fondo al configurar los parámetros de impresión.
  • Utilice texto negro sobre fondo blanco.
  • Elimina la barra de menú y las imágenes innecesarias.

Advertencias

• Evite el plagio y obedezca todas las leyes de derechos de autor. No incluya imágenes aleatorias que encuentre en línea o incluso elementos estructurales sin aprobación. Todo lo que utilice en su sitio debe ser tanto legal como ético.