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.