Portafolio Ingrid Céspedes
Título | Portafolio Ingrid Céspedes |
---|---|
Tipo de Proyecto | Proyecto de Curso |
Palabras Clave | html, css, portafolio, diseño front |
Período | 2014-2014 |
Del Curso | Construcción 4º DG 2014, |
Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
Alumno(s) | Ingrid Céspedes |
Profesor | Katherine Exss |
URL | https://dl.dropboxusercontent.com/u/71076673/web/index.html |
Primera propuesta
Contexto
El contexto del trabajo se enmarca en el taller de construcción del 4°año de DG. Con el fin de nivelar los conocimientos de html y css, realizaremos todo el proceso para crear nuestro portafolio digital
Wireframe
Segunda propuesta
En la revisión anterior, las mejoras que se debían hacer al trabajo eran:
- orden y expresión de mapa de navegación
- Pensar en una forma facilitada de acceder al contenido del sitio
En esta segunda propuesta con correcciones sobre el mapa de navegación y del wireframe, además se presenta una propuesta de interfaz Gráfica y un logo para el portafolio web.
Las modificaciones realizadas en el mapa de navegación del portafoli tiene que ver con la decisión de extender y presentar todo el contenido del sitio en la página de inicio. Aprovechando la flexibilidad que los formatos digitales nos entregan. Un largo scroll que se dividirá en las diferentes secciones y se separa por dos colores de fondo (blanco y rosa).
Archivo:2°mapa denavegaciónportfolioya.jpg
Wireframe
El diseño del Wireframe fue realizado en el programa Adobe Firework, ideal para le realización de estas maquetas ya que trabaja con la precisión de los pixeles(resolución de 1366px). Se pensó en 5 plantillas que son las variaciones que el portafolio puede tener.
- La home o inicio
- La sección de los trabajos académicos, que entrega un texto que contextualizar, más una serie de imágenes.
- Como se presentan las imágenes
- La sección de proyectos que a pesar de estar expuestos en la home, al acceder a uno puedes acceder a todos a la ves.
- La sección de los Proyectos personales también varía ya que solo es una galería que luego al hacer click en una de las imágenes, esta se despliega como un lighbox.
- Académicoingrid.gif
sección académico
- Académicogalerpiaingrid.gif
galería
Imagen
Logo
Propuestas de logo para el portafolio. Se define una forma, estilo y color que guiaran el diseño de la Interfaz Gráfica. El logo es como la punta de la pirámide, desde donde pude seguir pensando en el cuerpo de esta pirámide, el cuerpo del sitio.
¿Qué resolución de pantalla es ideal para diseñar?
Interfaz resolución de 1366px
Cuando comenzamos a diseñar un sitio web hay que tener en cuenta ciertas variables como el público al cual va dirigido, las funciones que cumplirá, entonces la resolución en la que se piensa un sitio en muy importante. Existe un debate entre cual es la mejor resolución para un sitio, si 1366px o 1024px. Desde hace años se consideraba como estándar de diseño 1024x768px pero un estudi de StatCounter señala que en primer lugar de uso se encuentran las pantallas de 1366x768px(19,28%), en segundo lugar, descendiendo de un 41,8%(2009) a un 18,6%(2012). Aunque el diseñador debe tener un pensamiento flexible y con los cientos de resoluciones de pantallas existentes para móvil, tablet y escritorio. Pero si el sitio se decide hacer fijo es mejor que tenga un mayor alcance de público con una resolución que se aprecie en pantallas más pequeñas.
- INTERFAZacadémico.gif
sección académica
- INTERFAZacadémicogaleria.png
Galería
Interfaz resolución de 1024px
- Página1HOMEINTERFAZ.png
Home
- Página2ACADEMICO.jpg
sección académica
- Página4proyectointerfaz.png
Proyectos
- Página5pryectosperinterfaz.png
Proyectos personales
Cambio de Interfaz
Color