Issuu on Google+

davidvargas

Ideas Creativas

Proceso

Trabajo y Compromiso

DAVID VARGAS / DISEテ前 GRテ:ICO 6 / DISEテ前 WEB


PÚBLICO: diseño WEB PROBLEMA: La presentación virtual de un portafolio de diseño personal a través de la web, de forma clara, ordenada y accesible.

SUB-PROBLEMAS Y PLAN DE TRABAJO 1.Realizar el diseño conceptual. 2.Realizar el diseño de interfaz. 3.Realizar el diseño de imagen y personalidad. 4.Realizar el diseño estético y comunicativo del sitio web.

OBJETIVOS DE PROYECTO

General: •Desarrollar el frontend de un sitio web de estilo portafolio personal para el curso de Diseño Gráfico 6. Específicos: •Realizar el diseño conceptual, estético y funcional del sitio web y su interfaz. •Establecer una imagen de marca y una personalidad específica que debe ser transmitida a nivel gráfico. •Registrar y verificar la usabilidad, la eficacia y las cualidades estéticas del sitio web desarrollado.

2

Se parte de una necesidad por divulgar información. A grandes rasgos es posible pensar en dos tipos de público. Uno adulto, preparado y con objetivos claros de búsqueda y un segundo público, con rasgos más amplios de edad, que navega vagamente, por recomendación o por ocio.

¿Cuáles son sus intereses? La creación de proyectos, el desarrollo de campañas, la venta de sus servicios y productos, la elaboración de nuevas ideas para el mercado y el desarrollo empresarial, la expansión económica. Ciencia y tecnología, nuevos herramientas, aplicaciones novedosas, lectura, fotografía, etc.

PÚBLICO 1:

PÚBLICO 2:

•Edad: 25-35 años. •Clase media-alta. •Costarricenses o de países latinoamericanos. •Dueño de Pymes, directores creativos, dueño de empresas con áreas de comunicación y marketing. Publicistas, comunicadores, artista, administradores. •Estilo de vida: Personas con altos cargos o con responsabilidades de mercado que suelen trabajar bajo estrés y con altos estándares de calidad y producción. Son capaces de generar vínculos entre empresas para aumentar el nivel de ingresos y la expansión empresarial.

•Edad: 17-25 años. •Clase media-baja. •Estudiantes diseño ambiental, publicitario, industrial, ingeniería, informática, comunicación, arquitectura, arte, publicidad. Amigos, compañeros de clase. •Estilo de vida: Acelerado, dinámico y lleno de energía. Son posiblemente los futuros empresarios y desarrolladores del mercado. Su búsqueda se basa por lo general en las referencias y el ocio. Están en contacto constante con redes sociales y con las nuevas tecnologías.

DAVID VARGAS / DISEÑO GRÁFICO 6 / DISEÑO WEB


NECESIDADES

3

del CLIENTE:

Encuesta: 1.¿Qué sitio web es su preferido? 2.¿Por qué razón lo frecuenta? 3.¿Establece sus criterios de búsqueda web según: facilidad de uso, confiabilidad del sitio o aspecto estético? 4.¿Cada cuanto visita ese sitio y durante cuánto tiempo?

tante para mí, eso me da confiabilidad o no.” Estudiante de animación digital: “Pinterest, por ocio e inspiración y sobretodo porque es confiable.”

Estudiante de publicidad: “Facebook, porque me entretiene, lo visito una hora diaria. A mí me funciona.”

Fotógrafo y estudiante de arquitectura: “121clicks, lo frecuento por interés en temas de investigación y presentación de proyectos fotográficos, confío más en el aspecto estético de el sitio.”

Estudiante de diseño gráfico: “Behance, lo visito para buscar referencias de diseño y lo visito 3 veces por semana por lo menos dos horas. El aspecto estético es el más impor-

¿Cuáles son sus intereses? Tecnología, redes sociales, música, arte, empleo, comunicación, ocio, aire libre, etc.

DIVULGAR INFORMAR VENDER

DAVID VARGAS / DISEÑO GRÁFICO 6 / DISEÑO WEB


4 diseño CONCEPTUAL

intención: USUARIO FELIZ

La intención radica en hacer al usuario más “feliz” en términos de satisfacción virtual. Esto a través de una personalidad amigable, una interfaz funcional y una estética creativa. Visto de esta manera la conceptualización de los tres grandes ejes del sitio (interfaz, diseño estético y personalidad) están vinculados a estas intenciones. Es decir, el diseño estético debe responder a una estética creativa, así como la interfaz debe ser funcional en su forma más simple y la imagen debe responde a una personalidad amigable. Finalmente estas tres intenciones desembocan en fomentar el usuario feliz.

OBJETIVOS DEL SITIO: OBJETIVOS DEL SITIO WEB General: •Desarrollar el frontend de un sitio web de estilo portafolio personal para el curso de Diseño Gráfico 6. Específicos: •Transmitir los conceptos de personalidad amigable, interfaz funcional y estética creativa a través de la arquitectura del sitio. •Mezclar los componentes de estética y funcionalidad logrando un sitio eficaz en términos de diseño. •Proveer de una experiencia de usuario (UX) de modo que el sitio resulte claro, ordenado y accesible. ¿CÓMO SE JUSTIFICA EL PROYECTO? Este proyecto nace como una necesidad gráfica por evidenciar procesos y resultados de diseño que han sido seleccionados por sus características de presentación, eficacia y satisfacción personal. El proyecto partirá desde la conceptualización gráfica hasta la elaboración del frontend, tomando en cuenta aspectos de UX y UI pertinentes para el correcto funcionamiento del sitio. DAVID VARGAS / DISEÑO GRÁFICO 6 / DISEÑO WEB


5 METODOLOGÍA de prototipado LA METODOLOGÍA DE PROTOTIPADO se basa en la elaboración de propuestas. “El

uso de prototipos se centra en la idea ayudar a comprender los requisitos que plantea el usuario sobre todo si este no tiene una idea acabada.” A través de esta metodología el cliente es capaz de tomar la decisión de mayor conveniencia sobre su proyecto visualizando así versiones previas del desarrollo. A continuación se presenta, condicionado a la práctica, el método de trabajo: •Fase 1: Se indagó el fenómeno y se definieron las especificaciones para la resolución eficaz del problema. Se tomaron en cuenta las necesidades de cliente y del público. •Fase 2: Se realizó el diseño conceptual. Se unificó la intención y se establecieron conceptos para el desarrollo de los distintos ejes del proyecto. Se generaron soluciones en el tema de logística y lenguaje visual. •Fase 3: Se construyó un prototipo operativo. Se realizaron esquemas de arquitectura de la información, blueprints, etc. •Fase 4: Se realizaron pruebas con el usuario. Se evaluó el nivel de eficacia del sitio web. •Fase 5: Se realizaron las pruebas finales, correcciones finales. Se presentó el proyecto frente a la clase.

DAVID VARGAS / DISEÑO GRÁFICO 6 / DISEÑO WEB


6 diseño INTERFAZ PROPUESTA 1 ¿Cómo responder a las necesidades establecidas?

der las herramientas que un diseñador es capaz de ofrecerle.

TOMA DE DECISIONES PROPUESTA 1:

•El título de “Contact” debe ser evaluado en función de la necesidad del público por contratar. En este caso se propone considerar el “Hire Me” como sustitución debido al tono de personalidad amigable propuesto.

•Tomando en cuenta la necesidad de venta que establece las necesidades del cliente se propone insertar una categoría “Services” que explique brevemente las bondades de la empresa y del diseñador, al mismo tiempo que presente la lista de servicios ofrecidos. Esto a su vez le permitirá al público que no tiene claridad sobre la profesión compren-

•Posibles categorías: 1.Projects/1.1Digital /1.2Print/2.Services/3.About/4.Contact.

•Al incluir “Projects” de manera más general se hace énfasis a la naturaleza con la que se asumen los trabajos de diseño, a manera de proyectos. De igual forma le permite al cliente dar una breve explicación sobre el proceso, referencias y método de trabajo, haciendo más cercana y amigable la experiencia con el usuario. •La pagína de inicio debe solucionar la necesidad de diseño por transmitir confianza y creatividad. Se considera establecer imágenes de portada con transiciones automáticas sobre el tópico que trata el sitio web. Esto a su vez le va a permitir al usuario entrar en contacto de manera procesual con la marca. •Tomando en cuenta que el usuario haga un uso poco regular del sitio, se propone insertar los iconos “New” y “Updated” para los proyectos que lo requieran. Este último en caso que un proyecto se presente en forma de proceso y sea necesario actualizar la información, etc.

hance, Twitter, Instagram, Pinterest, Wordpress. •Con la finalidad de reducir el uso de “clicks”y generar una interfaz más funcional se propone insertar un scrollbar continuo que divida las categorías de manera vertical (Relacionado a la tendencia por el scrollbar infinito que utilizan Tumblr, Facebook, Twitter, etc.) •A su vez que se inserte un “Back to top” en la parte inferior de la página en transparencia y con la capacidad de esconderse automáticamente que le permita al usuario regresar fácilmente. •En función de la característica de scrollbar continuo es necesario hacer que el menú, el home y la barra de navegación se mantengan fijos en la parte superior de la página (horizontal) para que el usuario se mantenga ubicado. Al mismo tiempo que cada categoría se resalte según la posición en el sitio.

•La barra de navegación debe incluir un “Follow Me” en función de presentar bajo otras plataformas los procesos de diseño. Tentativamente son: Facebook, Tumblr, Be-

DAVID VARGAS / DISEÑO GRÁFICO 6 / DISEÑO WEB


7 •Se mantendría la opción o el enlace para descargar un CV en pdf con el objetivo de facilitar el proceso de contratación o interés por parte del cliente.

diseño INTERFAZ PROPUESTA 2 •Se categorizará en 1.Work/1.1Editorial/1. 2Branding/1.3Illustration/2.About/3.Contact con el fin de volver la búsqueda más específica para el usuario y aumentar la divulgación del sitio a través del motor de búsqueda de Google y Bing. Facilitará a su vez la correspondencia con los tags establecidos en páginas de diseño como Behance. Se tomará en cuenta una posible expansión de las categorías que no afecte el formato del menú principal.

•Se tomará en cuenta la galería a manera de “slideshow” con el fin de evitar el desplazamiento innecesario por el sitio web. •La barra de navegación incluirá el “Follow” con el objetivo de que el público pueda mantenerse vinculado con el sitio. •El submenú incluiría “tags” sobre los distintos proyectos, en función de la usabilidad de navegación.

•La sección de cotización se citaría en la sección de contacto con el fin de que el usuario se dé por enterado de dicha posibilidad. Esto implica detallar brevemente los diferentes servicios a manera de una cotización estándar. •El “footer” conservará la información de contacto y, al igual que el “header”, contendrá los enlaces de “follow me”, esto con la finalidad de mantener a la mano dicha información para el usuario. Está información de contacto presentará correo electrónico, dirección física, y número de teléfono. •El tráfico del sitio web se aumentará a través de los “backlinks” y de la promoción gratuita en páginas web que lo permiten. Las páginas serán elegidas según la extensión de Google Chrome: “Alexa Traffic Rank”. Esto responde a una necesidad del cliente por la divulgación y la venta de los servicios de diseño.

•El diseño del sitio deberá considerar un espacio para hacer uso, a futuro, de “AdSense”, o advertising en general. De esta manera el sitio estará optimizado y será posible hacer uso de tal herramienta sin afectar el sitio.

CONTENIDO PARA AMBAS PROPUESTAS EN ORDEN JERÁRQUICO Home: 1.Menú 2.Portada de introducción 3.Switch language Footer: 1.Follow 2.Download CV 4.Copyright Projects: 1.Filters 2.Descriptions About: 1.Información general 2.Download CV Contact: 1.Dirección DAVID VARGAS / DISEÑO GRÁFICO 6 / DISEÑO WEB


8 propuesta final:

tabla de CRITERIOS: CRITERIO 1/5

P1 P2 Navegabilidad 4 4.5 Funcionalidad 4 4 Usabilidad 4 4 Simplicidad 3 2 Accesibilidad 4 4 Legibilidad 4 4 UX 3 4 UI 4 3 Necesidad usuario 4 3 Necesidad cliente 3 3 Estructura/AI 4 3

A partir de las dos propuestas establecidas nace una tercera que contiene las siguientes mejoras: •El replanteo de las categorías es ahora: Projects/Services/Contact. Esto se debe a que la información requerida en el about puede ser incluída como parte del footer. El uso de la categoría Projects permite la futura expansión del oficio. •El contenido del footer es el siguiente: About/Contact/Copyright.

•El contenido del header es el siguiente: Change Language/Follow/Logotipo(home). Algunas de las decisiones que permanecen son: •El tráfico del sitio web se aumenta a través de los “backlinks” y de la promoción gratuita en páginas web que lo permiten. Las páginas serán elegidas según la extensión de Google Chrome: “Alexa Traffic Rank”. Esto responde a una necesidad del cliente por la divulgación y la venta de los servicios de diseño.

CONTENIDO PARA PROPUESTA FINAL Home: 1.Follow Us 2.Change Language 3.Menú Projects: 1.Filtros 2.Descripción Services

•Se mantiene la opción o el enlace para descargar un CV en pdf con el objetivo de facilitar el proceso de contratación o interés por parte del cliente.

Contact: 1.Número de teléfono 2.Página web 3.Ubicación geográfica 4.Download CV

•Tomando en cuenta que el usuario haga un uso poco regular del sitio, se insertan los iconos “New” y “Updated” para los proyectos que lo requieran. Este último en caso que un proyecto se presente en forma de proceso y sea necesario actualizar la información, etc.

Footer: 1.Menú 2.Contact 3.Copyright 4.About 5.Coments

DAVID VARGAS / DISEÑO GRÁFICO 6 / DISEÑO WEB


9 OTROS PROCESOS DIMENSIONES DE LA RETÍCULA (PX): Horizontal: 170/255/340/425/485/495/510/525/535/5 95/680/765/850/938/968

•Formulario: 270x215px •Iconos de servicio: 200x200px •Cuadros de texto de servicios: 340x200px •Galería: 320x800px •Download CV: 255x50px

Vertical: 100/150/200/210/240/410/420/560/620/6 68/678/708

PROTOTIPO DE PAPEL Y REGISTRO DINÁMICO:

•Logo/home: 340x100px •Follow: 30x30px •Menú: 113x50px •Footer: 1024x200px

Test Performance: •Duración total del recorrido •Tiempo de permanencia en la página de

inicio •Desplazamiento hacia el footer •Funcionamiento del footer •Funcionamiento del follow •Facilidad de navegación entre las distintas páginas •Desplazamiento entre proyectos Elementos concretos a evaluar: •Filtros •“Change Language” •Download CV

EN RESPUESTA A LOS OBJETIVOS ESPECÍFICOS DEL SITIO Sujeto 1: Duración desplazamiento Projects 20seg Services 40seg Contact 15seg

Funcionamiento 9 9 9

Exactitud Libertad Navegación 10 10 10 8 8 8

Sujeto 2: Duración desplazamiento Projects 18seg Services 15seg Contact 12seg

Funcionamiento 9 8 9

Exactitud Libertad Navegación 10 10 10 8 9 8

Sujeto 3: Duración desplazamiento Projects 30seg Services 50seg Contact 20seg

Funcionamiento 10 8 9

Exactitud Libertad Navegación 9 10 10 8 10 8

DAVID VARGAS / DISEÑO GRÁFICO 6 / DISEÑO WEB


10 REPLANTEO NOTAS: •El criterio de funcionamiento se establece según la buena articulación entre todas las partes. •El criterio de exactitud se establece según los tiempos de carga y la solvencia con que el usuario accede a su búsqueda. •El criterio de libertad de navegación se establece según el desplazamiento correcto del usuario

CONCLUSIONES: •Debe existir un vinculo entre la pagina de contacto y servicios que aumente la libertad de navegación.

•Replantear la ubicación de los filtros y el contenido del “about”. •Repensar la ubicación de las mejoras futuras. •Galería horizontal.

SOLUCIONES: •La galería horizontal se dispondrá de manera vertical tomando en cuenta la agilización que significaría potenciar el formato “Behance” en futuros proyectos. •El vinculo establecido entre la página de contacto y la de servicios será la de un hipervínculo sobre cotizaciones en la segunda de ellas que re-direccione al usuario hacia la página de contacto.

DAVID VARGAS / DISEÑO GRÁFICO 6 / DISEÑO WEB


Escritoprueba