Meus Assuntos
Ir para o topo
Compartilhar no Facebook Compartilhar no Twitter Compatilhar em outra redeSocial
Atividades de Hipermídia
Hipermídia
Equipe
Mariana Gabardo
Orientador(es)
Heli Meurer
11 de Abril de 2018
Hipermídia

Stopmotion do Personagem dançante

Stopmotion do personagem dançante

Definição personagem.

O personagem foi criado a partir da atividade com jogos de cartas, no qual as cartas definiam as principais caractaristicas do personagem. E assim foram definidos as seguintes características:

1. Rosto feito de sucata, com olhos profundo e sorriso largo.

2. Tronco cumprido e estreito, acompanhado de braços longos e com duas garras nos lugares das mãos.

3. Pernas curtas e finas.

4. O personagem carrega consigo uma câmera fotográfica.

 

Sketchs.

  

 

Vetorização

.

 

Personagem recortado.

A partir da vetorização do personagem, foi determinado alguns movimentos dos membros superiores e inferiores que ele poderia executar. E com isso foi recortados as partes para aplicar o efeito de movimento no stop motion.

 

 

Montagem do vídeo.

No processo de montagem do stop motion, primeiro foi tiradas as fotos dos movimentos sob um fundo infinito roxo com auxilio de um tripé e de iluminação improvisada, e em seguida as imagens foram recortadas e editadas no photoshop, para manter a uniformidade, e para animar foi usado os softwares o premiere pro e iMovie. 

 

Trilha sonora.

 

Resultado final.

 

Hipermídia

Ensinando Algo através da Hipermídia

Apresentação do Tema

Material Design

Criado e projetado pela Google, o Material Design é uma linguagem de design que combina os princípios clássicos de design juntamente com a inovação e tecnologia e adaptabilidade para diversas plataformas que a Google oferece. O objetivo do Google é desenvolver um sistema de design que permite uma experiência de usuário unificada em todos os seus produtos em qualquer plataforma.

 

O novo visual é composto por sistema de cores chapadas e vibrantes, ícones, tipografias, grids, e aprofunda sensação de profundidade entre os aplicativos com as diferentes camadas que eles trazem, além de possuir animações em praticamente todas as ações realizadas, que facilitam o manipulação do usuário quase que instintivamente entre as plataformas.  

 

Além de facilitar a experiência do usuário, o material design também tende a facilitar a vida do desenvolvedor e do design, colocando à disposição um sistema completo de diretrizes a serem seguidas para todas a plataformas do Google.

 

 

Roteiro

Material Design

 

Escrito Por

 

Mariana Gabardo

 

marianagbrd@gmail.com

UniRitter 2016.

 

FADE IN.

Aperece um botão de transição inicial, surgindo o título da animação Guia breve sobre Material Design com um botão de começar. Estilo de animação corresponde à características minimalistas e princípios do material design.

Texto

Criado e projetado pela Google, o Material Design é uma linguagem de design que combina os princípios clássicos de design juntamente com a inovação, tecnologia e adaptabilidade para diversas plataformas que da Google.

Animação do processo de criação de projeto, elementos que remetam design e tecnologia e o Google. Ilustração de objetos como celulares e computadores para demonstrar as platformas.

Texto

Que noções básicas do material design você precisa saber?

O primeiro passo é entender que o material design é um ambiente tridimensional, que possui sombras, luz e superfícies.

Demonstração do material e o movimento entre as dimensões e aplicação de sombras e luzes.

Texto

Todos os objetos possuem três dimensões, x, y e z, variando nas dimensões nos eixos x e y e uma espessura uniforme no eixo z de 1dp.

As sombras resultam naturalmente da elevação do eixo z, gerando dois tipos possíveis de sombra. A key light, cria sombras direcionais, enquanto luz de ambiente cria sombras suaves de contato.

Mostrar as três dimensões, e a profundidade do eixo z, e o surgimento de sombras com o movimento do eixo z, e os tipos de sombras geradas.

Texto

O Material suporta um conteúdo de qualquer forma e cor, dentro de suas dimensões.

 

Demonstração de conteúdos e formas inseridas dentro das dimensões do material

Texto

Elementos podem mudar de formato, crescer, encolher ao longo do seu plano.

 

Elementos mudando de formato, crescendo, encolhendo etc.

Texto

Elementos podem se juntar com outros elementos e formarem apenas um elemento, podendo também se regenerar partes perdidas, por exemplo se removermos uma parte de elemento, ele pode se reconstituir e virar elemento inteiro novamente.

 

Dois elementos formando se unindo, e um elemento se regenerando.

Texto

E como o material se movimenta?

O ambiente do material design se inspira forças do mundo real, tais como a gravidade e atrito. Estas forças são refletidas no jeito que o usuário interage com os  elementos na tela e como elementos reagem uns com os outros.

Mostra transição dos elementos com outros elementos, e respostas a interação do usuário. Elementos sendo atraídos ou repelidos, movimento em arco..

Texto

Que outros diferenciais o Material Design apresenta?

Um dos maiores diferenciais do material design é apresentar um sistema completo para criação de sites, desde princípios de estrutura e movimento, também traz grids, escalas, sistema de ícones, padrão de cores e tipografia, padrões de estrutura e criação de layout, define comportamento de imagens e sons, e um sistema completo definições de todos os tipos de componentes de para criação de uma página.

Demonstração rápida de todos os componentes que o sistema oferece. Interfaces, botões animados, paleta de cores, 500 e suas variações e criação de uma página.

Close de interfaces e interação e criação de movimento.  Texto

Para mais informações acesse material.google.com

Transição para o final, utilizando a animação inicial do botão animado.

FADE OUT.

Storyboard

 

 

 

Definição dos cenários, personagens, atores ou locutores envolvidos

Foi escolhido para animação o estilo motion graphics, que consiste em um técnica de animação de elementos em 2d e 3d, com o auxilio de programas de animação ou de 3d. 

A partir disso, todos os elementos foram desenvolvidos a partir de ilustrações feitas no Adobe Illustrator e animadas no After Effects. A principio seria utilizado um locutor durante todo animação, mas problemas com audio, foi optado por apenas utilização de titulos e descrições breves, para não prejudicar a qualidade do projeto. 

Recursos tecnológicos

Toda animação foi feita em formato de ilustrações 2d, criadas no Illustrator, e depois animadas no programa After Effects, também foi utilizado o Media Encoder e o Premiere Pro, para renderização e aplicação de audio. 

Montagem, Edição e Sonoplastia

A montagem, edição e sonoplastia foram feitas no After Effects, Premiere Pro e Media Encoder. 

Para escolha de trilha sonora, foi optado pro algo mais lúdico e divertido, que nao atrapalhasse no processo de leitura e percepção do espectador. Por isso foi escolhida a música Happy Up Here, da dupla norueguesa Royskopp, uma música instrumental, que se encaixasse na tematica e no ritmo das animações. 

Apresentação do Resultado Final

Hipermídia

Aprendendo com a Hipermídia

O que vou fazer?

Definição do Trabalho

 

Proposta | App de eventos focado em arte

Desenvolver um  aplicativo de smartphone, que auxilie o usuário a achar diversos tipos de eventos de arte perto de sua localidade. Podendo ser conectado pelo facebook, o usuário determina as suas preferências de eventos, e com isso o aplicativo sugere diversos tipos de eventos artísticos que estão ocorrendo em sua região, como exposições, peças de teatro, vernissages, ateliês culturais, saraus e diversos outros tipos.

 

Por quê | Pra que serve

O aplicativo se propõe a ser um meio de comunicação entre os apreciadores de arte e os eventos de arte abertos ao público, trazendo maior visibilidade para os eventos e auxiliando o usuário ao procurar esses eventos.

 

Meio | Plataforma

Aplicativo para sistema iOs e Android.

 

E como vou fazer? | Metodologia

Para desenvolver esse aplicativo foi definido diversos etapas necessárias para o melhor desenvolvimento do projeto, todas baseadas em teorias e técnicas do design thinking. As primeiras etapas como mapa mental, benchmark, definição de posicionamento, criação de personas, naming, para definir como o aplicativo vai se comunicar e suas principais necessidades. Depois disso será utilizada técnicas como de wireflow e wireframe, para estruturar o funcionamento do aplicativo. E para finalizar será definido questões de identidade visual, tipografia, paleta de cores utilizadas no aplicativo, para por fim poder apresentar um resultado final eficiente.

Mapa Mental.

Screen Shot 2016-11-03 at 12.37_.52_.png

Benchmark

Benchmark
 

Artikin | Por Eduardo Biz

Artikin é um app gratuito que te ajuda a escolher as melhores exposições de arte em cartaz na cidade. O app Artikin é um guia cultural que organiza a agenda de arte da maneira mais prática possível: por data de encerramento, em contagem regressiva. Ou seja, as exposições que estão prestes a sair de cartaz ficam no topo da lista para que, assim, você priorize suas visitas. Diferentes filtros customizam a visualização da agenda e um mapa digital indica as expos mais próximas a você.

 

screen696x696.jpg screen696x6961.jpg screen696x6962.jpg

 

Vamos | Por Vamos & Friends UG

Esse app ajuda a descobrir festas, exposições de arte e eventos culturais, bares e restaurantes, eventos de moda, de esporte, para família, em cidades como São Paulo, Rio de Janeiro, Porto Alegre, Recife, Belo Horizonte, Curitiba, Fortaleza, Brasília, Goiânia, Salvador e milhares de outros cidades do mundo.

 
  • Possui fotos do Instagram ao vivo do local

  • Pode seguir os planos dos seus amigos e os seus locais favoritos.

  • Tem acesso a eventos, bilhetes e lista de convidados.

screen696x6964.jpg screen696x6965.jpg screen696x6966.jpg

 

Catraca Livre | Por CatracaLivre

No aplicativo do Catraca Livre você descobre todas as atrações de cultura, gastronomia, educação e saúde ao seu redor.

Mostrando diversos tipos de shows, teatros, cinema, exposições, baladas, saraus, cursos, palestras, tratamentos e consultas gratuitas ou muito baratas.

 

  • Encontra os eventos mais próximos da sua localização

  • Filtra os tipos de eventos que você mais gosta

  • Traçar rota para o local do evento

  • Acessa seus eventos favoritos offline

Screen Shot 2016-11-14 at 23.03_.36_.png Screen Shot 2016-11-14 at 23.03_.51_.png Screen Shot 2016-11-14 at 23.05_.47_.png

Definição de posicionamento.

Posicionamento da marca

 

Mercado

O mercado atual se caracteriza por uma insatisfatória quantidade de oferta de aplicativos de eventos, sendo boa parte desses  aplicativos focados no nicho de festas e gastronomia, tendo uma grande escassez enquanto ao nicho de arte e cultura. A maioria dos aplicativos disponíveis sobre o tema apresenta uma lista de eventos conforme a sua localidade, baseados no gosto do usuário e nos eventos frequentados ou favoritados, alguns desses aplicativos apresentam a opção de encontrar amigos e visualizar seus eventos preferidos e quais eventos seus amigos marcaram presença. Outro recurso comumente utilizados nesses aplicativos, principalmente os focados no nichos de festas e shows, é de possibilitar o usuário de comprar seu ingresso diretamente pelo aplicativo.

 

Público

Como a proposta do aplicativo é de focar em eventos de arte e cultura, o público alvo  é definido por apreciadores de arte que utilizam com frequência smartphones e aplicativos mobile.

 

Diferenciais

A partir da definição do público alvo, é possível definir as diretrizes de posicionamento da marca, e os seus diferenciais. Enquanto ao posicionamento, o aplicativo se diferencia por ter uma comunicação jovem e contemporânea, acompanhado de uma estética minimalista e irreverente, para assim atrair um público jovem, conectado com mídias sociais, que se interessa por arte e cultura.

Persona

Personas

 

Manoela | 21 Anos, Estudante de Artes Visuais.

Manoela está no quarto semestre do curso de artes visuais na UFRGS, e trabalha como assistente de curadoria em  um museu de Porto Alegre. Sempre foi muito interessada em artes, principalmente em pinturas e esculturas, e espera um dia se tornar uma grande pintora e professora de arte. Manoela é ativa nas redes sociais, principalmente no Instagram e no Facebook, possui um smartphone no qual utiliza diversos aplicativos referentes a artes plásticas, e estilo de vida vegano e eventos culturais e redes sociais.

 

João | 26 Anos, Diretor de Arte.

João é um diretor de arte, formado em design gráfico, trabalha em uma agência de publicidade de Curitiba. É super interessado por design, cinema e fotografia. Sempre procura por eventos culturais ao ar livre, mostra de cinema independentes e exposições de fotografias. É super assíduo em redes sociais, principalmente no Twitter, Instagram e Facebook. Possui um smartphone de última geração e está sempre procurando por aplicativos e novos meios de se comunicar.

 

Morgana | 39 anos, Produtora Cultural.

Morgana é uma produtora cultural, que mora no Rio de Janeiro, formada em comunicação social pela PUC RIO e devido ao seu grande interesse sobre arte e cultura acabou se especializando em produção cultural. Possui grande interesse em peças de teatro, apresentações de dança e feiras de arte independente. Por trabalhar na área, necessita estar sempre atualizada sobre os eventos e artistas ao seu redor.  

 

Naming.

Naming

 

A partir de bibliografia de design thinking foi determinado algumas metodologias a serem adotadas no processo de desenvolvimento de naming. A metodologia foi ajustado a sintetizada para auxiliar no processo de desenvolvimento do produto, por isso as seguintes etapas foram predeterminadas; 1- Investigação; 2- BrainStorming; 3 - Filtragem; 4 - Sondagem; 5 - Análise final.

 

1. Investigação | Pesquisa.

O primeiro processo da metodologia para o desenvolvimento de naming é a investigação, que consta em delimitar os objetivos e valores do produto, definir fatores culturais e geográficos, o público alvo, tendências globais do mercado atual, e o posicionamento do produto.

 

Enquanto ao objetivo do produto, é informar e divulgar eventos de arte e cultura gratuitos que estão ocorrendo perto da localização do usuário, isso com intuito de manter o usuário interessado neste nicho sempre informado, e ajudar a divulgar e fomentar produções culturais gratuitas e abertas ao público. E para isso o aplicativo vai ser lançado em todo território nacional, e poderá ser adquirido via AppStore e Google Play Store gratuitamente. Por ser um aplicativo considerado de nicho, o público alvo foi definido como apreciadores de arte e eventos culturais que utilizam de aplicativos de smartphone. E para melhor atender e se comunicar com esse público, foi definido algumas diretrizes de posicionamento de marca e identidade, a marca deverá possuir uma comunicação jovem e contemporânea, com uma estética minimalista e irreverente para atrair e agradar o seu público alvo, majoritariamente jovem e com um senso estético apurado.

 

2. Brainstorming | Idéias.

Art.me, Península, Atlas, Curators colab, ArtRadar, Spectro, The future gallery, Ismo, ArtCode, ArtBase, Isocromia, Canvas, Acervo Itinerante ,Cult Experience, Fluxus, Musa, Hatsu, Vicent, Be Art, Antiquarium, The Curators Club, ArtBook, The Cult Journa,l Art Blitz e Got Art?.

 

3. Filtragem | Dez Melhores.

1. Art.me 2. Atlas 3. ArtRadar 4. Ismo 5. Musa 6. Vincent 7. Art Blitz 8. Got Art? 9. The Curators Club 10.Canvas.

 

4. Sondagem | Público Alvo.

O nomes escolhidos a partir da lista dos dez melhores pelo público alvo de aplicativo foram:

ArtRadar

Vincent

Musa

The curators club

 

5. Análise Final | Resultado

A partir da execução da metodologia escolhida foi possível chegar quatro sugestões de nomes para o aplicativo, no qual foi escolhido o ArtRadar, por ser um nome que agrada o público e sintetiza bem quais as funções que o aplicativo oferece.

 

Wireflow e Wireframes

wires.jpg

Identidade Visual

id.jpg

Cores e Tipografia.

upload161120101833.jpg

Resultado Final

Untitled-1.jpg

Protótipo

 

Hipermídia

Referências Bibliográficas

Recomendadas e Aceitas

Gerais