Archivo de la etiqueta: diseño web

Personalización de interfaces gráficas en las páginas web- Objetivo general y específicos.

Por Gabriel Escobar

 Objetivo general:

Lograr una interfaz personalizada donde se pueda navegar confortablemente por toda su estructura solucionando situaciones en el ámbito personal y visual; teniendo en cuenta los gustos de las personas sobre las tendencias gráficas en la web y por otro lado sus problemas de visión más comunes como el daltonismo, visión borrosa, etc.

Objetivos específicos: 

  • Hacer un estudio sobre la forma de vida de las personas que constantemente manejan páginas web.
  • Tener en cuenta las tendencias gráficas web como son el minimalismo, el laser focus, etc. y como se implementaría en una forma más personalizada.
  • Lograr una personalización de contenidos de acuerdo a problemas de visión más comunes.
  • Analizar cual sería la forma en que una página web sea más personal teniendo en cuenta su funcionalidad.
  • Lograr que una empresa pueda conseguir más clientes con una interfaz web adaptada en el campo de la personalización.
Etiquetado , , ,

Doble personalidad de una marca.

Por: Laura Restrepo Nicholls

De lo físico a lo virtual… Es este el escenario que se plantea en la actualidad,

cuando nos referimos al manejo de una marca en plataformas 2.0, paradojas

como el de hacer sentir al cliente lo que en un espacio físico puede alcanzar a

percibir, a una interacción con una página web, he aquí el gran reto de aquellas

personas dedicadas a la gestión de marca (branding).

Para mantener las asociaciones o rasgos que al agruparse representan un

conjunto de ideas que generan un imaginario colectivo en identidad de marca.

Es importante diferenciar la imagen e identidad de marca, porque cuando nos

referimos a la imagen de marca se habla de un estado actual de percepciones, y

cuando nos referimos a la identidad, es una estrategia que aspira crear valor de

marca y mantenerse en el tiempo.

Al referirnos al lenguaje de una marca, en cuanto a la representación gráfica y

conceptual, es donde el diseñador debe intervenir y lograr un reflejo exacto entre

lo tangible y lo que se transmite en la web, estos propósitos deben ser integrales,

ya que en un medio global y sin barreras la imagen debe permanecer intacta en

su intención de comunicar su identidad, hay millones de herramientas virtuales

que permiten tener un dialogo constante y de primera mano con su público, todo

dependiendo de lo que la marca necesita para cumplir sus objetivos.

En su obra “Marcas y relatos. La marca frente al imaginario cultural

contemporáneo”, Bruno Remaury analiza las relaciones de las marcas con los

relatos. Dice que la marca Dior representa la princesa, la mujer que posa y es

objeto de deseo, con elementos extravagante

Según esta concepción de identidad, analizamos a continuación como se

comunica la marca a través de los medios web y como genera una conexión con

sus campañas publicitarias físicas o en sus tiendas:

Imagen

Imagen

Imagen

Analizando este caso podemos identificar claramente, la coherencia conceptual

que se representa en las figuras estilizadas, como por ejemplo en las imágenes,

que representan la marca y que venden su producto, se puede identificar los

conceptos antes vistos por Bruno Remaury.

Desde la fotografía se puede percibir la extravagancia del estilismo y en el

bolso gigante en la entrada de la tienda, pero al mismo tiempo podemos

observar la limpieza en la estructura de la página, en su contenido, la intención

de la fotografía y las jerarquías de la página. Casos como la marca Dior, son

ejemplos claros de como una marca debe consolidar todos los componentes

de representación y exponerlos en cada uno de los escenarios con los que se

comunica a su público.

Tenemos que entender la importancia de esa conexión entre los físico y lo virtual,

ya que los conceptos que se generan tanto en la tienda (iluminación, góndolas,

aromas etc) como en la web que componen la identidad de marca, para no

generar problemas a la hora de reconocer la marca y su esencia por parte del

posible consumidor.

Cybergrafia

http://thinkandsell.com/blog/sobre-marcas-y-sensaciones/

http://www.tallerd3.com/archives/1607

http://www.thinkwithgoogle.com/

http://thinkandsell.com/blog/las-7-dimensiones-del-branding-ii-la-identidad-de-marca/

Etiquetado , , , ,

Diferencia al momento de diseñar para impresos y para Web

Por: Verónica Escobar
Hasta ahora he mencionado algunas interfaces que están en la red para la creación de páginas Web, hable también un poco de Dreamweaver y por último me centré en la comodidad que debe tener el usuario a momento de entrar en nuestra página, haciendo alusión un poco a la arquitectura de la información. Al momento de diseñar algún tipo de pieza editorial, desde tarjetas personales, volantes y afiches, hasta revistas, periódicos y libros, por lo general recurrimos a programas como Illustrator o InDesign; ambos programas se manejan de forma muy similar, con muchas herramientas comunes que tienen las mismas funciones, lo cual permite al diseñador manejar fácilmente un programa u otro, incluso al entrar a PhotoShop la persona no se siente tan perdida ya que la interfaz de estos programas es muy similar. Al trabajar constantemente en ellos, es un poco más difícil entrar a Dreamweaver puesto que el manejo de éste difiere mucho con respecto a los mencionados anteriormente, ya que se deben dar unas ordenes y parámetros a cada elemento para que funcionen perfectamente. Con respecto a lo anterior, hay que pensar de manera diferente y tener muchas más cosas en cuenta al trabajar en Dreamweaver, es decir, no es simplemente abrir una mesa de trabajo, comenzar a ubicar elementos y moverlos fácilmente de un lugar a otro, para trabajar en este programa, es necesario hacer un esquema claro de lo que se quiere, darle un cuerpo y un espacio a cada capa de información y navegación, con el lenguaje correcto para cada uno de ellos así:
Imagen
Cada una de las etiquetas debe estar escrita correctamente, ya que si se equivoca solo por un punto, este no va a funcionar, hay que darle la orden perfectamente referenciada para que pueda funcionar. La página www.codecademy.com es una muy buena herramienta para conocer el código y el lenguaje de programación por medio de unas actividades muy sencillas. Sin embargo las plataformas que ofrece la red para hacer una página Web, se encuentra con respecto al manejo en la mitad de los programas anteriormente mencionados, ya que éstas permiten arrastrar y soltar elementos en donde se desee pero manteniendo un esquema predeterminado que permite el funcionamiento adecuado de una página Web. Algunos de los esquemas mas usados en este tipo de plataformas son:
Imagen
La plataforma weebly, permite arrastrar las capas de información de acuerdo a la necesidad de cada persona:
Imagen
Imagen
Imagen
Imagen
Imagen
Imagen
En conclusión, se debe tener en cuenta que hacer una pieza gráfica para la Web, es muy diferente a realizar una pieza impresa, ya que se necesita de un conocimiento básico del lenguaje programación y los parámetros de construcción para lograr el buen manejo de ésta, en caso de realizarla desde cero en Dreamweaver; si se realiza desde una plataforma en la red, no es necesario tener el conocimiento del código, sin embargo hay que mantener los parámetros establecidos que tienen cada una de éstas.
Cibergrafía:
Etiquetado , , ,

Nuestra función como diseñadores en la experiencia del usuario

por: Camila Aguirre

En la actualidad se ha incrementado el uso de dispositivos como tablets y smartphones y la navegación en estos, cada vez es mayor, es aquí donde el diseño web y el diseño de publicaciones digitales cobra importancia, pues proporcionan soluciones y le facilita una buena navegación al usuario.Un buen diseño digital permite al usuario una buena interacción, le permite sentir que tiene el control, identificar necesidades, reducir el trabajo motor, visual y minimizar o eliminar cargas. El usuario lo que espera encontrar en la pantalla será una apariencia clara y ordenada, un lenguaje familiar, una forma sencilla de descubrir qué hay allí.

Nuestra función como diseñadores será la de proporcionar al usuario una agradable estadía por la web, ya sea que se encuentre leyendo un artículo, utilizando una aplicación o simplemente esté en la plataforma por gusto.Debemos tener en cuenta al momento de diseñar una publicación digital o un diseño editorial digital, que el ojo realiza un movimiento natural de zonas oscuras a claras, de elementos grandes a pequeños, de colores saturados a colores de baja saturación. Debemos utilizar tipografías sencillas, diseñadas para pantalla como la Verdana, Trebuchet, Times New Roman, etc., no usar más de dos familias, de 12 a 14 pts, el cuerpo de texto, de 18 a 36 pts los títulos y encabezados, de 1- 1,5 el espaciado, utilizar contrastes sutiles, seleccionar una paleta adecuada de colores, y no usar colores fluorescentes en el texto ni el fondo.

Un buen diseño de una aplicación para móviles, debe adaptarse a todos los tamaños y resoluciones de pantalla existentes en el mercada, que le permita al usuario tener una buna experiencia e interacción, de lo contrario la aplicación caerá en desuso. La aplicación debe contar con un buen diseño adapatable tanto a smartphones como a tablets, que tenga una buena legibilidad y esto se debe a una buena escogencia de la tipografía, la fuente ideal sería una familia sans-serif, pues es fácil de entender y brinda un alto porcentaje de legibilidad al usuario debido a sus características.

No es lo mismo diseñar para dispositivos móviles que diseñar para tablets, La forma y el tamaño de las tabletas, su diferente contexto de uso respecto a móviles y ordenadores, así como el tipo de interacción, principalmente táctil, exigen una forma específica de diseñar para éstas y nuevos patrones de diseño. Analizar como el usuario coge la tablet, cómo interactúa con ella, entre menos veces el usuario tenga que alzar la mano para interactuar, mejor.

Por último podemos concluir que todo lo mencionado anteriormente hace parte fundamental de la experiencia que vive un usuario desde que accede a una página web o aplicación, hasta que los abandona. La capacidad que tiene la interfaz en generar sensaciones y emociones durante el proceso de interacción. “Según Brave y Nass (2002) las emociones afectan a la capacidad de atención y memorización, al rendimiento del usuario y a su valoración del producto.”

No le digas a las personas como hacer las cosas, diles que hacer y deja que te sorprendan con los resultados”. —General George Patton.

Image

Cybergrafía:

http://www.nosolousabilidad.com/articulos/experiencia_del_usuario.htm

http://www.un.org/spanish/Depts/dpi/seminario/pdf/principiosfireworks.pdf

http://www.yeeply.com/blog/puntales-basicos-diseno-de-apps/

Etiquetado , , , , , ,