Meus Assuntos
Ir para o topo
Compartilhar no Facebook Compartilhar no Twitter Compatilhar em outra redeSocial
Projeto Integrado
Revista Digital Prisma
Equipe
Bianca Pacheco, Fernanda Buttelli
Orientador(es)
Heli Meurer, Israel Henriques Tavares Berbigier
11 de Abril de 2018
Revista Digital Prisma

Contextualização

Definição do Tema

Nosso projeto consiste em uma revista digital interativa, onde documentaremos os projetos de determinados grupos, que serão realizados ao longo do semestre, acompanhando seus processos de criação.

Algumas ideias de seções: editoriais com as roupas produzidas pela turma da moda e/ou dispositivos que serão criados pela turma do produto, explicações interativas sobre os conceitos, paletas, vídeos e fotos dos processos de criações.

 

Justificativa

A ideia da equipe é colocar em prática a proposta de projetar uma mídia social, através do desenvolvimento de uma revista digital que possa contemplar trabalhos feitos pelos nossos colegas. Em um momento tão individualista das pessoas no mundo, nós alunos, sentimos falta de um espaço onde possamos encorajar e empoderar uns aos outros, onde possamos dialogar sobre as nossas criações, inspirações, e motivações. Onde as manifesações de quem somos e do que queremos ser possam significar mais do que apenas concorrência, mas uma troca de conhecimentos.

Processo Metodológico

A metodologia utilizada será através do Projeto E (Meurer e Szabluk)

espiralProjetoE_v2.png

1) Contextualização - Etapa inicial, onde identificamos, definimos e delimitamos o problema. Nessa etapa compreendemos o público-alvo e o cenário ao seu redor.

2) Desconstrução - Etapa de ampla e profunda investigação, análise, e avaliação dos conteúdos, conceitos e contextos que possam servir de referência.

3) Verificação - Definir restrições (quais são as limitações), requisitos (o que é compulsório e necessário), e possibilidades (o que é desejável e agrega valor) a serem considerados no novo produto, em forma de listas de verificação.

4) Reconstrução - Etapa de escopo, estrutura e esqueleto do projeto, é onde acontece o início da projetação do produto propriamente dito. Nessa etapa são feitas gerações de alternativas.

5) Identidade - Etapa estética, onde são utilizadas habilidades do design gráfico (expressão, comunicação gráfica, senso estético, estilos de apresentação).

6) Diferenciação - De caráter mercadológico, procura avaliar a personalidade definida e desenvolvida, através de mapeamentos de expressões.

7) Desenvolvimento - Quando a etapa de verificação determinar requisitos, restrições e possibilidades do projeto, pode-se definir a arquitetura da informação e o layout das principais telas do produto tiverem sido diagramados e aprovados.

8) Validação - Avaliações e testes técnico-funcionais, que basicamente visam identificar e corrigir possíveis erros de programação ou usabilidade.

 

Pra quem?

O público consumidor da revista consiste nos seguintes grupos:

• Estudantes

• Investidores

• Professores

• Familiares

 

Artboard 1.png

Grande parcela do público são jovens, os próprios estudantes de curso superior, técnico, ou autodidatas, de design gráfico, produto, e moda que tenham interesse em conhecer projetos feitos pelos colegas de profissão, mostrar seus trabalhos, desenvolver ideias em conjunto, explorar áreas desconhecidas, conhecer colegas, ou encontrar qualquer informação que contemple suas necessidades.

 

Artboard 2.png

Também parte do público-alvo, são empresários interessados em investir em ideias e inovações, ou que procurem determinado perfil de profissional. Este grupo representa o futuro da profissão, é um gerador de oportunidades.

 

Artboard 3.png

 

Professores são uma rica fonte de conhecimento e parte fundamental da vida acadêmica. São eles que guiam, auxiliam, trocam experiências, e aprendizados com muita paciência e didática. É de grande valia que haja essa comunicação e exposição de projetos entre aluno-professor.

 

college_planning_banner.jpg

Familiares, cônjuges, e amigos, fazem parte do público consumidor, pois entendemos que a revista é uma maneira de divulgação e comunicação do que acontece na vida acadêmica dos futuros designers, e consequentemente, traz mais conhecimento sobre essa profissão, que é uma área ainda desconhecida por muitos.

Infográfico

Infográfico-.png

O processo do projeto consiste em:

Na primeira etapa é encontrar uma maneira de documentar digitalmente os trabalhos dos alunos do curso de Design da Uniritter. Passada esta etapa, escolheremos quais grupos farão parte da nossa documentação, acompanharemos seus processos de criação, fotografaremos e filmaremos de maneira a mostrar a fundo os passos do designer. Por último apresentamos aos colegas e disponibilizamos o material online.

Revista Digital Prisma

Desconstrução (Análises)

Termos Pertinentes ao Projeto

 

O objetivo de pesquisar a definição de cada termo relacionado ao assunto, é entender a fundo seus significados, e realizar um trabalho mais amplo, que nos leve por diversos caminhos a serem investigados.

 

Uma revista digital interativa se trata de uma publicação periódica, feita por meio da internet. Por ser digital, ela permite acesso à informação para mais pessoas. Essa publicação pode se tratar de artigos, revistas, reportagens e qualquer outro tipo de mídia informativa, que documente qualquer tipo de assunto. A principal temática da revista é o projeto e processo criativo dos alunos do curso de Design da Uniritter.

 

 

Revista Digital

Publicação periódica que geralmente inclui artigos, entrevistas, reportagens, etc., de temas de interesse em comum, cienfítifocs, históricos, entre outros. Neste caso, a publicação é feita através de dispositivos eletrônicos (smartphone, tablet, iPod, etc) e internet.

Publicação Periódica

Folheto, livro, trabalho científico, literário ou artístico, que se publica pela imprensa. Relativo a período, impresso que se publica em dias específicos.

Acessibilidade

Facilidade no acesso à algum serviço; conjunto de características, e/ou ferramentas que permitem o acesso de todas as pessoas. 

Interatividade

Comunicação recíproca. Possibilidade de interação entre indivíduos ou elementos de um sistema.

Documentação

Ato ou efeito de documentar, de reunir informações ou documentos sobre. Conjunto de documentos ou de informações.

Processo Criativo

Modo, sistema, percurso, ou metodologia para criar algo inovador e/ou original. Processo: modo de fazer uma coisa; método; sistema.Procedimento. Seguimento; decurso. Criativo: que tem ou revela criatividade. Inovador; original. Que é capaz de criar; que tem espírito inventivo; criador. Que favorece a criação.

 

 

_

Esta atividade é de suma importância para que possamos encontrar conexões, ligações, ou palavras referentes ao que imaginamos para o projeto, para que assim, possa-se compartilhar palavras-chave que encaminhem a equipe para referencias visuais.

Análise de Similares

Escolhemos unir algumas referências parecidas com o que imaginamos, para que então, pudéssemos criar uma revista que ainda não existe (ou que não pudemos encontrar), pois nenhuma das referências de produtos similares se encaixa perfeitamente na ideia de revista digital que projetamos. 

 

Similares final.png

Análise de Referências

Optamos por referências visuais de revistas (nem sempre digitais), com estilo minimalista, com poucas cores e detalhes, fontes sem-serifa, e um foco maior na geometria e diagramação dentro de um grid.

 

refsvisuais.png

Revista Digital Prisma

Reconstrução (Geração de Alternativas A)

Definição das Funcionalidades e Conteúdos

Funcionalidades

A ideia do projeto consiste basicamente em seções padronizadas, com as mesmas funções de textos, vídeos, imagens e sons, cada uma com seu próprio conteúdo.

Além destas principais funcionalidades de entretenimento, encontramos as funcionalidades técnicas, que são os pictogramas de avanço e volta de página, e de volta ao sumário.

imagética.png

 

 

Conteúdos

Os conteúdos da revista são breves em sua maioria, com exceção das páginas onde apresentamos cada projeto, que envolve uma quantidade maior de informações e documentações.

 

• Sobre a Uniritter:

Texto sobre a instituição Imagens

 

• Sobre a cadeira de Projeto IV

Texto sobre a cadeira,  a interação entre habilitações do mesmo curso, intenção proposta pelo projeto.

 

• Sobre os orientadores

Textos sobre os orientadores do projeto Imagens

 

• Documentação do tema dos projetos

Processo criativo, textos, imagens, vídeos, breve apresentação de cada aluno, e resultados.

Storytelling

Utilizamos o método do storytelling para simular cenários e personas que visamos atingir como público-alvo. Escolhemos 3 personas em diferentes situações: um investidor, um professor, e um familiar.

 

Persona 1: João Augusto

João é empresário e sua empresa quer investir em projetos sociais, a sobrinha dele é aluna da Uniritter e mostrou a revista digital da universidade, que contém os trabalhos dos alunos de Projeto IV. Através da revista ele fica sabendo de projetos que não imaginava existirem, e logo depara-se com um projeto que se encaixa na necessidade da sua empresa. Na seção sobre os alunos que elaboraram o projeto, ele encontra o contato deles, para que assim possa começar a investir nesse projeto que trará benefícios à empresa, aos alunos e à comunidade.

 

Persona 2: Pedro

Pedro está começando a lecionar em uma faculdade em Porto Alegre, e ele precisa de inspirações para elaborar propostas aos seus alunos. Através de buscas na internet ele encontra a revista digital onde é possível entender o processo criativo e algumas etapas realizadas nos projetos. Pedro começa a ter várias ideias de exercícios e projetos que vai propor para suas turmas.

 

Persona 3: Márcia

Márcia é mãe de um aluno do Design da Uniritter, ela é uma mãe muito interessada na vida acadêmica de seus filhos, através da internet ela descobre a revista, e pode acompanhar os processos de vários alunos, saber quais são as novidades na área de seu filho, e entender melhor o universo onde ele irá atuar.

Wireflow

wireflowA.png

Tela 1 - Capa da revista, com imagem e logotipo.

Tela 2 - Sumário, com seções em ordem.

Tela 3- Sobre a universidade, essa tela contém os primeiros materiais interativos.

 

wireflowB.png

 

Tela 4 - Informações sobre a cadeira e como funciona o projeto.

Tela 5 - Sobre os orientadores do projeto.

Tela 6- Capa dos projetos.

 

wireflowC.png

Tela 7 e adiante - Toda a parte que abriga o conteúdo do trabalho. Entrevistas, músicas, textos, fotografias são a parte interativa, onde o usuário faz a escolha de que caminho seguir.

Revista Digital Prisma

Identidade e Diferenciação

Desenvolvimento da Assinatura Visual

Desenvolvemos a identidade visual da revista a partir dos seguintes conceitos:

• Minimalismo: poucos recursos e elementos, formas geométricas, simplicidade

• Auto-expressão: a capacidade de transformar suas próprias experiências e vivências em algo maior do que si próprio. Também tivemos a intenção de fazer referência aos trabalhos, ideias e conceitos dos alunos, que são parte fundamental do projeto.

(Aqui, curiosamente, também encontramos referências de auto-expressão que são ligadas à geometria.)

• Bauhaus: escola de design, artes plásticas e arquitetura. Formas geométricas, modernismo, "a forma segue a função", cores primárias

MOODBOARDS

minimalismo.png

autoexpressao.png

Artboard 1.png

 Referências de auto-expressão X geometria:

09485b26733d1c53c35da8a368c1ebef.jpg 

 Sobre o Prisma

Artboard 8.png

Estudos

Artboard 9.png

Artboard 11.png

Resultado

assvisualSUBIR.png

Considerações finais: acreditamos ter alcançado um resultado moderno, devido ao contrário de arestas marcadas, com formas leves e arredondadas, informalidade na caixa-baixa.

Escolha Tipográfica

Artboard 17.png

Artboard 18.png

Artboard 19.png

Artboard 20.png

Escolha do Padrão cromático

Escolhemos a paleta de cores por serem 3 cores muito utilizadas na Bauhaus (que serviu de referência na arquitetura da nossa universidade) e por serem as 3 cores primárias.Artboard 16.png

Definição Imagética

Utilizamos poucos pictogramas por se tratar de uma revista, que tem menos funções do que, por exemplo, um app.

picto.png

• Setas para avançar para a página seguinte e voltar para a anterior.

• Logo do Behance para indicar o portfólio dos alunos.

• Pictograma de uma casa, para retornar ao menu inicial.

• Pictograma do youtube, para apontar vídeos.

Diferenciação

diferenci.png

Desenho das telas da interface

Protótipo Interativo

https://drive.google.com/open?id=0BzMoI6cSCq2OMGlhYXlGSjRRQkU

Considerações finais

No início do semestre recebemos a proposta de desenvolver uma mídia digital, a intenção do grupo era fazer algo diferenciado, que não envolvesse um app. Tivemos então a ideia de projetar uma revista que fosse interativa, onde o usuário pudesse assistir vídeos, ouvir áudios, e etc.

O projeto nunca se tratou de uma necessidade existente, mas de algo interativo, que servisse como meio de divulgação entre alunos-faculdade-família-mundo. Uma oportunidade para mostrar o que produzimos durante nosso tempo acadêmico.

Durante o semestre várias ideias se mostraram inviáveis, surgiram novas e assim seguimos desenvolvendo o trabalho, aprendendo a lidar com os imprevistos.

Optamos por uma identidade visual que consiste em geometrização, cores primárias, Bauhaus, minimalismo, simplicidade, modernismo e que remetesse ao ambiente acadêmico.

Finalizamos o projeto muito felizes com o resultado, acreditamos que a integração entre as disciplinas tenha sido muito positiva, trazendo diversos novos conhecimentos, amizades, e acreditamos ter alcançado o nosso objetivo de documentar os colegas de maneira alternativa e interessante.

Apresentação Final para a Disciplina

https://drive.google.com/open?id=0BzMoI6cSCq2OM0lhbWRfcDNqbHc

Revista Digital Prisma

Referências Bibliográficas

Recomendadas e Aceitas

Gerais

  • INFOPEDIA. https://www.infopedia.pt/dicionarios/lingua-portuguesa/revista. Acesso em: 29 jun. 2017. INFOPEDIA. https://www.infopedia.pt/dicionarios/lingua-portuguesa/digital. Acesso em: 29 jun. 2017. INFOPEDIA. https://www.infopedia.pt/dicionarios/lingua-portuguesa/publicação. Acesso 29 jun. 2017. PRIBERAM. https://www.priberam.pt/dlpo/periódico. Acesso em: 29 jun. 2017. INFOPEDIA. https://www.infopedia.pt/dicionarios/lingua-portuguesa/acessibilidade. Acesso em: 29 jun. 2017. INFOPEDIA. https://www.infopedia.pt/dicionarios/lingua-portuguesa/interatividade. Acesso em: 29 jun. 2017. INFOPEDIA. https://www.infopedia.pt/dicionarios/lingua-portuguesa/documentação. Acesso em 29 jun. 2017. INFOPEDIA. https://www.infopedia.pt/dicionarios/lingua-portuguesa/processo. Acesso em 29 jun. 2017. INFOPEDIA. https://www.infopedia.pt/dicionarios/lingua-portuguesa/criativo. Acesso em 29 jun. 2017.
  • CEROS. https://www.ceros.com/examples/crush-magazine-heritage. Acesso em: 23 maio 2017. NYLON. https://www.nylon.com. Acesso em: 23 maio 2017. PONY ANARCHY. http://www.ponyanarchy.com. Acesso em: 23 maio 2017.
  • GOOGLE FONTS. https://fonts.google.com/specimen/Raleway. Acesso em 4 jul 2017. MY FONTS. https://www.myfonts.com/fonts/fontfont/ff-din. Acesso em 4 jul 2017.
  • DESIGN CULTURE. http://designculture.com.br/cores-falam. Acesso em 3 jul 2017.