Índice
Introdução Planeamento
Pág. 4 Pág. 6 a 19
Design Design I
Pág. 21 a 26
Design II
Pág. 28 a 39
Protótipo
Pág. 41
Bibliografia
Pág. 43
1 Introdução
Proposta de projeto No âmbito da disciplina de Design de Interação II, da licenciatura Design Multimédia, foi proposto a criação de interfaces gráficos para plataformas móveis, inspirados na obra da escritora Angela Carter (1940-1992) The Bloody Chamber “O Quarto dos Horrores”. O projeto procura desenvolver capacidades de investigação, interpretação e análise de linguagens e conceitos adequados a diferentes espaços. Assim propõe-se na concessão de um tema de acordo com o imaginário da escritora Inglesa, que simule uma situação de design para um contexto especifico representando-o na ótica do Design de Interação.
Descrição do projeto O projeto desenvolvido trata-se de uma aplicação móvel “Pinch”, inspirado no conto, The Courtship Of Mr. Lyon, da escritora Angela Carter, do livro The Bloody Chamber “O Quarto dos Horrores”. A ideia surgiu com a referência de pratos de comida no conto, e as estações do ano que decorrem na história. Entende-se como uma rede social, de partilha e criação de receitas, com a vantagem de compra dos ingredientes e personalização do carrinho de compras. Os ingredientes podem ser comprados avulso ou embalados, evitando o desperdício de comida , resíduos e dinheiro. A ligação entre aplicação e o conto é a sugestão de receitas consoante as horas, e temperatura local.
Página 4
Pรกgina 5
2 Planeamento
O projeto foi criado em torno de um plano/calendário de tarefas, para obter um melhor resultado sem falhas. Este sistema de organização , facilitou o tempo de entrega e avaliação de cada tarefa a cumprir. Começando pela a análise do conto, criação da identidade, que foi dividida por 3 fases de testes, até chegar à final, criação de mapas de navegação, wireframes, vídeo promocional e templates. Por fim, a montagem dos layouts finais.
Página 6
2 Planeamento
Calendário Todas as semanas notou-se sempre uma mais valia para melhorar pormenores grande evolução do projeto. da aplicação. A criação de um plano de organização, Neste capítulo, é apresentado todo o proajudou na concretização, das várias tare- cesso de testes realizados, até ao resulfas a cumprir, para as datas estipuladas. tado final. Fazendo um passo de cada vez, tornou Estrutura do planeamento da aplicação: a aplicação mais organizada e completa. Análise do conto; Criação do conceito O feedback dado, em cada dia de avalia- da aplicação; Identidade; Storyboards; ção também foi muito importante para Mapas de navegação; Testes de layouts; o tempo da criação do projeto, e uma Melhorias (layouts e entidade).
Página 7
2 Planeamento
Análise do conto The Courtship of Mr Lyon (O Namoro do Sr. Lyon) Angela Carter, The Bloody Chamber (1979)
É um conto de género romance, com um final tradicional, feliz.
Bela é obediente ao seu pai, mas muito influenciada e fica submissa ao Mr. Lyon. Quando esta volta a ter os seus Representa duas classes sociais, bastan- luxos e riquezas, esquece da besta, que tes diferentes, uma família pobre com quase morre de desgosto e a rapariga problemas judiciais e com dificuldades volta para junto dele. financeiras, que é ajudada pela personagem principal, que se aproveita dessa fraqueza para ter o que quer. Há uma relação de amizade entre a personagem principal (Mr. Lyon) e o seu animal de estimação. O cão permanece simplesmente como um animal, amigo e fiel ao seu dono. Mr. Lyon vive numa enorme mansão e jardim, que no seu interior é tudo luxuoso, com muitas referências a pratos de comida muito elaborados, pudendo-se afirmar que esta personagem tem um estilo de vida rico, clássico e culto. Há um elemento que carateriza a rapariga, uma rosa branca, que esta pedia ao seu pai, sempre que possível lhe oferecer. A rosa simboliza a perfeição e inocência. A arrogância e ferocidade da besta é acalmada pela imagem bela e perfeita da rapariga. Página 8
2 Planeamento
Conceito da aplicação O conceito foi retirado de excertos do conto, que continham referências de culinária e identificação das estações do ano, por onde passou a história.
“(...) e a tampa da ravessa de prata tinha gravado: COME-ME numa letra cursiva. A travessa continha sanduíches de Roastbeef fininho.” (The Courtship of Mr Lyon, Página 59) “Com excepção de uma sopa aromática que uma lamparina mantinha quente, a comida se bem que muito refinada, – uma ave fria, um soufflé frio, queijo.” (The Courtship of Mr Lyon, Página 62) “Pediu ao pai dela que se servissem do buffet (...)” (The Courtship of Mr Lyon, Página 62) “Quem lhe preparava as refeições?” (The Courtship of Mr Lyon, Página 63) “O jantar foram ovos Benedict e vitela grelhada (...)” (The Courtship of Mr Lyon, Página 63) “ Eu volo em breve, antes de acabar o Inverno.” (The Courtship of Mr Lyon, Página 66) “(...) não havia nada na, montra que lhe pudesse dizer que o inverno estava quase a terminar.” (The Courtship of Mr Lyon, Página 67) “O vento suave da Primavera entrou (...)” (The Courtship of Mr Lyon, Página 67) “A primavera tinha chegado e ela tinha quebrado a promessa.” (The Courtship of Mr Lyon, Página 67)
Página 9
2 Planeamento
Brainstorming
Dos excertos do livro, retirou-se pala- No fundo, estas palavras revelam necesvras-chaves capazes de ajudar a criar o sidades presentes no dia a dia. conceito para o projeto proposto. As pessoas cada vez mais, precisam de As várias palavras resultaram num pen- uma vida mais facilitada e com mais opsamento criativo, que levou à concessão ções para a conquista de uma qualidade de um conceito de aplicação móvel, com de vida. o objetivo de capaz de com os utilizadores onde quer que estejam, podendo Assim nasceu uma plataforma móvel na também eles comunicarem e interagir ligada à culinária, para dar respostas a todos os amantes da cozinha. com os outros.
Página 10
2 Planeamento
Identidade (primeira fase) Origem do nome Todas as receitas tem o seu segredo, o seu tempero de excelência, que faz com que se tornem únicas. Tal como o sal, a pimenta, a salsa, os coentros, o pimentão doce, enfim, inúmeras especiarias, que há pelo o mundo inteiro.
Font usada: Brannboll. Nesta primeira fase foi necessário realizar algumas alterações á tipografia para enquadrar o logotipo ao conceito da aplicação.
Assim o nome Pinch, do português “Pitada”, das mais diversas especiarias que existem no mundo, com os seus segredos completam as receitas e fazendo assim, pratos únicos e deliciosos.
Testes Logótipo Com a pesquisa adquirida para a criação do logótipo, verificou-se que o tipo de font mais utilizado na arte da culinária, é uma tipografia aproximada da escrita manual, com formas curvas e circulares. Os primeiros testes foram em português. Página 11
2 Planeamento
Teste de ícones Primeiros ícones da aplicação pinch, para o smartphone. O conceito dos círculos é inspirado na pinta da letra “i”, da palavra Pitada.
Teste de cores Malagueta, Pimento...
Canela, Mostarda... Gengibre, Alho, Açafrão..
Ervas aromáticas... Sal, Açúcar...
Página 12
2 Planeamento
Teste de cores
Teste de Logótipo Nesta composição, está presente a ideia de recriação de um prato gourmet.
Página 13
2 Planeamento
Testes Layout (cores) Iniciar da Aplicação
Testes Ícones
Página 14
2 Planeamento
Identidade (segunda fase)
Depois da primeira fase de testes, sur- O idioma da aplicação também foi altegiu a necessidade de melhorar alguns rado para Inglês, visto que o projeto é em torno, de uma escritora da literatura aspetos. inglesa. Cores mais vivas, e um logótipo com elementos mais ligados ao nome e concei- Ficando assim o nome da aplicação Pinch. to.
Página 15
2 Planeamento
Pรกgina 16
2 Planeamento
Identidade (terceira fase) Escolhido o elemento que completa o logotipo, as formas das letras passaram por um processo de alteração, até encontrar uma harmonia entre o elemento e a tipografia.
Teste
Final
Página 17
2 Planeamento
Cores A escolha das cores básicas do interface da aplicação, seguiram o conceito, do imaginário do conto escolhido da escritora The courtship of Mr. Lyon.
As cores neutras, preto e cinzento são cores obscuras e simples, que refletem para o lado mais enigmático, sinistro e obscuro dos contos de Angela Carter.
O vermelho caracteriza a paixão e obsessão, que existe no conto. É utilizado na identidade e cabeçalhos da aplicação.
Estas cores estão presentes por todo o interface gráfico da aplicação.
#000000
#8D191C
#D2D2CD
ícones
Os ícones da aplicação seguem todos a dos e rectos), também servem para o mesma linguagem. utilizador conseguir identificar as várias opções e conteúdos da aplicação. Cada grupo de ícones diferem-se uns dos outros (com preenchimento, em li- Mesmos sendo da mesma família, é imnha e em círculos), para se distinguirem, portante diferenciá-los um pouco, para nas diferentes ações e menus. que a navegação do utilizador seja mais Os dois tipos de botões, (cantos redon- fácil e precisa. Página 18
2 Planeamento
Slogan O slogan foi pensado no conceito da aplicação. Com a opção de compra de ingredientes avulso, ou seja, à medida, e a relação de prazer e sedução, representada no conto The Courtship of Mr Lyon, criou-se um slogan que consiga descrever esses dois prontos fortes que caracterizam a aplicação.
Iniciar a aplicação - Imagem Ao inicar a aplicação, aparece um ecrã com o logótipo, slogan e uma imagem que descreve a aplicação. Depois de várias pesquisas e edições, conseguiu-se uma imagem que caraterizasse a aplicação e o conto. A imagem representa o mundo imaginário do conto de Angela Carter. Os ingredientes espalhados por todo o ecrã, refletem o conceito da aplicação, pela compra de alimentos avulso, uma das vantagens de Pinch. As cores escuras e carregadas representam o espaço onde decorre a história, um espaço enigmático estranho e sombrio. O facto da imagem conter uma mancha branca, efeito da farinha presente na tela, representa o ambiente frio e gelado por onde passa a história. Página 19
Pรกgina 20
3 Design Design I Neste capítulo é apresentado o Storyboard e Mapas de Navegação, da aplicação Pinch. Esta fase muito importante do projeto, foi definida através de uma análise do conceito da aplicação, onde se retirou os ecrãs mais importantes e que definissem o projeto. Os conteúdos de cada ecrã também foram pensados ao criar a estrutura da aplicação. Todos os ecrãs estão identificados com o nome do ecrã correspondente. Ecrãs: Iniciar Sign In Registo/Criar conta Passos a seguir Sugestão Feed sugestões Receita completa Compra de Ingredientes Menu Perfil do utilizador Partilhar receita Comentário
Página 21
3 Design Design I
Storyboard e Mapa de navegação Iniciar / Sign In / Registo - Criar Conta
Passos a seguir
Página 22
3 Design Design I
Sugestão
Feed Sugestões
Receita Completa
Página 23
3 Design Design I
Compra de Ingredientes
Pรกgina 24
3 Design Design I
Menu
Pรกgina 25
3 Design Design I
Perfil do utilizador
Partilhar Receita
Comentário
Página 26
Notificações
Pesquisa
Pรกgina 27
3 Design Design 2
Apresentação dos Layouts Finais.
Página 28
3 Design Design 2
Iniciar / Sign In / Registo - Criar Conta Ao mudar do Sign In para o Register, basta sรณ deslizar com o dedo da esquerda para a direita.
Pรกgina 29
3 Design Design 2
Passos a seguir Antes do utilizador inciar a aplicação, pode ou não seguir os passos de iniciação.
Página 30
3 Design Design 2
SugestĂŁo O utilizador pode deslizar o dedo para cima e ver a sugestĂŁo do dia.
PĂĄgina 31
3 Design Design 2
Feed Sugestões O utilizador tem sempre opções de escolha para em todas as suas ações.
Página 32
3 Design Design 2
Receita Completa Visualização de toda a informação de uma receita.
Página 33
3 Design Design 2
Compra de Ingredientes Escolha de ingredientes e personalização do carrinho de compras
PĂĄgina 34
3 Design Design 2
Compra de Ingredientes Vรกrias formas de pagamento e entrega do pedido.
Pรกgina 35
3 Design Design 2
Menu Menu de orientação vertical. Sempre que se escolha uma opção, abre uma janela abaixo, que voltando a clicar sobre para cima.
Página 36
3 Design Design 2
Perfil do utilizador Fotografias, vĂdeos das receitas e os favoritos dos utilizadores.
PĂĄgina 37
3 Design Design 2
Comentário / Notificações e Partilha Todas as funcionalidades básicas de uma rede social.
Página 38
3 Design Design 2
Pesquisa Pesquisa inteligente e com referĂŞncias de acordo com os ingredientes pretendidos.
PĂĄgina 39
Pรกgina 40
4 Protótipo
Ferramentas de autoria O projeto foi criado com a ajuda dos programas gráficos da Adobe. Photoshop CC 2017, Illutrator CC 2017, InDesign CC 2017, After Effecs CC 2017 e o Balsamiq Mockups. Photoshop e Illustrator foram usados para criar os layouts e montagem dos mockups. o InDesign foi utilizado para criar templates e este presente guião. Houve algumas dificuldades em trablhar neste programa devido à falta de prática, mas como todos os programas da Adobe são muito intuitivos consegui finalizar todos todas as tarefas. O programa After Effecs ajudou na criação do vídeo promocional da aplicação. Por fim, para criar wireframes e organizar a estrutura da aplicação, foi usado o programa Balsamiq Mockups.
Problemas na criação do projeto Um dos problemas no decorrer do projeto, foi encontrar imagens gratuitas com boa qualidade, para colocar nos vários ecrãs. Isso causou alguma perda de tempo em pesquisa.
Página 41
Pรกgina 42
5 Bibliografia
Livro inspirador para o projeto
Angela Carter (1940-1992) The Bloody Chamber “O Quarto dos Horrores”.
Página 43
Guião | Design de Interação II | Adriana Fernandes