Post Actualizado en julio 24, 2013
La Claridad en el Diseño Web
Normal 0 21 false false false ES X-NONE X-NONE MicrosoftInternetExplorer4 /* Style Definitions */ table.MsoNormalTable {mso-style-name:”Tabla normal”; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:””; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:”Calibri”,”sans-serif”; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:”Times New Roman”; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin;} El objetivo es acomodar varios elementos en la página web que se […]
Normal
0
21
false
false
false
ES
X-NONE
X-NONE
MicrosoftInternetExplorer4
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}
El objetivo es acomodar varios elementos en la página web que se va a crear para maximizar las chances del usuario de usar el sitio exitosamente. Aquí hay una serie de herramientas de diseño simples disponibles para ayudarle a ayudar al usuario.
La claridad trata de relaciones entre elementos
El factor principal del diseño visual efectivo es crear relaciones para mostrar:
– qué es parte de qué
– qué es diferente de qué
– cómo los elementos distintos se relacionan entre ellos
Un principio fundamental para la claridad es la economía: No use más técnicas de las necesarias para diferenciar. (Por ejemplo, si usa texto en negrita para diferenciar una porción de texto de otra, pregúntese si realmente necesita usar también dos puntos.)
Herramientas para diseñar la capa de despliegue
En conjunción con las herramientas de disposición ya descritas (agrupar, alinear, etc.), son utilidades a usar luego que tienen un impacto sobre el atractivo de un diseño y la facilidad de uso.
Esta parte del curso atiende a cada una de las herramientas de a una a la vez, y discute cómo podemos usar cada una para nuestros propósitos de diseño.
Las herramientas primarias de diseño incluyen:
– Contraste
– Color
– Riqueza
– Dinamismo
Contraste
El contraste es la primera herramienta de control del ojo. El contraste atrae al ojo, y es el mecanismo de superficie más fácil de usar. Para trabajar, el contraste necesita estar balanceado contra áreas de bajo contraste.
Color
El color puede atraer al ojo. Use la sensitividad al color para hacer una página atractiva y simple para el ojo, y además seleccionar objetos para una atención especial. Los colores deben balancearse con otros colores y áreas de bajo color.
Riqueza
La riqueza puede ser creada a través del uso del color, de los patrones, de las capas y los efectos 3D tales como gradientes, sombras y puntos culminantes. El ojo puede demorarse en áreas más ricas, así que use áreas específicas de detalles ricos en áreas clave.
Dinamismo
El movimiento es otro factor que atrae al ojo. Esto no significa que un elemento deba en realidad ser animado – algunas formas (tales como las diagonales) y patrones ocupados pueden sugerir movimiento.
Vea nuestro reciente diseño del sitio INGO Accountability Charter como ejemplo de cómo crear dinamismo a través de líneas diagonales y figuras fuertes.
Ya terminaste el diseño de tu pagina de internet recuerda contratar un Alta calidad en hospedaje web y registro de dominios de internet en Mexico, no dejes tu pagina web en manos de cualquier empresa y asegura tu tranquilidad con los profesionales del alojamiento web.
Aproximación
Antes de que diseñe la interface visual actual, tenga claras las prioridades relativas de los elementos en la pantalla. (Si ha hecho un mapa de atención, aquí es donde este se vuelve realmente útil.)
Por lo común, los elementos más importantes serán aquellos que:
– Identifiquen el sitio/página (contestan "¿Estoy en el lugar correcto?")
– Se vinculen (muchas páginas son en realidad etapas para llegar a otras, más que terminar en sí mismas)
– Proporcionen contenidos o retroalimentación
Estos elementos necesitan sobresalir más.
Otros elementos de diseño pueden tener propósitos más suaves, pero pueden aún ser importantes, tales como:
– Un branding que crea una cierta sensación de personalidad
– Guías sutiles para ayudar a un usuario a usar efectivamente un formulario o una interfaz de navegación
Claramente, todos estos objetivos son importantes. La clave para el diseño visual exitoso es encontrar un balance que alcance tantos objetivos (a veces conflictivos) como sea posible.