Propuestas sitio CC amereida
| Título | re diseño sitio corporación |
|---|---|
| Tipo de Proyecto | Proyecto de Taller, Proyecto de Curso |
| Palabras Clave | diseño web, re- diseño, sitio corporación amereida |
| Período | 2015-2015 |
| Asignatura | Construcción de Diseño Gráfico 4, |
| Del Curso | Construcción 4° DG 2015 |
| 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) | Daniela Gallardo |
| Profesor | Herbert Spencer |
| URL | http://guzanaz.github.io/CCA |
Propuestas wireframes
Para iniciar el taller de construcción, comenzamos por crear propuestas con visualizaciones para escritorio a partir del análisis del mapa de navegación del sitio actual de la Corporación.
Propuesta 1
Propuesta 2
Se reestructura la arquitectura de la información para reestructurar el sitio construir propuestas para dispositivos móviles
propuesta inicio y menú (mobile first)
Corrección
- Se necesita un buen workflow, en el sentido de carpeta de diseño que permita un buen uso y desarrollo de la información.
- También es importante no olvidar el brief durante el desarrollo del sitio
- Definir cuál es el objetivo del sitio:
- Dar a conocer ciudad abierta, ofrecer la posibilidad de poder visitarlo
- Informar sobre los eventos que se realizan en el lugar
- Dar a conocer sobre la corporación
- Considerar los colores de la marca y aplicarlo de manera correcta a la propuesta, considerar los atributos a links visitados, desarrollar una propuesta de color, a modo de lógica de diseño atómico, viene la tipografía, cómo se construyen los márgenes. Por ejemplo si hay un click, cuáles son los cambios del elemento en el que hago click, preferentemente sería mejor jugar con los colores de fondo/tipográfico y no cambiar los tamaños de la tipografía ni sus atributos que modifiquen dimensiones sobre lo que se trabaja.
- Preguntarse de dónde vienen las medidas tipográficas
modificaciones
Se modifica la apariencia, para que dejen de ser "bloques", cambia el color y el modo de presentar las imágenes y construír el fondo.
Propuesta móvil/ escritorio inicio 3
Según los requerimientos de Manuel San Fuentes:
- Que sea de una simpleza máxima, muy minimalista
- Generar una plataforma de simple manejo
- Sin muchas secciones, una estructura llana
- No cambiar el logo
Propuesta 4 móvil/tablet/escritorio
Resoulución pantallas
- Escritorio 1024px
- Tablet
- vertical 768px
- apaisado 1024px
- movil
- vertical 320px
- apaisado
Apariencia
- fondo body:faf7f7
- caja header: 4e4d4d 40%
- caja menú:4e4d4d al 20%
- cajas dentro del menú: 4e4d4d 5%
Definición de Estilos tipográficos
Opción a
- Títulos
- H1
Open sans 25 px semibold en altas color: #c7514D alineado a la izquierda
- H2
Open sans 20px semibold (altas y bajas) color: #c7514D alineado a la izquierda
- H3 (noticias y eventos)
Open sans 18 px semibold (altas y bajas) Negro 100% alineado a la izquierda
- cuerpo texto
fontfamily:Merriweather
- párrafo normal: 16px light - interlineado 29
- párrafo itálics: 16 px italic - interlineado 29
- párrafo noticias 14 px light - interlineado 25
- pie de foto
merriweather - light 13px - negro al 50%
Modificaciones en las imágenes, simplificar.
Opción b
Logo CC: Opensans semibold (blanco)30 px amereida: Opensans regular (#c7514D)
Menu Normal: Opensans regular (blanco)12 px seleccion: Open Sans regular(#c7514D)
Títulos
- H1
Open sans 20 px semibold en altas color: #c7514D alineado a la izquierda
- H2
Open sans 16 px semibold (altas y bajas) Negro 80 % alineado a la izquierda
- H3 (noticias y eventos)
Open sans 14 px semibold (altas y bajas) color: #c7514D alineado a la izquierda
- cuerpo texto
fontfamily:Merriweather
- párrafo normal: 13px light - interlineado 27
- párrafo itálics: 16 px italic - interlineado 27
- párrafo noticias 10 px light - interlineado 25
Botones
- Ver más
Opensan light, versalitas, 10 px color: #c7514D
- pie de foto
merriweather - light 13px - negro al 50%
Opción c
Logo CC: Opensans bold (blanco)18 px amereida: Opensans light (#c7514D)
Buscar OpenSans light 9 px (blanco)
Menu Normal: merriweather (blanco)12 PT seleccion: Open Sans regular(#c7514D) click menu
caja roja: #b84b47 caja : negro 5% merriweather regular 9PT, color negro 80%
Títulos
- Escritorio
- H1
Open sans 22 PT semibold en altas color: #c7514D alineado a la izquierda
- H2
Open sans 15 pt semibold (altas) Negro 60 % alineado a la izquierda
- H3 (noticias y eventos)
Open sans 12 pt semibold (altas) color: #c7514D alineado a la izquierda Click/selección: opensans 12pt bold (altas)
- cuerpo texto
fontfamily:Merriweather
- párrafo normal: 13 PT light - interlineado 25
color negro 50%
- párrafo itálics: 13 PT italic - interlineado 25
- párrafo noticias 10 PT light - interlineado 16-color negro 50%
Footer
- Escritorio
Título: openSans semibold(altas) 9pt (blanco) Link footer: opensans regular (altas) 7pt (blanco) interlineado 11pt descripción footer: opensansligh 6pt(9pt interlineado)
- Tablet
Título: openSans semibold(altas) 8pt (blanco)interlineado 14pt Link footer: opensans regular (altas) 6pt (blanco) interlineado 11pt descripción footer: opensansligh 5pt(9pt interlineado)
Botones
- Ver más
Opensan light, versalitas, 8pt color: #c7514D
- pie de foto
merriweather - light 13px - negro al 50%
Programación con editor de código fuente
Como faena se inicia la programación del sitio con HTML (vale decir sin aplicar cascadas de estilos) en el sentido que los elementos del sitio queden disponible y funcional (títulos, links, imágenes) prímeramente en la página de inicio con el editor de texto y código fuente Sublime Text, utilizando como repositorio GitHub (plataforma de desarrollo colaborativo de software para alojar proyectos utilizando el sistema de control de versiones Git) y un servidor local; Wamp Server
