:::: MENU ::::

Posts Categorized / Diseño III

  • May 13 / 2018
  • Comentarios desactivados en Programa del ejercicio Gráfica para evento 2018
Diseño III, Programas

Programa del ejercicio Gráfica para evento 2018

1. Objetivos pedagógicos a cumplir

Diseñar un sistema de comunicación e identificación para un evento temático, en los tiempos reales de la práctica profesional.

2. Contenidos principales

  • La identificación y los medios gráficos de identificación.
  • Comunicación e identificación visual de eventos: marca efímera.
  • 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.
  • Estilos gráficos para promociones.

 

3. Pedido de diseño

Cada estudiante diseñará un sistema de piezas de carácter promocional para un evento. 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.

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

  • Gráfica en el frente del edificio o predio donde se realizará. Para esto cada alumno tendrá que sacar/ obtener una foto del lugar y montar su mensaje sobre las estructuras existentes o simular la situación.
  • Sitio web: solo la página de inicio o página única (escritorio y móvil).
  • Mail promocional (escritorio y móvil).
  • Página de Facebook (avatar, encabezado y posteo).
  • 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.
  • Aviso en prensa: página de revista. 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 tomada de una revista real). Formato 20 x 28 cm.
  • Invitación impresa: tamaño a elección, formato mínimo 10 x 15 cm. (frente y dorso).
  • Merchandisign posible del evento a elección (ejemplo bolsa)
  • Animación de la imagen del evento (breve video).
    ​ Tendrá una función publicitaria y deberá contar con principio y fin. El video deberá tener un mínimo de 5 y un máximo de 15 segundos. Este video será para exhibir en youtube, en publicidad en televisión o web, en pantallas in situ, etc.
  • ​Ademas deberán realizar un ID multiuso de la marca del evento​ que podría usarse para agregar antes o después de cualquier video generado en torno al evento o como separador para ser exhibido durante las charlas. Esto requerirá pensar en una gráfica para la marca del evento que a posteriori pueda tener movimiento/animación.

El evento contará con 4 sponsors elegidos por el alumno, acordes al rubro, cuyas marcas deberán ser incluidas en todas las piezas gráficas. Ver ejemplos de años anteriores.

 

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 caso.
  • Carácter sistémico: La capacidad de las piezas de articularse como partes de un mismo mensaje.
  • Lenguaje promocional: Adecuación de la propuesta gráfica a los fines del pedido: persuadir al público y provocar la asistencia al evento.
  • 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 en clase los temas a desarrollar.

Todos los eventos se realizarán en el predio de La Rural los días 13, 14 y 15 de Octubre.

MEGAPLAY
La mayor feria latinoamericana de video juegos.
Feria de videojuegos, tecnología y entretenimiento más importante de la región donde podrán acceder a lo último y lo mejor
de la industria internacional y local. Cuenta con actividades para toda la familia, lanzamientos exclusivos, numerosos expositores,
torneos de e-sport, concursos de cosplay, shows en vivo, charlas y talleres.
 
NATURALIA
La feria de las plantas, flores y jardines.
Stands de viveros procedentes de diversos lugares del país y espacios para destacados floristas.
En los más de 130 puestos se podrá encontrar una amplia gama de maquinarias, decoración para el jardín,
plantas exóticas, jardines verticales, servicios de compost, entre otros.
Contará con espacios de recreación, actividades medioambientales, charlas de expertos y talleres educativos.
TENTACIONES
La feria de la pastelería y repostería. 
Destinada a realizadores, reposteros, pasteleros, y amantes de la cocina dulce. Aquí podrán encontrar todas las novedades del sector: insumos, materias primas nacionales e importadas, stands de productos elaborados ademas de profesionales pasteleros internacionales que brindarán clases demostrativas.
Mayoristas, distribuidores, fabricantes y particulares podrán encontrar aquí todas las nuevas tendencias.
ACUASPORT
La gran feria de los deportes acuáticos.
Todas aquellas personas que la visiten podrán encontrar una gran oferta de productos y servicios relacionados con los deportes náuticos, la tecnología y los servicios navales. Buceo, snorkel, pesca submarina, surf, windsurf, kit surf, paddle surf o kayac entre otros.
Se brindarán ponencias sobre los diferentes deportes así como también la presentación de novedades de suministros, equipamientos y accesorios
Diferentes talleres y workshops se realizaran en las 3 jornadas del evento.

6. Condiciones de la entrega

Se entregará en 3 paneles tamaño A3 montado en soporte rígido, unidos de modo que se puedan plegar. La distribución de piezas en los paneles será informada oportunamente por la cátedra. Estos paneles deberán ser subidos al drive en un .pdf junto con la publicidad + ID animado. Podrán acompañar la entrega de piezas sueltas impresas en casos que lo consideren necesario. Las mismas deberán entregarse dentro de un sobre pegado por detrás de los paneles.

  • Oct 19 / 2017
  • Comentarios desactivados en Programa del ejercicio Diseño de marca 2017
Diseño III, Programas

Programa del ejercicio Diseño de marca 2017

1. Objetivos generales

Que los estudiantes:

  1. diseñen la marca gráfica de una institución dada;
  2. definan los elementos de recurrencia identificadora necesarios para el caso (tipografías, cromática, tramas, mascotas, etc.) y
  3. diseñen modelos de las principales piezas de comunicación, ajustados a un perfil del emisor dado, donde se evidencie el correcto funcionamiento de la marca y de los demás elementos identificadores.

 

2. Datos y pedido de diseño para cada caso

Caso 1: Cadena de blanquería

Un grupo de comercios y pequeños productores de ropa para cama y baño han constituido una empresa bajo una marca única para comercializar sus productos en una cadena de locales en las principales ciudades del país.

En la cadena se venderá ropa de cama (sábanas, acolchados, fundas, almohadas, cubrecamas, frazadas, edredones, etc), ropa de baño (toallas, toallones, batas, alfombras, cortinas, etc.), de cocina (manteles, servilletas, repasadores, accesorios, etc.).

Los productos de la cadena tendrán un nivel medio y medio/alto de calidad y se orientan a un público amplio dentro de la clase media.

Los estudios de mercado que este grupo encargó comprueban la existencia de un nicho para una nueva marca de blanquería, con nuevas propuestas de diseño y variedad de modelos.

Nombres

  • BÖRG
  • FRIDA
  • MORA

Perfil del cliente

  • Empresa argentina privada
  • Objetivo: el lucro económico
  • Actividad: comercialización de ropa de cama, baño y cocina en locales propios y franquiciados.
  • Valores distintivos: diseño muy actualizado, renovación de modelos, precio y calidad competitivos.
  • Competencia: Arredo, Nordika, Home Collection, Hiper Blanco.
  • Política de difusión principal: fuerte presencia publicitaria tradicional y en redes sociales; promociones en acuerdo con bancos y tarjetas de crédito. Presencia de locales en shoppings y centros comerciales para instalar masivamente la marca.

Estrategia para diseñar la marca gráfica

La identificación visual de la empresa deberá reunir los siguientes requisitos:

  • Estilo gráfico: el abanico estilístico de este tipo de marcas puede ser amplio, dentro de la amplitud aceptable la marca a diseñarse debe ser neta, limpia, elegante (pero no débil, sutil o frágil); lo suficientemente neutra como para convivir con los muy diferentes estilos y diseños de los productos que vende y con los inevitables cambios en las modas.
  • Tipo: explorar todas las opciones tipológicas.
  • Legibilidad: alta
  • Singularidad: alta respecto de sus competidores y del sector.
  • Llamado de atención: medio/alto.
  • Reproducibilidad: adaptable a las condiciones que imponen los materiales y soportes de la marca en marquesinas, vidrieras, etiquetas, etc.

Piezas clave para el uso de la marca

Las piezas clave tienen el objetivo de servir para demostrar el funcionamiento de la marca gráfica y el sistema de signos básicos identificadores en situaciones emblemáticas para la organización. No son piezas finales sino ejemplos de uso.

  • El frente de los locales
  • Bolsa
  • Envases de productos de marca propia
  • Web (home)
  • Tarjeta personal
  • Aviso de página completa (revista)

Caso 2: Cadena de comida rápida y foodtucks

Un grupo de propietarios de parrilas y restaurantes, asociados con inversores han creado una cadena de locales con marca única para comercializar comidas rápidas y participar con camiones/restaurantes (Foodtrucks) en los distintos eventos y espacios para ese tipo de moda gastronómica.

La comida estará basada en el sandwich de gusto argentino (choripán, bondiolita, vacío, etc.) las variantes de chimichurri, en los estándares del fast food (hamburguesas, panchos) y en los típicos acompañamientos, aderezos, y postres de este tipo de comidas.

Nombres

  • LUCAS
  • RETRUCO

Perfil del cliente

  • Empresa argentina privada
  • Objetivo: el lucro económico
  • Actividad: venta de comida rápida en loales y camiones especiales
  • Valores distintivos: calidad de productos, menú innovador y atractivo, precio accesible (no el más barato).
  • Competencia: Mc Donalds, Burger King, KFC, Subway, pizzerías (Kentucky, Americana, etc.).
  • Política de difusión principal: fuertes campañas publicitarias tradicionales y en redes sociales; promociones y premios; esponsoreo de equipos de fútbol, presencia en espectáculos deportivos y recitales.
  • Público: masivo, con preponderancia en adolescentes y jóvenes que buscan nuevas opciones de estilos de consumo.

Estrategia para diseñar la marca gráfica

Esta cadena necesita que sus signos gráficos de identificación cuenten con los siguientes requisitos:

  • Tipo: explorar todas las opciones tipológicas.
  • Estilo: fuerte, popular, comercial, ameno.
  • Legibilidad: alta
  • Llamado de atención: alto
  • Singularidad: alta
  • Vigencia: alta. No puede envejecer pronto o pasar de moda. 

Piezas clave para el uso de la marca

Las piezas clave tienen el objetivo de servir para demostrar el funcionamiento de la marca gráfica y el sistema de signos básicos identificadores en situaciones emblemáticas para la organización. No son piezas finales sino ejemplos de uso.El frente de los locales

  • Los camiones
  • Vajilla y envases (descartables)
  • Web (home)
  • Tarjeta personal
  • Aviso de página completa (revista)

Caso 3: Tarjeta de crédito popular

Un grupo bancos provinciales, junto a cadenas de supermercados y de comercios, han creado una tarjeta de crédito destinada principalmente a los sectores de ingresos bajos y/o medios de alcance nacional.

Los estudios de mercado que el grupo encargó demuestran la viabilidad de una nueva tarjeta de este tipo ante el aumento de la compra a crédito, de internet como canal de compras y ventas, y de la mayor bancarización del público.

El sistema tendrá distintintos niveles de tarjetas, siguiendo el modelo de Tarjeta Naranja.

Nombres

  • ANDINA
  • MÍA

Perfil del cliente

  • Empresa argentina privada
  • Objetivo: el lucro económico
  • Actividad: gerenciamiento y comercialización de tarjetas de crédito.
  • Oferta: tarjetas de crédito accesibles a diferentes niveles socioeconómicos. Acuerdos con cadenas y marcas para brindar descuentos a los socios de las tarjetas.
  • Valores distintivos: seriedad, facilidad de acceso, amplitud de negocios adheridos, promociones convenientes.
  • Pretende posicionarse como la tarjeta popular que puede mostrarse sin pudor, y no la tarjeta “de los pobres”.
  • Competencia: Naranja, Italcred, Data, Nevada y el resto de las tarjetas de crédito (Visa, Mastercard, etc.).
  • Clientela principal: público de nivel socioeconómico bajo y medio.
  • Política de difusión principal: fuerte presencia publicitaria tradicional y en redes sociales; promociones y auspicios.

Estrategia para diseñar la marca gráfica

La identificación visual de la empresa deberá reunir los siguientes requisitos:

  • Estilo gráfico: universal, comercial, estable, fuerte (no demagógico o populachero).
  • Tipo marcario: En el caso de Mia, en principio se recomienda un tipo nominal, aunque queda abierta la posibilidad de explorar también tipos simbólicos. Para Andina no se recomienda ningún tipo en particular.
  • Legibilidad: alta
  • Singularidad: alta respecto de sus competidores y del sector.
  • Llamado de atención: alto. Pero su estridencia no puede entrar en contradicción con el estilo adecuado.
  • Versatilidad: alta. Debe armonizar con todo tipo de productos, promociones y situaciones de compra.

Piezas clave

Las piezas clave tienen el objetivo de servir para demostrar el funcionamiento de la marca gráfica y el sistema de signos básicos identificadores en situaciones emblemáticas para la organización. No son piezas finales sino ejemplos de uso.

  • El plástico (tarjeta de crédito) y el sticker para locales adheridos
  • El frente de los locales
  • Sponsoreo en camiseta de fútbol (San Lorenzo de Almagro)
  • Web (home)
  • Tarjeta personal
  • Aviso de página completa (revista)

 

3. Pedido de diseño

Se requiere el diseño de la marca gráfica y los elementos básicos identificadores, de acuerdo con la estrategia descripta. El diseño proveerá:

  • Marca gráfica (coincidente con las recomendaciones de tipo marcario).
  • Paleta cromática: sistema de colores estables que se utilizarán en las diferentes piezas.
  • Familia/s tipográfica/s que se utilizarán para la redacción de los diferentes mensajes.
  • Especificaciones técnicas y de reproducción para los elementos descriptos.
  • Avatar para redes sociales.
  • Aplicación de la marca al menos en las piezas clave mencionadas.

4. Condiciones de entrega

La entrega se realizará en dos paneles de 70×100 cm. que contendrán la marca, los otros elementos identificadores y las piezas modelo más representativas, para expresar la propuesta del alumno. El diagrama básico de los paneles y las recomendaciones para su armado se darán oportunamente en clase.

 

5. Pautas principales de evaluación

  • Ajuste del diseño a la estrategia de marca establecida por este programa
  • Calidad gráfica general
  • Presentación: calidad, cuidado y ajuste a la consigna

 

6. Bibliografía recomendada

  1. Marca y marca gráfica
  2. Marca y transmisión de sentido
  3. La marca: ¿vestimenta o disfraz?
  4. Sí logo
  5. Pensamiento tipológico
  6. Cómo definir el tipo marcario adecuado
  7. De la identidad al signo identificador
  8. Marca cromática y semántica del color
  9. Marca corporativa: ¿vender un diseño o transferir un recurso?
  10. Con o sin símbolo
  11. Verbal/no verbal como polaridad identificatoria
  12. El testeo de la marca corporativa
  13. Toda marca debe ser…
  14. Las recetas en el diseño de marca
  15. Más sobre el logotipo corporativo
  • Sep 14 / 2017
  • Comentarios desactivados en Programa de apertura de serie de TV 2017
Diseño III, Programas

Programa de apertura de serie de TV 2017

1. Objetivo pedagógico

Que los estudiantes diseñen la apertura de una serie de TV propuesta por la cátedra. Dicha tarea implicará articular imágenes, texto y sonido, en una composición audiovisual compatible con el clima general de la serie.

2. Contenidos a tratar en las clases

  • Funciones y características principales de las aperturas de series.
  • La calidad en el medio audiovisual.
  • Movimiento, sonido, tiempo y ritmo.
  • Las herramientas para el diseño de la gráfica en movimiento.

3. Pedido de diseño

Una productora de televisión argentina ha adquirido el formato de tres péliculas que serán, respectivamente, la base argumentativa y de clima para diferentes series de TV adaptadas a la televisión argentina. Las series se desplegarán en varios episodios; cada episodio comenzará con la misma apertura, la apertura que debe ser diseñada en este ejercicio. 

  1. Nueve reinas. Género: Suspenso, policial.
  2. Fase 7. Género: Ciencia Ficción, Suspenso.
  3. Un novio para mi mujer. Género: Comedia

Las series tendrán el mismo título que las películas.

La apertura deberá contener la siguiente información: el título de la serie, los nombres de un mínimo de 6 actores y, también como mínimo, los nombres del guionista, autor de la música y director. Todos los nombres deberán corresponder a actores y profesionales del cine y televisión nacional. El orden, la manera de aparición y el tratamiento gráfico de dichos datos es libre.

La selección del material gráfico y sonoro y sus combinaciones quedarán a criterio del alumno. Pueden utilizarse: fotogramas, animaciones creadas por el alumno o extraídas de otras fuentes, con cualquier técnica y retórica (abstracción, realismo, collage, stop motion, siluetas, metáforas, etc.) y toda clase de combinaciones posibles entre dichos recursos.

El diseño requiere de la incorporación del sonido: una misma música continua o varias, combinación de música con sonidos especiales, etc.

El diseño solicitado tiene tres condicionamientos simples:

  1. Que el clima general que den la animación de imágenes, textos y música de la apertura sea compatible con el contenido y clima de la serie que le da origen. Dice el diccionario RAE:

COMPATIBLE: 1. adj. Dicho de una persona o de una cosa: Que puede estar, funcionar o coexistir sin impedimento con otra.

  1. Que la información textual sea legible y su tratamiento refleje las jerarquías y órdenes de importancia.
  2. Que la apertura dure 60 segundos, con un mínimo de 30” diseñados por el alumno. Por ejemplo, quien diseñe una animación de 40” deberá agregar una secuencia de la serie, sin diálogos, de 20”, tiempo en el que se terminará de incluir la información. Es decir que todos los trabajos tendrán que completar la información textual requerida en 60 segundos.

4. Criterios de evaluación

  • Pertinencia tipológica: La inscripción de la pieza dentro del tipo «apertura de serie de TV».
  • Compatibilidad estilística: los recursos estéticos adoptados deberán transmitir un clima compatible con la serie.
  • Calidad audiovisual: Armonía entre los elementos gráficos e imágenes, el movimiento, el manejo del tiempo y la banda de sonido.
  • Adecuada claridad informativa: clara comunicación de los datos (título y créditos).

5. Presentación

Cada alumno entregará un video de 60 segundos en formato HDV 720p30 (720 x 1280 px) ó HDV 1080i30 (1920 x 1080 px). A los 60 segundos del trabajo se les deberá anteponer una placa fija con fondo negro y los siguientes datos:

  • Cátedra Belluccia
  • Año 2017
  • Materia Diseño Gráfico III
  • Comisión: Nombres completos de los docentes
  • Trabajo práctico: Apertura de serie de TV
  • Nombre completo del alumno

La duración de la placa fija deberá ser de 5 segundos. Es decir que el video a entregar durará 65 segundos en total.

El archivo deberá tener la siguiente denominación:

2017_dg3_apertura-de-serie-de-TV_Nombre-Apellido.???

Se recomianda generarlo con algún tipo de compresión, como H.264 o similar, ya que los videos sin compresión pesan mucho y tienen problemas para mostrarse en algunos sistemas.

6. Material de consulta

Ejemplos de títulos de apertura de series de TV

Tutoriales de After Effects

Tutoriales para animación de textos

Audio para descargar

Plugins para After Effects

  • Ago 03 / 2017
  • Comentarios desactivados en Programa del ejercicio Gráfica para evento 2017
Diseño III, Programas

Programa del ejercicio Gráfica para evento 2017

1. Objetivos pedagógicos a cumplir

Diseñar un sistema de comunicación e identificación para un evento temático, en los tiempos reales de la práctica profesional.

2. Contenidos principales

 

  • La identificación y los medios gráficos de identificación.
  • Comunicación e identificación visual de eventos: marca efímera.
  • 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.
  • Estilos gráficos para promociones.

 

3. Pedido de diseño

Cada estudiante diseñará un sistema de piezas de carácter promocional para un evento. 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.

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

  1. Gráfica en el frente del edificio o predio donde se realizará. Para esto cada alumno tendrá que sacar una foto del lugar y montar su mensaje sobre las estructuras existentes o simular la situación.
  2. Sitio web: solo la página de inicio o página única (escritorio y móvil).
  3. Mail promocional (escritorio y móvil).
  4. Página de Facebook (avatar, encabezado y primer post patrocinado).
  5. 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.
  6. Aviso en prensa: página de revista. 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 tomada de una revista real). Formato 20 x 28 cm.
  7. Invitación: 10 x 15 cm. (frente y dorso)
  8. Animación de la imagen del evento (vídeo brevísimo). Se trata de un simple ID “multiuso», que podría usarse para agregar antes o después de cualquier video generado en torno al evento. Por ejemplo, videos para promocionar, videos de momentos del evento, etc., para exhibir en youtube, en publicidad en televisión o web, en pantallas in situ, etc.

El evento contará con 4 sponsors elegidos por el alumno cuyas marcas deberán ser incluidas en todas las piezas gráficas. Ver ejemplos de años anteriores.

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 caso.
  • Carácter sistémico: La capacidad de las piezas de articularse como partes de un mismo mensaje.
  • Lenguaje promocional: Adecuación de la propuesta gráfica a los fines del pedido: persuadir al público y provocar la asistencia al evento.
  • 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 en clase los temas a desarrollar.

  1. Zombies BA (Festival cultural para muertos-vivos)
  2. Alta Cumbia (Vení a bailar a La Rural)
  3. Like Fest (Redes sociales, influencers, tecnología)
  4. Got The Blues (Encuentro de bluseros en Buenos Aires)
  5. Metaleros (Festival del metal argento)
  6. Cepas 2017 (Feria nacional de vinos y bodegas)

 

6. Condiciones de la entrega

Se entregará en 3 paneles tamaño A3 montado en soporte rígido, unidos de modo que se puedan plegar. La distribución de piezas en los paneles será informada oportunamente por la cátedra.

  • Jun 15 / 2017
  • Comentarios desactivados en Programa de diseño web institucional 2017
Diseño III, Programas

Programa de diseño web institucional 2017

1. Objetivos

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

2. Contenidos

  • Códigos de programación (HTML, CSS, Javascript, PHP, etc.)
  • Tecnologías para el desarrollo gráfico de sitiow Web (jQuery, Bootstrap, plantillas, LESS, 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) y diseño de interfases gráficas (UI).
  • SEO (optimización del código para motores de búsqueda).
  • Navegabilidad, usabilidad, interactividad y accesibilidad.
  • Diseño responsivo.

3. Requerimiento

Cada alumno desarrollará un sitio web responsivo, de carácter comercial/persuasivo, para una empresa u organización que le será asignada. 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 (Inicio).
  • 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/empresa 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. Marca de bicicletas: http://www.bicicletastomaselli.com
  2. Muebles de oficina: http://www.mygequipamientos.com.ar
  3. Hostería: http://www.lecharme.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 Drive.
  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. Para que no queden dudas sobre la carpeta que necesitamos, es solamente la que incluye la home (página de inicio) 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 Drive debe realizarse subiendo una carpeta con la siguiente denominación:

2017_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 «entrega2017.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: 2017_dg3_web-institucional_Nombre-Apellido.zip

El plazo máximo para subir los archivos de la entrega al Drive es el lunes 17 de julio 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)
  • Sublime Text (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:

Páginas:1234567...13