Diseño de la página
Un buen diseño de página web es un enigma: a menudo es mejor cuando no se nota en absoluto. Es decir, si el diseñador ha hecho bien su trabajo, el usuario podrá encontrar las especificaciones del producto, el carrito de la compra, las ofertas promocionales y, lo más importante, el botón de compra sin tener que pensar en ello. Al fin y al cabo, si se invierte más tiempo en averiguar cómo utilizar un sitio web, se presta menos atención a su contenido real.
El diseño del sitio web consiste en equilibrar la estética con la practicidad. El sitio debe ser bonito, pero lo más importante es que ofrezca al usuario lo que ha venido a buscar de la forma más eficaz posible. Los usuarios tienen poca paciencia para las páginas web difíciles, por lo que las tasas de rebote más altas se producen en los primeros diez segundos de la visita a un sitio web. Es cierto que un buen diseño del sitio web no siempre hará que el visitante se quede (especialmente si el contenido es poco convincente), pero desde luego no querrá que sea la razón por la que se vaya.
Para asegurarte de que tu sitio web no se va a quedar atrás, hemos elaborado esta guía sobre los fundamentos del diseño del sitio web. Expondremos los fundamentos de lo que debe lograr un buen diseño, las técnicas clave para una maquetación eficaz del sitio web y los tipos más comunes de maquetación del sitio web.
Ejemplos de diseño de páginas web
La cabecera es la parte superior de un sitio web. Suele ser lo primero que ven los visitantes cuando entran en un sitio y casi siempre contiene el logotipo de la marca y el menú del sitio web. Este menú del sitio web es el mapa del sitio que ayuda a los visitantes a encontrar lo que buscan, ya sean detalles sobre su producto o información sobre su empresa.
Las cabeceras típicas incluyen sus páginas web más esenciales, que pueden variar según el tipo de sitio web que esté creando. Si tienes una tienda online, por ejemplo, podrías dividir tu cabecera en categorías basadas en los tipos de artículos que vendes. Por otro lado, si tiene un sitio web sin ánimo de lucro, una página de donaciones en la cabecera sería probablemente más apropiada. En pocas palabras, incluir las categorías adecuadas en la cabecera es esencial para ayudar a los visitantes a encontrar sus páginas más importantes y, en última instancia, puede marcar la diferencia entre un sitio web exitoso y otro que no lo es.
Inmediatamente debajo de la cabecera hay algún tipo de imagen, serie de imágenes o, a veces, un vídeo. Juntos, el encabezado y la imagen principal conforman la sección superior de su sitio web -a menudo denominada above the fold- y son esenciales para crear una buena primera impresión. La imagen destacada, en particular, marca una gran diferencia a la hora de que los usuarios permanezcan en su sitio web o lo abandonen segundos después de entrar.
Generador de diseño Html
Este artículo recapitulará algunas de las características de la maquetación CSS que ya hemos tocado en módulos anteriores, como los diferentes valores de visualización, además de introducir algunos de los conceptos que trataremos a lo largo de este módulo.
Las técnicas de diseño de páginas CSS nos permiten tomar elementos contenidos en una página web y controlar su posición con respecto a los siguientes factores: su posición por defecto en el flujo de diseño normal, los otros elementos que los rodean, su contenedor padre y la ventana/portada principal. Las técnicas de diseño de páginas que cubriremos con más detalle en este módulo son:
Cada técnica tiene sus usos, ventajas y desventajas. Ninguna técnica está diseñada para ser utilizada de forma aislada. Si entiendes para qué está diseñado cada método de diseño, estarás en una buena posición para entender qué método es el más apropiado para cada tarea.Flujo normalEl flujo normal es la forma en que el navegador diseña las páginas HTML por defecto cuando no haces nada para controlar el diseño de la página. Veamos un ejemplo rápido de HTML:
Observe cómo el HTML se muestra en el orden exacto en el que aparece en el código fuente, con los elementos apilados uno encima de otro: el primer párrafo, seguido de la lista desordenada, seguida del segundo párrafo.
Diseño del sitio web w3schools
La ley de Hicks afirma que cuantas más opciones ofrezca a los usuarios, más tiempo tardarán en decidirse por una opción. Mientras que un mayor tiempo en el sitio puede ser bueno para el negocio, demasiadas opciones pueden frustrar a los visitantes, que es lo contrario de lo que se busca.
Esto no sólo significa dejar espacio en blanco entre las imágenes y los párrafos, que por supuesto es importante. También significa utilizar el espacio negativo para conducir a los visitantes en la dirección que usted espera, como su llamada a la acción.
Le recomendamos que investigue y pruebe las combinaciones de colores a las que su público podría responder más. Los colores adecuados pueden evocar ciertas emociones. Además, aspectos como la demografía pueden afectar a la forma en que sus visitantes perciben su sitio.
Para encontrar una combinación de colores que funcione, utilice la rueda de colores y busque colores complementarios (los que son opuestos en la rueda) o análogos (los que están uno al lado del otro en la rueda).
Como diseñador de páginas web, puede que prefieras dejar la redacción de la web en manos de un redactor real. Sin embargo, debe saber dónde debe colocarse el texto para obtener las máximas conversiones, aunque sea temporalmente lorem ipsum.