• Proyecto: Portafolio Digital Ignacio Silva Montes.
indice AGRADECIMIENTOS ABSTRACT ...................................................................................3 INTRODUCCIÓN...........................................................................4 • CAPITULO1 PLANTEAMIENTO DEL PROBLEMA..............................................5 PROPOSITO DEL PROYECTO........................................................6 OBJETIVOS (GENERAL-ESPECÍFICOS)...........................................7 JUSTIFICACIÓN DEL PROYECTO...................................................8 ALCANCES Y LIMITACIONES........................................................9 CUADRO DE COMUNICACÓN BÁSICA........................................11 • CAPITULO2 MARCO CONTEXTUAL................................................................12 MISIÓN, VISIÓN, OBJETIVOS • CAPITULO3 MARCO TEÓRICO........................................................................14 ETIMOLOGÍA DEL DISEÑO GRAFICO POSTURAS DE DISEÑO DISEÑO Y CIENCIA DISEÑO Y TÉCNICA DISEÑO Y OFICIO ARTE TECHNÉ CONCEPTO DE DISEÑO A PARTIR DEL OFICIO CONCEPTO DE DISEÑO GRÁFICO RETÓRICA SEMIÓTICA...................................................................16
• CAPITULO4 METODOLOGÍA DEL DISEÑO.......................................................17 TIPOGRAFÍA.................................................................19 COLOR..........................................................................20 MULTIMEDIA................................................................21 INTERFAZ......................................................................23 ANIMACIÓN.................................................................24 ILUSTRACIÓN...............................................................27 PORTAFOLIO PROFESIONAL........................................28 FUNDAMENTACIÓN DEL DISEÑO................................30 METODOLOGÍA DEL DISEÑO.......................................31 PANTALLAS FISICAS DEL INTERACTIVO.......................................33 INTRO INDEX ..........................................................................34 INDEX ILUSTRACIÓN ...................................................35 GALERÍA ILUSTRACIÓN ...............................................36 GALERÍA VIDEO ...........................................................38 GALERÍA PORTAFOLIO PROFESIONAL..........................39 PERFIL .........................................................................41 CONTACTO ..................................................................42 CONCLUSIÓN .............................................................................43 APORTES ....................................................................................44
• Proyecto: Portafolio Digital Ignacio Silva Montes.
ABSTRACT
S
urge una nueva tarea para todos los que necesitamos salir al sector laboral a ofrecer nuestros servicios como trabajadores: no basta con vivir experiencias educativas, también hay que coleccionarlas y presentarlas digitalmente. El presentar un curriculum o portafolio profesional en forma impresa esta quedando en el pasado, los avances acelerados de la Tecnología obligan a actualizarze y estar en la vanguardia para poder competir por un lugar en la sociedad laboral. Aqui en este libro te presentamos un claro ejemplo de lo que es romper paradigmas para presentar un portafolio profesional.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
INTRO
DUCCIÓN
E
n el campo del diseño, el portafolio ha sido el instrumento básico utilizado por el profesional para mostrar y acreditar su competencia ante un posible cliente. Hoy, mientras Internet se convierte en el espacio de comunicación central, la carpeta muestrario repleta de documentos evoluciona hacia un escaparate dinámico reflejo de la actividad y capacidad profesional. En este sentido, el portafolio impreso da paso a un repositorio de recursos electrónicos interconectados. Crear un portafolio digital es una de esas claves. La información que contiene el portafolio, obviamente responde a los intereses de la persona que lo crea y mantiene actualizado. El portafolio ha experimentado una metamorfosis sorprendente desde que iniciara su viaje del papel al soporte digital. Ha pasado de ser un simple muestrario de experiencias, a tener varias connotaciones potenciales Todo esto se da gracias al avance Tecnologico que a sufrido nuestra sociedad y de terminos nuevos como multimedia, web, etc. que están ocupando un lugar muy importante en nuestra vida diaria como instrumentos que facilitan las tareas.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
DEL Planteamiento
problema
L
a búsqueda de obtener ingresos en el sector laboral trae consigo la necesidad de comunicación directa entre la empresa y el trabajador. En el 90% de las entrevistas del medio laboral, los entrevistados están sujetos a cumplir parametros de orden y de estructuración para presentar apropiadamente su portafolio profesional. Las características que buscan los entrevistadores están marcadas por distintos conceptos dependiendo de la empresa solicitante del servicio, y sobre todo varían de acuerdo a la profesión de cada entrevistado, es por eso que la presentacion apropiada del portafolio es muy importante y determinante. Como ya se había mencionado, los objetivos principales de una entrevista de trabajo recaen en conseguir información directa y auténtica sobre la trayectoria profesional y personalidad del entrevistado o solicitante del puesto. Es necesario en contrastar y completar los datos de un currículum que ya es apto para ese puesto de trabajo. Se requiere averiguar la adecuación del perfil del solicitante a la empresa y al puesto ofertado. También se trata de averiguar si se tienen los conocimientos, experiencia, habilidades, actitudes y motivación necesarios para pertenecer a la empresa. El proceso de selección implica competir con personas que comparten nuestra misma profesión y que de igual forma buscan persuadir y vender sus servicios al igual que nosotros.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
PROPOSITO
DEL PROYECTO
E
l proposito del interactivo digital es dar a conocer la responsabilidad, calidad y experiencia. Este incluirá una muestra real del trabajo realizado, cerrando así el círculo de comunicación con la posible empresa en espera de su respuesta aprobatoria. Este proyecto brinda la ventaja como diseñador gráfico de mostrar mis trabajos de una forma distinta y sobre todo con el estilo que me caracteriza tomando en cuenta las reglas de usabilidad, interfaz e interactividad. Cabe mencionar que el perfil que se está proyectando es de un diseñador profesional que a experimentado en distintos rubros de la publicidad y del diseño, pero haciendo referencia a un aspecto más práctico, un aspecto en el que la Tecnica de Ilustración participe fuertemente dentro de los multiples proyectos que se necesiten resolver. Se pretende que el interactivo contenga diferentes secciones: • Galeria de trabajos • Sección de contacto • Perfil • Area de Video • Zona Interactiva Todo esto con el propósito de que el proyecto tenga mas impacto y genere mayor competitividad.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
Objetivo General.
JE TIVOS
Diseñar un portafolio animado digital que contenga la esencia de mi trabajo haciendo énfasis en el uso de la Ilustración como poderosa herramienta de representación gráfica.
Objetivos Específicos. 1.- Mostrar trabajos realizados: En primera instancia uno de los aspectos principales ya que con ello los clientes podrán conocer aspectos de mi trabajo. 2.- Mostrar experiencia laboral: La amplia parte del portafolio en el que se muestran los trabajos me da la ventaja de demostrar que tanta experiencia tengo a compararon de otros diseñadores. 3.- Crear confianza en el cliente: La basta experiencia laboral le da al cliente la confianza suficiente como para poner su empresa en mis manos. 4.- Describir la cartera de clientes: Parte de la confianza de la que hablo anteriormente esta dada a partir de la cartera de clientes, el saber con que tipo de empresas he trabado es una ventaja para mi. 5.- Proyectar un diseño diferente: Este aspecto es muy importante ya que a cada cliente se le dará una propuesta distinta y distintiva dentro de sus competencias.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
JUS TIFI CACIÓN
Justificación del Proyecto
E
l portafolio digital es una gran herramienta utilizada en el marketing puesto que suma varios recursos visuales y auditivos como el diseño, la animación, video, fotografía, etc. por ello lo he tomado como mi herramienta de presentación ante los clientes o futuros clientes, esta es una muy buena opción ya que con el le daré a mis espectadores estímulos de distintos tipos al momento de mostrar mi trabajo y de este modo es más fácil conquistarlos ya que no es un trabajo estático y sobre todo que esta hecho para ellos. Pensar, diseñar y realizar interactivos multimedia supone el entrecruzamiento de múltiples habilidades entre las que son centrales el real entendimiento de los objetivos y necesidades de nuestro cliente/proyecto y el conocimiento profundo de los destinatarios, ya que son estos dos elementos los que van a influir más fuertemente en las decisiones de diseño –instruccional, gráfico y multimedia- que debamos asumir. Este fin lo lograré gracias a las reglas de la usabilidad de los sitios web pero adecuadas al interactivo, en éste caso hay muchas reglas a seguir ya que para que se de una buena usabilidad debo contemplar los elementos gráficos del entorno que se le presenta al usuario que en este caso es el interactivo de mi portafolio de trabajos; no debo dejar de lado o el uso de la interfaz que me ayudará a que el usuario tome el control de su ordenador y por medio de él navegue mi portafolio. La interactividad es un punto muy importante a utilizar ya que gracias a ella mantendré viva la atención de mis usuarios y podrán elegir menús, dar instrucciones y obtener respuestas. De este modo ellos tendrán el control para determinada situación dentro del interactivo y dar o buscar las soluciones, lo que les hará dar forma a sus ideas o proyecciones que tenían antes de ver mi trabajo.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
ALCANCES
LIMITA L CIONES
Alcances y limitaciones. a riqueza cultural del estado de Oaxaca y sus multiples disciplinas artisticas traen consigo la variedad de estilos gráficos y visuales que caracterizan al estado. El interes por buscar nuevos caminos nos lleva a retomar elementos culturales y transformarlos para lograr un resultado agradable. Este proyecto esta dirigido a los posibles clientes que habitan en la ciudad de Oaxaca, en este sentido me refiero mas bien a los empresarios de los valles centrales y de la entidad ya que son los más cercanos a mi y que sobre todo son los que trabajan en mayor escala con sus productos ya que la mayoría de ellos envían sus productos a otros estados de la República e incluso algunos exportan sus productos al extranjero gracias a la privilegiada biodiversidad que existe en el estado de Oaxaca, asi pues confirmo que este sector de microempresarios es una excelente opción para poder entrar directamente a trabajar y brindar mis servicios profesionales de diseño, Por otro lado el interactivo también está dirigido a los entrevistadores de las empresas oaxaqueñas que en determinado caso son los que podrían aceptar mi trabajo como diseñador gráfico e ilustrador. Englobando así comercios, colegios, hoteles, restaurantes y agencias automotrices. Es así como el proyecto se transforma en la manera inmediata para competir con otros diseñadores que de igual forma buscan entrar al mercado (competencia). Es bien sabido que la ciudad de Oaxaca es muy pequeña y cuenta con una minima infraestructura en cuestión de educación, pero la proliferación de escuelas de diseño grafico crece rapidamente año con año convirtiendo esto en un factor alarmante llamado competencia.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
Me atrevo a llamarlo competencia por la gran cantidad de alumnos que egresan de estos colegios y no solo centros de alto nivel academico si no hablo de escuelas técnicas en los cuales los personajes egresados no estan aptos para resolver un problema gráfico ni tienen la capacidad de fundamentar correctamente sus objetivos. El analisis no se revisa cuidadosamente y no se investiga el origen del problema junto con los posibles resultados concluyendo de esta forma que los precios que ofrece un técnico en diseño grafico por la realización de un proyecto son mucho mas accesibles Sintetizando estas aclaraciones, con mi proyecto buscos persuadir al usuario de una forma sutil y funcional mostrando la esencia de mi trabajo como una opción para satisfacer sus necesidades y dejar claro que la publicidad no es un gasto si no una inversion. A continuación expongo de manera breve los alcances y las limitaciones de este proyecto.
Alcances.
Limitaciones.
- Tiempo. Se inicia el dia 1 de octubre y termina el dia 13 de noviembre
Quien lo hace. Es un proyecto meramente personal. Quien lo financía. Es financiado totalmente por un servidor Etapas del proyecto. Las etapas de cualquier producto o servicio constan de varias fases como lo son la etapa de lanzamiento, reconocimiento, y mantenimiento.
- Donde. El proyecto se realizará y se expondra dentro de la ciudad de Oaxaca como paso inicial, y su difusión sera personal y directamente con el cliente -Como. La creación de este proyecto se integra de la parte de logistica y la tecnica. La parte logistica consta de investigación y fundamentación para respaldar el proyecto presentado, la parte tecnica es finalmente maquetar el interactivo apoyandonos de herramientas como lo son la computadora y los softwares ademas de muchas horas frente a un monitor.
•En este caso la etapa de lanzamiento sería que los clientes tuvieran en sus manos el disco interactivo, •Etapa de reconocimiento es ser vistos por los clientes y causar interes. •Etapa de mantenimiento es no perder contacto alguno con el cliente y perseverar hasta conseguir una respuesta favorable, claro obtenida de la experimentacion y navegacion del interactivo logrando asi la retroalimentación del mensaje.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
CUADRO DE COMUNICACION
BASICA E
l marco teórico, marco referencial o marco conceptual tiene el propósito de dar a la investigación un sistema coordinado y coherente de conceptos y proposiciones que permitan abordar el problema. “Se trata de integrar al problema dentro de un ámbito donde éste cobre sentido, incorporando los conocimientos previos relativos al mismo y ordenándolos de modo tal que resulten útil a nuestra tarea”.
En el marco teórico abordaremos la informacion mas relevante para poder lograr el objetivo de la investigacion y asi obtener el resultado. Conocer a quien va dirigido y en donde se aplicará y entregará este producto es parte de este paso de la investigacion.
• Referente: Los referentes en este caso son varios, diseño gráfico, usabilidad, interfaz, interactividad, páginas web, etc. • Emisor: Ignacio silva montes • Mensaje: Mostrar las caracteristicas profesionales de mi trabajo • Usuario: Comercios y empresarios de la ciudad. • Objeto de diseño: La digitalización de un portafolio animado e interactivo • Signos y Códigos: Los signos y los codigos son elementos que estan cargados de mensajes y cumplen su funcion en el momento en el que son utilizados. • Medios y Recursos: La metodología y la investigación forman parte de la sección objetiva del caso, ademas del uso de herramientas tangibles como lo son: Computadora, Scanner, Tableta de dibujo y sofwares que faciliten el resultado.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
Marco Contextual.
Y
a con los datos obtenidos nos disponemos a realizar el interactivo digital que en realidad es mi portafolio personal que contiene los elementos necesarios para darme a conocer con los clientes. Y consta de todos los elementos de diseño que se aplican para darle funcionalidad a la navegación. Estos aspectos son muy parecidos a los que debe llevar una pagina web pero reiteramos que este proyecto es un interactivo digital. Estos elementos son principios de usabilidad, interfaz amigable, colores y tipografia de acuerdo al estilo que se esta manejando. La maquetación del proyecto esta basado en softwares de diseño que cumplen distinta función desde programas vectoriales hasta programas de manipulación fotografica, en este interactivo hay algo especial ya que las ilustraciones que ahí se exponen estan realizadas de forma manual por medio de tableta de dibujo. Con esto intento dar a conocer y causar interes en el usuario de observar con detenimiento las ilustraciones, las piezas gráficas y audivisualesque aparecen y asi recibir una respuesta favorable.
Misión: Ignacio Silva como diseñador grafico egresado de la Universidad Mesoamericana en el año 2006 con amplia experiencia laboral y en busqueda de ampliar su campo de trabajo. Se lanza en la busqueda de ampliar sus servicios a otros sectores de la población oaxaqueña y se compromete a retomar las inquietudes de los clientes que soliciten sus servicios actuando de manera profesional.
Visión: Ser la mejor opción en cuanto a estrategia y diseño grafico para los clientes y en un lapso de 5 años ampliar sus servicios a mas lugares y hacer crecer su despacho de diseño gráfico y planeación.
Objetivos: De manera diferente y profesional resolver problemas graficos enfocados a cualquier necesidad ayudandose de técnicas argumentativas de diseño.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
13
1. ETIMOLOGÍA DEL DISEÑO GRÁFICO. Diseño proviene de la palabra DISEGNO, desde una etimología italiana, de ahí, diseño significa: otorgar, dar o asignar. Mientras que partiendo de la palabra design significa: signo Entonces decimos que diseño gráfico significa: Otorgar o dar un significado a un signo de una forma clara, explícita o evidente. “Francisco Calles”
2. POSTURAS DE DISEÑO
respuesta parece ser el domimio del lenguaje visual al que el autor toma como “base de la creación del diseño”. Por lo anterior, la técnica se entiende como el dominio de la forma, la repetición las estructuras, las similitudes, la gradación, etcétera”2.
5. DISEÑO Y OFICIO. Norberto Chavez define al diseño gráfico como un oficio, por la práctica llevada a cabo con el tiempo. El que conoce o realiza un oficio es aquel que conoce a la perfección su trabajo.
6. ARTE TECHNÉ.
El diseño se divide en 4 posturas:
2.1.DISEÑO DE INSPIRACIÓN. Es aquel que es meramente artístico, sin llevar a cabo una teoría. 2.2.DISEÑO CON CULTO AL OBJETO. Se refiere a lo que se fabrica con fines lucrativos 2.3.DISEÑO FUNCIONALISTA. Es meramente funcionalista, minimalista, deriva del sistema “SAFE” es simple, auténtico, funcional y económico. 2.4.DISEÑO SIMBÓLICO/FUNCIONAL. Se vuelve único toma su propia autenticidad y se vuelve funcional.
3. DISEÑO Y CIENCIA. “Si el diseño gráfico pudiera categorizarse como un quehacer, debería cumplir con ciertos requisitos, el primero de los cuales fuera una práctica encaminada a encontrar cierto tipo de verdades. Ningún diseñador se ocupa de la búsqueda de verdades ni del avance del conocimientocuando intenta resolver un problema de diseño gráfico, lo cual dista de suponer que éste sea por si mismo una práctica científica.”1 El diseño no es una ciencia, ya que la ciencia está en busca de una verdad, y el diseño no busca una verdad. “Richard Buchana”
4. DISEÑO Y TÉCNICA. “En varios paises de Europa, la enseñanza del diseño gráfico se imparte en institutos y escuelas técnicas, mientras que en algunos otros lugares del mismo continente o de América se da en las universidades. Pero ¿qué significa técnica en el contexto de la enseñanza del diseño gráfico? Volviendo a Wong (1992: 9), la 1 Esqueda Román. El juego del diseño. E. Asociacón de Escuelas de Diseño Gráfico A.C. México. PP 18 2 Esqueda Román. El juego del diseño. E. Asociacón de Escuelas de Diseño Gráfico A.C. México. PP 18 3 Beristáin, Helena. Diccionario de retórica y poética. Porrúa, 8va. edición, México 1998. p. 426.
Es un saber basado en el conocimiento de causa. Se obtiene a partir de la experiencia, de la sistematización teórica sobre dicha experiencia y de la facultad de utilizar la teoría en la solución de un problema específico. La techné, no solo permite la comunicabilidad de la experiencia propia, sino también la posibilidad de elaborar un plan. Esto es, quien posee el arte puede elaborar planes y estratégias para dirigir las acciones.
7. CONCEPTO DE DISEÑO A PARTIR DEL OFICIO. Es un arte industrial contemporáneo cuya característica principal es la premeditación de todas las características formales y funcionales de un producto a partir de una intención, sirviendo como medio entre un cliente o empresa y el usuario final. Así también el diseño tiene la función de satisfacer necesidades de uso práctico y simbólicas dentro de situaciones y contextos particulares, convirtiéndose en una acción social y cultural.
8. CONCEPTO DE DISEÑO GRÁFICO. Es un arte u oficio que surge a partir de las necesidades de producción industrial y requiere establecer previamente todas las características formales y funcionales de un producto a partir de una intención. Este tipo de diseño tiene la función de satisfacer necesidades de comunicación persuasiva dentro de contextos y situaciones, partiendo de un discurso lingüístico y generando un discurso visual construido por componentes figurativos, plásticos y tipográficos en un formato bidimensional.
9. RETÓRICA. Según Helena Beristáin, la retórica es: “El arte de eleaborar discursos gramaticalmente correctos, elegantes y, sobre todo persuasivos. Arte de extraer, especulativamente, de cualquier asunto cotidiano de opinión, una construcción de carácter suasorio relacionada con la justicia de una causa, con la cohesión deseable entre los miembros de una comunidad y con lo relativo a un destino”3
• Proyecto: Portafolio Digital Ignacio Silva Montes.
El arte de persuadir, va dejando de ser un arte abandonado a la improvisación y al sentimentalismo, para volverse un objeto de estudio serio, como lo fue en la antigüedad, en la edad media y el renacimiento. Pero ahora se estudia con nuevos instrumentos tomados de la semiótica y la filosofía. Estos son la pragmática y la hermenéutica. Implica toda pragmática y hermenéutica del discurso.
Informacion Directa
“Es el arte de crear argumentos plausibles, que no verdaderos, pronunciados de forma elocuente, para convencer o persuadir a auditorios particulares”4.
10. SEMIÓTICA
E
s la ciencia que estudia el significado de toda una gama de elementos visuales gráficos, intencionales o no en la transmisión de su mensaje y que son captados por los intérpretes de forma directa o indirecta. El objetivo de la semiótica es el estudio de todos los sistemas de signos, que en forma espontánea o intencional nos envían mensajes visuales. Como información visual se entiende todo aquello que capta nuestra vista, todo lo que nuestros ojos ven son emisiones potenciales de mensajes, la comunicación que se establece visualmente está dividida en 2 grupos: intencional y casual. La comunicación de tipo casual es la que no lleva ninguna intención, aparece frente a nosotros y nos da un mensaje de manera natural, como bien dice su nombre sucede casualmente. La comunicación intencional forma parte de la semiótica de los gráficos, ya que de alguna manera el mensaje es emitido con un propósito e influye en la conducta de quienes la observan. El estudio de la conducta semiótica establece 3 campos de investigación: a) Información directa: Esta información se produce cuando hay un intercambio de información del mismo tipo, como cuando hablamos por teléfono, ya que la otra persona está realizando la misma acción que uno. b) Información unilateral: Su nombre bien lo dice, ya que uni es en un solo sentido y este tipo de información se envía sin que recibamos respuesta, como es el caso de la televisión. c) Información inocua: Este tipo de información es cuando el mensaje es subjetivo, y no se sabe que significado le vaya a dar cada individuo, solo depende de las características socioculturales de las personas que reciben el mensaje, como es el caso de las obras de arte, en donde cada quien tiene su propio criterio.
Informacion Unilateral
Informacion Inocua
4 Rivera Díaz Luis Antonio. La Retórica. Encuadre. Asociación de Escuelas de Diseño Gráfico. México p. 22 De la Torre y Rizo Guillermo. ED. Limusa. El lenguaje de los símbolos gráficos.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
Medida. Todas la formas tiene un tamaño. El tamaño es relativo si lo describimos en términos de magnitud y de pequeñez, pero asimismo es físicamente mesurable.
11.Elementos de Diseño. Se distinguen cuatro grupos de elementos:
Elementos conceptuales. Elementos visuales. Elementos de relación. Elementos prácticos.
11.1 Elementos conceptuales. Punto. Un punto indica posición, no tiene largo ni ancho. No ocupa una zona del espacio. Es el principio y el fin de una línea, y es donde dos líneas se encuentran o se cruzan. Línea. Cuando un punto se mueve, su recorrido se transforma en una línea. La línea tiene largo, pero no ancho. Tiene posición y dirección. Está limitada por puntos. Forma los bordes de un plano. Plano. El recorrido de una línea en movimiento (en una dirección distinta a la suya intrínseca) se convierte en un plano. Un plano tiene largo y ancho pero no grosor. Tiene posición y dirección. Está limitado por líneas. Define los límites extremos de un volumen. Volumen. El recorrido de un plano en movimiento (en una dirección distinta a la suya intrínseca) se convierte en un volumen. Tiene una posición en el espacio y está limitado por planos. En un diseño bidimensional, el volumen es ilusorio. 11.2 Elementos visuales. Forma. Todo lo que pueda ser visto posee una forma que aporta la identificación principal de nuestra percepción.
Color. Una forma se distingue de sus cercanías por medio del color. El color se utiliza en su sentido amplio, comprendiendo no sólo los del espectro solar sino así mismo los neutros (blanco, negro, los grises intermedios) y asimismo sus variaciones tonales y cromáticas. Textura. La textura se refiere a las cercanías en la superficie de una forma. Puede ser plana o decorada, suave o rugosa, y puede atraer tanto al sentido del tacto como a la vista. 11.3 Elementos de relación. Dirección. La dirección de una forma depende de cómo esta relacionada con el observador, con el marco que la contiene o con otras formas cercanas. Posición. La posición de una forma es juzgada por su relación respecto a la estructura del diseño. Espacio. Las formas de cualquier tamaño, por pequeñas que sean, ocupan un espacio. As, el espacio puede estar ocupado o vacío. Puede asimismo ser liso o puede ser ilusorio, para sugerir una profundidad. Gravedad. La sensación de gravedad no es visual sino psicológica. Tal como somos atraídos por la gravedad de la tierra, tenemos tendencia a atribuir pesantez o liviandad, a formas, o grupos de formas, individuales. 11.4 Elementos prácticos. Estructura. La estructura, por regla general, impone un orden y predetermina las relaciones internas de las formas en un diseño.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
Similitud. La similitud no tiene la estricta regularidad de la repetición, pero mantiene un grado considerable la sensación de regularidad. Gradación. La gradación es una disciplina más estricta. Exige no sólo un cambio gradual, sino que ese cambio gradual sea hecho de manera ordenada. Genera ilusión optica y crea una sensación de progresión, lo que normalmente conduce a una culminación o una serie de culminaciones. Radiación. La radiación puede ser descrita como un caso especial de la repetición. Los módulos repetidos o las subdivisiones estructurales que giran regularmente alrededor de un centro común producen un efecto de radiación. Anomalía. La anomalía es la presencia de la irregularidad en un diseño en le cual aún prevalece la regularidad. A veces la anomalía es sólo un elemento regular dentro de una organización uniforme. Contraste. El contraste ocurre siempre, aunque su presencia pueda no ser advertida. Existe el contraste cuando una forma esta rodeada de un espacio blanco. Hay un contraste cuando una línea recta se cruza con una curva. Concentración. La concentración se refiere a una manera de la distribución de los módulos, que pueden estar apretadamente reunidos en ciertas zonas del diseño o levemente repartidos en otras. La distribución es habitualmente dispareja e informal, a veces con un sitio de reunión densa o de distribución tenue que se convierte en el centro de interés. Textura. La textura se refiere a las características de superficie de una figura. Espacio. La naturaleza del espacio es muy compleja, debido a que existen muchas maneras de verlo. El espacio puede ser positivo o negativo, liso o ilusorio, ambiguo o conflictivo.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
12. TIPOGRAFIA La palabra tipografía viene del griego typos (sello, marchamo) y de graphein (escribir) en 1929 Stanley Morison nos legó la siguiente definición: “Arte de disponer correctamente el material de imprimir, de acuerdo con un propósito específico: colocar las letras, repartir el espacio y organizar los tipos con vistas a prestar al lector la máxima ayuda para comprensión del texto. Podemos ver que esta definición fue realizada en 1929 para esta época no se había inventado la fotocomposición ni mucho menos la computadora.” Ahora veamos la definición que nos da Philip B Meggs en su libro Historia del Diseño Gráfico: “Término para impresión mediante el uso de piezas de metal independiente, móviles y reutilizables, cada una de las cuales tiene la forma de una letra realzada en la parte superior.” Con estas dos definiciones, podemos ver que el término tipografía se le daba en tiempo antes de la computadora y fotocomposición, a aquellos tipos metálicos reutilizables y que aún existen en algunas imprentas de México y en el mundo (escuela de diseño post anterior), este medio de impresión prevaleció desde su reinvención con Gutenberg hasta la invención de las fuentes y letras digitales. Los términos de fuente y tipo tienden a confundirse usándolos como sinónimos; en la época de los tipos de metal su significado era diferente, para esto cito a Phil Baines / Andrew Haslam donde en su libro: Tipografía, función, forma y diseño; nos definen tipo, fuente y carácter:
Tipo: Objeto físico, un bloque paralelepipédico de metal (aleación tipográfi ca) que tiene en su cara superior en relieve e invertida, la imagen de una letra o signo para la impresión por sistema tipográfico.
Fuente: es un conjunto o surtido completo de letras, signos y blancos tipo gráficos de una clase o tipo determinados, en su tamaño o estilo concreto, “Se llama fuente al conjunto completo de caracteres que componen un estilo de tipo determinado.”5
5 Solomón Martín.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
13. COLOR
Modelo RGB.
El color es un atributo que percibimos de los objetos cuando hay luz. La luz es constituida por ondas electromagnéticas que se propagan a unos 300.000 kilómetros por segundo. Esto significa que nuestros ojos reaccionan a la incidencia de la energía y no a la materia en sí.
Este espacio de color es el formado por los colores primarios luz que ya se describieron con anterioridad. Es el adecuado para representar imágenes que serán mostradas en monitores de computadora o que serán impresas en impresoras de papel fotográfico. Las imágenes RGB utilizan tres colores para reproducir en pantalla hasta 16,7 millones de colores. RGB es el modo por defecto para las imágenes de Photoshop. Los monitores de ordenador muestran siempre los colores con el modelo RGB. Esto significa que al trabajar con modos de color diferentes, como CMYK, Photoshop convierte temporalmente los datos a RGB para su visualización.
Las ondas forman, según su longitud de onda, distintos tipos de luz, como infrarroja, visible, ultravioleta o blanca. Las ondas visibles son aquellas cuya longitud de onda está comprendida entre los 380 y 770 nanómetros. Los objetos devuelven la luz que no absorben hacia su entorno. Nuestro campo visual interpreta estas radiaciones electromagnéticas que el entorno emite o refleja, como la palabra “COLOR” .
El modo RGB asigna un valor de intensidad a cada píxel que oscile entre 0 (negro) y 255 (blanco) para cada uno de los componentes RGB de una imagen en color. Por ejemplo, un color rojo brillante podría tener un valor R de 246, un valor G de 20 y un valor B de 50. El rojo más brillante que se puede conseguir es el R: 255, G: 0, B: 0. Cuando los valores de los tres componentes son idénticos, se obtiene un matiz de gris. Si el valor de todos los componentes es de 255, el resultado será blanco puro y será negro puro si todos los componentes tienen un valor 0. Este espacio de color tiene su representación en el selector de color de PhotoshoP.
Modo de color CMYK El modelo CMYK se basa en la cualidad de absorber y rechazar luz de los objetos. Si un objeto es rojo esto significa que el mismo absorbe todas las componentes de la luz exceptuando la componente roja. Los colores sustractivos (CMY) y los aditivos (RGB) son colores complementarios. Cada par de colores sustractivos crea un color aditivo y viceversa. En las imágenes CMYK, el blanco puro se genera si los cuatro componentes tienen valores del 0%. Se utiliza el modo CMYK en la preparación de imágenes que se van a imprimir en cualquier sistema de impresión de tintas. Aunque CMYK es un modelo de color estándar, puede variar el rango exacto de los colores representados, dependiendo de la imprenta y las condiciones de impresión.
CÓDIGO RGB El código de colores RGB, rojo - verde - azul, se basa en la mezcla de estos 3 colores para conseguir toda la gama completa. Cada uno de los colores toma un valor entre 0 y 255, un total de 256, con los que se consigue un total de 256 x 256 x 256 = 16.777.216 colores distintos. http://www.fotonostra.com/grafico/teoriacolor.htm
• Proyecto: Portafolio Digital Ignacio Silva Montes.
14. MULTIMEDIA
E
l concepto de multimedia ha ido evolucionando a través del tiempo. Al principio se trataba de la simple sumatoria de medios distintos: textos, sonidos e imágenes - animaciones, videos, gráficos, ilustraciones, fotos- en todas sus posibles combinaciones. Podía tratarse de texto y música, ilustraciones con sonido, textos con animaciones y sonido. Sin embargo hoy en día muchas veces se usa multimedia para referirse al, más acertadamente denominado, multimedia interactivo. La suma de medios multiplica sus efectos gracias a la introducción de la interactividad. Y qué es interactividad en este contexto? Existen diversas definiciones pero que podríamos esquematizar en dos. Aquellas que ponen el acento en el programa multimedia, y las que lo hacen en el usuario. Creemos que la verdadera dimensión de la interactividad solo puede abarcarse tomando ambas definiciones como válidas y complementarias. En el primer caso, definimos la interactividad como la demanda de acción que efectúa el producto multimedia al usuario. Esta acción/reacción puede tener distintos medios de expresión: tocar la pantalla, entrar texto en un determinado campo, realizar determinadas manipulaciones usando el mouse –click, doble click, arrastrar y tirar, etc. Desde el punto de vista del usuario, interactividad es la cantidad de control que éste tiene sobre los contenidos. Esta definición alude a los grados de interactividad que puede tener el producto. El más bajo de estos niveles de interactividad es el agotado y agotador recurso de teclear una y otra vez enter –lo que algunos, con indudable gracia, han dado en llamar enteractividad. La verdadera interactividad, en cambio, implica una modificación en la propia estructura del “relato” multimedia: se pasa de una presentación linear donde todo el control es del autor a la multilinearidad donde el control es del usuario. El usuario es así el dueño de la secuencia y del tiempo dedicado al contenido. 6 Lynch Patrick J. Principios de diseño básicos para la creación de sitios web. España p .137 • Proyecto: Portafolio Digital Ignacio Silva Montes.
Cuánto más alto el grado de interactividad mayor es la complejidad del producto y por lo tanto exige mayor tiempo de desarrollo y tiene un más alto costo. Es por ello que el grado de interactividad a utilizar debe seleccionarse meditadamente de acuerdo a los objetivos del proyecto. Esto no quiere decir que cuanto más alto el grado de interactividad mejor el producto, sino que este nivel debe ser adecuado y suficiente. El multimedia interactivo implica un diálogo entre el usuario y los contenidos, ya que es este grado de actividad lo que va a hacerlo aprender y retener más rápido aquello que nos proponemos.6 14.1 Usuario. Es un usuario el individuo que utiliza o trabaja con algún objeto o dispositivo o que usa algún servicio en particular. Para la informática es un usuario aquella persona que utiliza un dispositivo o un ordenador y realiza múltiples operaciones con distintos propósitos. A menudo es un usuario aquel que adquiere una computadora o dispositivo electrónico y que lo emplea para comunicarse con otros usuarios, generar contenido y documentos, utilizar software de diverso tipo y muchas otras acciones posibles. 14.2 Usabilidad. Uso de técnicas, recomendaciones y consideraciones para crear sistemas fáciles de entender y utilizar inmediatamente. La usabilidad hace todo fácil, excepto el trabajo de los diseñadores, la usabilidad no es fácil, su aplicación requiere de uncambio en el proceso de desarrollo, requiere de un nuevo método de pensar acerca de un proyecto desde que inicia hasta que termina. La Organización Internacional para la Estandarización (ISO) dispone de dos definiciones de usabilidad: ISO/IEC 9126: “La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso” ISO/IEC 9241: “Usabilidad es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico”
• Proyecto: Portafolio Digital Ignacio Silva Montes.
15. INTERFAZ 15.1 Interfaz. La interfaz de usuario es el vínculo entre el usuario y el programa de computadora. Una interfaz es un conjunto de comandos o menúes a través de los cuales el usuario se comunica con el programa. La interfaz representa el punto de encuentro entre el usuario y la computadora. En esta interacción, el usuario juzga la utilidad de la interfaz; el hardware y el software se convierten en simples herramientas sobre los cuales fue construida la interfaz. El usuario de un documento web, nos sólo busca información, sino que de él espera la posibilidad de interacción de manera novedosa y sin precedentes en el diseño de documentos en papel. La Interfaz Gráfica de Usuario en un sistema informático incorpora: ágiles metáforas para la interacción, uso de imágenes y conceptos para transmitir funciones y significados a la pantalla del ordenador, características visuales detalladas de cada uno de los elementos de la interfaz gráfica y la secuencia funcional de interacciones. El componente gráfico es un aspecto fundamental en la experiencia del usuario con el sitio. En documentos interactivos, es imposible poder separar totalmente el diseño gráfico de la definición y construcción de la interfaz. La interfaz grafica de usuario fue creada para proporcionar al público un control directo sobre sus ordenadores personales. Hoy, el usuario espera de ellas un alto nivel de sofisticación en su diseño. Las páginas web no son más que un tipo de GUI(Graphic User Intergace). El objetivo es satisfacer las necesidades de todo usuario potencial, adaptando la tecnología web a sus expectativas, sin importar nunca al usuario una interfaz que obstaculice sus intenciones. En el estado actual de tecnología web la mayor parte de las interacciones del usuario con la web implican el uso de enlaces de hipertexto para la navegación entre documentos. El principal problema de interfaz, en sitios web es la pérdida del sentido de orientación dentro de la organización local de la información. Íconos consistentes y claros, diagramas gráficos de identidad y pantallas con mapas de conjunto o índices pueden proporcionar al usuario la confianza necesaria en encontrar, sin una excesiva perdida de tiempo, lo que busca. El usuario debe poder retornar siempre a la pagina principal y a otros puntos de navegación importantes de la web. Estos enlaces básicos, que deberían estar presentes en cada una de las páginas, se plasman generalmente en el uso de gráficos como botones que, al tiempo que proporcionan una navegación básica con sus enlaces, pueden ayudar a crear la imagen gráfica o corporativa que indique al usuario donde se encuentra.
“Interactividad hombre- máquina”. Ilustración de Ignacio Silva. (Serie “Patrones para texturizar”)
15.2 Interactividad. Interactividad es la capacidad del receptor para controlar un mensaje no-lineal hasta el grado establecido por el emisor, dentro de los límites del medio de comunicación asincrónico La interactividad que poseen las nuevas tecnologías de la información y comunicación está permitiendo que el control de la comunicación, que en los medios tradicionales está situado en el emisor, se esté desplazando hacia el receptor, que determinará tanto el tiempo como la modalidad de uso. Con ello el receptor desempeñará un papel importante en la construcción de su mensaje, así como, a su vez, el de transmisor de mensajes”
• Proyecto: Portafolio Digital Ignacio Silva Montes.
Ó
CI A IM
16. ANIMACIÓN
AN
16.1. Definición de Animación Animación se refiere al proceso de generación de imágenes donde cada imagen es una alteración de la anterior. La presentación de estas imágenes a una velocidad suficiente produce la sensación de movimiento. La animación no es únicamente sinónimo de movimiento en el espacio, en realidad se trata de un concepto más amplio, ya que además, debe cubrir todos los cambios que producen un efecto visual, incluyendo la situación en el tiempo, la forma, el color, la transparencia, la estructura, la textura de un objeto, los cambios de luz, la posición de la cámara, la orientación, el enfoque, e incluso la técnica de presentación. Según esta definición las imágenes capturadas por un vídeo también constituirían una animación. Lo que distingue a la animación de las técnicas de adquisición de imágenes en movimiento, es que en la animación los fotogramas son generados uno a uno, bien por métodos tradicionales de dibujado o bien generando las imágenes en un computador. 16.2. Definición de Animación Computarizada Animación Computarizada es el conjunto de técnicas que emplean el computador para la generación de escenas que produzcan la sensación de movimiento. • En este tipo de animación el computador es una pieza clave, no una herramienta más en la que apoyarnos. • Consiste en la definición de los modelos y escenarios (normalmente 3D) y obtener una serie de imágenes variando parámetros para producir la animación. • Todo el proceso se realiza a través del computador y controlado por él. • La flexibilidad radica en la posibilidad de modificación que tenemos. • El computador es insustituible debido a la capacidad de trabajo con objetos tridimensionales de manera rápida y efectiva. La Animación Computarizada en grandes rasgos se divide en: • Animación Computarizada Bidimensional (2D). • Animación Computarizada Tridimensional (3D).
• Proyecto: Portafolio Digital Ignacio Silva Montes.
D
2 N E N
gan splie se de decir e u q s os s, e ment sione ta ele os dimen ricaturas. n e s epre as de d n las ca ICIÓN que r ad tra DEFIN nimación coorden goría en e e a t d a a an en l N 2D c a Es stem . En esta ÓN E s) se grab ad alta. I i s C A n NIM (frame ocid en u el plano s DE A a vel ALES s o marco ctan a un sobre N O I IC ro ye TRAD los cuad y se pro s ICAS la TÉCN as técnica na pelícu : n t ciou tradi En es amas de cnicas so é r ados mágenes t g s m o i e t l n a fo os a an las i rincip dibuj e un re Las p ave da en los xpertos c io o fin d quipo l C s a c e i a le z m n s i i e l a e i r d as de notog ujant ca ut esto Por F s la técni cnica, dib es como l mas, el r proceso I ( l a e é r a t n a t g t a a o t s E st ec ión tos fot . En e imac s s con nales e una an artir de e as que lo d p m clave iento. A fotogra no e m el, si movi la serie d e pap al r b a j o s u an dib ening). odo uesta dibuj e ) ste m p betw ation mas no se ato, de e ena com Esta m i n c t . A s a e r l e c t g e a a n o C t ( e n ie e ramas tes d ver u apas los fo pend Por C a técnica ransparen se puede odo inde por Fotog r t t s En es películas s de ella ados de m nimación e reutiliza rtes. a a t ia sobre oner var ajes anim na con la as: Permi ción de p i n j p a t r o b a t s e o l r m n p p e co p ve su ex ntes arios do se te la por v a a menu las siguie n, permi ó c a i i t n los no técn y presen a animac l ón so e maci personaj rtes Clave o, facilita i n a j a en ueve un e las pa d a traba z i l t uti e m plemen viaente es a pre ndo s ecort comúnm que cua , sino sim se estudi van a R r o o a o a P t c a c rtes n por gnifi form técni mple Otra es. Esto si ar por co . De esta n qué pa animan e las a j e d t n s n u r i a b e y o es l ante rec erm ibujan a di se mont e det elve d ortes st se vu s y luego ación y s ales, y se n con rec ajarse ba de i ó b m le i ón i i c a i c r v n r c a a t ó a a p m cada mientos e la anim ener que de anim e t n t plo me ovi blema d suelen ejem ar m realiz do. El pro ezas, que asía. Un ons. s a i m r sepa s entre p ote en de The Simp e s n union ue no se populare q s para po son lo ti este
16.3. Técnicas digitales de animación en 2D Las técnicas de animación tradicional como la de fotogramas tienen su correspondiente en el mundo digital, así por ejemplo, una vez que se generan los fotogramas de una película se pueden montar utilizando una aplicación como QuickTime. El Objetivo es liberar al dibujante de las actividades más tediosas, pues el computador sustituye al dibujante en tareas como: Creación de cuadros, Proceso In-betweening, Movimiento a lo largo de Trayectorias. Para el caso de creación de cuadros se facilita el empleo de editores gráficos; escanear bocetos, retocarlos y colorearlos; guardar personajes, recuperarlos y modificarlos (librerías de personajes); superponer objetos para la animación por capas; etcétera. Además de estas existen otras técnicas específicas al mundo digital 2D, aquí se exponen las más comunes. • Fotograma a Fotograma La animación por fotogramas se llama también animación a toda pantalla, animación por páginas o animación iterativa. El programa de animación dibuja una serie de imágenes a toda pantalla y guarda cada imagen en un buffer de página diferente. Después de que todas las páginas han sido inicializadas, una rutina distinta del programa pasa por las páginas en la secrear animación.*
• Por Sprites Un sprite es una instantánea de un actor en movimiento. La animación por sprites consiste en mostrar, de modo sucesivo, todos los sprites, con ellos se consigue la sensación de movimiento. Un sprite pude ser estático, como las mascotas de ayuda de Windows por ejemplo, o bien desplazarse a medida que se mueve. Un mismo sprite puede tener varios patrones de movimiento, por ejemplo un sprite que represente un actor humano puede contener secuencias de movimiento para desplazarse, saltar, agacharse, etcétera, cada una de las cuales se activa en el momento adecuado. Esta técnica fue ampliamente utilizada en los primeros juegos por ordenador. Esta animación es extremadamente rápida, dado que se manipula una pequeña porción de la pantalla. La imagen a animar se almacena en RAM usando una instrucción llamada getimage. Luego la imagen es situada en diferentes posiciones de la pantalla mediante la instrucción putimage, creando de esta manera la simulación del movimiento.
* “Ninja Fight”. Animación Frame by Frame. (Ignacio Silva Montes”)
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• De Gráficos Vectoriales Si en su lugar de utilizar gráficos de tipo mapa de bits, como los sprites, se utilizan gráficos vectoriales, que como sabemos son descripciones matemáticas de líneas, superficies, etcétera, se estará utilizando la animación por vectores. Es menos realista que la animación por sprites y, si se quiere alcanzar el mismo realismo es mucho más costosa de generar automáticamente. La ventaja es que suele ocupar bastante menos espacio además de poderse escalar sin problemas. Es por ello muy utilizada en Internet. La herramienta Flash de Macromedia es un ejemplo de programa especializado en este tipo de animación.
Animación http://www4.uji.es/~belfern/IS34/MultimediaEnWeb/tema9/hojaat9.htm 3D y Animación http://www.3dyanimacion.com Animación http://www.infor.uva.es/~descuder/docencia/multim/
• Por Trayectoria En la animación por trayectoria (path-based animation) a la vez que cambia, o manteniéndose el mismo gráfico, el objeto puede desplazarse por la pantalla. El software actual permite a los animadores desplazar visualmente los objetos por la pantalla, definiendo los puntos iniciales y finales del movimiento, marcando con ello líneas rectas o curvas imaginarias que son las que determinan el camino (path) por el que se desplazará el sprite. También se suele hablar por esto de control de movimiento (motion control). En los programas especializados se permite un control muy fino sobre aspectos del camino, como aceleración o trayectorias complejas. En realidad toda animación por trayectoria se resume en dos aspectos: el camino a seguir y el tiempo de desplazamiento sobre ese camino. Para identificar cómo se realiza esta animación en el tiempo, los programas de creación de animaciones utilizan una línea de tiempos (timeline) en la que se indican los distintos fotogramas que irán ocurriendo al reproducirse. Para marcar los movimientos se determinan libremente fotogramas clave (keyframes), que son en los que fijan las posiciones clave de los sprites. Entre dos keyframes es el programa el que por interpolación anima el objeto a lo largo del camino marcado, creando los fotogramas intermedios (los In-between frames). Los keyframes establecen los puntos principales de la animación y son siempre, al menos, el inicial y el final.*
• Proyecto: Portafolio Digital Ignacio Silva Montes.
* Animación: “Proyecto de Titulación profesional” zMarketing Diseño. Ignacio SIlva Montes
17. ILUSTRACIÓN.
17.2. Caricatura
La ilustración es una forma artística que incorpora elementos, técnicas y valores del dibujo y la pintura para ilustrar temas, conceptos o situaciones específicas, además de su naturaleza y valores expresivos y/o abstractos, que se le confieren como profesión y disciplina del arte. La ilustración tiene una aplicación comercial mucho mayor que el dibujo o la pintura, debido a la rapidez de su realización y por el estándar de complejidad y calidad con que normalmente se realiza.7
La caricatura es la distorsión o la exageración de los rasgos más llamativos de una persona: debe preservarse el parecido con el modelo, pero nuestra percepción del individuo se transforma. La palabra “caricatura” deriva del italiamo, caricare, que significa “recargar”. La técnica emplea la fisonomía, pues atiende a aquellos rasgos faciales o expresiones que indicanla personalidad o el caracter de la persona, su humor y su estadode ánimo. 9
17.1. Ilustración Digital El momento determinante en el nacimiento de la ilustración digital es a finales de los años ochenta, cuando la compañía Adobe Sistems implementa el uso del formato Postscrip como base de los sistemas de Autoedición o “edición de escritorio”, un formato que traslada y traduce los pixeles y vectores en puntos de impresión. De tal forma que, a partir del desarrollo de software como Illustrator, Photoshop y Pagemaker y la adopción de los mismos junto con el Postscrip por parte de la plataforma Macintosh de Apple, la autoedición se convierte en el eje fundamental de toda la nueva industria editorial que desarrolla sus contenidos impresos y procedimientos industriales a partir del uso de dichos nuevos estándares.8 La ilustración digital es una consecuencia de dichos eventos, a partir de la aparición de los software de retoque y edición digital y de generación de imágenes, la ilustración a través de dichos medios se empieza a convertir en una constante alterna que fortalece el uso de las computadoras como herramientas de trabajo y para el artista, convirtiéndolas en elementos indispensables en el desempeño de la gran mayoría de los profesionales gráficos de la actualidad.8
7 Hewark Quentin. ¿Que es el diseño Gráfico? Manual de Diseño. Ediciones G. Gilli. S.A. de C.V. México p. 22 8 http://sketchcolor.blogspot.com/2007/09/cuestionario-de-ilustracin.html 9 Wigam Mark. Eureka-Pensamiento visual. lenguaje ideas y técnicas para el ilustrador. Ediciones G. Gilli S.A de C.V Barcelona 2007 p61
• Proyecto: Portafolio Digital Ignacio Silva Montes.
17. PORTAFOLIO PROFESIONAL En el campo del diseño, el portafolio ha sido el instrumento básico utilizado por el profesional para mostrar y acreditar su competencia ante un posible cliente. Hoy, mientras Internet se convierte en el espacio de comunicación central, la carpeta muestrario repleta de documentos evoluciona hacia un escaparate dinámico reflejo de la actividad y capacidad profesional. En este sentido, el portafolio impreso da paso a un repositorio de recursos electrónicos interconectados. Desde esa perspectiva, las entrevistas a los protagonistas de este artículo permiten observar la forma cómo responden a los retos de tener presencia en la Red y reflexionar sobre las claves que utilizan para este propósito. Crear un portafolio digital es una de esas claves. La información que contiene el portafolio, obviamente responde a los intereses de la persona que lo crea y mantiene. Dicha información acostumbra a estar organizada en categorías como las siguientes: Información personal: datos de la persona, intereses, opiniones, actividades sociales, lugares visitados, etc. Objetivos y planes.
Educación y méritos académicos: Formación, cursos y proyectos. Experiencia profesional: roles ocupados, tareas, responsabilidades, etc. Para dar credibilidad se suele recurrir a diversas fuentes documentales: fotos, presentaciones, enlaces, comentarios, entre otras.
Cinco pasos para crear un buen portafolio Desde el punto de vista laboral, el portafolio se convierte en un instrumento para mostrar competencias profesionales y ha de estar en sintonía con el sector al que se dirige. En su blog, el director de Experiencia del Usuario de Google, Jeffrey Veen, resume en cinco pasos las pautas que un diseñador ha de tener en cuenta para crear un buen portafolio:
cipios básicos: diseño atractivo, fácil de usar, cumplimiento de estándares, control de la tipografía considerando localización del texto y navegación adecuada. El portafolio muestra sutilmente cómo se consideran todos estos elementos. - No innovar. Parece contradictorio, pero no. Si el objetivo del portafolio es mostrar hechos, no debería ser el lugar para realizar experimentos. - Mostrar el trabajo propio. Mostrar imágenes en un tamaño adecuado, ocuparse de tenerlas en un servidor del que no desaparecerán sin nuestro permiso. - Explicar lo que se hizo. Dar detalles del trabajo realizado: para quién era el proyecto, cuáles eran los objetivos, qué tarea concreta realizó, con quien colaboró, etc. Describir y explicar para responder a las preguntas del lector. - Llenarlo. Un buen portafolio debe contener muestras de trabajo auténtico, no es suficiente con mostrar la formación. Para ello no hace falta tener experiencia profesional: sería suficiente con realizar prácticas voluntarias en un caso real.
- Utilizar las mejores prácticas. Si el portafolio pretende mostrar que su autor es una persona que sabe de diseño web, debe ser congruente con sus prin-
• Proyecto: Portafolio Digital Ignacio Silva Montes.
FUN
DA M
DEL
E
l origen de este Portafolio se centra en la necesidad de dar a conocer los servicios profesionales de Diseño Gráfico e ilustración que brinda el Licenciado Ignacio Silva Montes plasmando de manera gráfica su estilo que le caracteriza al ilustrar cada uno de sus personajes y ambientes del interactivo. Así mismo se busca confirmar que la Ilustración es una técnica de representación visual que fusionada a una metodología de investigación impacta de forma sorprendente a los usuarios.
ENT AC
DIS
IÓN
EÑO
Mi pasatiempo favorito es crear, dibujar, plasmar todo lo que sea posible. - Los colores alimentan mis ideas -
D
esta forma en el capitulo siguiente describiremos de manera minuciosa el proceso creativo del proyecto digital tanto técnico como logístico, para dar a conocer los detalles que intercediron para poder lograr esta producción interactiva; Recopilando evidencias del bocetaje de personajes y pantallas, mapas de navegación, colores, tipografía y estilos gráficos usados por el autor.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Metodología del Diseño
• Fundamentación técnica
La realización de cualquier proyecto requiere de pasos a seguir para lograr el objetivo. A continuación describo el proceso para la creación de un producto o servico en este caso estamos hablando de un Portafolio Digital. - Definir problema - Antecedentes - Conocer las necesidades - Investigacion Documental - Lluvia de ideas - Conceptualizar - Bocetaje - Primeras propuestas - Retroalimentacion de parte del cliente - Cambios y correcciones - Aprobación - Corregir para uso - Producto Final
ESTILO El estilo es el conjunto de características o cualidad que diferencian y distinguen una forma de escribir de otra. El estilo es el sentido vital, la personalidad transferida al desarrollo oral o escrito del tema. La personalidad y las caracteristicas del autor del interactivo da como resultado el caracter del producto. La ilustracion de los personajes y ambientes que se manejan dentro del interactivo son totalmente creación del autor y fueron creados exclusivamente para participar dentro del proyecto.
• Fundamentación Despues de seguir con la metodología antes descrita nos disponemos a describir y fundamentar el producto final basandonos en argumentos propios para defender su funcionalidad. Producto: Interactivo de portafolio profesional de Lic. Ignacio Silva Montes
ESTILO DE ANIMACIÓN Generalmente la función de un interactivo es dar a conocer un mensaje mediante botones y textos digitales acompañados de imagenes. En este caso el autor utilizó parte de su portafolio profesional para acompañar su interactivo con personajes ilustrados que participen dentro de la lógica del proyecto. El estilo de animación es colocar a los personajes como parte de una escena que sucede en tiempo real y que el usuario puede notar los movimientos y que elementos externos sirvan de guia para llegar a los botones. Los botones ocultos dentro de la animación sirven para que el usuario retenga su atención dentro de las salas de información.
Reproducción: Intra personal, no estará en linea Estilo: Caracteristica del autor, manejo de ilustración digital en contenidos Objetivo: Dar a conocer los servicios de diseño que brinda el Lic. Ignacio Silva Montes
• Proyecto: Portafolio Digital Ignacio Silva Montes.
A T NO
• Parametros a seguir para la creación del Portafoio Digital.
ctivo tera rnet n i un nte s de na de i ad del o c fi i grá o. pag cesid ntos e una er la ne estinad e m d s ele fac je d Los res a lo es satis mensa que l l a l e a i tos paim ivo fin recibir n s e y jet te mu elem stro son n. El ob plemen los a nue arlo. s o ú c m ue com rio o sim ona ital y q a justifi i c n a r usu i me o dig s pa Aqu royect rtante el p impo man s mas r o f con son lo r rece
• Mapa de Navegación
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Pantallas Físicas del Interactivo.
• Intro Intro. Es la parte Inicial del interactivo, es la primer contacto visual que tiene el usuario al navegarlo. Contiene el nombre del Proyecto y el botón de inicio para navegar .
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Pantallas Físicas del Interactivo.
• Index Index. Es la página principal de la web como su nombre lo dice es el “ índice ”. En el encontraremos los contenidos de la página. En este caso el Index es totalmente interactivo desde los personajes hasta los botones de acceso a las demas salas.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Pantallas Físicas del Interactivo.
• Index Ilustración
Index ilustración. Esta pantalla contiene dos accesos señalados con gráficos y estos contienen las galerias que se dividen en:
-Zona de reposo
-Zona activa por el botón
-Ilustración -Portafolio Profesional.
-Zona activa por el botón
-Zona de reposo
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Pantallas Físicas del Interactivo. Galería Ilustración a)Zona de imagenes con controladores -Trancisión de imagenes
-Controladores
-Hacia atrás
-Hacia adelante
Galería ilustración. Esta pantalla contiene gran parte de las zonas interactivas del portafolio, aqui encontramos la galería de ilustraciones que se activa directamente en la televisión por medio de los controles de video juego previamente descritos. El ambiente en el que se desarrolla la escena es la habitación de un niño de 10 años que comparte presencia con su mascota. Creando así un ambiente agradable por medio de los colores y de los elementos en movimiento. Estos elementos ayudan a crear los accesos interactivos que van ligados con el estilo gráfico del autor.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Pantallas Físicas del Interactivo. • Galería Ilustración b)Zona de comics para iluminar. Zona activa para iluminar Comics
Zona de iluminar Esta es una Zona Interactiva en la que puedes iluminar una imagen con tan solo arrastrar el cursor (lápiz de color). La idea es simular el acercamiento al comic que aparece en la escena anterior. Anteriormente comentamos que el manejo de un Comic esta ligado formalmente con el tema de ilustración y es por eso que se utiliza la simulación de darle color a una imagen para reforzar la animación.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Pantallas Físicas del Interactivo. • Galería Video c)Zona de video animado.
Galería de Video. Zona de video que aparece dentro de la escena de ilustración y esta icononizada por medio de un luchador en movimiento. La idea de manejar la imagen de un luchador es por el estilo y la temática del video que se proyecta en la ventana emergente.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Pantallas Físicas del Interactivo. 2. Galería Portafolio Profesional a)Zona de Robot Cerebro.
1. Robot Estático.
2. Pantalla Flotante.
3. Pantalla con controles de Navegación.
Esta pantalla es la que da inicio a la galería de portafolio profesional solamente participa el “ Robot Cerebro” y el fondo Industrial que aparecerá en toda esta sección. El botón de acceso a la galería es el cerebro.
Como resultado de activar el boton ( Cerebro). Se despliega la pantalla que funcionará como envolvente de los trabajos a mostrar.
Al entrar a esta zona aparecen los controladores de la secuencia de imagenes con los que manipularemos el orden de los trabajos. De modo auxiliar ya a aperece el botón de salir en caso de querer abandonar la sala.
AMBIENTE. Al hablar de la parte profesional del portafolio estamos considerando que nos referimos a la sección sólida del tema pero tambien la parte lógica (cerebro) y constructiva (robot). Es por eso que las ilustraciones que conforman el ambiente, evocan una escena industrial que contiene tuberías, cables, pantallas ensambladas y colores frios.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Pantallas Físicas del Interactivo. 3. Perfil
1. Personaje Estático.
2. Personaje simulando conversación.
Esta pantalla es la que da inicio a la escena de perfil. Solamente el fondo con estrellas y cometas esta animado hasta que el usuario coloque el cursor sobre el personaje se despliega la información de esta sala.
La parte importante de esta sala es leer el perfil del autor y de una forma animada se logra simular que el personaje interactua directamente con el usuario respondiendo casi inmediatamente a la postura del cursor sobre si mismo.
AMBIENTE. - Fondo con estrellas que brillan y la presencia de un cometa es la idea para simular la parte metafórica y subjetiva del Interactivo. El ambiente denota la presencia del personaje en algun lugar fuera de la tierra con gesto pensativo y dando a conocer su postura ante su profesión laboral. (subj.) - En cuanto a la justificación gráfica se consideró un contraste armónico entre gris y naranja. Es notable el mínimo uso de variantes de color, solo la gama antes mencionada. Como elemento principal la caricatura del autor que interactua con el usuario.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Pantallas Físicas del Interactivo. 4. Contacto
1. Personajes y simbolos en reposo.
2. Personaje con movimiento
Esta pantalla es la que da inicio a la escena de contacto y es estática en su mayor parte solamente los iconos de información tienen animación.
Para activar las zonas dinámicas es necesario recorrer el cursor sobre los iconos para obtener respuesta.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Conclusión
El avance tecnológico participa en todos los sectores de la sociedad creando entornos cada vez mas digitales y fáciles de usar pero la mentalidad de los seres humanos cambia con el mismo ritmo y busca estar a la vanguardia de estos avances, es por eso que es necesario encontrar la forma de comunicarnos de una manera distinta y con estilos que llamen la atención. Para poder iniciar actividades en el sector laboral es necesario estar a la vanguardia del avance tecnológico y así poder encontrar puertas abiertas mediante una buena presentación ante un entrevistador. El conocimiento de técnicas de representación gráfica ya sean tradicionales o digitales nos auxilian a la hora de crear un documento para presentarlo y asi poder impactar a nuestro público.
• Proyecto: Portafolio Digital Ignacio Silva Montes.
• Aportes Los aportes que dan la producción de este proyecto son para el autor el reconocimiento de su trabajo y para el sector de diseñadores gráficos una fuente de consulta en la que encontraran una forma distinta de presentar sus trabajos rompiendo esquemas y propotipos ya establecidos, siempre y cuando teniendo en mente la funcionalidad y la justificación mediante una metodología.
• Proyecto: Portafolio Digital Ignacio Silva Montes.