QUE ES ???
El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. Se lo considera dentro del diseño multimedial.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio.
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.
CARACTERISTICAS
Realmente, no podemos decir que una web necesita cumplir con estos puntos para diseñar una pagina web ,pero si fijamos en los grandes dominadores de estas tendencias, podremos observar como cumplen con casi todos los puntos.
- Simplicidad
El diseño es más simple que nunca, ya que 2.0 significa limpieza y simplicidad. - Diseño centrado
La gran mayoría de las páginas web están utilizando un diseño centrado en la ventana del navegador, ya que ofrece una sensación de simplicidad y “honestidad” - Pocas columnas
Cuantas menos columnas aparezcan en la página, el diseño de la web será mucho más sencillo, y mostrará con mayor claridad los contenidos; dos columnas es el ideal aunque deberíamos evitar más de tres columnas. - Sección superior separada
En la sección superior o cabecera, generalmente aparece el logotipo y el área de navegación; es importante que se diferencie la cabecera del resto de la página para poder centrar la atención en lo que es realmente importante. - Navegación sencilla
Utilizar un menú permanente de navegación, facilitará a los usuarios el acceso a tus contenidos, aunque en algunas ocasiones deba ser necesario utilizar un submenú que permita acceder a secciones internas de la página. El menú debe ser claro, obvio y destacado. - Logotipos en negrita
Un logotipo claro, en negrita, permitirá que en una primera impresión los usuarios presten atención. - Tamaño de texto grande
Si eliminamos los elementos “sobrantes” de la página, dispondremos de mayor espacio para poder incrementar el tamaño de la letra, facilitando que los usuarios puedan leer y asimilar nuestro contenido. - Instrucciones de texto en negrita
Destacar la introducción de la página o las instrucciones en negrita, nos permitirá recalcar la importancia de este contenido por delante del resto, permitiendo atraer la atención del usuario. - Colores fuertes
La utilización de colores fuertes para dividir la página en secciones claras y definidas, y para destacar los principales elementos, permitirá que el usuario entienda mucho mejor la distribución del contenido de nuestra web. - Superficies “enriquecidas”
Pese a que yo no soy un gran partidario de este punto, si que he visto muchos ejemplos de páginas que han sabido utilizar los efectos 3D, degradados, … para conseguir un gran impacto visual, y una navegación mucho más sencilla. - Degradados
La utilización de los fondos degradados, es una de las principales características que podemos ver en la mayoría de los “nuevos” proyectos Web 2.0 - Reflejos
Como ya han popularizado Windows Vista y Apple, la utilización de los reflejos en algunos diseños, permitirá que los usuarios tengan la sensación de que el diseño de la página web ha estado cuidado en todos sus aspectos, otorgando una mayor profesionalidad y seriedad. - Iconos originales
Los iconos (siempre y cuando sean claros) permiten reducir la cantidad de texto que necesitaríamos para explicar cosas, siempre y cuando estos iconos tengan un significado muy claro y universal. - Estrellas
Aunque parezca mentira, la utilización de estrellas u otros elementos para mostrar el precio, ofertas, … se ha utilizado casi siempre en el mundo offline, pero parece que hemos necesitado de la llegada del Web 2.0 para que se utilicen este tipo de elementos en Internet.
Puede que no todo el mundo este de acuerdo con alguno de estos elementos, pero si nos fijamos en páginas web como Apple, 37 signals, browsehappy, Mozilla, o SimpleBits, podremos observar claramente los beneficios que aporta la correcta utilización de estos puntos.
COMO FUNCIONA ???
plantillas que se usan como modelo. Las plantillas son imágenes en "carbónico" o páginas web que representan el esquema gráfico de un modelo de página.
La estructura tradicional de una página web es la siguiente:
- Un logotipo ubicado en la esquina superior izquierda. Los usuarios pueden hacer clic en la mayoría de los logotipos y volver a la página de inicio.
- Un menú localizado a la derecha o a la izquierda.
- Un encabezado que contiene el nombre del sitio web, un banner de navegación y un área reservada para un banner (publicitario o de otro tipo).
- El cuerpo principal de la página que contiene la mayor parte de la información.
- Un pie de página que incluye información útil como ser, la última actualización, un vínculo a un formulario de contacto, un vínculo al mapa del sitio, etcétera.
El diseñador debe definir en la plantilla qué elementos no cambian y son idénticos en cada página y qué elementos varían de una página a la otra.
Estatuto gráfico
Un "estatuto gráfico" es un documento integral que detalla las reglas de presentación para los elementos gráficos que transmiten la identidad visual de un sitio web.
El estatuto gráfico define el equipamiento gráfico de un sitio web, en particular los tamaños, colores y apariencia del texto, las imágenes y botones del sitio y también la ubicación que tienen con respecto a otros objetos en la página.
Boceto
Un boceto es un modelo o prototipo de un sitio web que presenta los gráficos y la navegación del sitio. Los bocetos permiten a los diseñadores formalizar el diseño del sitio web y casi siempre se usan para validar la fase de diseño antes de pasar a la fase de "realización".
El boceto incluye páginas estáticas que representan las páginas principales del sitio web (sin contenido), las cuales se usan para simular la navegación. Durante la simulación, elementos dinámicos tales como el motor de búsqueda, pueden conducir a una página que contiene resultados inventados, por ejemplo.
Tamaños de la página
El tamaño de una página web depende principalmente de la definición que tenga la pantalla del usuario (no de su resolución).
Teniendo en cuenta el ancho, es preferible seleccionar un tamaño menor que la definición horizontal de la pantalla de la mayoría de los visitantes para que éstos no tengan que desplazar la pantalla con la barra de desplazamiento. Una página angosta permite a los visitantes hojear la información fácilmente para encontrar lo que les interesa.
Con respecto al largo, es aconsejable no exceder de tres a cinco veces la altura de la pantalla. De hecho, las páginas excesivamente largas corren el riesgo de no leerse por completo y además toma mucho tiempo descargarlas.
Existen varias estrategias para garantizar que la página se vea de manera óptima en la mayoría de los equipos de los visitantes:
- Elegir el ancho más pequeño admitido por la mayoría de los equipos (por ejemplo: entre 600 y 800 píxeles de ancho).
- Elegir una página que contenga tablas invisibles con ancho variable (definido por porcentaje).
- Usar un script (por ejemplo, JavaScript) para detectar la resolución de la pantalla del usuario y redireccionarlo a una página con el ancho adecuado. Este método requiere que el visitante utilice un navegador con JavaScript activado y la creación de tantas páginas como anchos solicitados.
El posicionamiento de la información
Cómo se posiciona la información es un elemento importante en el diseño web. Si se tiene en cuenta la dirección en la que los usuarios leen la información (en diagonal desde la esquina superior izquierda hacia la esquina inferior derecha), la información que esté ubicada en la parte superior de la página tendrá más probabilidades de ser leída por los usuarios de Internet.
Elección de los colores
No se recomienda usar más de tres colores distintos en un sitio web para cumplir con el criterio de simplicidad. Los colores deben corresponderse con los colores de la organización, especialmente los del logotipo, y es recomendable que expresen una sensación en particular.
Sin importar qué colores se elijan, debe elegirse un color dominante y usarse como el color principal de la página web. Se deben elegir uno o varios colores secundarios más brillantes y dinámicos y usarse en proporciones menores para destacar los elementos de la página.
Los colores tienen un simbolismo implícito. Por este motivo, se los debe elegir en función de objetivo. Los colores tienen influencia sobre el comportamiento de los individuos:
- A nivel físico (sobre el apetito, el descanso, la temperatura corporal, etcétera).
- A nivel emocional (sobre sensaciones de miedo, seguridad, alegría, etcétera).
- A nivel psicológico (sobre la energía, la concentración, etcétera).
La composición de colores también tiene influencia sobre cómo se perciben los volúmenes. La composición de colores puede dar una sensación de bienestar, tanto en una casa hermosamente decorada como en un sitio web.
El círculo cromático es una herramienta útil para comprender cómo interactúan los colores. Es una representación de los colores en forma circular. Incluye los siguientes colores:
- Los colores primarios (rojo, azul, verde) o "puros", que no pueden obtenerse mezclando otros colores.
- Los colores secundarios (cian, magenta, amarillo), que se obtienen al mezclar en partes iguales dos colores adyacentes. Los colores secundarios son diametralmente opuestos a sus colores complementarios (sustractivos) en el círculo cromático.
- Los colores terciarios, que se obtienen al mezclar un color primario con uno secundario.
Existen leyes universales que dominan la armonía entre los colores y que responden a las propiedades físicas del ojo. Cuando el ojo ve un color, crea automáticamente un filtro para el color complementario a su alrededor. Esto se llama "contraste simultáneo". Por eso, la forma en que se percibe un color depende de los colores que lo rodean. Así, el amarillo se verá más anaranjado al lado de un azul y el azul se verá más púrpura. El azul al lado de el rojo se verá más verdoso, etcétera.
Además, los colores lindantes en el diagrama cromático crean una sensación de equilibrio para el ojo debido a la ausencia de contraste; esto es lo que se llama "armonía de colores".
A grandes rasgos, existen dos maneras de elegir colores que armonicen:
- Seleccionar matices del mismo color o colores dentro de la misma gama con tonalidades similares.
- Mezclar colores complementarios (cálidos y fríos), o sea, colores que estén lejos unos de otros dentro del círculo cromático. Cuando se elijan dos colores, estos deben ser diametralmente opuestos, complementarios; para tres colores, los colores seleccionados deben estar ubicados en un triángulo equilátero, etcétera.
Para finalizar, en términos generales, los objetos de colores cálidos perecerán más grandes que aquellos de colores fríos.
Selección de imágenes
Las imágenes sirven para darle vitalidad y hacer más alegre un sitio web. Tomando eso en cuenta, imágenes mal utilizadas pueden perturbar la comodidad visual como también la descarga de una página.
Los webmaster principiantes gustan de vitalizar sus sitios web con divertidas imágenes animadas encontradas en la Web. Esto se debe evitar al máximo porque dichas imágenes pueden molestar a los lectores y provocar que el sitio web transmita una sensación de poco profesionalismo.
Colores de fondo
La correcta elección de los colores de fondo es vital ya que un fondo mal elegido puede dificultar la lectura. Es esencial elegir un contraste apropiado entre el color de primer plano y el color de fondo dominante. Es por esto que se aconseja no elegir un fondo con gráficos, porque puede obstaculizar la lectura y transmitir una sensación general de amateurismo. Generalmente, el color de fondo debe ser algo pálido.
Tipografía
Se recomienda no usar más de dos tipos de fuente en un sitio web. Las fuentes estilizadas se deben usar con moderación (por ejemplo, para un título) y para la mayor parte del sitio web conviene utilizar una fuente clásica (arial, verdana, helvética, etcétera).
En los textos impresos tradicionales, las fuentes con serifas (serif), o pequeños adornos, suelen facilitar la lectura ya que las serifas ayudan a los lectores a seguir el texto.
Pero no se recomienda usar serifas en Internet porque, dependiendo de la definición de la pantalla del usuario, pueden deformarse y parecer garabatos que obstaculizan la lectura. Por lo tanto, es una opción más adecuada usar fuentes de palo seco o sin serifas (sans-serif) más redondeadas.
Por último, tenga en cuenta que con las fuentes no estándar se corre el riesgo de que no se visualicen correctamente en algunas pantallas. Si se desea crear títulos con este tipo de fuente y para evitar la limitación mencionada antes, se pueden crear imágenes transparentes que contengan el texto.
Símbolos gráficos
Se recomienda usar pictogramas e íconos para establecer signos visuales. De cualquier manera, se debe tener cuidado al elegir símbolos porque los usuarios pueden malinterpretarlos, en especial si se trata de sitios web internacionales. Estos son los pictogramas que más se usan:
- Una lupa simboliza característicamente la función de búsqueda.
- Un sobre representa la opción de contactar al webmaster a través del correo electrónico.
- Un signo de interrogación simboliza la ayuda en línea
- Una casa representa el vínculo a la página de inicio.
0 comentarios:
Publicar un comentario