Principios

Desarrollo de Aplicaciones Web Tema : Composición de página

Competencia : Diseña interfaces

El éxito de una buena composición de página consiste en una organización balanceada, clara y concisa de la información usando las herramientas básicas de diseño: formato editorial, tipografía, color y uso de gráficas.

Sugerencias: La composición debe guiar al usuario visualmente.

Distinguir en un principio las áreas de información, navegación principal, secundaria, local, etc.



El contraste es importante y nos ayuda a mantener módulos de información y a facilitar la lectura.



Usar plantillas. Usar una misma plantilla no quiere decir que la página sea aburrida, al contrario utilizar la misma plantilla mantiene una página consistente, limpia y ORDENADA.



Establecer áreas "verticales". Utilizar este principio sobre todo en páginas principales o portales de información.



Uso de Encabezados y pie de página. Los encabezados deben de presentar la identidad gráfica del sitio y el pie de página presenta por lo general el origen del sitio y ligas acerca del sitio: información legal, derechos de autor, año de producción, contacto, etc.

Desarrollo de Aplicaciones Web Tema : Dimensiones


El diseño de Web implica una serie de limitaciones. Dada la naturaleza del medio, nuestras páginas deben de funcionar en diferentes plataformas y con distintas dimensiones de pantalla.

Comenzaremos por hablar de las dimensiones de pantalla. Debemos mantenernos al corriente de estadísticas del usuario.

Actualmente la mayor parte de usuarios usa una resolución de pantalla de 1024 x 768 y en segundo lugar sigue la resolución de 800x600. Antes de empezar el diseño y la producción de un sitio de Web, debemos definir con nuestro equipo de trabajo que formato seguiremos.

Desarrollo de Aplicaciones Web


Tema : Dimensiones

Es por eso que optimizar el diseño de una página a 1024 es hoy en día la práctica más habitual. Dentro de esta práctica, la realidad es que hay que dejar espacio para el scroll o barra de desplazamiento vertical del navegador y ésta, dependiendo de que navegador se trate, tiene anchos distintos.

Por eso las páginas se suelen diseñar para anchos de aproximadamente 960 px dejando 64 px de espacio para la barra.; si esta es más estrecha, se verá un pequeño fragmento del fondo a los lados, lo cual no supone ningún problema.

Si decidimos hacer una página para una resolución de 800 px de ancho entonces debemos trabajar con unas dimensiones reales de 736 px.

Desarrollo de Aplicaciones Web Tema : Tablas


El uso de tablas es sumamente importante. No solo sirven para presentar datos de forma tabular, o como las conocemos fuera del contexto de Web, sino porque nos ayudan a crear espacios editoriales.

Sugerencias:

Usar tablas para crear columnas. Dividir la página en varias columnas facilita la distribución de información.

Mantener separadores de columnas (Gutters) y márgenes.

<< == Página sin separador

Página con separador ==>>



Usar tablas para incorporar gráficas y pie de foto dentro de un área de texto largo.

Tema : Tablas



Usar tablas para “armar” composiciones gráficas.

Desarrollo de Aplicaciones Web Tema : Presentación de elementos de navegación


Gran parte del éxito de una buena navegación se debe a la estructura del sitio en general; como decidimos agrupar nuestro contenido, bajo que secciones, etc., pero la otra parte se la debemos a una clara presentación y localización de elementos de navegación.

Sugerencias:Presentar claramente la navegación principal o global.Acceso claro y rápido a la página principalSacar provecho del uso de encabezados y pies de página.Utilizar cautelosamente gráficas como parte de la navegación. No siempre es claro para el usuario que son zonas “calientes”.Mantener consistencia en la selección de colores asignados a ligas y a páginas visitadas.



Ayudar al usuario a saber dónde están. El cambio de color por ejemplo, o el simple hecho de desactivar la liga de la sección en la que se encuentran.Evitar el uso de el comando de subrayado , este estilo de texto resulta confuso pues en Web el subrayado indica la presencia de una liga.

Tema : Presentación de elementos de navegación

Desarrollo de Aplicaciones Web Tema :TIPOGRAFIA


La selección y uso de tipografía es quizá el elemento más difícil dentro del proceso de diseño. La tipografía asume un doble papel tanto como comunicador visual y como verbal. La tipografía nos ayuda a distinguir visualmente grupos de texto y de esta manera ayuda al usuario a predecir que tipo de información encontrara en ciertas áreas de la página.

Lo que hacemos al diseñar páginas Web es básicamente “pintar” el texto, no solo aplicando color al texto sino al combinarlo con otros bloques de texto y con el fondo de la página. El ojo viajara de bloque en bloque a lo largo de la página y es gracias a estos bloques tipográficos que podemos alcanzar una buena jerarquía de información.



Tema :TIPOGRAFIA

Sugerencias:

Para el cuerpo del texto utilice tipografías diseñadas para pantalla como lo son: Verdana, Georgia o Trebuchet o tipografías que han sido adaptadas para pantalla como Times New Roman.

No escoja demasiadas fuentes o estilos en una misma página

En textos largos, evite tipografía clara o muy brillante sobre colores oscuros. Es muy incomodo leer la pantalla bajo estas condiciones.

Utilice texto convertido a gráficas únicamente para encabezados o botones de navegación, no utilice gráficas para representar párrafos completos de texto.



Evite alinear el texto al centro o a la derecha cuando se trate de mucho texto o de un párrafo muy amplio. El alineado más recomendable es a la izquierda.

Tema :TIPOGRAFIA

Desarrollo de Aplicaciones Web Tema : COLOR


Ya se menciono anteriormente, que el balance de color puede ayudar a nuestros usuarios a navegar con mayor facilidad nuestra página al delimitar áreas y al agrupar diferente tipo de información. Cuando se habla de contraste no necesariamente quiere decir que haya contraste entre un claro y un oscuro.

Al contrario, el contraste debe de ser muy sutil, muchas veces se logra entre variaciones de un mismo color, hay sitios que son monocromáticos en su totalidad o sitios que usan diferentes porcentajes y variaciones de color en varias secciones, eso es suficiente para facilitar la lectura y layout de la página.



Sugerencias:

Evitar colores muy vibrantes como fondo de página. Ejemplo de un pésimo uso de colores y gráficas de fondo:

No usar colores fluorescentes en texto ni en el fondo.

Utilizar color para distinguir secciones en nuestra página.

Seleccionar una paleta de color y mantenerse constante o a ella, utilizar variantes de los colores de esa misma paleta (porcentajes por ejemplo) en vez de introducir nuevos colores.

Utilizar el espacio VACIO, en blanco, como elemento de diseño.



La web de Greenpeace es un buen ejemplo de combinación de colores complementarios.



Teoría de los colores es el significado que se le atribuyen a cada uno. Aquí una pequeña guía para su uso en el diseño webBlanco: es el color universal utilizado en la gráfica. Está dentro de la gama de los grises y representa la paz, la pureza, la felicidad, etc. Su principal fortaleza es que potencia los colores que lo acompañan. • Negro: se encuentra en el extremo opuesto de la tonalidad de grises. Simboliza el silencio, y el misterio. Es un color que sirve para otorgar elegancia y distinción. • Gris: Representa la indecisión y la duda. Dan la sensación de frialdad metálica, sin embargo por su asociación con los metales preciosos también puede dar sensación de brillo, lujo y estilo. • Amarillo: es un color luminoso, cálido y expansivo. Es de los más energéticos por lo tanto se desaconseja utilizarlo como fondo de un sitio, ya que esto provocaría fatiga visual.



• Naranja: al igual que el amarillo posee gran fuerza expansiva, aunque es más acogedor y estimulante. Posee una gran fuerza energética. • Rojo: este color simboliza la vitalidad, se asocia con el color de la sangre, de la vida, del fuego. Sugiere sensualidad y el erotismo, aunque su uso excesivo puede resultar agresivo. • Azul: expresa armonía, sosiego, se relaciona con el mar, el aire y el cielo. Genera un efecto de calma. • Verde: es el color más relajante. Simboliza la naturaleza y la vegetación. • Marrón: es un color agradable, ya que recuerda al ambiente de los otoños y la madera. Es un color realista que da la sensación de equilibrio.



Uso del color en web, cuestiones técnicas

El color en las páginas web se designa normalmente por sistema hexadecimal, aunque también se pueden usar nombres estándar. En la siguiente tabla se muestran los nombres reconocidos estándar que van a funcionar en todos los navegadores. Hay más, pero no son seguros. Tienen que ser escritos tal cual (no vale en español). Si tienes la más mínima duda, usa el sistema hexadecimal descrito más abajo, además, si no entiendes bien como funciona no te preocupes, es muy fácil buscar el color por ejemplo con Photoshop, se describe más abajo.

Fuchsia Aqua Yellow White

Purple Teal Olive Silver

Blue Lime Red Gray

Navy Green Maroon Black



El sistema hexadecimal significa en base 16 (el sistema decimal al que estamos acostumbrados es en base 10) lo que significa que los dígitos pueden crecer hasta 16. Como no hay tantos dígitos numéricos se utilizan las letras de la A a la F:

0=0 1=1 2=2 3=3 4=4 5=5 6=6 7=78=8 9=9 A=10 B=11 C=12 D=13 E=14 F=15

a conseguir un color, mezclaremos valores de esta manera:RRGGBB

Donde cada valor puede crecer desde 00 hasta FF.

Como la intensidad de cada canal (rojo, verde, azul) se mide en 256 niveles (de 0 a 255), se ha necesitado un sistema en base 16 para definirlo. Fíjate que 16 x 16 = 256.



Nombre HTMLCódigo hexR G B

Colores rojos

IndianRed CD5C5C

LightCoral F08080

Salmon FA8072

DarkSalmon E9967A

LightSalmon FFA07A

Crimson DC143C

Red FF0000

FireBrick B22222

DarkRed 8B0000

Colores rosasPink FFC0CB

LightPink FFB6C1

HotPink FF69B4

DeepPink FF1493

MediumVioletRed C71585

PaleVioletRed DB7093

Colores naranjas

LightSalmon FFA07A

Coral FF7F50

Tomato FF6347

OrangeRed FF4500

DarkOrange FF8C00

Orange FFA500



Colores amarillos

Gold FFD700

Yellow FFFF00

LightYellow FFFFE0

LemonChiffon FFFACD

LightGoldenrodYellow FAFAD2

PapayaWhip FFEFD5

Moccasin FFE4B5

PeachPuff FFDAB9

PaleGoldenrod EEE8AA

Khaki F0E68C

DarkKhaki BDB76B

Colores púrpuras

Lavender E6E6FA

Thistle D8BFD8

Plum DDA0DD

Violet EE82EE

Orchid DA70D6

Fuchsia / Magenta FF00FF

MediumOrchid BA55D3

MediumPurple 9370DB

BlueViolet 8A2BE2

DarkViolet 9400D3

DarkOrchid 9932CC

DarkMagenta 8B008B

Purple 800080

Indigo 4B0082

SlateBlue 6A5ACD

DarkSlateBlue 483D8B



Colores verdesGreenYellow ADFF2FChartreuse 7FFF00LawnGreen 7CFC00Lime 00FF00LimeGreen 32CD32PaleGreen 98FB98LightGreen 90EE90MediumSpringGreen 00FA9ASpringGreen 00FF7FMediumSeaGreen 3CB371SeaGreen 2E8B57ForestGreen 228B22Green 008000DarkGreen 006400YellowGreen 9ACD32OliveDrab 6B8E23Olive 808000DarkOliveGreen 556B2FMediumAquamarine 66CDAADarkSeaGreen 8FBC8FLightSeaGreen 20B2AADarkCyan 008B8BTeal 008080

Colores azules

Aqua / Cyan 00FFFF

LightCyan E0FFFF

PaleTurquoise AFEEEE

Aquamarine 7FFFD4

Turquoise 40E0D0

MediumTurquoise 48D1CC

DarkTurquoise 00CED1

CadetBlue 5F9EA0SteelBlue 4682B4

LightSteelBlue B0C4DE

PowderBlue B0E0E6LightBlue ADD8E6SkyBlue 87CEEBLightSkyBlue 87CEFADeepSkyBlue 00BFFFDodgerBlue 1E90FF

CornflowerBlue 6495ED

MediumSlateBlue 7B68EE

RoyalBlue 4169E1Blue 0000FFMediumBlue 0000CDDarkBlue 00008BNavy 000080MidnightBlue 191970



Colores marrones

Cornsilk FFF8DC

BlanchedAlmond FFEBCD

Bisque FFE4C4

NavajoWhite FFDEAD

Wheat F5DEB3

BurlyWood DEB887

Tan D2B48C

RosyBrown BC8F8F

SandyBrown F4A460

Goldenrod DAA520

DarkGoldenrod B8860B

Peru CD853F

Chocolate D2691E

SaddleBrown 8B4513

Sienna A0522D

Brown A52A2A

Maroon 800000

Colores blancos

White FFFFFF

Snow FFFAFA

Honeydew F0FFF0

MintCream F5FFFA

Azure F0FFFF

AliceBlue F0F8FF

GhostWhite F8F8FF

WhiteSmoke F5F5F5

Seashell FFF5EE

Beige F5F5DC

OldLace FDF5E6

FloralWhite FFFAF0

Ivory FFFFF0

AntiqueWhite FAEBD7

Linen FAF0E6

LavenderBlush FFF0F5

MistyRose FFE4E1



Colores grises

Gainsboro DCDCDC

LightGrey D3D3D3

Silver C0C0C0

DarkGray A9A9A9

Gray 808080

DimGray 696969

LightSlateGray 778899

SlateGray 708090

DarkSlateGray 2F4F4F

Black 000000

Desarrollo de Aplicaciones Web Tema : GRÁFICAS


La trampa número uno en el diseño de Web: pensar que las gráficas harán de nuestra página una página bien diseñada, atractiva e interesante.

El uso excesivo de imágenes resulta en una página muy poco funcional y que lo primero que provoca es ahuyentar a nuestros usuarios. Por un lado si las gráficas no han sido correctamente optimizadas para Web, serán muy pesadas y tardarán mucho en visualizarse en el navegador. Otro gran problema es que las imágenes llegan a saturar el layout de nuestra página muy fácilmente.

Sugerencias:

• La mejor sugerencia en el caso de uso de gráficas es mantener una página SENCILLA, usar fotografías solamente en casos de apoyo a nuestro contenido, o como parte de nuestra identidad gráfica, no de forma decorativa.



Tema : GRÁFICAS

• Mantener las dimensiones de imagen consistentes. Determinar un promedio de 3 dimensiones máximas de ancho o alto para aplicarse de forma uniforme tanto a iconos de pre-visualización (Thumbnails) , imágenes medianas (de soporte o ilustración de texto) e imágenes grandes (gráficas que aparecen como resultado de ampliación, muestran mayor detalle)

• Usar cautela con colores desvanecidos o gradientes

• Evitar demasiados botones animados, usar animación en gráficas para apoyar alguna acción del usuario. Ejemplo de un sitio que emplea demasiada animación, demasiados tipos de tipografía y no ofrece ningún tipo de organización o composición de página



Página web con un buen diseño

Tema : GRÁFICAS

Principios

Education

Transcript of Principios