El diseo visual en la web

Jos Luis Lizano SATIpyme Zaragoza

SATi pyme

Lo bello tiene aire fcil

Jean Cocteau (1889-1963). Poeta, novelista, dramaturgo, pintor, diseador, crtico y cineasta frances.

SATi pyme

Capa visual
Qu es?

Interaccin

Guiando la navegacin

Marco de trabajo
Tamao, rejilla

Identidad corporativa Caso de estudio

Maestrex.es

No comenzar la casa por el tejado

Tipografa Imgenes

Limitaciones, elegir, utilizar

Recomendaciones y recursos

Documentacin

Referencias web, bibliografa

SATi pyme

Capa visual
Qu es?

SATi pyme

Atributos grficos sobre un wireframe

SATi pyme

Atributos grficos sobre un wireframe

SATi pyme

Atributos grficos sobre un wireframe

PROYECTO:

Tafyesa web
PROTOTIPO:

80

160

240

320

400

480

560

640

720

800

880

960px

Contacto

Selector idioma

Home Vs1
DETALLE:

Logotipo

Empresa

Servicios

Soluciones

Noticias

Home Vs1
AUTOR: JOS LUIS LIZANO MODIFICADO: 13 SEPTIEMBRE 2010

Claim
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna odio, vel consequat sem. Vestibulum nec libero elit. Etiam malesuada, ligula quis vehicula ultricies, mi dui scelerisque tortor, vitae elementum orci erat feugiat felis. Etiam vel mi mi, vitae
Recurso grfico

1.

Cabecera Compuesta de Logotipo (pulsando se va a inicio), Men principal, contacto y selector de idioma

2.

Zona de atencin Zona de impacto mediante composicin grfica que incluya el claim el poder del control y unas frases descriptivas de la actividad, resumen del espritu de Tafyesa, que contenga enlaces a secciones de la web.

Automatizacin

Telegestin

Comunicaciones

Vdeo vigilancia

3.

Accesos directos En la pgina de inicio aparecen 4 accesos directos grficamente destacados a estas cuatro reas de servicio destacadas (automatizacin, telegestin, comunicaciones y vdeo vigilancia)

Diam quis lectus egestas consequat. Nunc magna est, dignissim sit amet rutrum ut, condimentum vitae eros. Nullam purus erat, auctor vitae posuere ac, fermentum sit amet leo. Maecenas sem nulla, molestie eu blandit a, convallis et dolor. Nullam interdum tortor porta nibh consectetur pharetra. [ Leer ms ] Diam quis lectus egestas consequat. Nunc magna est, dignissim sit amet rutrum ut, condimentum vitae eros. Nullam purus erat, auctor vitae posuere ac, fermentum sit amet leo. Maecenas sem nulla, molestie eu blandit a, convallis et dolor. Nullam interdum tortor porta nibh consectetur pharetra. [ Leer ms ] Diam quis lectus egestas consequat. Nunc magna est, dignissim sit amet rutrum ut, condimentum vitae eros. Nullam purus erat, auctor vitae posuere ac, fermentum sit amet leo. Maecenas sem nulla, molestie eu blandit a, convallis et dolor. Nullam interdum tortor porta nibh consectetur pharetra. [ Leer ms ]

4.

Noticias En inicio apareceran varias noticias, las ms recientes, incoporando una imagen-thumbnail.

Caso de xito. 5 Mauris lacinia dapibus tempus. In leo turpis, faucibus at laoreet non, mattis quis velit. Sed faucibus luctus tellus, ac dapibus justo vehicula at. Nunc accumsan hendrerit 5.1 adipiscing. [ Ms info ]

5.

Sidebar (consistente en toda la pgina) En un sidebar apareceran varios elementos:

Conoce el tiempo

5.2

5.1. Caso de xito. Breve descripcin con enlace para ver la informacin ampliada de un caso de xito. preferentemente ser una declaracin de un cliente afirmanto el caso. 5.2. Enlaces destacados grficamente a Conoce el tiempo y a Demo 5.3. Acceso a intranet 6. Pase de logotipos Logos de entidades/empresas colaboradoras que rotaran en su aparicin 7. Pie Compuesto de direccin fsica, contacto (correo electrnico), mapa web y aviso legal, si procede.

Demo

5.2

Acceso a intranet

5.3

Pase de Logotipos colaboradores

Pie (Direccin / Contacto-correo / Mapa web / Aviso legal

AUTOR: JOS LUIS LIZANO

MODIFICADO: 13 SEPTIEMBRE 2010

SATi pyme

Atributos grficos sobre un wireframe

PROYECTO:

Tafyesa web
PROTOTIPO:

80

160

240

320

400

480

560

640

720

800

880

960px

Contacto

Selector idioma

Home Vs1
DETALLE:

Logotipo

Empresa

Servicios

Soluciones

Noticias

Home Vs1
AUTOR: JOS LUIS LIZANO MODIFICADO: 13 SEPTIEMBRE 2010

Claim
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna odio, vel consequat sem. Vestibulum nec libero elit. Etiam malesuada, ligula quis vehicula ultricies, mi dui scelerisque tortor, vitae elementum orci erat feugiat felis. Etiam vel mi mi, vitae
Recurso grfico

1.

Cabecera Compuesta de Logotipo (pulsando se va a inicio), Men principal, contacto y selector de idioma

2.

Zona de atencin Zona de impacto mediante composicin grfica que incluya el claim el poder del control y unas frases descriptivas de la actividad, resumen del espritu de Tafyesa, que contenga enlaces a secciones de la web.

Automatizacin

Telegestin

Comunicaciones

Vdeo vigilancia

3.

Accesos directos En la pgina de inicio aparecen 4 accesos directos grficamente destacados a estas cuatro reas de servicio destacadas (automatizacin, telegestin, comunicaciones y vdeo vigilancia)

Diam quis lectus egestas consequat. Nunc magna est, dignissim sit amet rutrum ut, condimentum vitae eros. Nullam purus erat, auctor vitae posuere ac, fermentum sit amet leo. Maecenas sem nulla, molestie eu blandit a, convallis et dolor. Nullam interdum tortor porta nibh consectetur pharetra. [ Leer ms ] Diam quis lectus egestas consequat. Nunc magna est, dignissim sit amet rutrum ut, condimentum vitae eros. Nullam purus erat, auctor vitae posuere ac, fermentum sit amet leo. Maecenas sem nulla, molestie eu blandit a, convallis et dolor. Nullam interdum tortor porta nibh consectetur pharetra. [ Leer ms ] Diam quis lectus egestas consequat. Nunc magna est, dignissim sit amet rutrum ut, condimentum vitae eros. Nullam purus erat, auctor vitae posuere ac, fermentum sit amet leo. Maecenas sem nulla, molestie eu blandit a, convallis et dolor. Nullam interdum tortor porta nibh consectetur pharetra. [ Leer ms ]

4.

Noticias En inicio apareceran varias noticias, las ms recientes, incoporando una imagen-thumbnail.

Caso de xito. 5 Mauris lacinia dapibus tempus. In leo turpis, faucibus at laoreet non, mattis quis velit. Sed faucibus luctus tellus, ac dapibus justo vehicula at. Nunc accumsan hendrerit 5.1 adipiscing. [ Ms info ]

5.

Sidebar (consistente en toda la pgina) En un sidebar apareceran varios elementos:

Conoce el tiempo

5.2

5.1. Caso de xito. Breve descripcin con enlace para ver la informacin ampliada de un caso de xito. preferentemente ser una declaracin de un cliente afirmanto el caso. 5.2. Enlaces destacados grficamente a Conoce el tiempo y a Demo 5.3. Acceso a intranet 6. Pase de logotipos Logos de entidades/empresas colaboradoras que rotaran en su aparicin 7. Pie Compuesto de direccin fsica, contacto (correo electrnico), mapa web y aviso legal, si procede.

Demo

5.2

Acceso a intranet

5.3

Pase de Logotipos colaboradores

Pie (Direccin / Contacto-correo / Mapa web / Aviso legal

AUTOR: JOS LUIS LIZANO

MODIFICADO: 13 SEPTIEMBRE 2010

SATi pyme

Atributos grficos:
Identidad corporativa. Tipografa. Color. Imgenes. Iconos. Elementos de navegacin

SATi pyme

Marco de trabajo
Tamao, rejilla

SATi pyme

Resoluciones y dispositivos

Desde 2560x1440 (iMac 27) hasta 320 x 480 (iPhone 3Gs), pasando por 768 x 1024 (iPad)

SATi pyme

Estadsticas sobre uso

Disear para un ancho de 1024px (960 px)

1 2 3 4 5 6 7 8 9

1366x768 16.31% 1024x768 15.82% 1280x800 13.46% 1280x1024 7.85% 1440x900 6.56% 1920x1080 4.89% 1680x1050 4.01% 1600x900 3.43% 320x480 3.37%

10 768x1024 2.42%

Fuente: www.hobo-web.co.uk/best-screen-size/

Fuente: www.w3counter.com/globalstats

SATi pyme

Diseo Responsive
Un desarrollo, todas las pantallas

SATi pyme

Uso de rejilla (grid)

Las rejillas permiten organizar los elementos de forma racional.

SATi pyme

Uso de rejilla (grid)

Las rejillas permiten organizar los elementos de forma racional.

SATi pyme

Uso de rejilla (grid)

www.960.gs

SATi pyme

Tipografa

Limitaciones, elegir, utilizar

SATi pyme

La web es fundamentalmente texto

SATi pyme

La web es fundamentalmente texto y, por tanto, tipografa

Arial, 20 px Arial, 13 px Arial, 16 px Arial, 13 px Arial, 13 px

SATi pyme

La tipografa es la principal herramienta para jerarquizar

Otorgar categora, ordenar, distribuir, enumerar, enfatizar

SATi pyme

La tipografa otorga valores

Cada tipografa posee una voz, se expresa de forma diferente

SATi pyme

Cada uso tiene una tipografa

Un ensayo cientfico se escribe en Helvtica/Arial/Verdana y una novela en Times/Georgia

SATi pyme

La tipografa es un elemento del sistema

Tipografas seguras por su compatibilidad:

Arial Georgia Times Verdana

SATi pyme

Ms all del sistema:

Algunas soluciones para ampliar la eleccin:
Fuentes servidas por terceros

Google fonts
www.google.com/webfonts

Typekit
www.typekit.com

Fontdeck
www.fontdeck.com

SATi pyme

Imgenes

Recomendaciones y recursos

SATi pyme

Imgenes grandes

Si la imagen que utilizamos aporta informacin, seamos generosos con su tamao.

Permitir, siempre que sea posible, la ampliacin de imgenes.

SATi pyme

Las personas nos conectan

La aparicin de personas en las imgenes genera empata, nos conecta con lo que vemos.

SATi pyme

El producto en primer plano

Las imgenes de producto bien visibles y siempre coherentes.

SATi pyme

Imgenes relacionadas
Imgenes y textos deben estar relacionados, para que la imagen no cumpla nicamente una funcin ornamental y aporten valor.

SATi pyme

Series de iconos coherentes

Los iconos, ocasionalmente, aaden informacin. Deben ser grficamente coherentes entre s para no perder su cualidad.

SATi pyme

Recursos
Existen bancos de imgenes con disponibilidad inmediata. Es una forma asequible de utilizar imgenes con calidad.

iStockphoto
www.istockphoto.com

Shutterstock
www.shutterstock.com

Fotolia
www.fotolia.com

SATi pyme

Recomendaciones
Tamao de las imgenes. Producto protagonista. Las personas quieren personas. Calidad de las imgenes. Imgenes relacionadas. Mapas e iconos adecuados y coherentes

SATi pyme

Interaccin

Guiando la navegacin

SATi pyme

La web no es papel en pantalla

La web es interactiva. Debemos disear siempre pensado en ello, ayudando al usuario en la navegacin, distinguiendo de forma clara cada elemento que posee interaccin.
Enlaces diferenciados y coherentes entre s. Botones que efectan acciones caracterizados como tales. Cuando el ratn pasa por encima, o cuando se hace click, en l indicamos la posibilidad de accin.

SATi pyme

Interfaz coherente
Existen una serie de elementos que representan funciones, acciones e informacin y conforman la interfaz de usuario. Esta debe ser grficamente coherente.
Terminologa bsica: Botn Barra de progreso

Caja de bsqueda (search box) Etiqueta (label)

Barra de desplazamiento (scrollbar) Desplegable (drop down list, drop down menu) Caja de texto (text box) Casilla de verificacin (checkbox o tickbox) Botn de opcin (radio button)

SATi pyme

Botones visibles
Los botones cuya accin nos interesa promover deben tener un tamao apetecible para el ratn (o dedo en el caso de las versiones para tablet/ smartphone).

SATi pyme

Enriquecer la interfaz
Cuando nuestro proyecto as lo requiera abundaremos en la interaccin para enriquecer y optimizar la experiencia de usuario.

SATi pyme

Recomendaciones
Promover la interaccin. Guiar la navegacin. No obstaculizar el click. Interfaz legible y claro. Cdigos cromticos adecuados.

SATi pyme

Identidad corporativa
No comenzar la casa por el tejado

SATi pyme

Comenzar por los cimientos

El desarrollo de una identidad corporativa, que abarque el 100% del negocio (online y offline), es un buen punto de partida para construir un discurso de comunicacin coherente.

SATi pyme

Identidad corporativa
Un programa de identidad corporativa adecuado recoge precetos sobre los atributos de diseo comunes: Logotipo, colores, tipografa, comportamiento
1. Identidad corporativa
Versin horizontal
Orientado de forma clara a la evocacin, antes que al descifrado; lo cual no excluye, ms al contrario, el juego, la pretensin de compatibilizar la transmisin rigurosa de la categora de marca con lo ldico. Abundando en los valores que la marca quiere poner en juego a saber: el juego como gua de navegacin, la grfica de esta identidad es directa. Un mundo creado mediante coloridas formas en el que se desarrolla un trayecto un viaje, en realidadentre dos puntos a travs de su superficie determinados por dos indicaciones de posicionamiento que remiten de manera clara a internet. Dicho de otra manera: en este planeta colorido se geoposicionan un punto de partida y otro de llegada que estn unidos por una lnea discontinua, de trazos casuales, que dan a la imagen un aspecto cercano. La acumulacin de colores brillantes, vivos, que forman el planeta pretende remitir a la variedad de propuestas que podremos encontrar al hacer uso de Universal Places. En realidad, a la universalidad a la que remite el nombre de la marca. La tipografa utilizada es la FF Dax, diseada en 1997 por Hans Reichel. Se trata de una tipografa joven, ligeramente estrecha lo cual confiere un aire compacto al conjunto de logo y smboloy cuyas formas redondeadas la convierten en cercana y amable.

5. Identidad corporativa
Resumen de desarrollos de color
Color Color

manual de identidad
mayo 2011

Escala de grises

Escala de grises

Dibujo de lnea

Dibujo de lnea

Universal Places | Manual de identidad | 4

Universal Places | Manual de identidad | 8

8. Paleta de colores

9. Tipografa
Dax

12. Aplicaciones
Tarjetas

Debido a las caractersticas especiales de color del logotipo gran parte de su simbolismo recae en su paleta de colores se ofrecen los seis colores bsicos de los que parte ste. Se presentan aqu en el orden de uso preferente, aunque no pretende ser este un manual dogmtico, permitiendo la libre combinacin de ellos por parte de quien tuviese que enfrentarse a ellos. Se recomienda que la combinacin sea mesurada, utilizndose para fomentar la jerarqua y dirigir la atencin.

CMYK 100 / 0 / 0 / 0 RGB 0 / 158 / 224 HTML #009ee0

CMYK 0 / 100 / 0 / 0 RGB 226 / 0 / 222 HTML #e2007a

La tipografa corporativa es Dax. Se utilizar procurando contrastar los pesos. Es decir, si utilizamos la Dax Light la emparejaremos con, al menos, la DAx Medium; y si se trata de la Dax Regular, con la Dax Bold. Los textos deberan respirar, procurndoles espacios blancos generosos y maquetaciones limpias y claras. DAX LIGHT

abcdefghijklmnopqrstuwxyz A B C D E F G H I J K L M N O P Q RS T U W X Y Z 0123456789 abcdefghijklmnopqrstuwxyz A B C D E F G H I J K L M N O P Q RS T U W X Y Z 0123456789 abcdefghijklmnopqrstuwxyz A B C D E F G H I J K L M N O P Q RS T U W X Y Z 0123456789 abcdefghijklmnopqrstuwxyz A B C D E F G H I J K L M N O P Q RS T U W X Y Z 0123456789

Universal Places | Manual de identidad | 12 Universal Places | Manual de identidad | 15

CMYK 0 / 40 / 100 / 0 RGB 246 / 168 / 0 HTML #f6a800

CMYK 36 / 0 / 100 / 0 RGB 187 / 204 / 0 HTML #bbcc00

DAX MEDIUM

DAX BOLD

CMYK 10 / 0 / 100 / 5 RGB 234 / 220 / 0 HTML #eadc00

CMYK 100 / 0 / 75 / 0 RGB 0 / 147 / 99 HTML #009363 DAX BLACK

Universal Places | Manual de identidad | 11

SATi pyme

Identidad corporativa
Desde los cimientos hasta el tejado

SATi pyme

Recomendaciones
Identidad corporativa limita las dudas. Facilita un mapa general de la marca/producto. Otorga coherencia en el discurso. Facilita el trabajo en equipo. Unifica atributos grficos. Construye una voz nica y consistente.

SATi pyme

Caso de estudio
www.maestrex.es

SATi pyme

Construir imagen para nuestros clientes

Aporta valores y nos conecta con nuestro cliente

Cliente principal del norte de Europa, Alemania, Blgica, Holanda.

Identidad corporativa basada en la obra romntica El caminante sobre el mar de nubes del pintor romntico alemn Caspar David Friedrich autor conociddo en el norte de Europa. Un caminante solitario contemplando un paisaje describe de forma precisa lo que busca el cliente obletivo al contratar rutas senderistas por el Maestrazgo aragons. Adems, incorpora valor intelectual muy apto para un pblico objetivo de gama alta.

SATi pyme

Piezas grficas

SATi pyme

Wireframe > Capa visual

SATi pyme

Wireframe > Capa visual

SATi pyme

Grid

SATi pyme

Fotos grandes, producto, personas

SATi pyme

Botones visibles
Los botones cuya accin nos interesa promover deben tener un tamao apetecible para el ratn (o dedo en el caso de las versiones para tablet/smartphone).

SATi pyme

Documentacin

SATi pyme

>

Referencias web
Diseo general Smashing Magazine www.smashingmagazine.com Webdesigner Depot www.webdesignerdepot.com Criterion www.criteriondg.info Visual www.visual.gi Ateneu Popular www.ateneupopular.com Graffica www.graffica.info Torresburriel www.torresburriel.com Foro Alfa www.foroalfa.org

>

Bibliografa
El mundo como proyecto Otl Aicher Editorial Gustavo Gili El diseno emocional: Por qu nos gustan (o no) los objetos cotidianos Donald A. Norman Editorial Paids Fundamentos del diseo Wucius Wong Editorial Gustavo Gili Veintids Consejos sobre Tipografa Eric Jard Editorial Actar Es mi tipo Simon Garfield Editorial Taurus Brand Identity Now! Julius Wiedemann Editorial Taschen

SATi pyme

SATi pyme

The End