:::: MENU ::::

Blog del taller

  • Ago 05 / 2016
  • Comentarios desactivados en Programa del ejercicio Web Institucional 2016
Diseño III, Programas

Programa del ejercicio Web Institucional 2016

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:

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

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):

Plantillas HTML5:

Hosting gratuito:

  • Jun 29 / 2016
  • Comentarios desactivados en Programa del ejercicio evento efímero 2016*
Diseño III, Programas, Sin categoría

Programa del ejercicio evento efímero 2016*

Ejercicio
Identificación y comunicación de una feria, festival o evento efímero similar.

1. Objetivos pedagógicos a cumplir
Que cada estudiante diseñe el sistema de identificación y comunicación para un evento temático, en tiempo real de trabajo profesional y con alto componente de autocorrección.

2. Contenidos principales

  • La identificación y los medios gráficos de identificación.
  • Comunicación e identificación visual de eventos y mensajes temporales.
  • Los códigos promocionales y persuasivos. El registro informativo y legal.
  • Llamado de atención y singularidad.
  • Unidad estilística en los sistemas gráficos de piezas. Constantes y variables.
  • Secuencia de lectura, llamado de atención, adaptación a distintos tamaños y formatos.
  • Legibilidad.
  • Jerarquización y organización de la información.
  • Tipologías de promociones y sus estilos.

3. Pedido de diseño
Cada estudiante diseñará un sistema de piezas de carácter promocional para un evento efímero.
El diseño tendrá el objetivo de otorgarle identidad y personalidad gráfica al evento; informar correctamente acerca de los motivos, precios, lugar, fechas, y, fundamentalmente, persuadir al público destinatario para que concurra.
Se adjudicará un tema específico de cada evento y el estudiante deberá completar la información básica del mismo.

El sistema de la promoción incluirá, al menos, las siguientes piezas:

  • Afiche de vía pública 110 x 140 cm. (Carteleras municipales). Cada alumno deberá presentar el afiche montado en una cartelera real en el entorno urbano, para eso tendrá que sacar previamente una foto adecuada a este pedido.
  • Gráfica en el frente del edificio o predio donde se realiza. Para esto cada alumno tendrá que sacar una foto del lugar y montar su mensaje sobre las estructuras existentes o simular la situación de montaje.
  • Mini sitio web: solo la página de inicio (para una resolución de pantalla de 1024 x 768 px).
  • Mail promocional: 1200 px
  • Aviso en prensa: página de revista adecuada al caso. Cada alumno elegirá una revista cuyo perfil sea compatible con el evento elegido, y montará su aviso en página impar, pero mostrando la doble página completa (la página par debe ser real de la revista). Formato 20 x 28 cm.
  • Invitación: 10 x 15 cm. (Frente y dorso)
  • Credencial: estandar aprox. 10 x 15 cm

El evento contará con 4 sponsors elegidos por el alumno cuyas marcas deberán ser incluidas en todas las piezas gráficas.

 

4. Pautas principales de evaluación
La evaluación del trabajo tendrá en cuenta:

Capacidad identificatoria:
La adecuada relación de imágenes, cromática, tipografía y misceláneas para otorgarle personalidad propia acorde al perfil del evento.

Carácter sistémico:
La capacidad de las piezas de articularse como partes de un mismo mensaje; correcta relación entre variables y constantes.

Lenguaje promocional:
Adecuación de la propuesta gráfica a los fines del pedido: persuadir al público y provocar –facilitando– acciones de adhesión al mensaje.

Ajuste tipológico y estilístico:
Es la pertinencia de las decisiones formales al tipo de evento y caso específico.

Rendimiento comunicacional:
Clara comprensión de la imagen y el texto principal. Correcta selección de contenido y correcta jerarquización.

 

5. Temas
Los docentes asignarán a los alumnos un tema a desarrollar.


6. Condiciones de la entrega

Se entregará en 3 paneles tamaño A3 montado en soporte rígido, unidos de manera que se puedan plegar.

En ellos, cada alumno deberá aplicar la gráfica desarrollada. La distribución de piezas en los paneles será informada oportunamente por la cátedra.

De ser necesario para una evaluación más precisa (ajuste tipográfico, etc.), algunas piezas que figuran en los paneles se entregarán, además, en hojas sueltas.

 

Ejemplos de años anteriores:

http://catedrabelluccia.com.ar/portfolio/types/imagen-de-un-evento-efimero/

  • Jun 13 / 2016
  • Comentarios desactivados en Programa del ejercicio Web de Producto 2016
Diseño II, Programas

Programa del ejercicio Web de Producto 2016

1. Objetivos pedagógicos a cumplir

Que los alumnos diseñen un sistema de piezas de comunicación para la web para un producto.

Se sugiere ver el siguiente sitio:

http://www.lexusls.asia/

Ver más trabajos de alumnos de años anteriores

2. Contenidos principales

  • Comunicación e identificación visual en la Web;
  • mini sitios, presencia en redes sociales, el avatar como identificador, el favicon;
  • secuencia de lectura, interacción, llamado de atención, manejo de tiempos, peso de los archivos, diseño adaptable (responsive design), etc.;
  • diseño para diferentes dispositivos (computadoras, tablets, celulares)
  • elementos de pantalla;
  • herramientas de la web 2.0;
  • calidad gráfica y multimedial;

3. Pedido de diseño

Cada estudiante diseñará y desarrollará un sitio web para un producto real de una sola página en formato continuo, tipo «papiro» (scrolling sites), con los siguientes objetivos:

  • otorgar identidad/personalidad gráfica a la promoción del producto;
  • informar correctamente acerca de los motivos y fines del sitio;
  • persuadir al público destinatario a que realice las acciones buscadas.

A cada alumno se le asignará un tema, dentro de ese tema deberá elegir un producto existente en la realidad, y para ese producto realizará el trabajo.

Por ejemplo: si el tema fuese “Galletitas” un estudiante podrá elegir “Criollitas” y otro “Oreo” para hacerles el sitio.

El proyecto implicará diseñar las siguientes piezas gráficas:

  1. sitio;
  2. página en Facebook;
  3. versión para móviles;
  4. banner animado (300×250);
  5. mail promocional;
  6. «avatar» para identificación;
  7.  icon para favoritos (favicon).
  8. lámina de presentación (50x70cm.)

Los temas son los siguientes:

  • Bebida alcohólica
  • Electrodoméstico (heladera, cocina, lavarropas o aspiradora)
  • Artículo deportvio (por ejemplo: pelota, tabla de skate, etc.)

4- Pautas principales de evaluación

  • Adecuación al medio (web): Correcta adaptación de la propuesta a las características técnicas y comunicacionales propias del medio.
  • Calidad en el manejo de elementos gráficos
  • Claridad informativa: Correcta selección de contenido y correcta jerarquización.
  • Ajuste sistémico: La capacidad de las piezas de articularse como partes de un mismo mensaje; correcta relación entre recurrencias y singularidades.
  • Jun 10 / 2016
  • Comentarios desactivados en Programa del ejercicio de promoción en redes sociales 2016
Diseño I, Programas

Programa del ejercicio de promoción en redes sociales 2016

1. Objetivos pedagógicos a cumplir

Que el alumno diseñe la gráfica promocional para medios digitales para una empresa de pequeña escala.

2. Contenidos principales

  • Diseño de gráfica para el soporte pantalla
  • Comunicación en redes sociales
  • Lenguajes persuasivos y promocionales
  • Tipologías gráficas en la web (sitios web, banners, placas promocionales, identificación en redes sociales, etc.)
  • Sistemas gráficos

3. Pedido de diseño
Diseñar la estrategia gráfica y comunicacional para redes sociales de una empresa pequeña. El trabajo implica la generación ideas de comunicación y redacción de textos para una promoción compatible con la actividad de la organización asignada, cuya temática será propuesta por el alumno y aprobada por el equipo docente. Las piezas a diseñar son las siguientes:

Avatar para redes sociales (formato cuadrado para Facebook).

Sistema gráfico promocional:
Imagen de portada específica de la promoción (motivo del ejercicio) para Facebook.
3 placas persuasivas diferentes que mencionen distintos aspectos de la promoción.
Anuncio promocional para facebook (para la columna derecha) informando sobre la promoción.
Un e-mail para difundir la promoción.

Las empresas serán provistas por la cátedra.

4. Pautas principales de evaluación
Pertinencia estilística: adecuación de la gráfica al tipo de organización y al soporte digital
Sistema: coherencia entre las diferentes piezas. Uso adecuado de elementos constantes y variables.
Calidad gráfica: armonía de la composición y cuidado de la imagen, tipografías y recursos.

5. Condiciones de la entrega
En una lámina impresa cuyas características serán informadas oportunamente.

Se adjuntará un CD claramente identificado con marcador indeleble (2016, DG1, Promoción en redes sociales, Nombre y apellido del alumno) que contendrá cada una de las piezas. El nombre de los archivos JPG y el modo de presentación responderá a los siguientes criterios:

2016_dg1_promocion-en-redes-sociales_Nombre-Apellido_Portada-Facebook.jpg (simulación en contexto)
2016_dg1_promocion-en-redes-sociales_Nombre-Apellido_Placa-promocional-1.jpg (ancho 1280 pixeles)
2016_dg1_promocion-en-redes-sociales_Nombre-Apellido_Placa-promocional-2.jpg (ancho 1280 pixeles)
2016_dg1_promocion-en-redes-sociales_Nombre-Apellido_Placa-promocional-3.jpg (ancho 1280 pixeles)
2016_dg1_promocion-en-redes-sociales_Nombre-Apellido_Email-promocional.jpg (simulación a tamaño real)
El avatar y una de las placas se debe mostrar en la imagen 1.

(Los mejores trabajos que resulten de este ejercicio serán publicados en el sitio de la Cátedra, de ahí la importancia de que el material digital solicitado se encuentre en condiciones)

Temas

  1. Muebles Paraíso
  2. Garritas Pet Shop
  3. Gimnasio Esparta
  4. Vida Verde Plantas

Horario de entrega: 19:30, tolerancia hasta las 20:00 hs. Después de las 20 la entrega tendrá tarde.

  • May 20 / 2016
  • Comentarios desactivados en Programa del ejercicio de Diario 2016
Diseño III, Programas

Programa del ejercicio de Diario 2016

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

Páginas:12345678910...25