Diseño Gráfico - Enciclopedia Wendinga - Parte 1 de 3

[MadeInYourWorld]

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

• Página web: documento que forma parte de un sitio web, con un contenido que puede incluir texto, imágenes, elementos multimedia y enlaces para navegar a otras páginas web o contenidos.
• Sitio web: colección de páginas web relacionadas y comunes a un dominio de Internet o subdominio.
• Página principal o home: página de entrada a un sitio web, normalmente con un diseño mucho más trabajado, que presenta el sitio y las opciones de navegación a las páginas o contenidos del sitio.
• Enlace web: elemento de una página web que, al clicarlo te lleva a otra página web o a otra parte de la misma página web.
• Menú de navegación: conjunto de enlaces web que reflejan la organización de los contenidos del sitio web y enlazan a cada una de sus páginas web.
• Dominio de Internet: es un nombre único que identifica un sitio web en Internet (ejemplos de dominio: informatiu.com o javajan.es). Existen muchas empresas que registran dominios, Javajan entre ellas (consulta nuestros precios especiales para diseñadores).
• URL: cadena de caracteres con la cual se asigna una dirección única a cada uno de los recursos de información disponibles en la Internet (páginas web y sus elementos: imágenes, hojas de estilos, elementos multimedia,…). La URL de la página principal normalmente es el nombre del dominio.
• Servidor web: ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las páginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores, Javajan entre ellas (consulta nuestros precios especiales para diseñadores).
• Navegador web: aplicación que interpreta el contenido de las páginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari... Al diseñar una página web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros diseños con pequeñas variaciones.
• Resolución de ventana web: número de píxeles máximos horizontales y verticales disponibles para presentar una página web. La resolución vendrá determinada por la resolución de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentación. Las distintas resoluciones disponibles Internet limitaran en gran medida el diseño web.
  
• Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma página web, presenta un diseño diferente para cada una de las resoluciones.
• Diseñador web: Profesional que utiliza programas de diseño tradicional, como photoshop, freehand, ilustrator, indesign…
• Maquetador web: Profesional que maqueta los diseños utilizando las codificaciones estándares (html, css, javascript…), transformando los diseños en páginas web.
• Programador web: Profesional que programa las páginas web maquetadas (php, asp, jquery …) para que presenten información de una base de datos, personalicen los contenidos, envíen los formularios, interactúen con el usuario…

Diferencias básicas entre diseño impreso

y diseño web

Interactuar en vez de mostrar

El 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.

Espacio y entorno indefinido en vez de definido

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.

Problema con las tipografías
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ímetros

En 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.

Píxel: 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 grandes

El 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.

RGB en vez de CMYK

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.

Posible editar después de publicar
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.

Linkback: https://minecraftmin.net/index.php?topic=3363.0

[Alfomega]

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.

[MadeInYourWorld]

Leído entero, cogeré tu cita y lo pegare al post por que me parece interesante tu opinión y en realidad es verdad. Por lo de la índex eso si, es una manera de decir que el dominio principia les la página principal la índex por así decirlo no se sí me explico. En fin cogeré tu cita. Y lo de JavaScript no sabía yo puse eso por que creí que era eso xd,