1. Objetivos

Que el alumno rediseñe y produzca un sitio web responsive para una empresa u organización asignada por la Cátedra, con el objeto de mejorar el rendimiento respecto del sitio existente.

2. Contenidos

• Códigos de programación (HTML, CSS, Javascript, PHP, ASP, etc.)
• Tecnologías para el desarrollo gráfico de sitiow Web (jQuery, plugins para jQuery, Bootstrap, plantillas, LESS y SASS, etc.).
• ¿Qué es diseñar para la web? ¿Qué es un buen diseño web?
• Tipologías web: funciones y características.
• Sitios Web de empresas e instituciones.
• Experiencia de usuario (UX) desde el punto de vista del diseño (UI) gráfico.
• SEO (optimización del código para motores de búsqueda)
• Navegabilidad, usabilidad, interactividad y accesibilidad.
• Diseño responsive

3. Requerimiento

Cada alumno desarrollará un sitio web responsive, de carácter comercial/persuasivo, para una empresa u organización que le será asignada. Si se tratase de un trabajo real, el sitio podría o no tener más páginas de las que se requieren en este ejercicio, pero a los efectos de unificar el alcance de todos los trabajos, se requiere el diseño y desarrollo exclusivamente de los siguientes elementos:

• La página principal del sitio (Home).
• Un listado (de productos o servicios), que eventualmente podría incluirse en la página principal (si el caso no justificara una página independiente).
• Una página modelo de uno de los productos o servicios que la organización ofrece.
• Un formulario de contacto (sea un popup, una página indepentiente o una sección en la home o en las páginas de producto, según convenga al caso).

Los sitios a rediseñar son:

1. Hotel: http://www.villaisidro.com.ar
2. Bodega: http://www.bodegananni.com
3. Restaurant: http://www.notorious.com.ar

Estos sitios necesitan fundamentalmente mejorar la calidad gráfica, realizar una buena adecuación estilística al emisor y presentar sus propuestas con mayor claridad.

Por tratarse de un ejercicio cuyo resultado no termina en el papel —sino en la pantalla—, a lo largo de las clases los alumnos presentarán sus propuestas en un navegador. En ese sentido, convendrá que quienes cuenten con computadoras portátiles las lleven al taller todas las veces que puedan. Asimismo, para poder probar los sitios en tabletas y teléfonos móviles, convendrá que mantengan una versión accesible desde la web.

4. Pautas de evaluación

• Calidad gráfica: selección y combinación de elementos gráficos acorde a los estándares de calidad del género en la actualidad.
• Claridad comunicacional: correcta selección, organización y jerarquización de los contenidos.
• Adecuación a los códigos funcionales del medio Web: respeto de los códigos de funcionamiento impuestos y ya conocidos por el público.
• Adecuación estilística: el clima visual de la propuesta gráfica debe resultar adecuado al emisor y al tipo de mensaje.
• Presentación: cumplimiento de las pautas requeridas.

5. Entrega

La entrega será virtual (no hay que asistir a la facultad) y estará compuesta de dos partes:

1. Subir el código completo del sitio y el código de la plantilla utilizada via Dropbox.
2. Publicación en la Web del sitio desarrollado.
   Seguir la Guía Cómo publicar un sitio via FTP.

El código completo del sitio desarrollado y de la plantilla utilizada debe incluir solamente los archivos del sitio. Muchas plantillas incluyen otras carpetas con recursos y documentación que no forman parte del sitio. Parhttp://catedrabelluccia.com.ar/wp-admin/post.php?post=4044&action=edit&message=1#a que no queden dudas sobre la carpeta que necesitamos, es solamente la que incluye la home del sitio y las carpetas css, js, etc. Cualquier otra carpeta fuera de esa carpeta principal del sitio, por favor no la incluyan en la entrega. Esto aplica tanto al sitio desarrollado como a la plantilla utilizada.

La entrega por dropbox debe realizarse subiendo una carpeta con la siguiente denominación:

2016_dg3_web-institucional_Nombre-Apellido

Esta carpeta deberá incluir en su raíz únicamente dos carpetas y un archivo html:

• web
• plantilla
• entrega.html

Ejemplo de la estructura de la carpeta:

Mantener las denominaciones mencionadas. El archivo «entrega.html» deberá ser editado para incluir los datos del alumno y los links al sitio publicado y al preview del template utilizado.

Descargar el archivo «entrega.html»

A quien le resulte más fácil subir todo el contenido de la carpeta zipeado, por supuesto que puede hacerlo. Solamente les pedimos asegurarse de que al descomprimir el archivo el resultado incluya la carpeta con la denominación solicitada. Obviamente, el zip deberá tener mismo nombre que la carpeta. Por ejemplo: 2016_dg3_web-institucional_Nombre-Apellido.zip

El plazo máximo para subir los archivos de la entrega al dropbox es el lunes 5 de septiembre a las 18 Hs.

6. Recursos útiles para realizar el ejercicio

Ver trabajos de alumnos de años anteriores

Tutoriales en video necesarios para el ejercicio:

• Curso de HTML Básico desde cero
• Curso de CSS Básico desde cero

Tutoriales en video para quienes quieran aprender sobre el tema, más allá del ejercicio:

• Curso de Bootstrap 3
• Como hacer un sitio web con Bootstrap
• Curso Básico de SASS desde cero (solo para quienes conocen y dominan HTML5 y CSS3)
• Curso PHP y MySQL (WEBAPPER) (solo para quienes estén interesados en aprender a programar sitios con base de datos)

Software para editar código:

• Brackets (gratuito, para Mac y Windows)
• Atom (gratuito, para Mac y Windows)
• Koala (preprocesador CSS gratuito, para compilar LESS y SASS, para Mac y Windows)

Referecia técnica de código para consultar en caso de ser necesario (a quienes puedan leer en inglés, les recomendamos utilizar las referencias en ese idioma, ya que son mejores y más actualizadas que las que están en español):

• HTML5, CSS3, Bootstrap3 y jQuery (la mejor opción, pero está en inglés) http://www.w3schools.com
• HTML5 (en español) https://developer.mozilla.org/es/docs/HTML/HTML5
• CSS (en español) https://developer.mozilla.org/es/docs/Web/CSS
• CSS3 (en español, Web) http://theproc.es/page/guia_referencia_css3?layout=false
• CSS3 (en español, PDF) http://www.cssblog.es/ejemplos/css3-hojas-referencia-rapida.pdf
• Bootstrap 3 (en inglés) http://getbootstrap.com
• Bootstrap 3 (en español) https://librosweb.es/libro/bootstrap_3/

Plantillas HTML5:

• Start Bootstrap (gratis)
• FreeHTML5 (gratis)
• Wrap Bootstrap
• Themeforest
• Buscando en Google se pueden encontrar millones más

Hosting gratuito:

• 260mb.net (en español)
• 000webhost.com (en inglés)

Diseño III
Programa del ejercicio 2

Diseño de un nuevo diario

1. Objetivo
Que los estudiantes logren, en grupos de 3 miembros, diseñar el prototipo de un diario de circulación masiva y uno de sus suplementos temáticos, de un nivel competitivo en el medio periodístico argentino.

2. Contenidos principales
La prensa escrita: definiciones, crisis actual, los diarios online, convergencia digital/papel, la inevitable parcialidad de la prensa.
Los diferentes elementos del diseño editorial (títulos, subtítulos, volantas, copetes, destacados, misceláneas, epígrafes, pastillas, recuadros, infografías, fotografías, créditos, etc.).
La/s tipografía/s adecuada/s al tipo de problema.
Cuerpos tipográficos y funciones.
Color tipográfico.
Legibilidad.
Jerarquización y organización de la información (textos e imágenes).
Grilla básica y consistente con la necesidad del trabajo (márgenes, columnas, módulos, interlineado, etc.).
Tipologías de periódicos y sus estilos.
Relación entre publicidades y notas, estructura y organización general.
Diagramación y ritmo de publicación.
Logotipos y portadas de periódicos.

3. Pedido de diseño
Cada grupo de alumnos diseñará un diario de un tipo característico (económico, interés general, sensacionalista) y un suplemento.
El rendimiento del diseño se verificará en un prototipo símil impreso en tamaño 40 x 28 cm. Cada tema tendrá adjudicado un diario real del cual tomará el contenido. Se podrá adaptar la redacción de titulares, copetes, subtítulos etc.
La pauta publicitaria del diario ocupará un 25% de mismo (en total serán 3 páginas de publicidad, 2 para el cuerpo principal y 1 página para el suplemento). Dicha pauta deberá contener avisos de 1/2, 1/3 y de página. No habrá publicidades de página completa.

Diario sensacionalista:
Referente: ejemplar del diario Crónica.
El prototipo a diseñar tendrá, al menos las siguientes páginas:
– Tapa (además se entregarán 2 tapas sueltas, una de una edición habitual y otra que refleje una noticia extraordinaria).
– Contratapa
– Las 4 primeras páginas del cuerpo principal
– 1 página de turf (con solo 1/2 página de datos de tablas de carreras)
– 1 página de reportaje
– 1 página que contenga: El tiempo, horóscopo y otro tema a elección (tres temas en una misma página)
– 2 página de espectáculos, TV y chismes
– 1 página de contenido a elección
– Suplemento de deportes (8 páginas, con tapa)

Diario económico:
Referente: ejemplar del diario El Cronista Comercial.
El prototipo a diseñar tendrá, al menos las siguientes páginas:
– Tapa (además se entregarán 2 tapas sueltas, una de una edición habitual y otra que refleje una noticia extraordinaria).
– Contratapa
– Las 4 primeras páginas del cuerpo principal
– 2 páginas de datos económicos (que contenga tablas y gráficos)
– 1 página de contenido a elección (por ej. espectáculos)
– 1 página con un reportaje a un personaje (a elección)
– 1 página con datos del tiempo, carta de lectores, agenda, etc. (mínimo tres temas diferentes en una página)
– 1 página con notas de opinión (diagramar con o sin columna fija o con invitados)
– Suplemento de viajes y estilo (8 páginas, con tapa)

Diario de interés general:
Referente: ejemplar del diario Clarín.
El prototipo a diseñar tendrá, al menos las siguientes páginas:
– Tapa (además se entregarán 2 tapas sueltas, una de una edición habitual y otra que refleje una noticia extraordinaria).
– Contratapa
– Las 4 primeras páginas del cuerpo principal
– 2 páginas de la sección de deportes
– 1 página de la sección económica (que contendrá tablas y gráficos)
– 1 página con un reportaje a un personaje (a elección)
– 1 página con datos del tiempo, agenda, carta de lectores, (mínimo tres temas diferentes en una página)
– 1 página de opiniones y editorial
– Suplemento de espectáculos (8 páginas, con tapa)

4. Pautas principales de evaluación
La evaluación del trabajo tendrá en cuenta:
4.1. Ajuste tipológico: es la adecuación del estilo del diario propuesto al tipo o género asignado.
4.2. Singularidad: el correcto grado de diferenciación respecto de los diarios de su mismo tipo.
4.3. Organización editorial y comunicación: pertinencia de las decisiones del diseño: selección tipográfica, ancho de calles, márgenes y columnas, tamaño y color tipográfico de los textos, copetes, títulos, epígrafes,
ubicación y tamaño de las imágenes, jerarquización gráfica, recorridos de lectura, etc.
4.4. Calidad gráfica general: armonía de la puesta en página, coherencia de las decisiones adoptadas, adecuación a los estándares altos de calidad en mensajes similares.
4.5. Presentación: calidad, cuidado y ajuste a la consigna de los prototipos entregados.

5. Trabajos prácticos especiales
Análisis de un diario.
Trabajo sobre copia de modelo.

6. Temas
Los tipos seleccionados son:

Diario de interés general.
Referentes del género: Clarín, La Nación, Tiempo Argentino.
Nuevo diario 1: El Plata, y suplemento Aplausos (espectáculos)
Nuevo diario 2: Austral, y suplemento Escenarios (espectáculos)

Diario económico.
Referentes del género: El Cronista Comercial, Ámbito Financiero.
Nuevo diario 1: El Inversor, y suplemento Check-in (viajes)
Nuevo diario 2: La Divisa, y suplemento Destinos (viajes)

Diario sensacionalista.
Referentes del género: Crónica, Muy, Diario Popular.
Nuevo diario 1: Así, y suplemento La tribuna (deportivo)
Nuevo diario 2: Hoy, y suplemento De primera (deportivo)

7. Condiciones de la entrega
Se requiere la presentación de dos prototipos armados (diario y suplemento) y dos tapas sueltas.
Cada contratapa tendrá nombre y apellido de los alumnos de cada grupo y los de sus docentes (nombre y apellido).

Algunos links de interés

García Media es un estudio de diseño editorial, ha realizado trabajos para muchos e importantes medios de toda América, desde el Gráfico (ARG) hasta el Wall Street journal (EE.UU.) entre otros. Ofrecen mucha información y memorias detalladas sobre sus proyectos.
http://www.mariogarcia.com.ar

La tapa de más de 800 diarios de 87 países, todos los días:
http://www.newseum.org/todaysfrontpages/

– Selección de diarios premiados por su diseño:
http://www.smashingmagazine.com/2008/02/11/award-winning-newspaper-designs/

Miguel Buckenmeyer
http://www.miguelbuckenmeyer.com/

Tapas de diarios
http://kiosko.net

Sitio de estudio de diseño catalán que ha diseñado varios de los matutinos nacionales y otros del mundo. También trabajan rediseño de revistas.
http://www.cases-assoc.com

1. Objetivos pedagógicos a cumplir

Que cada estudiante diseñe todos los aspectos gráficos (informativos/ legales, persuasivos, promocionales, identificatorios, etc.) de un envase de producto de consumo masivo, de un estilo determinado, con calidad gráfica competitiva en el mercado actual:

Un envase de producto del segmento popular (nueva marca para competir en el segmento)
Un envase de producto del segmento alta gama (nueva marca para competir en el segmento)

2. Contenidos principales a tratar en las clases

Funciones comunicacionales del envase de consumo.
Análisis de los estilos principales.
Niveles de calidad dentro de rubros determinados.
Detección de ejemplos de alto rendimiento.
Análisis y diagnóstico de envases particulares.
Logotipo e identificación de producto.

3. Pedido de diseño

Cada alumno diseñará la gráfica de un envase de manera completa y presentará prototipos a tamaño real.

Diseñarán todos los aspectos comunicacionales del envase: logotipo, imágenes, misceláneas, información promocional y legal, cromática, plan tipográfico, etc.
Para cada caso, deberán considerarse los requerimientos específicos del programa de diseño, a saber: estilo, calidad gráfica, llamado de atención, diferenciación de la competencia, legibilidad, orden de lectura, etc.

3.1. Diseño de envase de productos del segmento popular

Se trata de un segmento del mercado donde puede observarse una alta calidad gráfica y comunicacional de los envases. La sobre oferta de productos implica mayor competitividad. Los envases necesitan un estilo gráfico compatible con el posicionamiento: popular/estándar, de precio bajo/medio. Esta es una de las grandes dificultades de estos diseños: diseñar gráfica popular alta calidad.

Producto 1: Leche chocolatada (tetra pak de 1L).
Marca: Chocolatte / Chokis
Dimensiones de la caja: 9 cm (ancho) x 17,5 cm (alto) x 6,5 cm (profundidad).
Empresa productora: Granja Prado. Ltda.

Producto 2: Postre Brownies (caja 425g).
Marca: Bon Appetit / La creme
Dimensiones de la caja: 14 cm (ancho) x 19 cm (alto) x 4 cm (profundidad).
Empresa productora: Molienda Sur S.A.C.I.F.I.

Producto 3: Arroz koshihikari (200g)
Nombre:  Sakura / Haiku
Dimensiones de la caja: 14 cm (ancho) x 16 cm (alto) x 4 cm (profundidad).
Empresa productora: Campo Grande S.A.

3.2. Diseño de envase de productos del segmento alta gama 

Estos productos se ubican dentro del segmento más elevado (alta calidad y precio, imagen de refinamiento “gourmet” y sofisticado). El estilo adoptado por cada alumno tendrá que acompañar este posicionamiento.

Producto 1: Caja para botella vino 750 ml
El alumno podrá definir la variedad según sus preferencias.
Marca: Las Lozas | El shincal
Dimensiones de la caja:
Empresa productora: Bodega Mishki Mayu

Producto 2: Caja para botella aperitivo Fernet 750 ml
Marca: Rosario / Los Molles
Dimensiones de la caja: 8 cm (ancho) x 30 cm (alto) x 8 cm (profundidad).
Empresa productora: Finca El Durazno S.A.

Producto 3: Caja para botella Aceite de oliva (500 ml)
Marca: Antigal / Ares
Dimensiones de la etiqueta: 6,5 cm (ancho) x 29 cm (alto) x 6,5 cm (profundidad).
Empresa productora: Talampaya S.A.

4. Pautas principales de evaluación

Singularidad/llamado de atención: es la capacidad de los envases de diferenciarse -singularidad- de sus competidores y de atraer la mirada en góndola -llamado de atención-. El grado de singularidad y llamado de atención debe ser el adecuado al perfil y posicionamiento del producto; ni mayor, ni menor.

Adecuación estilística: es la mayor o menor pertinencia del estilo gráfico propuesto (tipo de imágenes, logotipo, tipografías, organización del plano, cromática, etc.) al rubro del producto y al perfil particular del caso.

Calidad gráfica: es la armonía estética, la coherencia y el ajuste de los elementos gráficos propuestos para inscribirse dentro de los estándares altos de su tipo.

Presentación: es la mayor o menor capacidad de la maqueta para evocar las características del producto real impreso.

5. Límites

Para la realización del trabajo tendrán que respetarse las medidas definidas para cada envase.

La marca, selección tipográfica, tipo de imágenes y demás decisiones gráficas quedan a criterio del alumno y no se ponen límites o restricciones técnicas mientras se cumpla con los parámetros de estilo, llamado de atención, singularidad, calidad, etc. fijados en la etapa de análisis y diagnóstico.

6. Entrega

Los envases se entregarán de manera completa y se presentarán en escala 1:1

7. Link’s de referencia

http://www.packagingoftheworld.com/

http://www.packagingserved.com/

http://lovelypackage.com/

http://www.tridimage.com/