6.3: Diseño web
- Page ID
- 67516
El diseño web es el proceso de creación de todos los aspectos visuales de la interfaz. Esto cubre el diseño, la combinación de colores, las imágenes, los logotipos, el tipo, los elementos de diseño (como botones y enlaces) y cualquier otra cosa que puedas ver.
La web es un medio visual, por lo que el diseño es una parte importante de la creación de activos que son atractivos y efectivos. Los diseñadores deben tener en cuenta los aspectos técnicos del diseño, al tiempo que priorizan el factor humano. Las propiedades digitales no solo deberían ser hermosas. Necesitan crear una buena experiencia para el visitante y cumplir con los objetivos de negocio, como aumentar las ventas, crear embajadores de marca, así como fomentar las inscripciones y, en última instancia, las conversiones.
Identidad visual y diseño para persuasión
La interfaz visual o, el diseño de un sitio web, es lo que el usuario ve e interactúa con. Es la representación visual de todo el arduo trabajo que implica desarrollar un sitio web. Es por lo que primero se juzgará el sitio y es el paso inicial para crear una experiencia de usuario deliciosa. Importa mucho.
Existe una estrecha relación entre UX y diseño visual. Idealmente, el diseñador visual utilizará los documentos creados por el diseñador UX y agregará la piel visual, pero a menudo el diseñador tiene que administrar tanto el diseño UX como el diseño visual. El diseño no se trata sólo de estética, aunque las miradas son muy importantes.
El diseño se trata de las pistas visuales que damos a los usuarios para que sepan qué hacer a continuación. Asegura a los visitantes de la web nuestra credibilidad y los convierte en clientes.
Un buen diseño de interfaz implica muchas cosas, pero aquí hay algunas consideraciones básicas. Estos están estrechamente vinculados a la UX, y el diseñador visual juega un papel clave en su definición.
- Navegación: la señalización del sitio, indicando a los usuarios dónde se encuentran y a dónde pueden ir.
- Maquetación: cómo se estructura y muestra el contenido.
- Encabezados: el elemento con una posición fija en la parte superior de cada página. Por lo general, incluye todos los elementos de navegación principales que deben presentarse en cada página, como el menú principal, inicio de sesión y búsqueda.
- Pie de página: la parte inferior generalmente consistente de la página.
- Credibilidad: decirle a los usuarios que eres quien dices ser.
Identidad visual
La identidad visual responde a la pregunta: “¿Cómo saben los usuarios que somos nosotros?” Ciertos elementos de diseño deben llevarse a cabo en todos los activos web creados para una marca, así como en los medios de comunicación impresos y tradicionales. A menudo, las pautas de identidad visual para la web se codifican en un documento de guía de estilo digital para garantizar la consistencia entre diferentes agencias, diseñadores y equipos. Este documento puede incluir pautas para crear todo tipo de activos web, incluidos banners, contenido de redes sociales y elementos de diseño de sitios web.
El logo es la forma más destacada de reforzar tu identidad de marca en el sitio web. El logo forma parte de la identidad corporativa (CI) de una marca.
La fuente principal se usa normalmente para encabezados prominentes en el sitio, mientras que la copia del cuerpo a menudo se establece en una fuente web estándar que coincide estrechamente con la fuente principal.
El estilo de menú y botón, así como los iconos, también forman parte de la identidad visual de un sitio. Incluso cuando un usuario está viendo una pequeña parte de un sitio o página, debería parecer que pertenece al sitio en su conjunto.
Teoría del diseño
El diseño puede ser una ciencia bastante precisa y hay mucha investigación sobre lo que hace que el diseño sea efectivo. Mucho también es sentido común y práctica basada en estándares web aceptados. La teoría del diseño se discute en el capítulo Diseño de experiencia de usuario.
Recopilación y cotejo de activos de diseño
Elementos como su logotipo y los colores de la marca representan su marca y forman parte de la expresión de su marca. Las últimas versiones de estos activos de marca deben estar disponibles para el diseñador o agencia de marketing que diseñe su sitio web.
Conseguir los activos de marca adecuados a los diseñadores en un formato de buena calidad al que puedan acceder fácilmente ahorra tiempo y evita errores costosos. Aquí hay una lista de los activos de marca que un diseñador requiere para comenzar a trabajar en un sitio. La calidad, el formato (o tipo de archivo) y el tamaño del archivo son consideraciones importantes. Necesitas proporcionar:
Las pautas de marca o guía de estilo se crearían en Illustrator, PS o Sketch, pero se guardarían para el cliente como documento PDF.
- Pautas de marca o guía de estilo. En formato Adobe Reader (PDF).
- Logo y otros elementos clave de la marca. Estos podrían ser en formato Illustrator (ai) o formato Photoshop (psd). La mejor práctica es tener tu logotipo diseñado usando gráficos vectoriales. Si su logotipo u otros activos de marca se crean en este formato, se pueden ampliar sin perder calidad. Si no tienes disponible una versión vectorial de tu logotipo, entonces debes asegurarte de que tu imagen tenga al menos 1 000 píxeles de ancho.
- Bibliotecas de imágenes. Las fotografías e imágenes pueden ser alojadas en línea, donde el diseñador puede acceder a ellas con un login. También se pueden enviar a través de los servicios de intercambio de archivos en la nube. Asegúrese de que las imágenes sean de la calidad suficiente. Es la mejor práctica proporcionar imágenes que sean de 300dpi. Aunque todas las imágenes en la web se muestran a 72dpi, una imagen de mayor calidad le dará a su espacio de diseñador para optimizar y cambiar el tamaño y recortar o cortar imágenes donde sea necesario. También puede ser necesario considerar diferentes imágenes para móvil vs. escritorio porque el punto de vista en el móvil es mucho más pequeño. Es posible que deba considerar usar muchas menos imágenes para dispositivos móviles o incluso ninguna en absoluto.
Si no eres dueño de la imagen y sus derechos de autor, es ilegal usar la imagen en tu sitio sin permiso del propietario. Si requieres estas imágenes, se pueden comprar en bibliotecas de stock en línea como iStock o Shutterstock. Evita el uso de imágenes de Google Image Search en tus páginas.
- Carpeta de fuentes. Deberá proporcionar las versiones de Apple Mac y PC de las fuentes que se enumeran en su Guía de estilo. Muchos diseñadores trabajan en Macs, que utilizan diferentes versiones de fuentes de las leídas por PC.
- Los colores de la marca deben ser otorgados a los diseñadores digitales en formato RGB. RGB significa rojo, verde y azul y es el estándar para los colores en línea.
- Cualquier activo creativo existente que se haya creado para su marca a lo largo del tiempo, como:
- Diseños de impresión
- Anuncios de TV
La copia del sitio web debe estar disponible antes de que se requiera el diseño final. Esto evita los retrasos causados por los diseñadores que esperan material. Esto se aplica a cualquier activo adicional que su diseñador pueda necesitar que se pueda descargar o enviar, como sus guías de precios o descripciones de productos.
Fuentes
Copy transmite el mensaje de tu marca a tu cliente o cliente y debe ser fácil de leer y amigable con los motores de búsqueda. El CI se expresa a través de fuentes, también conocidas como tipografías.
El diseño tipográfico puede llamar la atención sobre el contenido que los usuarios deben ver primero. Indicar qué datos tienen prioridad. La importancia se puede significar por el tamaño del texto, el color, el peso, las mayúsculas y la cursiva. La colocación también contribuye a la importancia del texto.
Algunas fuentes son comunes a todos los usuarios de computadoras. Estas fuentes se conocen como fuentes seguras para la web. Cualquier persona que acceda a sitios web que utilicen estas fuentes podrá verlas como pretendía el diseñador y los motores de búsqueda podrán buscar en estos sitios web fácilmente.
Algunas fuentes seguras para la web son: Times New Roman, Arial, Helvetica, Courier New y Lucida Console. Vea la lista completa aquí: www.w3schools.com/cssref/ css_websafe_fonts.asp.
Para generar impacto, los diseñadores generalmente prefieren no limitarse a usar solo fuentes seguras para la web, y las pautas de marca en la mayoría de los casos no tienen en cuenta las fuentes seguras para la web. Esto significa que las fuentes deben ser incrustadas por un desarrollador usando herramientas como Typekit, o cargadas dinámicamente desde herramientas como Google Fonts.
También puedes usar Google Fonts como alternativa, que son más elegantes que las fuentes estándar pero que aún son visibles para la mayoría de la gente. El desarrollador deberá implementar estos. Consulta www.google.com/fonts.
