Como maquetar una pagina web

Diseño de la estructura de la página web

Antes de que los teléfonos inteligentes y las tabletas se hicieran populares, los diseñadores web creaban páginas de ancho fijo que funcionaban en los tamaños de pantalla más comunes: normalmente 1024 píxeles de ancho por 768 píxeles de alto.  Todo esto cambió alrededor de 2013 con el aumento masivo del uso del iPhone para navegar por la web. Ahora no hay una respuesta única a “¿qué tamaño debe tener mi página web?” – todos los sitios web deben ser responsivos.

El diseño responsivo significa crear páginas web que se adapten a diferentes dispositivos y tamaños de pantalla. Utiliza el mismo contenido, pero lo presenta de forma diferente según se utilice un teléfono móvil, un iPad, un portátil o un ordenador de sobremesa. Responde a las distintas interacciones, como los estados hover para los usuarios con ratón y los eventos de clic para las pantallas táctiles, y cambia el diseño para adaptarse a la pantalla disponible.

Un punto a tener en cuenta es que el hecho de tener espacio de pantalla disponible no significa que haya que utilizarlo. Los diseños que se extienden a todo lo ancho en todos los tamaños de pantalla pueden resultar ilegibles en pantallas muy anchas. Por ejemplo, una página de 1300px de ancho es legible en dos columnas, pero es lo máximo que la mayoría de la gente puede leer cómodamente en una sola columna de texto. Nos resulta más fácil seguir el texto que se envuelve en bloques más pequeños.

->  Ganar dinero con youtube

Diseñar un sitio web en línea

Por suerte, no tienes que diseñar el tuyo propio. En la actualidad, hay una gran cantidad de diseños de sitios web que se utilizan. Se trata de diseños que son fáciles de navegar, de alcance simple y que se centran en proporcionar una experiencia memorable al usuario.

El sitio de Asana tiene una navegación clara y hace un uso liberal del espacio en blanco para destacar el titular y la llamada a la acción. Todo lo que el visitante necesita para obtener más información, ser atraído y convertir está por encima del pliegue, sin necesidad de desplazarse.

Si el visitante quiere saber más, puede desplazarse hacia abajo para ver más de esa presentación con la que se nos ha provocado, y hay un sencillo menú de navegación que es directo y está diseñado pensando en la eficiencia.

Fíjate en que cada enlace está clasificado con títulos en negrita. Aquí también vemos un menú estático, que facilita la profundización en el interior de la arquitectura del sitio sin una cantidad excesiva de clics y desplazamientos.

Por ejemplo, si mira otros sitios de su nicho, probablemente notará que el logotipo aparece en la esquina superior izquierda. El número de teléfono suele estar en la esquina derecha y la información por encima del pliegue suele estar diseñada en forma de “F”, que sigue la dirección natural de la vista y la atención humanas.

Cómo diseñar un sitio web en html

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.

->  Ejercicios para tocar piano

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 animamos a 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.

Pautas de diseño web

Un gran 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 dedica más tiempo a averiguar cómo utilizar un sitio web, se presta menos atención a su contenido real.

->  Aprender python desde cero

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 mayores tasas de rebote 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.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad