Propuestas sitio CC amereida

De Casiopea


Títulore diseño sitio corporación
Tipo de ProyectoProyecto de Taller, Proyecto de Curso
Palabras Clavediseño web, re- diseño, sitio corporación amereida
Período2015-2015
AsignaturaConstrucción de Diseño Gráfico 4
Del CursoConstrucción 4° DG 2015
CarrerasDiseño Gráfico
Alumno(s)Daniela Gallardo
ProfesorHerbert Spencer
URLhttp://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.

Mapa de Navegación Sitio CC Amereida


Propuesta 1

Inicio Propuesta 1 sitio Corporación Cultural Amereida
About us Propuesta 1 sitio Corporación Cultural Amereida
Ciudad Abierta Propuesta 1 sitio Corporación Cultural Amereida
Textos Fundamentales Propuesta 1 sitio Corporación Cultural Amereida

Propuesta 2

Inicio Propuesta 2 sitio Corporación Cultural Amereida
About us Propuesta 2 sitio Corporación Cultural Amereida
Ciudad Abierta Propuesta 2 sitio Corporación Cultural Amereida
NOTICIAS Propuesta 2 sitio Corporación Cultural Amereida
Archivo:Búsquedapropuesta2ccamereida.jpg
buscar Propuesta 2 sitio Corporación Cultural Amereida

Nuevo Mapa de Navegación

Se reestructura la arquitectura de la información para reestructurar el sitio construir propuestas para dispositivos móviles

Mapa de Navegación Sitio Corporación Amereida por Javiera Ulzurrún

propuesta inicio y menú (mobile first)

Propuesta 1 dispositivo móvil

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.

cambios en la visualización del sitio
cambios visualización de menú

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 3 movil inicio
Propuesta 3 escritorio inicio


Propuesta 4 móvil/tablet/escritorio

Resoulución pantallas

  1. Escritorio 1024px
  2. Tablet
    1. vertical 768px
    2. apaisado 1024px
  1. movil
    1. vertical 320px
    2. apaisado

Apariencia

  1. fondo body:faf7f7
  2. caja header: 4e4d4d 40%
  3. caja menú:4e4d4d al 20%
  4. 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

  1. párrafo normal: 16px light - interlineado 29
  2. párrafo itálics: 16 px italic - interlineado 29
  3. 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

  1. párrafo normal: 13px light - interlineado 27
  2. párrafo itálics: 16 px italic - interlineado 27
  3. 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

  1. párrafo normal: 13 PT light - interlineado 25

color negro 50%

  1. párrafo itálics: 13 PT italic - interlineado 25
  1. 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%

Maquetas Navegables

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