Hola, este será uno de muchas enciclopedias que haré en el foro. Muchos se preguntarán ¿Enciclopedia? Si enciclopedia, serán unos post que haré con información sobre Arte y Diseño en general. Empezamos con <Diseño Gráfico>
Enciclopedia Wendinga
Por Moltax (MadeInYW)
Vocabulario y definiciones indispensables
Diferencias básicas entre diseño impreso
y diseño web
Interactuar en vez de mostrarEl diseño impreso está basado en ver, pero el diseño web está basado en hacer.
La función del diseño tradicional es contar historias, la misión del diseño digital es entablar conversaciones.
El soporte gráfico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El diseño impreso es estático, en cambio, la experiencia de un sitio web se define por la interacción del usuario con diseño y contenido. Por ejemplo, un usuario hace clic sobre la navegación o se desplaza hacia abajo para leer una página.
Un buen diseño impreso tiene que entenderse y ser bonito, pero un buen diseño web tiene que entenderse, facilitar la navegación (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, después el contenido y si queda tiempo el arte. Aunque esto no implica que el buen diseño se deba sacrificar para ganar usabilidad, en esta guía vamos a explicar cómo hacerlos compatibles.
El diseño impreso se visualiza en espacio limitado pero el diseño web se tiene que poder visualizar en múltiples espacios, además el diseño web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se diseña para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos diseñado y guardado, en cambio, cuando se diseña una web, debemos considerar factores externos de los cuales no tenemos ningún control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, además de no tener las tipografías utilizadas,…).
El diseño impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del diseño con sutiles variaciones.
A veces, el peor dolor de cabeza de un maquetador web es como hacer funcionar una web en Internet Explorer, Firefox, Chrome, smartphones, tablets… sin que alguno muestre errores.
En el diseño impreso se puede utilizar cualquier tipografía, pero el diseño web normalmente solo muestra las tipografías que el usuario tenga instaladas en su ordenador. Más adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipografía deseada en imágenes, pero tendremos que tener en cuenta las limitaciones.
Pixeles en vez de pulgadas y centímetrosEn el diseño impreso se trabaja con pulgadas y centímetros, pero en el diseño web solo se trabaja con pixeles. Así pues, dependiendo de la resolución de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los diseños web siempre son píxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de área (se explica más adelante).
Si les cuesta diseñar con pixeles, pueden utilizar la resolución 72 dpi, que es la resolución estándar de la mayoría de pantallas de ordenador. Diseñando a esta resolución, la mayoría de usuarios verán las imágenes y elementos de su diseño al mismo tamaño que en su pantalla.
la menor unidad de medida en la pantalla (un punto de luz). La mayoría de pantallas tienen una resolución de 72 píxeles por pulgada o dpi.
Archivos pequeños en vez de grandesEl diseño impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las imágenes y originales, mientras que en el diseño web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la página rápidamente. En diseño web, debemos optimizar las imágenes y animaciones, es decir, bajar la resolución lo más posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una página web se calcula como la suma de todos pesos de los documentos que abre una página web (imágenes, archivos flash, animaciones...).
Con las conexiones de internet actual podemos calcular muy orientativamente que por cada incremento de peso de 500Kb a 1Mb, una página tarda un segundo más a descargarse y abrirse.
En el diseño impreso se trabaja colores substractivos o CMYK, en cambio en el diseño web solo se trabaja con colores aditivos o RGB.
El color es un error común de los diseñadores gráficos cuando quieren diseñar para web. En la escuela de diseño te enseñan a utilizar siempre CMYK para que la impresión quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz únicamente interpretan datos RGB o aditivos.
El diseño impreso no se puede modificar después de la impresión. Por suerte el diseño web se puede modificar después de la publicación, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la información. En este sentido, es mejor evitar diseños que no sean flexibles, para que en el futuro el diseño se pueda adaptar a diferentes tamaños de los contenidos, sin perjudicar la estética del conjunto.
Usabilidad
Un atributo determinante para la calidad de un sitio web es su
usabilidad. Se trata de lograr que los visitantes encuentren rápidamente aquello que buscan, con el mínimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.
Web usable: es aquella en la que los usuarios pueden interactuar de la forma más fácil, cómoda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.
Los usuarios pasan mucho menos tiempo visitando una página web de lo que sus diseñadores desearían, por lo que hay que facilitarles las cosas al máximo. Cuando un usuario encuentra que la navegación por una web es cómoda, agradable y útil, existen mayores probabilidades de que la visite de nuevo en el futuro.
Lograr un buen nivel de usabilidad requiere combinar hábilmente una serie de elementos: tecnología, diseño, contenidos… Aunque no existen recetas universales, he aquí algunos criterios a tener en cuenta:
- Crear una jerarquía visual clara en cada página. Debe percibirse a simple vista cuál es la importancia de los distintos contenidos, qué relación existe entre ellos, a qué tema o bloque pertenecen... La colocación, el tamaño, la tipografía o los colores de los textos y de los demás elementos de la página son los principales recursos a utilizar.
- Dar el control al usuario. Éste debe sentir en todo momento que sabe dónde está y que controla la situación. Nada importante debería situarse a más de dos clics de distancia. Los títulos y contenidos de cada apartado deben ser claros y visibles. También son muy útiles los menús de situación, la navegación por pestañas, las opciones de volver atrás o deshacer una acción, la visualización clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).
- Facilitar la interacción. Suele ser muy positivo que una web permita al usuario “hacer cosas”: clicar, desplegar, abrir, mover... En todo caso, el acceso y el uso de cualquier elemento de interacción debe ser intuitivo, rápido y fácil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.
- Aprovechar las convenciones y llamar a las cosas por su nombre. La mayoría de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, más o menos, dónde se sitúan los menús, cómo funciona un buscador, para qué sirven determinados botones, qué significan ciertos iconos o expresiones, etc. Así, hay que situar los contenidos donde el usuario espera que estén y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer “algo diferente”, hemos de asegurarnos de que ello no suponga una complicación innecesaria.
- Simplificar. Hay que evitar la información superflua y minimizar todo aquello que pueda confundir, abrumar o distraer innecesariamente. Para ello, usaremos textos breves y concisos, haremos un uso racional de las imágenes y animaciones, y crearemos menús claros, bien estructurados y desplegables si hay muchas opciones a mostrar.
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos que
nuestro diseño debe estar centrado en el usuario. Él es el verdadero protagonista y hemos de asegurarnos de que comprenderá y podrá seguirnos el juego en todo momento.
Otros aspectos a tener en cuenta:- Situar los elementos importantes siempre a mano.
- Los usuarios no siempre entran por la página principal (poner menús de navegación
en todas las páginas). - Dejar claro qué elementos son enlaces y cuáles no.
- Añadir un buscador o un mapa del sitio web si éste tiene mucho contenido i/o páginas.
- Enlazar a cualquier información en menos de 3 clicks (o enlaces)
- Mantener una coherencia en el diseño de toda la página.
- Seguir las reglas básicas del buen diseño: selección de colores, tipografías,
regla de los tercios… - No distraer el usuario con excesivas animaciones o elementos que parpadean.
- Intentar que los contenidos no tengan faltas de ortografía.
- No abrir nuevas ventanas del navegador innecesariamente...
Arquitectura de un sitio web
Algunos dicen que diseñar para web es más parecido a la arquitectura que al diseño gráfico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminación, es importante saber cómo estará estructurada la planta, cómo será el salón, donde estarán las habitaciones, como se accederá a ellas, donde estarán las ventanas... Asimismo en la web, si la estructura no es sólida e intuitiva, el arte de la página no sirve para nada.
Antes de empezar a trabajar en el aspecto puramente estético de las páginas web, imaginando animaciones impresionantes y gráficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:
- Definir las secciones y páginas web que debe tener el sitio.
- Escoger las secciones o páginas a las que podremos acceder desde la página principal (o de inicio).
- Decidir si alguna sección o página tiene que destacar más respecto las demás.
- Distribuir el contenido a presentar entre las distintas secciones y páginas.
- Concretar las distintas vías de acceso a cada una de páginas web del sitio (es importante ofrecer múltiples maneras de acceder a la misma información).
- Especificar el número de idiomas que dispondrá el sitio web.
Para ayudar a concretar la estructura final del sitio web, muchos diseñadores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de diseño del ordenador, que nos permita realizar cambios fácilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.
Ejemplo de la estructura de un sitio web en el que se detalla todas las páginas y el recorrido para acceder a ellas.
Normalmente, el contenido de un sitio web se estructura en diferentes páginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada “parallax scrolling”, que estructura todos los contenidos en una solo página web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o “scroll”.
Esta s la parte uno en el siguiente tema se hablarán de 3 temas más y sus apartados.Cita importante:
El post está muy bien, pero le veo un par de pegas:
Ya no hace falta tener en cuenta la resolución de pantalla en el diseño de la estructura, siempre está la versión responsive, que permite establecer ese tipo de cosas en el propio CSS (versión 3) con un par de líneas, por lo que la estructura de la página no habría que tocarla.
La navegación por pestañas no siempre es buena idea, ya que tener pestañas y menú a la vez hace que el usuario vea dos niveles y le cueste más encontrar las cosas, así que hay que saber estructurarlo.
La URL de la página principal no es el nombre de dominio, es el index, lo que pasa es que el servidor sabe que con el dominio tiene que acceder al index.
Para las descripciones del personal, no deberías usar las mismas palabras de las que constan para definirlos, además de que no dices que hace el diseñador.
Jquery no es un lenguaje, es una librería de javascript.
Un último comentario es que un maquetador no debería usar javascript, es cosa del programador, pero como últimamente se está usando JS para hacer todo tipo de dinamización (que llega un punto que ya es pasarse...) y este puesto suele dividirse entre diseñadores y programadores en vez de tener una persona únicamente para maquetar, tiene un pase.
Conectarse
Registrarse
Inicio
Ayuda
MinClub
Share Topic
Tema: Diseño Gráfico - Enciclopedia Wendinga - Parte 1 de 3 (Leído 3333 veces)
Septiembre 04, 2014, 04:46:05 am
