Clase de Diseño Digital / TDCV4 / 2015 / Udelar

Germán Dotta / TDCV4 / 2015

Digital brand

Acercamiento

• Web • App • Redes sociales

• Facebook • Twitter • Pinterest • Google + • Instagram • LinkedIn • Youtube • Snapchat • Tumblr • Medium

• Newsletter

* Valores en millones de personas. Vía http://www.multiplicalia.com/

Digital brand

http://www.multiplicalia.com/

Digital brand

La internet como nuevo terreno

La internet debe ser vivida como un nuevo terreno de servicio y de expresión de la comunicación de la marca, lugar donde se crean lazos personalizados, sostenibles y duraderos.

Estas relaciones que genera la marca NO refieren al impacto de la web, su estética, la ergonomía de los diálogos y de las animaciones. Sino que debe medirse en Internet por el aporte de servicio real que genera al cliente. Esta empieza con una web bien estructurada, bien diseñada, fácil y comprensible, y que sea capaz de animar el interés del internauta estimulando sus respuestas.

Digital brand / Marca y la web

Joan Costa. Diseñar para los Ojos. (2003:142)

Servicios de valor añadido a la marca

Debe haber una buena razón para visitar y volver a visitar un sitio.

El valor añadido en Internet es la información y el servicio personalizado y a medida.

Y es Gratis.

Joan Costa. Diseñar para los Ojos. (2003:142-143)

Digital brand / Marca y la web

El lenguaje específico de Internet

El individuo es actor, no un receptor pasivo.

Hay una relación triangular muy potente y decisiva entre mínimo tiempo y mínimo esfuerzo a cambio de la máxima satisfacción.

Todo debe ser fácil.


Digital brand / Internet

- tiempo

- esfuerzo

+ satisfacción

El lenguaje específico de Internet

Dos vías de la psicología del internauta:

+ la vía funcional + la vía emocional


Digital brand / Internet

Definición

El diseño web consta de la planificación, diseño e implementación.

Aspectos a tener en cuenta:

+ arquitectura de la información + navegabilidad + interactividad + usabilidad + adaptabilidad + interacción de medios (audio, texto, imagen y vídeo).

wikipedia.org

Digital brand / Diseño digital

Arquitectura de la información


La arquitectura de la Información (AI) es la disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos.

Arquitectura de la información


La Arquitectura de la Información como proceso en general se encarga, durante el desarrollo, de definir:

El objeto, propósito y fines del sistema de información o sitio. La definición del público objetivo y los estudios de la audiencia. La realización de análisis competitivos. El diseño de la interacción. El diseño de la navegación, esquemas de organización y ubicación de los contenidos. El etiquetado o rotulado de los contenidos para acceder a la información. La planificación, gestión y desarrollo de contenidos. La facilidad de búsqueda y el diseño de la interfaz de búsqueda. La usabilidad. La accesibilidad. El feedback del resultado y los procesos de desarrollo del sitio.

Navegabilidad

Wikipedia


La navegabilidad es la facilidad con la que un usuario puede desplazarse por todas las páginas que componen un sitio web o app.

¿Dónde estoy? ¿Dónde he estado? ¿Dónde puedo ir?

Interactividad

Digital brand / Diseño web

Usabilidad

Usabilidad se refiere a la experiencia del usuario al interactuar con un sitio web.

Buenas prácticas_

+ Diseño de contingencia

+ Rápido

+ Simple

+ Amigable con los buscadores

+ Compatibilidad con los navegadores

+ Actualización


Adaptabilidad o Responsive

El diseño web adaptable o responsive, es adaptar la apariencia de las páginas web o app al dispositivo que se esté utilizando para visualizarla.


Adaptabilidad o Responsive


Interacciones de medios


Diseño digital

Función

Digital brand / www

Función


Función del sitio


Mapa de sitio

Organización de la información


Referencias de la especie



Wireframes

Cuestiones técnicas

Resolución de pantalla y browsers

http://www.w3counter.com/globalstats.php

Digital brand / Cuestiones técnicas


Uso de los browsers y la tecnología


http://html5readiness.com/



http://html5readiness.com/

Resolución de pantalla / Web


Tamaños de pantalla / Mobile


Tamaños de pantalla / Desktop

MacBook Pro / 1440*900 px MacBook Pro Retina / 2560*1600 px


Tipografías web

https://www.google.com/fonts


https://www.google.com/fonts

SEO (Search Engine Optimization)

Factores que intervienen en el buen posicionamiento:

+ Buen manejo de Meta tags

+ Bien programada

+ Textos adecuados y coherentes

+ Campañas de AdWords

+ Cruzamiento de links

+ Visitas

+ Responsive

+ Link a redes


Casos de estudio

Museo del Prado www.museodelprado.es

Digital brand / Caso - Museo del Prado

http://www.museodelprado.es

Esquema de grilla


Interior


Wireframes Página de inicio


Wireframes Página interior


Titulares / GeorgiaBotonera, textos, copetes / Verdana

Tamaño y tipografías


Museo Van Gogh http://www.vangoghmuseum.nl

Digital brand / Caso - Museo Van Gogh

http://www.vangoghmuseum.nl/

Esquema de grilla Bienvenida


Inicio


Wireframes / Página de bienvenida


Wireframes / Páginas internas


Arial



EAC http://www.eac.gub.uy

Digital brand / Caso - EAC

http://www.vangoghmuseum.nl/

Esquema de grilla


Interior


Wireframes / Página de inicio e interiores


Arial



Ejemplos

Digital brand / Ejemplo - Louvre

Digital brand / Ejemplo - Tate

Digital brand / Ejemplo - MOMA

Digital brand / Ejemplo - Guggenheim

Digital brand / Ejemplo - Salk Institute

Digital brand / Ejemplo - Ayala

Gracias.

Germán Dotta

Libros Diseñar para los Ojos. Joan Costa. 2003. Joan Costa.

No me hagas pensar. Steve Krug. 2006. PRENTICE-HALL

HTML http://www.w3c.es/ http://www.w3.org/ http://www.w3schools.com/

Wireframes http://www.mockflow.com/ https://gomockingbird.com/

Usabilidad http://www.nosolousabilidad.com/

Validación XHTML y CSS http://xhtml-css.com/

Inspiración http://www.siteinspire.com

http://www.w3c.es/

http://www.w3.org/

http://www.w3schools.com/

http://www.mockflow.com/

http://www.nosolousabilidad.com/

http://xhtml-css.com/

http://siteinspire.com/

Clase de Diseño Digital / TDCV4 / 2015 / Udelar

Design

Transcript of Clase de Diseño Digital / TDCV4 / 2015 / Udelar