:::: MENU ::::

Blog del taller

  • Ago 27 / 2019
  • Comentarios desactivados en Programa del ejercicio Diseño Web 2019
Diseño III, Programas

Programa del ejercicio Diseño Web 2019

1. Objetivos

Que el alumno diseñe y produzca un sitio web adaptable a los diferentes formatos de pantalla, para una empresa u organización asignada por la Cátedra.

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 adaptable (responsive), 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.
  • Un listado de servicios o experiencias que la empresa brinda, que puede incluirse en la página principal.
  • Una página modelo de uno de los servicios que la organización/empresa ofrece.
  • Un formulario de contacto (puede ser un popup, una página indepentiente o una sección en las diferentes páginas del sitio, según convenga al caso).

A continuación se describe el perfil de las organizaciones para las que se requiere el diseño de un sitio web:

  1. SENZA
    Un Instituto de Yoga ubicado en el barrio de Palermo donde se enseña y difunde la práctica del Hatha Yoga. Cuenta con clases grupales divididas según el tipo de intensidad (suave, intermedio, fuerte) y clases individuales. Se dictan ademas clases especiales de Ashtanga Yoga para alumnos avanzados e instructores.
    Sus instalaciones cuentan con la calidez y simpleza necesarias para desarrollar esta practica, así como también un espacio para adquirir productos para la vida saludable que profesan.
  2. OCONNOR
    Cervecería 100% artesanal donde producen y comercializan cervezas rubia (Pale Ale), roja ( Scotish Ale) y negra (Porter) entre otras ademas de canillas invitadas que varian mes a mes.
    La elaboración se lleva a cabo en el local y puede ser visitado.
    Cuenta con la posibilidad de alquilar choperas así como también de recargar y comprar tu growler.
    En su local del barrio de Caballito podrán ademas compartir comidas para picar con amigos.
  3. MUSICALIA
    Escuela de música para niños y adolescentes (de 4 a 15 años) donde se dictan diversos talleres tanto de iniciación a la música y al canto, como también de instrumentos como guitarra, violin y piano.
    Sus instalaciones están diseñadas brindando un lugar amplio y abierto, ordenado, estético, simple, real, donde cada elemento tiene su razón de ser para el aprendizaje de los niños.
  4. HOOPS
    Heladería Boutique ubicada en el barrio de Belgrano. Cuenta con una selección de sabores creados específicamente por sus dueños con productos 100% naturales y de calidad premium, capaces de producir diversión y placer en quienes los prueben.
    Su local moderno y colorido es la principal atracción de grandes y chicos.

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 constará de 2 partes:

ENTREGA OFFLINE: se entregará un panel tamaño A2 montado con el preview del sitio web completo con la adecuación a las diferentes pantallas.

ENTREGA ONLINE: 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, no debe formar parte de 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:

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

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:

  • Ago 27 / 2019
  • Comentarios desactivados en Programa del ejercicio UI/UX 2019
Diseño II, Programas

Programa del ejercicio UI/UX 2019

1. Objetivos pedagógicos a cumplir

Que los alumnos diseñen la interfaz y experiencia de usuario de una aplicación para dispositivos móviles.

2. Contenidos principales

  • Introducción al diseño de interfaz (UI)
  • Introducción al diseño de experiencia de usuario (UX)

3. Pedido de diseño

Una empresa desarrolladora de software planea lanzar al mercado tres nuevas aplicaciones que competirán con otras, similares, ya existentes. Se requiere el diseño de las primeras pantallas de la aplicación. Esto implica mostrar el proceso que lleva al usuario desde que toca el ícono hasta la última pantalla del proceso de registro de usuario en la App.

En ese sentido el diseñador deberá:

  • Definir la identidad visual de la aplicación
  • Establecer qué contenidos solicitar al usuario para poder registrarse
  • Definir el flujo de la información

Tema 1: Music Cloud

Music Cloud es una app que te permite escuchar música y mucho más.

Encuentra música nueva. Colecciona canciones y listas de reproducción. Sigue a amigos y artistas. Descubre podcasts, humor y noticias.

Estés donde estés. Hagas lo que hagas. La app Music Cloud te permite oír más.

Tema 2: Take me

Take me es un app de viajes compartidos para viajar en forma rápida y confiable en tan solo minutos, de día o de noche. Sin tener que estacionarte o esperar un taxi o autobús. Con Take me, pides viajes con un simple toque y es muy fácil pagar con tarjeta de crédito, o dinero en efectivo en algunas ciudades.

Tema 3: Kastor

Kastor proporciona un servicio de almacenamiento en la nube y chat cifrado punto a punto a través de navegadores web estándar, junto a aplicaciones dedicadas para dispositivos móviles. Al contrario que con otros proveedores de almacenamiento en la nube, tus datos son cifrados y descifrados en tus dispositivos cliente únicamente y nunca por nosotros.

4. Pautas principales de evaluación

  • Adecuación al medio: 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.

5. Condiciones de entrega

  • Se deberá entregar un archivo HTML mostrando el flujo de información que lleva al usuario desde que abre la aplicación hasta que logra registrarse exitosamente a la misma.
  • Se entregará también un video en HD de presentación que muestre el flujo de la información.
  • Jul 02 / 2019
  • Comentarios desactivados en Pedido para los rediseños de envase
Diseño I, Programas

Pedido para los rediseños de envase

Pan rallado «Preferido»

A propuesta de su departamento de Marketing la empresa Molinos lanzará una versión “gourmet” del actual pan rallado PREFERIDO.

Será una edición especial celebrando los 50 años del producto en el mercado.

Además de ser un producto seleccionado y de mayor calidad, se comercializará en cajas de 23 x 12 x 6 cm de alto, de 500 g.

Este lanzamiento especial contará con fuerte apoyo publicitario. El conocido chef Francis Mallman será la figura central de las publicidades y en el canal de YouTube de Preferido presentará recetas en las que se utilice el producto.

El objetivo de este lanzamiento reforzar el conocimiento y adhesión a la marca PREFERIDO y mantener su posición de liderazgo en el mercado.

El departamento de Marketing de Molinos solicita a su equipo de diseño que, en un plazo de 30 días presente bocetos de la nueva caja.

El diseño tendrá que respetar las siguientes condiciones:

  • Respetar el actual logo tanto en la tipografía como en el color
  • Respetar el color amarillo de fondo y el sello redondo que dice “Desde siempre el preferido de los argentinos”
  • El actual color marrón podrá mantenerse, o cambiarse por otro de similar valor y rendimiento.
  • La leyenda debajo de PREFERIDO deberá decir «Pan rallado gourmet» en la misma o diferente tipografía que la actual
  • En algún lugar destacado figurará un sello que diga: «Edición especial 50 años de Preferido»
  • La caja no tendrá ventanas transparentes
  • La imagen será dada por la cátedra, pero el estudiante podrá elegir otra que considere mejor para su propuesta. La imagen puede ser fotográfica, dibujada, grabado, etc.
  • Tendrá la misma receta que la bolsa actual pero encabezada con la frase: «Una receta de Francis Mallman y la fotito del chef.
  • El resto de la información será la misma que la que hoy tiene la bolsa.

Marca para utilzar en el envase:

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/preferido.png

Unas imágenes posibles para el envase (pueden usarse estas u otras que consideren mejores o más adecuadas a su propuesta).

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/13219.jpg

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/GettyImages-463060835.jpg

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/bread-crumbs.jpg

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/3831692s1280h960.jpg

Fideos mostacholes «Favorita»

A propuesta de su departamento de Marketing la empresa Molinos lanzará una edición especial del actual fideo mostachol FAVORITA.

Además de ser un producto seleccionado y de mayor calidad, se comercializará en cajas de 26 x 18 x 7 cm de alto, de 500 g.

Este lanzamiento especial contará con fuerte apoyo publicitario. El conocido chef Mauro Massimino será la figura central de las publicidades y en el canal de YouTube de Favorita presentará recetas en las que se utilice el producto.

El objetivo de este lanzamiento es reforzar el conocimiento y adhesión a la marca FAVORITA y posicionarla entre las marcas de mayor precio y calidad.

El departamento de Marketing de Molinos solicita a su equipo de diseño que, en un plazo de 30 días presente bocetos de la nueva caja.

El diseño tendrá que respetar las siguientes condiciones:

  • Respetar el actual logo tanto en la tipografía como en el color
  • Mantener el color rojo (puede no ser el mismo rojo), aunque puede ser en menor proporción y combinado con otros colores pertinentes.
  • En algún lugar destacado figurará un sello que diga: “gourmet”
  • La caja no tendrá ventanas transparentes
  • La imagen será dada por la cátedra, pero el estudiante podrá elegir otra que considere mejor para su propuesta. La imagen puede ser fotográfica, dibujada, grabados, etc.
  • Tendrá una receta en el dorso pero encabezada con la frase: “Una receta de Mauro Massimino” y la fotito del chef.
  • Además de la receta se conservarán las indicaciones de preparación de los fideos.
  • El resto de la información será la misma que la que hoy tiene la bolsa.
  • Se recomienda mover parte de la información a los laterales de la caja (inexistentes en el envase actual).

Marca para usar en el envase

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/favorita-logo-simp-fin.png

Unas imágenes posibles para el envase (pueden usarse estas u otras que consideren mejores o más adecuadas a su propuesta).

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/Shrimp-Penne-with-Vodka-Sauce-tasty.jpg

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/pennewithtomatoesspi_73926_16x9.jpg

Polenta «Presto Pronta«

A propuesta de su departamento de Marketing la empresa Arcor lanzará una edición especial de la actual polenta instantánea PRESTO PRONTA.

Además de ser un producto seleccionado y de mayor calidad, se comercializará en cajas de 24 x 11 x 7cm de alto, de 500 g.

Este lanzamiento especial contará con fuerte apoyo publicitario. la conocida chef Narda Lepes será la figura central de las publicidades y en el canal de YouTube de Favorita presentará recetas en las que se utilice el producto.

El objetivo de este lanzamiento reforzar el conocimiento y adhesión a la marca PRESTO PRONTA y mantener su posición de liderazgo en el mercado.
El departamento de Marketing de Arcor solicita a su equipo de diseño que, en un plazo de 30 días presente bocetos de la nueva caja.

El diseño tendrá que respetar las siguientes condiciones:

  • Respetar el actual logo tanto en la tipografía como en el color
  • Mantener el color amarillo (puede no ser el mismo amarillo), aunque puede ser en otra proporción y combinado con otros colores pertinentes.
  • En algún lugar destacado figurará un sello que diga: “gourmet”
  • La caja no tendrá ventanas transparentes
  • La imagen será dada por la cátedra, pero el estudiante podrá elegir otra que considere mejor para su propuesta. La imagen puede ser fotográfica, dibujada, grabados, etc.
  • Tendrá una receta en el dorso pero encabezada con la frase: “Una receta de Narda Lepes” y la fotito de la chef.
  • Además de la receta se conservarán las indicaciones de preparación de la polenta.
  • El resto de la información será la misma que la que hoy tiene la bolsa.
  • Se recomienda mover parte de la información a los laterales de la caja (inexistentes en el envase actual).

Marca para utilizar en el envase:

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/presto-pronta.png

Unas imágenes posibles para el envase (pueden usarse estas u otras que consideren mejores o más adecuadas a su propuesta).

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/polenta-italiana.jpg

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/descubre-todos-los-secretos-de-la-polenta-plato-tan-tipico-del-norte-de-italia.jpg

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/36739459_1854389687933381_114739505851793408_o.jpg

http://catedrabelluccia.com.ar/wp-content/uploads/2019/07/polenta.jpg

  • Jun 27 / 2019
  • Comentarios desactivados en Programa del ejercicio Web de Producto 2019
Programas

Programa del ejercicio Web de Producto 2019

1. Objetivos pedagógicos a cumplir

Que los alumnos diseñen un sitio web de una sola página, en formato continuo, para un producto real.

Se sugiere ver el siguiente sitio:

http://ibelieveinghost.com

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

2. Contenidos principales

  • Comunicación e identificación visual en la Web;
  • Secuencia de lectura, interacción, llamado de atención, 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 para computadoras;
  2. versión para móviles;

Los temas son los siguientes:

  • Accesorio deportivo, por ejemplo casco, pelota, guantes etc.
  • Herramienta eléctrica, por ejemplo taladro, sierra, amoladora, etc.
  • Electrodoméstico para la cocina, por ejemplo, batidora, licuadora, multiprocesadora, 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.

5- Condiciones de entrega

Se entregarán archivos HTML con el contenido de las dos versiones del sitio web. Se sugiere producir estos HTML en una plataforma como Invision o similar.

Sumado a esto, se deberá entregar un breve video en HD de presentación del sitio en sus dos versiones, en donde se vea el sitio aplicado tanto en la pantalla de una computadora como en un teléfono.

  • Jun 27 / 2019
  • Comentarios desactivados en Programa del ejercicio 5. Rediseño y adaptación de envase
Diseño I, Programas

Programa del ejercicio 5. Rediseño y adaptación de envase

Objetivo pedagógico
Que el alumno reformule un envase existente dado pasándolo de bolsa a caja, al tiempo que modifica sutilmente su gráfica para transformarlo en una edición especial de mayor calidad.

Contenidos principales

  • Diseño en 3 dimensiones
  • Selección y tratamiento de imágenes
  • Selección y ajuste tipográfico
  • Pertinencia estilística
  • Distribución de la información en las diferentes caras de la caja
  • Decisiones cromáticas de acuerdo a criterios funcionales, estilísticos e identitarios.
  • Llamado de atención
  • Organización y jerarquización de la información

Pedido de diseño

Se deberá rediseñar un envase de un producto económico dado de venta en paquete tipo bolsa conservando la marca y el producto pero adaptándolo a una caja de dimensiones dadas de acuerdo a un pedido específico. Además se transformará el envase del para convertirlo en una «edición especial» .

Pautas principales de evaluación

  • Comunicación: pertinencia de las decisiones del diseño: selección tipográfica, organización de la información, legibilidad, tamaño y color tipográfico de los textos, características de las imágenes, jerarquización gráfica.
  • Pertinencia estilística: ajuste al estilo adecuado al tipo de pieza, emisor y público.
  • Sintaxis: organización armónica de los elementos.
  • Calidad gráfica: armonía de la diagramación, adecuada elección y tratamiento gráfico de paletas cromática, tipográfica y de recursos gráficos, así como coherencia en las decisiones adoptadas. Adecuación a los estándares altos de calidad en envases similares.
  • Presentación: Calidad, cuidado y ajuste a la consigna de la entrega.

Presentación
El envase se presentará armado como maqueta a tamaño real.

Temas

  1. Pan rallado Preferido
  2. Fideos mostacholes Favorita
  3. Polenta Presto Pronta
Páginas:1234567...31