Manual diseño pagina web

Diseño web para principiantes

A la hora de diseñar o rediseñar un sitio web, es fácil obsesionarse con la estética. ¿Queda bien ese tono de azul? ¿El logotipo debe estar a la derecha o a la izquierda de la pantalla? ¿Y si ponemos un GIF animado gigante en medio de la página?

Sin embargo, en un mundo en el que la gente tiene más de 1.800 millones de sitios web en los que potencialmente puede aterrizar, tienes que asegurarte de que el tuyo no es sólo una cara bonita. Su diseño debe tener en cuenta la usabilidad, es decir, la facilidad de uso de su sitio web, y la experiencia del usuario (UX), es decir, lo agradable que resulta interactuar con su sitio web.

Ahora bien, podría pasarse años estudiando los entresijos de estas disciplinas. Pero para darle un punto de partida, hemos reunido una lista de las directrices fundamentales y las mejores prácticas que puede aplicar a su próximo rediseño o lanzamiento de un sitio web. A continuación, repasaremos 10 características que necesitará en su sitio para poner en práctica estas recomendaciones. Empecemos.

Aunque la apariencia de su sitio web es importante, la mayoría de la gente no visita su sitio para evaluar su diseño. Lo que quieren es realizar una acción o encontrar una información concreta.

Directrices del sitio web

El hecho de que usted sea el responsable de la presencia de su organización en Internet no significa que sepa cómo crear un sitio web. La tarea de planificar, lanzar y gestionar un sitio suele recaer en personas con poca o ninguna experiencia en diseño o desarrollo web. Website Owner's Manual es un libro para los miles de profesionales del marketing, gestores informáticos, jefes de proyecto y propietarios de empresas que necesitan crear un sitio web y mantenerlo en funcionamiento con un mínimo de problemas.

Website Owner's Manual le ayuda a formarse una visión para su sitio, le guía a través del proceso de selección de una agencia de diseño web y le proporciona suficiente información de fondo para tomar decisiones inteligentes a lo largo del proceso de desarrollo. Este libro ofrece una visión general sin jerga del diseño web, incluyendo accesibilidad, usabilidad, marketing online y técnicas de desarrollo web. Obtendrá una comprensión práctica de las tecnologías, los procesos y las ideas que impulsan el éxito de un sitio web.

Con Website Owner's Manual dominará el vocabulario y los conceptos necesarios para analizar cómo su sitio web encaja con las necesidades de su negocio. Este libro le ayudará a trabajar con confianza con los diseñadores y desarrolladores que construyen y mantienen su sitio para que usted pueda concentrarse en lo que su sitio web necesita hacer.

Consejos de diseño web

}Mover contenido de pantallas más anchas a más estrechas.Media QueriesCSS3 soporta los mismos tipos de medios que CSS 2.1, como screen, print y handheld, pero ha añadido docenas de nuevas características de medios, incluyendo max-width, device-width, orientation y color. Los nuevos dispositivos fabricados después del lanzamiento de CSS3 (como el iPad y los dispositivos Android) soportarán sin duda las funciones de medios. Por lo tanto, llamar a una consulta de medios utilizando las características de CSS3 para apuntar a estos dispositivos funcionaría bien, y será ignorada si se accede por un navegador de ordenador antiguo que no soporta CSS3.En el artículo de Ethan Marcotte, vemos un ejemplo de una consulta de medios en acción:<link rel="stylesheet" type="text/css"

}El código anterior procede de una plantilla gratuita para consultas de medios múltiples entre dispositivos populares de Andy Clark. Vea las diferencias entre este enfoque y la inclusión de diferentes archivos de hojas de estilo en el marcado como se describe en su libro "Hardboiled Web Design". "CSS3 Media QueriesAbove are a few examples of how media queries, both from CSS 2.1 and CSS3 could work. Veamos ahora cómo utilizar las consultas de medios de CSS3 para crear diseños web adaptativos. Las propiedades min-width y max-width hacen exactamente lo que sugieren. La propiedad min-width establece la anchura mínima del navegador o de la pantalla a la que se aplicará un determinado conjunto de estilos (o una hoja de estilos independiente). Si algo está por debajo de este límite, el enlace de la hoja de estilo o los estilos serán ignorados. La propiedad max-width hace justo lo contrario. Cualquier cosa por encima de la anchura máxima del navegador o de la pantalla especificada no se aplicaría a la consulta de medios respectiva.Tenga en cuenta en los ejemplos siguientes que estamos utilizando la sintaxis para las consultas de medios que se podrían utilizar todas en una hoja de estilo. Como se mencionó anteriormente, la forma más eficaz de utilizar las consultas de medios es colocarlas todas en una hoja de estilos CSS, con el resto de los estilos del sitio web. De esta manera, no es necesario hacer múltiples peticiones para múltiples hojas de estilo.@media screen and (min-width: 600px) {

Herramientas de diseño web

Sus visitantes no son pizarras en blanco. Su sitio web es el millonésimo que visitan, así que vienen con ideas muy claras sobre lo que encontrarán y dónde lo encontrarán. Por eso, ajustarse a las normas suele ser una buena forma de satisfacer las expectativas de los visitantes.

Para responder a esta pregunta, hemos creado una lista de comprobación de 14 elementos de diseño web y, a continuación, hemos analizado 500 sitios web de marketing para comprobar hasta qué punto estas normas son realmente estándar. Siguiendo las directrices de un artículo anterior de NN Group, utilizamos los siguientes umbrales:

Nota: El conjunto de datos estaba formado principalmente por sitios web de marketing B2B de cinco grandes sectores: finanzas, tecnología, fabricación, alimentación y construcción. Los sitios web se revisaron en vista de escritorio centrándose en las páginas de inicio. Los datos se recopilaron en otoño de 2021.

Cumplir las normas suele ser positivo. Todos visitamos muchos sitios web, por lo que tenemos muchas expectativas. Cuando algo funciona como esperamos, estamos contentos. Cuando algo no funciona como esperamos, sentimos fricción y frustración.

Subir