CW 1,2,3,4 Design Para Mídias Digitais II

Prévia do material em texto

<p>•</p><p>Mídias digitais interativas e suas especificidades: princípios do design de</p><p>interação</p><p>• Aula 1 - Comunicação visual</p><p>28 minutos</p><p>• Aula 2 - Mídias digitais, design e comunicação interativa</p><p>27 minutos</p><p>• Aula 3 - Tendências nas mídias digitais</p><p>30 minutos</p><p>• Aula 4 - Design de interação (IxD)</p><p>32 minutos</p><p>• Referências</p><p>7 minutos</p><p>0%</p><p>T</p><p>A-AA+</p><p>MÍDIAS DIGITAIS INTERATIVAS E SUAS ESPECIFICIDADES: PRINCÍPIOS</p><p>DO DESIGN DE INTERAÇÃO</p><p>124 minutos</p><p>Aula 1 - Comunicação visual</p><p>Aula 2 - Mídias digitais, design e comunicação interativa</p><p>Aula 3 - Tendências nas mídias digitais</p><p>Aula 4 - Design de interação (IxD)</p><p>Referências</p><p>Aula 1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#referencias</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/index.html#referencias</p><p>COMUNICAÇÃO VISUAL</p><p>A semiótica é a ciência que estuda os signos. Mas, calma, não são</p><p>os signos do horóscopo, signo é tudo o que lembra alguma coisa.</p><p>28 minutos</p><p>INTRODUÇÃO</p><p>Boa parte da comunicação humana acontece de forma visual. Alguns pesquisadores</p><p>calculam que cerca de 90% do conteúdo de uma mensagem se dá por meio dos</p><p>elementos como: postura corporal, aparência, gestualidade, uso de cores e símbolos. Por</p><p>esta razão, tão importante quanto saber elaborar bem uma informação, é saber como</p><p>apresentá-la visualmente. Nesta aula serão discutidos importantes conceitos da</p><p>semiótica, teoria da Gestalt e suas interpretações e a teoria das cores. O uso estratégico</p><p>destas ferramentas pode potencializar a recepção e o alcance de uma mensagem. Na</p><p>atualidade, em cenários de consumo digital rápido e massivo, é fundamental</p><p>compreender e dominar a comunicação visual. Se você quer dominar a arte da criação</p><p>de conteúdos eficientes, preste muita atenção aos detalhes desta aula.</p><p>CONCEITOS DE SEMIÓTICA</p><p>Semiótica – a ciência dos significados</p><p>A semiótica é a ciência que estuda os signos. Mas, calma, não são os signos do</p><p>horóscopo, signo é tudo o que lembra alguma coisa. O conceito parece um pouco</p><p>complicado e filosófico demais, mas na prática é simples. Semiótica, que em grego</p><p>é semeiotiké, significa algo como "a arte dos sinais" e diz respeito ao estudo dos</p><p>sistemas de significação e comunicação em uma sociedade.</p><p>Os primeiros estudos sobre semiótica surgiram ainda no século XIX, tendo como seus</p><p>principais representantes Viesse-Iovski e Iuri Lotman na extinta União Soviética. Em</p><p>meados do século XX na França, Saussure, Greimas e Hjelmslev deram grandes</p><p>contribuições à reflexão associada à linguística, enquanto nos Estados Unidos da</p><p>América, Charles Peirce trouxe notáveis contribuições à área. Estas três escolas –</p><p>soviética, francesa e americana – são consideradas as principais escolas de origem dos</p><p>estudos semióticos (BARROS; CAFÉ, 2012, p. 20).</p><p>Existem três elementos da semiótica proposta por Charles Peirce – também chamada</p><p>de semiótica peirceana – que oferecem muita contribuição aos processos criativos de</p><p>comunicação visual. São eles: ícone, índice e símbolo.</p><p>Ícone</p><p>Um ícone é um signo que tem semelhança com o objeto ao qual faz referência. Por</p><p>exemplo: a fotografia de um cachorro que se assemelha ao cachorro fotografado, a</p><p>ilustração de um pássaro que qualquer pessoa, ao olhar, consegue compreender que é</p><p>um pássaro. De acordo com Epstein (1997, p. 49), “os ícones comunicam de forma</p><p>imediata porque são imediatamente percebidos: quadros, desenhos, estruturas, modelos,</p><p>esquemas, predicados, metáforas, comparações, figuras lógicas e poéticas, etc”.</p><p>Índice</p><p>Um índice indica algo, a relação deste signo com o objeto indica algo que aconteceu ou</p><p>vai acontecer. Diferentemente do ícone, ele precisa de algo para existir. São exemplos</p><p>de ícones: uma nuvem que indica que vai chover, uma fumaça que indica fogo, pegadas</p><p>que indicam que alguém passou por aquele lugar. Os índices são muito utilizados na</p><p>publicidade para demonstrar uma mensagem de forma não explícita.</p><p>Símbolo</p><p>O símbolo, por sua vez, é um signo convencionado. Ele é estabelecido por meio de uma</p><p>regra, seja ela cultural ou social. Um exemplo de símbolo é o desenho de um coração</p><p>que é convencionalmente atribuído ao órgão do corpo humano – embora não se pareça</p><p>com ele – e por convenção pode significar o amor. Palavras também são símbolos e só</p><p>podem ser utilizadas e compreendidas por pessoas que têm conhecimento das regras</p><p>linguísticas, por exemplo: uma palavra em português só é um símbolo para quem</p><p>domina as regras deste idioma.</p><p>Figura 1 | Cão tomando banho</p><p>Fonte: Pixabay .</p><p>Na figura anterior é possível reconhecer os três elementos: ícone, índice e símbolo.</p><p>O ícone é a ilustração de um cão, que obviamente se parece com um cão.</p><p>O índice aparece nos elementos que indicam que o animal está tomando um banho, pois</p><p>há espuma, bolhas e uma bacia na qual ele está imerso. Por último, o símbolo pode ser</p><p>identificado nas palavras que identificam a figura, pois a frase “cão tomando banho” só</p><p>faz sentido porque simbolicamente cada palavra tem um significado convencionado.</p><p>Ao compreender estes elementos fundamentais da semiótica peirciana é possível utilizar</p><p>os recursos da comunicação visual de forma mais eficiente e estratégica. Na atualidade</p><p>existe uma tendência de busca por conteúdos mais dinâmicos e sucintos, por isso,</p><p>quando bem utilizada, a semiótica pode ser uma das maiores aliadas do design de</p><p>mídias digitais.</p><p>PRINCÍPIOS DA GESTALT</p><p>Gestalt – um estudo da forma</p><p>A comunicação visual é composta por elementos culturais e sociais, como bem aponta a</p><p>semiótica, mas existem também perspectivas psicológicas</p><p>https://stefanini.com/pt-br/trends/artigos/revolucao-da-inteligencia-artificial</p><p>https://www.wsitebrasil.com.br/blog/post/empreendedorismo/o-que-e-funil-de-vendas/37</p><p>https://www.wsitebrasil.com.br/blog/post/empreendedorismo/o-que-e-funil-de-vendas/37</p><p>https://aelaschool.com/designvisual/halo-effect-e-ux-design/</p><p>https://dl.acm.org/doi/10.1145/3274192.3274224</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula0</p><p>• Aula 1 - Processos criativos</p><p>27 minutos</p><p>• Aula 2 - Princípios e elementos do design</p><p>23 minutos</p><p>• Aula 3 - Design de interface do usuário (UI)</p><p>23 minutos</p><p>• Aula 4 - Ferramentas e plataformas para design de interface do usuário (UI)</p><p>24 minutos</p><p>• Referências</p><p>5 minutos</p><p>0%</p><p>T</p><p>A-AA+</p><p>DESIGN PARA MÍDIAS DIGITAIS INTERATIVAS: O DESIGN DE</p><p>INTERFACES (UI)</p><p>102 minutos</p><p>Aula 1 - Processos criativos</p><p>Aula 2 - Princípios e elementos do design</p><p>Aula 3 - Design de interface do usuário (UI)</p><p>Aula 4 - Ferramentas e plataformas para design de interface do usuário (UI)</p><p>Referências</p><p>Aula 1</p><p>PROCESSOS CRIATIVOS</p><p>Nesta aula serão discutidas abordagens que podem contribuir com</p><p>a criação eficaz de designs de interação, por meio de um</p><p>planejamento bem executado, de uma identidade visual sólida e de</p><p>técnicas do design thinking.</p><p>27 minutos</p><p>INTRODUÇÃO</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#referencias</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/index.html#referencias</p><p>Para algumas pessoas, a criatividade é um fator ligado unicamente ao talento e à</p><p>espontaneidade, mas a verdade é que os processos criativos podem e devem ser</p><p>desenvolvidos a partir de métodos, estratégias, conceitos e ferramentas específicas.</p><p>Nesta aula serão discutidas abordagens que podem contribuir com a criação eficaz de</p><p>designs de interação. Por meio de um planejamento bem executado, de uma identidade</p><p>visual sólida e de técnicas do design thinking serão apresentadas diferentes</p><p>possibilidades de fomento à criatividade para melhorar o desenvolvimento de interfaces</p><p>interativas agradáveis aos usuários das mídias digitais. As grandes ideias no design não</p><p>são um golpe de sorte, mas sim a junção técnica e científica de conhecimentos</p><p>aprofundados sobre a área.</p><p>METODOLOGIAS DE PLANEJAMENTO</p><p>Planejar para alcançar</p><p>Imagine que alguém resolva construir uma casa. No começo, a ideia era fazer apenas</p><p>dois quartos, depois, no meio da execução, a pessoa decide acrescentar mais um,</p><p>passado algum tempo ela resolve acrescentar uma piscina e percebe que já não tem</p><p>espaço no lote para isso e então resolve derrubar um dos quartos já prontos para</p><p>construir a área de lazer. Uma obra sem planejamento é algo que pode resultar em</p><p>prejuízos financeiros e desperdício de tempo. Isso também se aplica ao design e aos</p><p>seus processos criativos.</p><p>O planejamento de um projeto é parte essencial do processo. Para Heldman (2005),</p><p>existem diversas vantagens na elaboração de um bom planejamento, dentre elas</p><p>destacam-se: melhor desempenho geral; redução dos prazos; maior qualidade;</p><p>comunicação mais eficaz; metodologias padronizadas; relatórios coerentes; execução</p><p>mais precisa.</p><p>Uma importante metodologia de planejamento é o design estratégico que tem ênfase na</p><p>inovação e sustentabilidade como parte do processo. Para Meroni (2008, p. 1), o design</p><p>estratégico é sobre evolução, ele "confere a entidades sociais e de mercado um sistema</p><p>de regras, crenças, valores e ferramentas para lidar com o ambiente externo, podendo</p><p>assim evoluir (e assim sobreviver com sucesso), bem como manter e desenvolver sua</p><p>própria identidade. E, ao fazer isso, influenciar e mudar o ambiente também".</p><p>Para Meroni (apud TELLUS, 2021) existem oito pilares para o uso do design</p><p>estratégico. São eles:</p><p>1. Sistema produto-serviço: integração de produtos, serviços e comunicação,</p><p>transformando a identidade da empresa em um diferencial;</p><p>2. Evolução: uma inovação com o propósito de trazer avanços ao sistema;</p><p>3. Definição e solução de problemas: para solucionar problemas é preciso</p><p>identificá-los;</p><p>4. Inovação social: mudanças culturais com ênfase na sustentabilidade e avanço</p><p>tecnológico;</p><p>5. Cenários: projeções visuais sobre o futuro;</p><p>6. Codesign: inclusão de outros atores nos processos e possibilidade de cocriação;</p><p>7. Diálogo estratégico: discussão coletiva do projeto e visão compartilhada de</p><p>futuro;</p><p>8. Construção de capacidades: preparação para contextos de mudanças e</p><p>necessidade de adequação.</p><p>O design estratégico, além de ser uma excelente ferramenta metodológica para o</p><p>planejamento e execução, também oferece a vantagem de uma perspectiva inovadora e</p><p>sustentável.</p><p>Outra importante abordagem é A XDM (eXtensible Design Methods), uma metodologia</p><p>de design que pode facilitar na organização e no desenvolvimento de projetos. Criada</p><p>por discentes e docentes da Universidade Federal de Pernambuco (UFPE), propõe uma</p><p>ordem cíclica para os projetos que permite alterações e correções em diversas etapas.</p><p>Figura 1 | Métodos de design extensível</p><p>Fonte: Pontes (2013).</p><p>A XDM trabalha com 5 abordagens:</p><p>1. Exploração do problema: definição das motivações, projeção de mercado e</p><p>comparação com a concorrência;</p><p>2. Geração de alternativas: tempestade de ideias (brainstorm), construção</p><p>colaborativa, analogias e metáforas a partir da pesquisa de produtos já</p><p>desenvolvidos;</p><p>3. Avaliação evolutiva: o designer nessa etapa faz experimentações com esboços</p><p>buscando identificar qualidades e possíveis problemas do produto em</p><p>desenvolvimento;</p><p>4. Avaliação de alternativas: por meio de uma busca sistemática por respostas são</p><p>analisadas soluções para problemas com propostas de intervenções estratégicas;</p><p>5. Descrição da solução: storyboard de uso do produto final com diferentes</p><p>possibilidades de aplicação.</p><p>Existem outras ferramentas metodológicas que podem ser aplicadas ao design, mas</p><p>estas duas são algumas das mais modernas e eficientes. O uso de metodologias de</p><p>planejamento é importante e pode facilitar os processos criativos e a execução do design</p><p>de interação para mídias digitais.</p><p>CONCEITOS DE IDENTIDADE VISUAL E MARCA</p><p>Marca e identidade visual</p><p>Uma característica de um bom design é quando os usuários e até os não usuários</p><p>conseguem reconhecer rapidamente um produto ou marca a partir de elementos da</p><p>identidade visual, como cores, logo, slogan ou outros. É importante saber que marca e</p><p>identidade visual são duas coisas diferentes, mas que dependem muito uma da outra.</p><p>Na literatura científica existem diversas percepções e definições do conceito de marca.</p><p>Quadro 1</p><p>| Definições do conceito de marca</p><p>Contexto Autor(es) Definição de marca</p><p>Global</p><p>Conejo e Wooliscrof</p><p>(2015)</p><p>"Marcas são construtos multidimensionais complexos, com vários graus de</p><p>significado, independência, co-criação e escopo. Marcas são sistemas</p><p>semióticos de marketing que geram valor para aqueles em contato direto ou</p><p>indireto, para a sociedade e para o ambiente mais amplo, através do</p><p>intercâmbio de significado co-criado" (p. 1)</p><p>De Chernatony (2010)</p><p>"... processo contínuo, uma interface dinâmica entre ações organizacionais e</p><p>interpretações de consumidores ao redor de um conjunto de valores funcionais</p><p>e emocionais que permitem uma promessa de experiência única e desejada."</p><p>Kapferer (2012)</p><p>"... um nome que simboliza um engajamento, uma cruzada ou um</p><p>comprometimento de longo prazo com um conjunto específico de valores</p><p>incorporados a produtos, serviços e comportamento, que faz com que a</p><p>organização, pessoa ou produto se sobressaia e se destaque" (p. 12)</p><p>Keller (1998)</p><p>"Marca é um conjunto dessas associações na memória do consumidor que</p><p>contribui para que este tenha maior percepção de valor do produto ou serviço,</p><p>valor esse incorporado quando tais associações forem únicas, salientes e</p><p>positivas"</p><p>Sern (2006)</p><p>Natureza da marca (significado literal ou metafórico). Função linguística</p><p>(pronome - pessoa, local, produto - ou verbo - significados). Locus de</p><p>representatividade (físico ou mental). Valência da percepção da marca</p><p>(positiva ou negativa)</p><p>Khauaja e Prado (2008)</p><p>"A marca assume uma identidade, uma forma de expressão que faz parte do</p><p>cotidiano das pessoas, as quais têm em mente um nome ao lembrar de um</p><p>produto ou serviço, e, ao mesmo tempo, representa o jeito de ser da empresa e</p><p>os seus princípios"</p><p>Nunes e Haigh (2003)</p><p>"As marcas são ativos financeiros e, sobretudo, estratégicos, haja vista seu</p><p>poder de influenciar consumidores, parceiros, colaboradores, e de interferir</p><p>nos canais de vendas e distribuição e até nas condições e termos de</p><p>fornecimento. Além disso, a marca mobiliza interesse dos investidores e pode</p><p>transformar a performance da organização e seu resultado financiero"</p><p>Perez (2004)</p><p>"marca é uma conexão simbólica e efetiva estabelecida entre uma</p><p>organização, sua oferta material, intangível e aspiracional e as pessoas para as</p><p>quais se destina" (p. 10)</p><p>Ribeiro (2006)</p><p>"... a melhor definição atribuída a uma marca é compará-la a uma cebola.</p><p>Cada parte da cebola é equivalente a um contato do consumidor com a marca</p><p>em questão, ou seja, para Troiano a marca não possui uma essência, um</p><p>caroço, mas sim pontos de contato que, em conjunto, formarão a percepção do</p><p>consumidor" (p. 94)</p><p>Fonte: Lourenço; Campos Junuir (2015, p. 13).</p><p>Para fins de discussão, será utilizado aqui o conceito de marca proposto por Keller</p><p>(1998) que trabalha com o conjunto de associações mentais e percepções associados aos</p><p>valores de um produto ou serviço. Sobre a importância de uma marca, é necessário</p><p>destacar que "as pessoas se apaixonam pelas marcas, confiam nelas e acreditam em sua</p><p>superioridade. O modo como a marca é percebida afeta seu sucesso, não importando se</p><p>você é uma startup, uma organização sem fins lucrativos ou um produto" (WHEELER,</p><p>2012, p. 12). Neste sentido observa-se ainda que o consumo e a experiência do usuário é</p><p>não apenas afetado, mas também regido, em grande parte, pelos seus vínculos, relações</p><p>e percepções sobre a marca.</p><p>A marca é visualizada e reconhecida pelo público por meio de sua identidade visual.</p><p>Para Chevalier e Mazzalovo (2007, p. 40): “as marcas existem somente porque podemos</p><p>reconhecê-las. E as reconhecemos porque percebemos as mensagens que enviam, suas</p><p>especificidades e uma certa constância ao longo do tempo”.</p><p>A identidade visual é composta por diferentes elementos e, embora não exista consenso</p><p>na literatura sobre a quantidade e especificidade destes, cabe destacar aqui os seguintes:</p><p>1. Cores.</p><p>2. Tipografia.</p><p>3. Logo;</p><p>4. Nome do produto / marca.</p><p>5. Slogan.</p><p>Um exemplo da aplicação eficiente e bem-sucedida de uma identidade visual é a do</p><p>McDonald’s, em qualquer lugar do mundo, são necessários poucos elementos para que</p><p>a maior parte das pessoas reconheça a marca e assimile imediatamente os valores que</p><p>ela representa.</p><p>Figura 2 | Logo McDonald’s</p><p>Fonte: divulgação.</p><p>No design de interação, a identidade visual é fundamental para a atração e fidelização</p><p>do usuário. Mozata (2009, p. 19) observa que “como as marcas estão por toda parte, os</p><p>designers gráficos têm que ir além da criação de identidade visual. Eles devem</p><p>promover uma promessa de valor".</p><p>Na era digital, boa parte da comunicação se dá com o suporte gráfico de ícones,</p><p>elementos que se assemelham aos objetos que referenciam e por isso são capazes de</p><p>substituir palavras e mensagens inteiras. A iconografia é um importante recurso da</p><p>identidade visual no design de interação, isso acontece, segundo Passos (2014), para que</p><p>a interação seja efetiva, a informação deve ser disponibilizada com clareza e</p><p>simplicidade guiada pelo contexto e o perfil do usuário que busca atender.</p><p>Por fim, ao pensar identidade visual e marca é fundamental alcançar o equilíbrio entre</p><p>inovação e familiaridade. Propostas muito incomuns, antiquadas ou mesmo inovadoras</p><p>demais podem despertar a rejeição do público. Considerando todas as complexidades</p><p>dos processos de comunicação, cabe ao designer de mídias digitais uma abordagem</p><p>criativa e de bom senso para que os valores e sentidos de uma marca encontre uma boa</p><p>referência simbólica no imaginário coletivo do público, consumidor ou não.</p><p>DESIGN THINKING</p><p>Um jeito diferente de pensar</p><p>O pensamento é a primeira etapa de qualquer criação. Por esta razão, o design de</p><p>interação para mídias digitais exige uma lógica de pensamento diferente das</p><p>tradicionais. Design thinking é um conceito associado a novas formas de perceber e</p><p>resolver problemas, fugindo das dinâmicas convencionais.</p><p>Segundo Vianna et al. (2012, p. 14), o design thinking é pensado a partir da busca por</p><p>explicações e a partir disso “o designer constantemente desafia seus padrões, fazendo e</p><p>desfazendo conjecturas, e transformando-as em oportunidades para a inovação”. Nesta</p><p>abordagem, tem-se um processo interativo e criativo com o objetivo de compreender o</p><p>usuário, suas capacidades e necessidades.</p><p>O design thinking, assim como outras metodologias, é composto por diversas etapas e</p><p>procedimentos, baseados em ações práticas. Essas etapas são: imersão, ideação,</p><p>prototipação e desenvolvimento. O processo de imersão pode ser subdividido em</p><p>empatia e definição.</p><p>Figura 3 | Processos do Design thinking</p><p>Fonte: elaborada pela autora.</p><p>A empatia é o ponto de partida para o design thinking. É nesta etapa inicial que o</p><p>designer busca aprender sobre o usuário, tentando se colocar no lugar dele. O bom</p><p>profissional deve observar e se perguntar "quem é este usuário?", "o que é importante</p><p>para essa pessoa?".</p><p>Na etapa de definição são criados pontos de vista a partir de pesquisas e observações</p><p>sobre as necessidades do usuário. O designer e/ou os colaboradores devem definir quais</p><p>problemas deverão ser resolvidos e como.</p><p>Na ideação são realizadas tempestades de ideias e outros processos criativos para a</p><p>solução de possíveis problemas. Nesta fase, o designer e sua equipe devem pensar nos</p><p>desafios e criar soluções inovadoras.</p><p>A prototipação tem como objetivo reduzir as possibilidades de falhas. É nesta fase que</p><p>são desenvolvidas as versões betas, que simulam o produto ou serviço final. Uma</p><p>importante pergunta neste processo é: "como posso mostrar a ideia?". A partir de então</p><p>tem-se um rascunho daquilo que se pretende criar.</p><p>O desenvolvimento é a etapa final, quando o projeto sai do papel e passa a ser testado</p><p>em todas as suas funcionalidades. O protótipo toma forma e é apresentado ao usuário</p><p>para então ser submetido a avaliações e feedbacks.</p><p>Esta fase é norteada por perguntas</p><p>como "o que funciona?", "o que não funciona?".</p><p>O design thinking é uma metodologia tão eficaz que tem sido aplicada em outros</p><p>setores, como o de recursos humanos. Trata-se de uma proposta que transcende a</p><p>abordagem gráfica ou tecnológica. Para Brown (2017, p. 1), “é uma abordagem</p><p>antropocêntrica para inovação que usa ferramentas dos designers para integrar as</p><p>necessidades das pessoas, as possibilidades da tecnologia e os requisitos para o sucesso</p><p>dos negócios”.</p><p>O foco do designer deve ser o desenvolvimento dos processos criativos para</p><p>proporcionar ao usuário uma experiência livre de problemas e dificuldades. Por meio de</p><p>uma abordagem humanizada, a metodologia do design thinking propõe uma nova forma</p><p>de trabalhar, observando as tendências de consumo, as possibilidades tecnológicas e os</p><p>valores da marca com parâmetros para o profissional designer.</p><p>VIDEOAULA</p><p>Neste vídeo, você o desafio é refletir sobre a importância do planejamento nos</p><p>processos criativos. Por meio de exemplos e analogias serão apresentadas ferramentas</p><p>metodológicas que podem contribuir com a criação ágil e eficaz de designs de interação</p><p>para mídias digitais. Para uma melhor percepção sobre a atuação do designer de mídias</p><p>digitais, a discussão também aborda importantes aspectos da identidade visual e sua</p><p>relevância no posicionamento estratégico de uma marca.</p><p>Videoaula</p><p>Saiba mais</p><p>Templates para inspiração</p><p>O que fazer quando a inspiração acaba? Copiar ideias não faz jus a um bom</p><p>profissional, mas é possível ter um novo olhar a partir da análise de projetos bem-</p><p>sucedidos. Se você gosta de admirar um bom trabalho, uma ótima opção é a página da</p><p>agência de marketing digital BigDrop. Parece uma exposição artística formada apenas</p><p>por belos trabalhos de designers e publicitários. Conheça a BigDrop!</p><p>Identidade visual – Rio 2016</p><p>Criar uma marca e identidade visual não é fácil. Você sabia que a marca e logo das</p><p>Olimpíadas de 2016 no Rio de Janeiro foi escolhida por 12 jurados após analisarem as</p><p>propostas de mais de 138 escritórios brasileiros de design? O incrível processo da</p><p>agência Tátil foi registrado em um curto documentário e registra as nuances e processos</p><p>criativos que levaram até o produto final. Veja o Making of Rio 2016.</p><p>Design thinking - animação</p><p>O design thinking também pode ajudar no planejamento de uma empresa ou negócio.</p><p>Por isso o Serviço Brasileiro de Apoio às Micro e Pequenas Empresas (SEBRAE) fez o</p><p>vídeo Processo Criativo – Design Thinking, super didático com o resumo dos</p><p>conceitos dessa metodologia. Não deixe de ver!</p><p>Aula 2</p><p>PRINCÍPIOS E ELEMENTOS DO DESIGN</p><p>https://www.bigdropinc.com/latest-work/</p><p>https://vimeo.com/18331485</p><p>https://www.youtube.com/watch?v=Bwjwb5aIcZ8</p><p>Nesta aula, você conhecerá importantes elementos técnicos do</p><p>design e aprenderá a aplicá-los de forma correta, obtendo</p><p>conhecimentos que o tornará habilitado a fazer novas</p><p>experimentações de design, consciente de que um bom projeto vai</p><p>muito além do bom gosto e demanda muita técnica.</p><p>23 minutos</p><p>INTRODUÇÃO</p><p>O design também é uma ciência. Por ser uma prática muito ligada a habilidades</p><p>artísticas e talentos naturais, o design com frequência é visto como algo meramente</p><p>intuitivo, o que não é verdade. Nesta aula, você conhecerá importantes elementos</p><p>técnicos do design e aprenderá a aplicá-los de forma correta. Por meio da análise de</p><p>produtos gráficos e importantes conceitos serão apresentados fundamentos da</p><p>legibilidade e interação na tipografia, lettering, hierarquia e ritmo de uma composição.</p><p>Com estes conhecimentos você estará habilitado a fazer novas experimentações de</p><p>design, consciente de que um bom projeto vai muito além do bom gosto e demanda</p><p>muita técnica.</p><p>TIPOGRAFIA E LETTERING</p><p>Texto desenhado</p><p>A escrita é, acima de tudo, uma composição gráfica. A boa compreensão de um texto</p><p>escrito não depende apenas da familiaridade com os tipos e caracteres, mas também da</p><p>forma como eles são apresentados. Tipografia é "o conjunto de práticas e processos</p><p>envolvidos na criação e utilização de símbolos visíveis relacionados aos caracteres</p><p>ortográficos (letras) e para-ortográficos (números, sinais de pontuação, etc.) para fins de</p><p>reprodução” (FARIAS, 2016, p. 10). Outro conceito importante nesta área do design é</p><p>o lettering que, segundo Flor (2017, p. 12) especifica "uma expressão tipográfica única,</p><p>customizada para uma aplicação específica". No design da escrita há ainda a caligrafia,</p><p>que é a arte da escrita cursiva e manual por meio de canetas, pincéis, elementos digitais</p><p>ou outros. Trata-se de um "processo manual para a obtenção de letras únicas, a partir de</p><p>traçados contínuos à mão livre" (FARIAS, 2016, p. 11).</p><p>Figura 1 | Técnicas das disciplinas das letras</p><p>Fonte: Nunes (2020).</p><p>Ao escolher o tipo de uma letra é necessário observar importantes elementos de sua</p><p>representação gráfica.</p><p>Serifa</p><p>As serifas são pequenas hastes ou traços que arrematam a haste de algumas letras. As</p><p>famílias tipográficas sem serifas são chamadas sans-serifs e as que têm serifa são</p><p>chamadas serifadas. As fontes serifadas são recomendadas para textos mais longos. A</p><p>diferença provocada por este recurso no design pode ser observada na atualização de</p><p>marca da empresa Google, que trocou seu logo por uma proposta clean e sem serifa.</p><p>Figura 2 | Atualização de marca da empresa Google</p><p>Fonte: elaborada pela autora.</p><p>Peso</p><p>O peso é uma qualidade ligada à espessura dos caracteres de um tipo. Ele pode ser</p><p>normal, negrito (bold), mais negrito (bolder) e mais fino (lighter). As fontes bold são</p><p>ótimas para destaques, mas em textos maiores podem sobrecarregar o visual. O ideal é</p><p>combinar os pesos de forma complementar.</p><p>Entrelinha, espaçamento e entreletra</p><p>Entrelinha é o espaço entre duas linhas de texto e pode variar de acordo com as</p><p>características de cada tipo. Para uma leitura confortável é importante que o</p><p>espaçamento entre as linhas não seja muito próximo, para não afetar a compreensão, ou</p><p>muito afastado, para não afetar o sentido do texto.</p><p>Espaçamento é a distância entre os caracteres em uma palavra. Deve ser orientada pelo</p><p>equilíbrio, à semelhança da entrelinha.</p><p>Entreletra é um conceito muito parecido com o de espaçamento, mas não deve ser</p><p>confundido com ele. Trata-se do espaço entre caracteres específicos, variando nas</p><p>palavras de acordo com o posicionamento de cada letra. É o posicionamento único que</p><p>o "r" tem ao lado do "a", e que é totalmente diferente do posicionamento que este</p><p>caractere ocupa ao lado de outra letra, como o "b" por exemplo.</p><p>Tamanho</p><p>O tamanho da fonte afeta significativamente a legibilidade, ele deve ser pensado tendo</p><p>em consideração informações sobre o usuário (idade e tempo médio de exposição a telas</p><p>do público-alvo), bem como características do dispositivo que será utilizado para</p><p>acessar o conteúdo (possíveis tamanhos de tela). Uma letra pequena demais ou grande</p><p>demais pode fazer com que o usuário se irrite com a interface e desista daquela</p><p>experiência.</p><p>Um texto bem diagramado e desenhado pode ser o grande diferencial de um projeto de</p><p>design. No design de interação, o conforto do texto pode ser o motivo que fará o usuário</p><p>ficar um pouco mais naquela interface, ou desistir dela.</p><p>ELEMENTOS DO DESIGN: LINHA, TEXTURA, FORMATO,</p><p>ESPAÇO E COR</p><p>Elementos do design</p><p>Para apreciar um design é preciso saber o que os símbolos nele apresentado significam.</p><p>É por esta razão que, quando lemos hieróglifos – a escrita de pictogramas utilizada</p><p>pelos egípcios antigos – não conseguimos entender o que os textos dizem porque</p><p>aqueles símbolos não têm significado para nós.</p><p>No design, todos os elementos visuais têm papel importante na comunicação, desde os</p><p>mais óbvios como as formas, até os mais sutis como os espaços em branco. Elementos</p><p>conceituais são aqueles que não vemos, e por isso existem apenas no conceito. São</p><p>sensações volume, ângulos, espaços e outras percepções não visuais. Já os elementos</p><p>visuais podem ser percebidos pelos olhos. Segundo Flavia Paradella (2014, p. 2) "suas</p><p>características (comprimento, largura, textura ou cor) dependem do material utilizado ou</p><p>da maneira de como o representamos. Os elementos visuais formam a parte mais</p><p>proeminente da representação gráfica, pois são aquilo que podemos ver de fato".</p><p>O design é composto por diversos elementos visuais, e a classificação deles pode variar</p><p>na literatura científica sobre o tema. Para fins didáticos serão estudados apenas cinco</p><p>nesta discussão.</p><p>Linha</p><p>O ponto é o elemento básico da comunicação visual, é considerado o ponto de partida</p><p>para qualquer criação. O movimento de um ponto ou a ligação entre um ponto e outro</p><p>forma uma linha. As linhas podem ter variadas espessuras, tracejados, ângulos retos ou</p><p>curvilíneos. A linha tem um importante papel na continuidade, ela ajuda a organizar a</p><p>composição e direciona o olhar.</p><p>Textura</p><p>A textura é um elemento sensorial, que pode ser visual ou tátil. Ela é um recurso que</p><p>pode fortalecer e atribuir significados à imagem. São exemplos de textura visual as</p><p>aparências de: vidro, madeira, pedra, água e outros. Este recurso deve ser usado com</p><p>moderação para não causar poluição visual.</p><p>Forma</p><p>Quando um conjunto de linhas forma um objeto, ele é denominado, então, forma.</p><p>Existem formas geométricas e formas icônicas. A forma desperta significados e</p><p>referências na mente, por isso elas geralmente ocupam papel central na comunicação</p><p>visual.</p><p>Cor</p><p>A cor pode ser um dos mais impactantes elementos da comunicação visual. Ela pode</p><p>despertar emoções e sensações de forma muito específica. Para utilizar bem este recurso</p><p>é importante conhecer sobre teoria das cores e também sobre psicologia das cores.</p><p>Espaço</p><p>O espaço é um elemento conceitual que tem efeitos visíveis. No design é importante que</p><p>os elementos visuais não ocupem todo o espaço disponível. É importante haver espaço</p><p>negativo, ou seja, espaço livre. Com a tendência do design minimalista, fica ainda mais</p><p>evidente a importância de uma boa distribuição dos espaços na composição, com um</p><p>equilíbrio entre negativos e positivos.</p><p>O conhecimento sobre os elementos visuais e conceituais do design é fundamental para</p><p>os processos de interação. Os usuários de mídias digitais gastam, em média, diversas</p><p>horas por dia expostos às telas, por isso o conforto e a boa utilização dos elementos do</p><p>design são de grande importância para a interface do usuário e sua experiência coma</p><p>uma marca.</p><p>EIXO, HIERARQUIA E RITMO NO DESIGN</p><p>Organização e estrutura no design</p><p>Na matemática é ensinado que “a ordem dos fatores não altera o produto”, mas no</p><p>design de interação não é assim que funciona. Existem regras e técnicas de apresentação</p><p>das informações visuais que determinam a importância dos elementos em uma</p><p>composição.</p><p>Existem alguns princípios na interface do usuário que podem proporcionar mais</p><p>conforto e uma experiência mais agradável. São estes princípios também os</p><p>responsáveis pelo fluxo e lógica das mensagens visuais. Segundo Dondis (1997, p. 52),</p><p>“são muitos os pontos de vista a partir dos quais podemos analisar qualquer obra visual;</p><p>um dos mais reveladores é decompô-la em seus elementos constitutivos, para melhor</p><p>compreendermos o todo”. Dentre os elementos estruturais de uma composição visual,</p><p>para fins didáticos, faz-se necessário destacar três, são eles: eixo, hierarquia e ritmo.</p><p>Eixo</p><p>O eixo é um elemento de organização, trata-se de uma linha imaginária que possibilita a</p><p>percepção do alinhamento, continuidade e movimento da composição. É o eixo que</p><p>auxilia na compreensão da ordem das informações, trazendo conforto visual, coerência</p><p>e estabilidade ao design. O alinhamento é um atributo do texto demarcado pelos</p><p>parágrafos e que pode auxiliar na estética, compreensão e hierarquia das informações</p><p>escritas. Este atributo também pode ser aplicado a ilustrações e outros elementos na</p><p>composição. Os principais alinhamentos existentes são: à esquerda, ao centro,</p><p>justificado e à direita. No design de interação, o alinhamento do layout apresenta ao</p><p>usuário, em um eixo de colunas horizontais ou verticais, informações visuais sobre os</p><p>caminhos que devem ser seguidos.</p><p>Hierarquia</p><p>A hierarquia define a ordem de importância dos elementos gráficos no layout. Objetos</p><p>em destaque, quer por tamanho ou por posição ótica, recebem maior atenção na</p><p>interface do usuário. O uso de cores, peso tipográfico e outros recursos pode estabelecer</p><p>a hierarquia no design de interação. Tamanho, forma e posição são importantes</p><p>elementos na hierarquização das informações no design.</p><p>Figura 3 | Hierarquia no design</p><p>Fonte: elaborada pela autora.</p><p>Ritmo</p><p>O ritmo é o movimento, ou sensação de movimento, criado a partir da padronização de</p><p>certos elementos no layout. Segundo Rüthschilling (2008, p. 62), "a estrutura formal</p><p>construída pela repetição dos elementos de ritmo promove o entrelaçamento gráfico-</p><p>visual. Metaforicamente, os elementos de ritmo atuam como impulsos responsáveis pela</p><p>ação de propagação do tratamento visual que vem cobrindo a superfície". Os padrões</p><p>definem uma unidade a partir da repetição e semelhança, servindo como referência. A</p><p>quebra do padrão, que também colabora com o ritmo, traz um choque visual por meio</p><p>da interrupção por um elemento diferente.</p><p>Para a criação de uma interface do usuário atraente e cativante é necessário o bom uso</p><p>dos elementos e princípios do design. O bom profissional deve estudar todas as</p><p>perspectivas e possíveis aplicações técnicas dos recursos gráficos com os quais trabalha</p><p>para criar um bom design de interação.</p><p>VIDEOAULA</p><p>Neste vídeo são apresentados importantes elementos técnicos da visualidade no design.</p><p>Por meio da exposição dialógica e de provocações sobre o tema, são demonstrados os</p><p>diversos recursos estratégicos existentes as escolhas de tipografia, hierarquia, ritmo e</p><p>eixo na interface do usuário. Para fins didáticos e científicos, esta aula discute também a</p><p>funcionalidade de elementos do design como linha, textura, forma, cor e espaço.</p><p>Videoaula</p><p>Saiba mais</p><p>Composição visual</p><p>Os elementos da composição visual são a essência do design. Por isso, para se</p><p>aprofundar no assunto, uma ótima opção é o livro Composição Visual de Bruno Garcia.</p><p>São 224 páginas sobre a codificação de mensagens por meio de elementos visuais.</p><p>Disponível gratuitamente na biblioteca virtual.</p><p>Sintaxe da linguagem visual</p><p>A comunicação acontece por meio de processos de significação, por isso é importante</p><p>dominar os princípios da sintaxe da linguagem visual no design. Em sua obra Sintaxe</p><p>da linguagem visual, Silvia Guadagnini apresenta conceitos e provocações de grande</p><p>contribuição para o design de mídias digitais. Disponível gratuitamente na biblioteca</p><p>virtual.</p><p>Modelos de layouts</p><p>Para treinar suas percepções sobre a estruturação dos elementos do design, você pode</p><p>utilizar modelos pré-prontos de layout. Na plataforma Vennage você pode editar e se</p><p>inspirar em uma galeria com diversas opções de composições visuais. Disponível</p><p>gratuitamente em língua portuguesa.</p><p>Aula 3</p><p>DESIGN DE INTERFACE DO USUÁRIO (UI)</p><p>Nesta aula, você aprenderá a diferença</p><p>entre wireframes, mockups e protótipos de sites. Outra importante</p><p>lição a ser observada nesta aula é a necessidade de um design de</p><p>interação que atenda de forma satisfatória aos conceitos de eficácia</p><p>e eficiência.</p><p>23 minutos</p><p>INTRODUÇÃO</p><p>Existem diferentes níveis de complexidade no design de mídias digitais. E para ajudar</p><p>na criação, elaboração dos materiais, bem como na escolha das plataformas e etapas de</p><p>testes, existem diferentes abordagens possíveis. Nesta aula, você aprenderá a diferença</p><p>entre wireframes, mockups e protótipos de sites. Outra importante lição a ser observada</p><p>nesta aula é a necessidade de um design de interação</p><p>que atenda de forma satisfatória</p><p>aos conceitos de eficácia e eficiência. Para uma maior percepção dos conceitos práticos</p><p>discutidos e suas aplicabilidades, serão observadas também as diferentes dimensões do</p><p>https://biblioteca-virtual.com/detalhes/ebook/608704e954aa8872fc616eb6</p><p>https://biblioteca-virtual.com/detalhes/ebook/6087053d54aa8872fb666ab4</p><p>https://biblioteca-virtual.com/detalhes/ebook/6087053d54aa8872fb666ab4</p><p>https://pt.venngage.com/templates/layouts</p><p>design de interação para mídias digitais. Prepare-se para refletir sobre novos aspectos da</p><p>interface do usuário e seus impactos na experiência do usuário.</p><p>WIREFRAMES, MOCKUPS E PROTÓTIPOS DE SITES</p><p>Testes de design digital</p><p>Existe um ditado popular que diz que “para quem não sabe aonde quer ir, qualquer</p><p>caminho serve”, mas isto também significa que sem estabelecer uma meta não se chega</p><p>a lugar algum. No design de mídias digitais, ao trabalhar na criação de sites ou</p><p>aplicativos, é importante traçar os objetivos de uma interface e estabelecer os meios que</p><p>serão utilizados para atingi-los. Para desenhar as primeiras etapas de uma interface</p><p>existem diferentes recursos e dentre eles cabe destacar três: os wireframes, os mockups e</p><p>os protótipos. Embora algumas vezes estes três termos sejam utilizados como</p><p>sinônimos, eles descrevem propostas bastante diferentes.</p><p>Wireframes</p><p>Wireframes são uma versão reduzida da proposta visual de um projeto. Eles funcionam</p><p>como uma referência e têm o propósito de reduzir possíveis erros no design. Para</p><p>Memória (2005, p. 35), “os wireframes são um rascunho de uma tela específica que</p><p>posiciona a informação e a navegação, incluindo-se aí agrupamento, ordem e hierarquia</p><p>do conteúdo. É um esqueleto que organiza os elementos de interface, sem a</p><p>interferência do projeto visual”. No wireframe não é necessário inserir identidade</p><p>visual, textos ou cores, e eles podem ser feitos à mão, em softwares ou em plataformas</p><p>online. Wireframes auxiliam no trabalho do designer, evitam atrasos, facilitam o diálogo</p><p>com o cliente e podem também contribuir com a percepção de diferentes arranjos no</p><p>layout.</p><p>Mockups</p><p>O mockup é uma representação gráfica do produto. Ao contrário do wireframe que</p><p>apresenta a estrutura da proposta em baixa fidelidade, o mockup se aproxima mais do</p><p>resultado esperado. Para Pinheiro (2016, p. 56), "um mockup é uma representação</p><p>estática de média a alta fidelidade de um design. Muitas vezes um mockup é um</p><p>rascunho bem próximo do design final do produto, ou até o próprio design visual do</p><p>produto final". O mockup usa elementos um pouco mais elaborados que o wireframe,</p><p>trazendo a possibilidade de experiência do visual do produto e permite a avaliação de</p><p>aspectos estéticos mais detalhados antes da prototipação ou publicação do produto final.</p><p>Protótipo</p><p>O protótipo é uma aproximação ou imitação do produto final. Um dos seus principais</p><p>objetivos é testar o fluxo e a experiência do usuário com a interface. Segundo Sharp,</p><p>Rogers e Preece (2013, p. 390), "um protótipo é uma manifestação de um design que</p><p>permite aos grupos de interesse interagirem com ele e explorarem sua adequação". Uma</p><p>das principais vantagens do protótipo é que é mais fácil editá-lo e corrigi-lo do que</p><p>alterar uma versão final e já publicada de um site, aplicativo ou qualquer outra mídia</p><p>digital.</p><p>Figura 1 | Diferença entre wireframes, mockups e protótipos</p><p>Fonte: Webuters (2020).</p><p>A fidelidade entre o design das projeções e o do produto final é diferente em cada uma</p><p>das três propostas, sendo o wireframe de baixa fidelidade, o mockup de média fidelidade</p><p>e o protótipo de alta fidelidade. Isso não significa que qualquer um deles seja inferior ao</p><p>outro, existem situações e demandas específicas para cada uma destas abordagens e</p><p>cabe ao bom designer saber quando e qual delas utilizar.</p><p>EFICIÊNCIA E EFICÁCIA NO DESIGN DE INTERFACE DO</p><p>USUÁRIO (UI)</p><p>Fácil de entender e simples de manusear</p><p>Eficiência e eficácia são palavras parecidas, mas não têm o mesmo significado. No</p><p>design de interface do usuário (UI), eficácia e eficiência são elementos que, juntos à</p><p>satisfação do usuário, fazem parte das metas de usabilidade e contribuem para uma</p><p>experiência agradável.</p><p>De acordo com Christianne Falcão e Marcelo Soares (2013, p. 4), "eficácia: refere-se à</p><p>dimensão pela qual um objetivo ou tarefa são atingidos. A eficácia mede a relação entre</p><p>os resultados obtidos e os objetivos pretendidos, ou seja, ser eficaz é conseguir atingir</p><p>um dado objetivo". Na interface do usuário, um design eficaz permite que uma tarefa</p><p>seja executada de forma completa e correta.</p><p>Ainda segundo Christianne Falcão e Marcelo Soares (2013, p. 4), "eficiência: refere-se à</p><p>quantidade de esforço requerido para se atingir um objetivo. Quanto menor o esforço,</p><p>maior a eficiência". É muito importante atingir os objetivos por meio no design da</p><p>interface do usuário, isso denota eficácia, mas a melhor maneira de alcançar isso é com</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/assets/img/fig_a3_01.jpg</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/assets/img/fig_a3_01.jpg</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U2/assets/img/fig_a3_01.jpg</p><p>processos eficientes. A eficiência também diz respeito aos recursos e esforços gastos</p><p>para chegar à eficácia. Para Hashimoto (2006), eficiência é fazer certo as coisas, e</p><p>eficácia é fazer as coisas certas. O ideal é que o usuário complete a tarefa, no menor</p><p>tempo possível e com o máximo de facilidade.</p><p>Para uma interface do usuário eficaz e eficiente é importante prestar atenção a alguns</p><p>aspectos:</p><p>Clareza</p><p>Para que uma interface seja eficaz e eficiente é necessário que o usuário compreenda</p><p>suas funções, utilidades e consiga interagir com facilidade. A clareza do design permite</p><p>uma navegação intuitiva e confiável. Por meio dela é possível identificar os comandos</p><p>interativos e compreender como eles podem ajudar.</p><p>Interatividade</p><p>A interatividade é um dos principais recursos nas mídias digitais. Ela permite o acesso a</p><p>serviços e informações. Uma boa interface do usuário traz a sensação de controle ao</p><p>navegador. É a interação eficaz e eficiente por meio da comunicação (da fácil e rápida)</p><p>dos usuários com aquilo – ou aqueles – que procuram.</p><p>Simplicidade</p><p>Uma boa interface do usuário precisa prender a atenção e para isso é importante não</p><p>sobrecarregar os espaços com informações. Excesso de anúncios ou elementos visuais</p><p>sobrecarregados podem fazer com que as pessoas desistam da experiência. Por isso a</p><p>simplicidade no design é sempre uma escolha acertada.</p><p>Uma ação por tela</p><p>A intuitividade é facilitada pela simplicidade, então o ideal é atribuir uma ação por tela.</p><p>A inclusão de várias ações em uma mesma tela pode confundir e dificultar a</p><p>compreensão. Para Ibañez (2019, [s. p.]), "cada tela projetada deve prover uma única</p><p>ação de valor real para a pessoa que a utiliza. Isso facilita o aprendizado, o uso e o</p><p>acréscimo ou aprimoramento quando necessário".</p><p>Organização e hierarquia</p><p>A hierarquia determina o peso e a importância das informações em um design, enquanto</p><p>a organização traz conforto visual e estruturação do conteúdo. A designer Márcia Ibañez</p><p>(2019, [s. p.]) ressalta que "hierarquias visuais fracas dão pouca pista sobre onde</p><p>descansar o olhar e acabam ensejando sentimentos/percepções de desordem e</p><p>confusão".</p><p>A eficácia está ligada aos resultados esperados e infalibilidade dos processos. Nas</p><p>mídias digitais, o design eficaz da interface do usuário deve permitir que os objetivos</p><p>sejam alcançados, ocorra a aprendizagem dos processos de forma fácil, as tarefas</p><p>demandadas sejam realizadas e as informações sejam acessadas de forma satisfatória.</p><p>5 DIMENSÕES DO DESIGN PARA MÍDIAS DIGITAIS</p><p>INTERATIVAS</p><p>5 Dimensões do design de interação</p><p>Quando você vai a um lugar pela primeira vez, diversos elementos da interação</p><p>influenciam sua opinião sobre aquela experiência. A aparência estética do local, a</p><p>higiene do ambiente, as pessoas ao seu redor e até as conversas podem resultar em uma</p><p>impressão boa ou péssima sobre aquele estabelecimento.</p><p>Toda interação provoca sensações e resulta em uma experiência, seja ela agradável ou</p><p>não. Existem diversas dimensões que podem interferir nas percepções e compreensões</p><p>do design de interação nas mídias digitais. Para fins didáticos, cabe destacar cinco delas:</p><p>Palavras</p><p>Tudo o que envolve a textualidade e em especial as palavras utilizadas para botões,</p><p>rótulos e outros elementos de interação fazem parte desta importante dimensão do</p><p>design. Não podem ser escolhas ao acaso, mas devem ser significativas e de</p><p>comunicação eficaz, ou seja, comunicar da melhor forma possível e de forma sucinta.</p><p>Por meio das palavras, o usuário deve saber tudo o que precisa sobre o produto e a</p><p>navegação.</p><p>Representações visuais</p><p>Os elementos gráficos são responsáveis pela composição estética da interface do</p><p>usuário, eles auxiliam todo o processo de interação e comunicação. As representações</p><p>visuais atuam como um binômio junto ao texto e deles resultam diversos aspectos da</p><p>experiência do usuário.</p><p>Objetos e espaços</p><p>É importante considerar os meios físicos (objetos) que o usuário utilizara para acessar</p><p>aquele design. A mídia pode ser acessada em um laptop com mouse e teclado? Será</p><p>utilizada em celulares com dedos no visor? Tudo isso faz parte de uma importante</p><p>dimensão a ser considerada nos processos criativos do design de interação. Quanto mais</p><p>detalhado for esse planejamento, maiores as chances de uma interface do usuário eficaz</p><p>e eficiente.</p><p>Tempo</p><p>O tempo é um conceito abstrato e uma dimensão muito relevante do design de</p><p>interação. É importante observar o tempo gasto pelo usuário com aquele produto, as</p><p>possibilidades de retomar a interação da parte em que parou e ainda aspectos</p><p>relacionados as mudanças das mídias como animação, vídeos, áudios e feedback visual.</p><p>Comportamentos</p><p>As quatro primeiras dimensões apresentadas contribuem para a consolidação da quinta</p><p>dimensão: o comportamento. Isso diz respeito às ações e reações provocadas pelo</p><p>produto. O comportamento do usuário em relação à interface e aquilo que lhe é</p><p>oferecido é um importante aspecto do design de interação.</p><p>Para Ellwanger (2013, p. 800) "usuários vão vivenciar experiências de qualquer forma,</p><p>sejam elas provocadas ou não e estes são os motivos pelos quais é necessário que tais</p><p>experiências sejam planejadas”, ainda segundo a autora, “devido à sua subjetividade,</p><p>pode-se certamente ter um melhor direcionamento do que o usuário irá experimentar,</p><p>minimizando as experiências negativas". Cabe ao bom designer estar atento a todas as</p><p>dimensões do design de interação e saber utilizar da melhor maneira suas</p><p>potencialidades.</p><p>VIDEOAULA</p><p>Neste vídeo são apresentadas e discutidas importantes ferramentas do design de</p><p>interação. Por meio de exemplos e analogias, serão demonstradas as aplicações</p><p>de wireframes, mockups e protótipos na criação designs para mídias digitais. Você será</p><p>desafiado a refletir sobre os conceitos de eficácia e eficiência e sua aplicabilidade na</p><p>interface do usuário (UI). Por fim, para uma melhor compreensão dos conceitos, são</p><p>abordadas cinco importantes dimensões do design de interação.</p><p>Videoaula</p><p>Saiba mais</p><p>Wireframes e mockups</p><p>Para treinar suas habilidades no design de interação, você pode acessar a Balsamiq,</p><p>uma plataforma de criação de wireframes que trabalha com telas iniciais de baixa</p><p>fidelidade.</p><p>Protótipos</p><p>Uma das melhores plataformas da atualidade para prototipação é o Figma. Por meio</p><p>desta ferramenta online é possível criar protótipos navegáveis e interativos. Há ainda a</p><p>possibilidade de colaboração, ou seja, um mesmo projeto pode ser desenvolvido por</p><p>diversas pessoas.</p><p>Interação humano-computador (IHC)</p><p>No livro de Morais (2014), intitulado Interação humano-computador é possível</p><p>aprender mais sobre importantes aspectos da funcionalidade de aplicações e design de</p><p>interação. Disponível gratuitamente na biblioteca virtual.</p><p>Aula 4</p><p>FERRAMENTAS E PLATAFORMAS PARA DESIGN DE INTERFACE DO</p><p>USUÁRIO (UI)</p><p>http://www.balsamiq.com/products/mockups</p><p>https://www.figma.com/</p><p>https://biblioteca-virtual.com/detalhes/ebook/6087052f54aa8872fb666a52</p><p>Nesta aula você vai conhecer alguns dos principais recursos de</p><p>desenho e edição de interfaces disponíveis no mercado e saber que</p><p>existem recursos em diferentes plataformas: os softwares, as</p><p>plataformas online e as ferramentas em redes sociais.</p><p>24 minutos</p><p>INTRODUÇÃO</p><p>Na era digital, o acesso à internet se tornou mais fácil, permitindo maior acesso a</p><p>ferramentas de criação de designs interativos. Nesta aula você vai conhecer alguns dos</p><p>principais recursos de desenho e edição de interfaces disponíveis no mercado. Existem</p><p>recursos em diferentes plataformas e você conhecerá três das principais possibilidades:</p><p>os softwares, as plataformas online e as ferramentas em redes sociais. A partir de uma</p><p>detalhada relação das vantagens, desvantagens e custos, você poderá refletir sobre quais</p><p>ferramentas mais se adequam a cada demanda e como se preparar para trabalhar com os</p><p>recursos mais populares do mercado do design para mídias digitais.</p><p>SOFTWARES PARA DESIGN DE INTERFACES</p><p>Antes da popularização da internet e dos avanços da computação, o design era, na</p><p>maioria das vezes, um processo próximo ao artesanal. Na era digital e com a ênfase na</p><p>interatividade, os softwares, plataformas onlines e até editores das redes sociais</p><p>tornaram-se grandes aliados do design de interação.</p><p>Com a abundância de ofertas de produtos interativos, os usuários também estão se</p><p>tornando mais seletivos e exigentes. Nielsen e Loranger (2007, p. 1) observam que "há</p><p>dez anos, a web era algo diferente para as pessoas. Hoje ela é uma rotina, é uma</p><p>ferramenta. Se for de fácil acesso, elas a utilizarão, do contrário, não". Tais colocações</p><p>evidenciam o impacto que um bom design de interação pode oferecer na</p><p>competitividade de um produto.</p><p>Até os anos 1990 era muito difícil o acesso a softwares de design. Além de</p><p>apresentarem um alto custo, eles eram de difícil utilização, demandavam uma elevada</p><p>especialização profissional e máquinas muito específicas para o seu manuseio.</p><p>Felizmente, hoje existem programas gratuitos e de utilização simples que podem</p><p>contribuir muito nos processos criativos do design de interação.</p><p>A cientista da informação Noemi Scherer (2018, p. 9) ressalta as grandes contribuições</p><p>dadas pelos softwares de design, para a pesquisadora "o seu uso é essencial para o</p><p>trabalho de um designer, pois o torna mais fácil e prático, reduz o tempo de criação,</p><p>revisão e alteração do projeto, garante um trabalho mais econômico, uma boa precisão e</p><p>melhora do fluxo das informações". Para finalidades didáticas, foram selecionados 3</p><p>dentre os mais populares e acessíveis do mercado na atualidade. São eles:</p><p>GIMP</p><p>O GIMP é um software com diversos recursos que permite a criação de mockups,</p><p>composições gráficas, banners, cards e diversos outros tipos de design. Com algumas</p><p>similaridades com o popular programa da Adobe, o Photoshop, ele permite manipular</p><p>camadas, trabalhar iluminação, filtros, pinturas e vetores. Este software dialoga com</p><p>formatos nativos de outros programas, é estável, rápido e permite uma interface flexível.</p><p>Além destas vantagens, o software é gratuito e pode ser obtido com facilidade em na</p><p>página gimp.org.</p><p>Inkscape</p><p>O Inkscape é um avançado software com ênfase na manipulação de vetores. Este</p><p>aplicativo oferece várias possibilidades de projetos que incluem composições</p><p>complexas, gráficos, diagramas e outros. As desvantagens deste software são: a</p><p>ausência de suporte nativo para CMYK, que dificulta layouts para o impresso; interface</p><p>limitada;</p><p>pouco uso no mercado se comparado a outros softwares semelhantes. O</p><p>Inkscape trabalha com scalable vector graphics (.svg) como padrão nativo e é gratuito.</p><p>Adobe Illustrator</p><p>O Illustrator da Adobe é um dos maiores concorrentes do CorelDRAW da Corel</p><p>Corporation no mercado do design. Algumas das vantagens do Illustrator é que sua</p><p>interface é mais intuitiva, facilitando a aprendizagem. Trabalha com sincronização de</p><p>cores, ferramenta extratora de CSS, exportação svg, guias inteligentes e opções de</p><p>ampliação. Suas desvantagens são: o custo de aquisição; a interface avançada que pode</p><p>intimidar iniciantes; a demanda por hardwares avançados, com placas de vídeo,</p><p>memória e processador de maiores capacidades.</p><p>É importante que o designer de mídias digitais esteja familiarizado com diferentes</p><p>softwares de edição e domine com excelência ao menos um deles. Em tempos de</p><p>democratização do conhecimento e inteligência coletiva, é fundamental que a</p><p>qualificação do designer de interação inclua as principais ferramentas de edição do</p><p>mercado.</p><p>PLATAFORMAS ONLINE PARA DESIGN DE INTERFACES</p><p>Design online</p><p>O conhecimento teórico é o grande alicerce do design de interação, mas é por meio das</p><p>ferramentas tecnológicas que as estruturas de uma boa composição gráfica são erguidas.</p><p>Além dos recursos oferecidos pelos softwares, existem hoje diversas plataformas online</p><p>que possibilitam o trabalho colaborativo, a recuperação fácil de arquivos e o menor</p><p>comprometimento dos espaços nos dispositivos utilizados para a criação e edição de</p><p>designs.</p><p>Uma forma eficaz e eficiente de criação de interfaces de usuário é por intermédio de</p><p>https://gimp.org/</p><p>outras interfaces disponíveis em sistemas de nuvens ou plataformas de mídias digitais</p><p>específicas para a construção de designs de interação. Yvonne Rogers, Helen Sharp e</p><p>Jennifer Prrece (2005, p. 28) observam que "o campo interdisciplinar mais conhecido é</p><p>a Interação Homem-Computador (IHC), que se preocupa com o design, a avaliação e a</p><p>implementação de sistemas computacionais interativos para uso humano e com o estudo</p><p>de fenômenos importantes que o rodeiam". No design a IHC pode acontecer como</p><p>produto final e como meio para desenvolvimento do produto.</p><p>Existem diversas plataformas com recursos para a criação de composições do design de</p><p>interação e, embora exista sempre a possibilidade do surgimento de outras novas, é</p><p>importante destacar algumas das mais populares na atualidade.</p><p>Figma</p><p>Figma é um editor online com ênfase no trabalho colaborativo. A plataforma possibilita</p><p>a criação de diversas interfaces e protótipos para mídias digitais. Algumas de suas</p><p>principais vantagens são: interface simples, design intuitivo, variedade de templates,</p><p>plano gratuito. O Figma também permite trabalhos focados no design vetorial e pode ser</p><p>utilizado em dispositivos móveis.</p><p>AdobeSpark</p><p>Com todas as vantagens e características do famoso Adobe suite, o Adobe Spark é uma</p><p>plataforma com milhares de templates, imagens e fontes gratuitas. Permite o trabalho</p><p>colaborativo, personalização com logo, templates da marca e acesso a toda a biblioteca</p><p>de fontes da Adobe. Disponível para web e dispositivos móveis, tem uma versão</p><p>gratuita com limitações.</p><p>Desygner</p><p>O Desygner é uma ferramenta online já utilizada por mais de 20 milhões de pessoas em</p><p>todo o mundo. Tem diversos templates, uma interface amigável, permite o trabalho</p><p>colaborativo e o redimensionamento automático de designs. Apresenta uma versão</p><p>gratuita e outras pagas, com diferentes valores e opções de recursos.</p><p>Existe uma tendência de plataformização do design para mídias digitais e isso ocorre no</p><p>contexto da crescente expansão da importância do design para as rotinas humanas</p><p>(CARDOSO, 2013). As plataformas e suas interfaces interligam pessoas no mundo</p><p>todo, conectando o trabalho coletivo em dimensões continentais e fazendo surgir novos</p><p>poderes econômicos e tecnológicos. Segundo Bratton (2016 apud FERREIRA, 2021, p.</p><p>104), "plataformas centralizam e descentralizam ao mesmo tempo, atraindo muitos</p><p>atores para uma infraestrutura comum. Elas distribuem algumas formas de autonomia</p><p>nas margens das suas redes enquanto também padronizam condições de comunicação</p><p>entre ela".</p><p>O mercado segue a tendência de que um bom trabalho pode e deve ser feito por diversas</p><p>pessoas em cooperação por um objetivo comum. Por meio das plataformas online de</p><p>design é possível que diversos profissionais trabalhem juntos, de qualquer lugar do</p><p>mundo, para criar as melhores interfaces possíveis para os usuários.</p><p>DESIGN DE INTERFACES EM REDES SOCIAIS</p><p>No design para mídias digitais não existe espaço para o preconceito. É preciso prestar</p><p>atenção às tendências. Na era das redes sociais, as conexões digitais, influências e</p><p>comportamentos coletivos tornaram-se importantes elementos de interferência no</p><p>design. Abdin (2021, p. 8) observa que com o crescimento do número de usuários das</p><p>redes sociais ao redor do mundo, marcas e figuras públicas vêm tentando "aprender,</p><p>participar e se envolver ativamente com o que está 'se tornando viral' no momento, a fim</p><p>de permanecer visível" e isso certamente afeta o design para mídias digitais.</p><p>Para Lapolli (2009, p. 23) "as pessoas costumam acessar essas redes em momentos de</p><p>descontração, como forma de entretenimento. As empresas podem aproveitar esses</p><p>momentos para oferecer seus serviços ou uma experiência agradável ao público". As</p><p>mídias sociais e suas interfaces conquistaram o público ao redor do mundo por meio de</p><p>designs amigáveis e intuitivos que permitem fácil compreensão dos recursos oferecidos,</p><p>experiência imersiva e fidelização do usuário. É possível observar importantes lições do</p><p>design interativo ao analisar os elementos que contribuíram para o sucesso destas redes</p><p>e suas interfaces sociais. Segundo Zago e Polino (2015), uma boa interface social deve</p><p>conter os seguintes elementos:</p><p>Perfil – É nesta parte que o usuário interage com outros por meio de uma interface. A</p><p>página de perfil geralmente apresenta dados do usuário fornecidos por ele e pelo</p><p>sistema.</p><p>Conexões – As relações são a essência das interfaces sociais. Por meio das conexões –</p><p>que podem ser explícitas ou não – os vínculos que justificam a natureza social de uma</p><p>plataforma ou mídia são demarcados.</p><p>Fluxo de conteúdos – As atualizações dos diversos usuários de uma rede social são</p><p>demonstradas no fluxo de conteúdos. A rede Twitter utiliza este recurso em</p><p>sua timeline, assim como Facebook e Instagram nos seus fluxos de feeds. É possível</p><p>visualizar o que acontece em toda a rede, conforme níveis de privacidade dos usuários, a</p><p>partir deste elemento da interface.</p><p>Linguagem próxima – As melhores interfaces sociais são aquelas que apresentam uma</p><p>linguagem simples e próxima ao usuário, este recurso incentiva a participação e</p><p>engajamento.</p><p>Incompletude – São necessários espaços abertos para que o usuário seja motivado a</p><p>agir. As interfaces sociais geralmente apresentam isso por meio de perguntas como: "no</p><p>que você está pensando?" ou "o que está acontecendo?".</p><p>Imersão – A interface social deve atrair o usuário, despertar seu interesse e fazer com</p><p>que ele dedique tempo e esforços na produção e consumo de conteúdos. Não é por acaso</p><p>que as redes sociais mais populares do mundo têm usuários que gastam diversas horas</p><p>de todos os seus dias com elas.</p><p>No design de interação, as interfaces sociais podem desempenhar um importante papel.</p><p>Identificar suas características e principais elementos é parte fundamental do processo</p><p>de compreensão das demandas e expectativas do usuário.</p><p>VIDEOAULA</p><p>Neste vídeo, vamos refletir sobre a aplicação prática e experimentação de importantes</p><p>conceitos teóricos do design. Por meio da apresentação de softwares e plataformas, são</p><p>demonstrados diversos recursos e ferramentas úteis à criação do design de interação e</p><p>interfaces para mídias digitais. Em uma perspectiva reflexiva, são demonstradas</p><p>também características e elementos das interfaces sociais que podem contribuir com a</p><p>criação de designs mais interativos e atraentes para o usuário.</p><p>Videoaula</p><p>Saiba mais</p><p>DaVinci Resolve</p><p>A edição de audiovisuais também é importante para o design de interação, e o DaVinci</p><p>é um software abundante em recursos para esta finalidade. Ideal para a edição de vídeos,</p><p>ele é capaz de criar efeitos visuais e sonoros de muita variedade. Utilizado até mesmo</p><p>na indústria cinematográfica de Hollywood, o DaVinci é um dos favoritos no mercado.</p><p>Apresenta uma versão gratuita, o Resolve, com poucas limitações e bem próxima às</p><p>capacidades da versão paga.</p><p>Desenho auxiliado por computador</p><p>Para aprender um pouco mais sobre o uso de softwares integrados ao UX Design, vale a</p><p>pena conferir o livro de Andre Luis Orthey, intitulado Desenho auxiliado por</p><p>computador. Tem 216 páginas e está disponível gratuitamente na biblioteca virtual.</p><p>A arte do design</p><p>O documentário “Abstrato: a arte do design” foi disponibilizado gratuitamente pela</p><p>Netflix na plataforma Youtube e traz importantes reflexões sobre estética, processos</p><p>criativos e os impactos do design no mundo.</p><p>REFERÊNCIAS</p><p>5 minutos</p><p>Aula 1</p><p>BROWN, T. Design thinking: entenda o que é e como funciona. 2017 Disponível</p><p>em: https://www.napratica.org.br/design-thinking-o-que-comofunciona/. Acesso em: 25</p><p>out. 2018.</p><p>CHEVALIER, M.; MAZZALOVO, G. Pró logo. São Paulo: Panda Books, 2007.</p><p>HELDMAN, K. Gerência de projetos: fundamentos. Rio de Janeiro: Elsevier, 2005.</p><p>KELLER, K. L. Building, measuring, and managing brand equity. New Jersey: Prentice</p><p>Hall, 1998.</p><p>LOURENÇO, C. E.; CAMPOS JUNIOR, H. O que é uma marca? Ampliando o rigor</p><p>https://www.blackmagicdesign.com/br/products/davinciresolve/</p><p>https://biblioteca-virtual.com/detalhes/ebook/608704f854aa8872fc616f16</p><p>https://biblioteca-virtual.com/detalhes/ebook/608704f854aa8872fc616f16</p><p>https://youtu.be/q_k8fVNzbGU</p><p>https://www.napratica.org.br/design-thinking-o-que-comofunciona/</p><p>teórico na definição do conceito. 2015. Disponível em: https://pesquisa-</p><p>eaesp.fgv.br/sites/gvpesquisa.fgv.br/files/arquivos/junior_2.pdf. Acesso em: 15 fev.</p><p>2022.</p><p>MERONI, A. Strategic design: where are we now? Reflection around the foundations of</p><p>a recent discipline. Strategic Design Research Journal, 1. January, 2008. pp. 31-38.</p><p>MOZOTA, B. B. Gestão do design: usando o design para construir valor de marca e</p><p>inovação. Porto Alegre: Bookman, 2009.</p><p>PASSOS, R. Design da informação: um modelo para configuração de interface</p><p>natural. Tese (Doutorado em Design) - Departamento de Comunicação e Arte,</p><p>Universidade de Aveiro, Aveiro, Portugal, 2014.</p><p>PONTES, I. Metodologias do design - XDM (eXtensible Design Methods). Design</p><p>Culture, 2013. Disponível em: https://designculture.com.br/metodologias-do-design-</p><p>xdm-extensible-design-methods. Acesso em: 15 fev. 2022.</p><p>TELLUS. O que é design estratégico e como planejar de forma colaborativa,</p><p>inovadora e sustentável. 2021. Disponível</p><p>em: https://tellus.org.br/conteudos/artigos/design-estrategico-planejamento/. Acesso em:</p><p>15 fev. 2022.</p><p>VIANNA, M. et al. Design thinking: inovação em negócios. Rio de Janeiro: MJV,</p><p>2012.</p><p>WHEELER, A. Designer de identidade visual. 2 ed. Porto Alegre: Bookman, 2012.</p><p>Aula 2</p><p>DONDIS, D. A. Sintaxe da linguagem visual. São Paulo: Martins Fontes, 1997.</p><p>FARIAS, P. Estudos sobre tipografia: letras, memória gráfica e paisagens tipográficas.</p><p>Tese (Livre-docência), 2016. Brasil: USP.</p><p>FLOR, M. The Golden Secrets of Lettering. New York: Princeton Architectural Press,</p><p>2017.</p><p>NUNES, P. Conheça as diferenças entre tipografia, caligrafia e lettering. Disponível</p><p>em: https://www.psndesign.com.br/blog/conheca-as-diferencas-entre-tipografia-</p><p>caligrafia-e-lettering/. Acesso em: 15 fev. 2022.</p><p>PARADELLA, F. S. Teoria da forma. In: Criação da forma. Rio de Janeiro: UNESA,</p><p>2014, p. 1-9. Apud FISCHER, E. Necessidade da arte. Trad. Leandro Kondel. 9 ed. Rio</p><p>de Janeiro: Ed. Guanabara, 1987.</p><p>RÜTHSCHILLING, E. A. Design de superfície. Rio Grande do Sul: Editora da</p><p>Universidade Federal do Rio Grande do Sul, 2008.</p><p>Aula 3</p><p>ELLWANGER, C. Design de interação, design experiencial e design thinking: a</p><p>tríade que permeia o escopo de desenvolvimento de sistemas computacionais</p><p>interativos. 2013.</p><p>FALCÃO, C. S.; SOARES, M. M. Usabilidade de produtos de consumo: uma análise</p><p>dos conceitos, métodos e aplicações. Revista Estudos em Design. v. 21, n. 2, p. 01-26,</p><p>Rio de Janeiro, 2013.</p><p>HASHIMOTO, M. Espírito empreendedor nas organizações: aumentando a</p><p>competitividade através do intra-empreendedorismo. São Paulo: Saraiva, 2006.</p><p>IBAÑEZ, M. 19 princípios de user interface design. Desenvolvimento para Web,</p><p>2019. Disponível em: https://desenvolvimentoparaweb.com/ux/19-principios-user-</p><p>interface-design/. Acesso em: 17 fev. 2022</p><p>https://pesquisa-eaesp.fgv.br/sites/gvpesquisa.fgv.br/files/arquivos/junior_2.pdf</p><p>https://pesquisa-eaesp.fgv.br/sites/gvpesquisa.fgv.br/files/arquivos/junior_2.pdf</p><p>https://designculture.com.br/metodologias-do-design-xdm-extensible-design-methods</p><p>https://designculture.com.br/metodologias-do-design-xdm-extensible-design-methods</p><p>https://tellus.org.br/conteudos/artigos/design-estrategico-planejamento/</p><p>https://www.psndesign.com.br/blog/conheca-as-diferencas-entre-tipografia-caligrafia-e-lettering/</p><p>https://www.psndesign.com.br/blog/conheca-as-diferencas-entre-tipografia-caligrafia-e-lettering/</p><p>https://desenvolvimentoparaweb.com/ux/19-principios-user-interface-design/</p><p>https://desenvolvimentoparaweb.com/ux/19-principios-user-interface-design/</p><p>MEMÓRIA, F. Design para internet: projetando a experiência perfeita. Rio de Janeiro:</p><p>Elsevier, 2005.</p><p>PINHEIRO, A. P. S. UX design introduzido no desenvolvimento de interfaces</p><p>gráficas. TCC – Tecnólogo em Comunicação Social, Design Gráfico, Brasília – DF,</p><p>2016.</p><p>SHARP, H.; ROGERS, Y.; PREECE, J. Design de interação [recurso eletrônico]:</p><p>Além da interação humano-computador. 3ed. I. Gasparini, Trans. Porto Alegre:</p><p>Bookman Editora, 2013.</p><p>WEBUTERS BLOG. Difference between wireframe, mock-up, and</p><p>prototype? 2020. Disponível em: https://www.webuters.com/whats-the-difference-</p><p>between-a-wireframe-mock-up-and-prototype. Acesso em: 15 fev. 2022.</p><p>Aula 4</p><p>ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação: além da interação</p><p>homem-computador. Porto Alegre: Bookman, 2005.</p><p>SCHERER, N. Avaliação heurística e teste de usabilidade para softwares de design</p><p>de interiores. 2018. 53. f. Monografia (Curso de Bacharelado em Ciência da</p><p>Computação), Universidade Tecnológica Federal do Paraná. Campo Mourão, 2018.</p><p>ZAGO, G. S.; POLINO, C. A. Design digital e interfaces sociais: um estudo da</p><p>interface do Twitter. Mediação (Belo Horizonte), v. 17, p. 87-102, 2015.</p><p>Ver anotações0</p><p>•</p><p>Design para mídias digitais interativas: o design de apps e a experiência do</p><p>usuário (UX)</p><p>• Aula 1 - Design de aplicativos</p><p>25 minutos</p><p>• Aula 2 - A experiência do usuário (UX) em aplicativos</p><p>25 minutos</p><p>• Aula 3 - Lei Geral de Proteção de Dados (LGPD) para a criação de aplicativos</p><p>27 minutos</p><p>• Aula 4 - Ferramentas e plataformas para design e criação de aplicativos</p><p>26 minutos</p><p>• Referências</p><p>https://www.webuters.com/whats-the-difference-between-a-wireframe-mock-up-and-prototype</p><p>https://www.webuters.com/whats-the-difference-between-a-wireframe-mock-up-and-prototype</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#referencias</p><p>6 minutos</p><p>0%</p><p>T</p><p>A-AA+</p><p>DESIGN PARA MÍDIAS DIGITAIS INTERATIVAS: O DESIGN DE APPS E A</p><p>EXPERIÊNCIA DO USUÁRIO (UX)</p><p>109 minutos</p><p>Aula 1 - Design de aplicativos</p><p>Aula 2 - A experiência do usuário (UX) em aplicativos</p><p>Aula 3 - Lei Geral de Proteção de Dados (LGPD) para a criação de aplicativos</p><p>Aula 4 - Ferramentas e plataformas para design e criação de aplicativos</p><p>Referências</p><p>Aula 1</p><p>DESIGN DE APLICATIVOS</p><p>Nesta aula, você apreenderá importantes aspectos sobre o</p><p>planejamento do design de aplicativos, observando desde o</p><p>contexto histórico no qual eles surgem até obstáculos, funções e</p><p>princípios do design de aplicativos.</p><p>25 minutos</p><p>INTRODUÇÃO</p><p>Os smartphones estão por toda parte. São dispositivos avançados que operam diversas</p><p>funções e cabem no bolso das pessoas, literalmente. A tecnologia móvel de acesso à</p><p>internet permitiu a popularização dos aplicativos, que são formas específicas de</p><p>softwares.</p><p>Nesta aula, você apreenderá importantes aspectos sobre o planejamento do design de</p><p>aplicativos, observando desde o contexto histórico no qual eles surgem até obstáculos,</p><p>funções e princípios do design de aplicativos. Com o exponencial crescimento do uso da</p><p>internet móvel, os aplicativos se tornaram peça fundamental para o portfólio, a</p><p>comunicação e o engajamento de empresas e marcas.</p><p>Boa parte dos serviços utilizados na modernidade são mediados por aplicativos e é</p><p>através do design e da interface destes que as conexões são estabelecidas. Se você quer</p><p>estar preparado para o futuro do design, preste muita atenção às informações e aos</p><p>conceitos que serão discutidos nesta aula.</p><p>CONTEXTUALIZAÇÃO HISTÓRICA DOS APLICATIVOS</p><p>A história dos aplicativos móveis</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/index.html#referencias</p><p>Através de um celular você pode facilmente consultar a previsão do tempo, sua dieta</p><p>alimentar, sua conta bancária e até mesmo o trânsito da cidade no conforto da sua cama.</p><p>A tecnologia dos aparelhos móveis conectados à internet possibilitou a reinvenção de</p><p>rotinas, hábitos de consumo e até mesmo da cultura.</p><p>Os celulares podem executar diversas funções através de aplicativos, que são softwares</p><p>com finalidades bem específicas. E embora hoje a maioria das pessoas não consiga</p><p>imaginar suas vidas sem seus celulares, é importante ressaltar que a tecnologia para</p><p>telefonia móvel só foi inventada na década de 1970. Lemos e Josgrilberg (2009, p. 69)</p><p>observam que “o que chamamos de novas tecnologias de comunicação e informação</p><p>surge a partir de 1975, com a fusão das telecomunicações analógicas com a informática,</p><p>possibilitando a veiculação, sob um mesmo suporte – o computador”, e é a partir dessas</p><p>tecnologias que um acelerado processo de inovação se desdobra até o surgimento dos</p><p>primeiros aplicativos móveis.</p><p>Para Guidini (2018, p. 60), “a história dos aplicativos móveis se confunde com a</p><p>história do próprio smartphone”. Os aplicativos de celulares como conhecemos hoje,</p><p>vieram à existência graças à percepção de que um telefone móvel poderia fazer mais do</p><p>que apenas ligar e receber chamadas.</p><p>Uma das grandes revoluções da tecnologia de comunicação móvel foi o SMS (Short</p><p>Message Service) desenvolvido pela empresa Nokia em 1997 e que permitia o envio de</p><p>mensagens de texto de um telefone para o outro. Foi também nessa década que a mesma</p><p>empresa inovou ao oferecer um pacote de entretenimento com jogos para os</p><p>dispositivos telefônicos, como o famoso Snake, em que uma serpente deveria ser</p><p>alimentada e percorrer labirintos sem tocar em si enquanto crescia.</p><p>Em 2001 a empresa canadense BlackBerry lançou uma inovadora linha de aparelhos –</p><p>com o mesmo nome – e trouxe grande impacto ao mercado tecnológico ao oferecer</p><p>funcionalidades de calendário, bloco de notas, e-mail e agenda detalhada em um</p><p>aparelho telefônico móvel, começava assim a era dos smartphones. Cerca de um ano</p><p>depois surgiram os primeiros celulares com linguagem Java e em 2007 chegou ao</p><p>mercado o aparelho que consolidou o apelo comercial do conceito de telefones</p><p>inteligentes, o iPhone da empresa Apple, de Steve Jobs.</p><p>Com a popularização dos celulares inteligentes, houve um exponencial aumento da</p><p>demanda por aplicativos, que passaram a ser desenvolvidos desatrelados da</p><p>exclusividade das empresas que criavam os dispositivos, podendo ser então adquiridos</p><p>através de plataformas e lojas virtuais. O mercado dos celulares foi redefinido pelas</p><p>novas funcionalidades e aplicativos, mas o mundo também se reconfigurou a partir</p><p>dessas novas tecnologias, para Guidini (2018, p. 61) “as tarefas diárias ganharam uma</p><p>nova forma de realização a partir do uso constante dos apps”. Produtos como o jornal</p><p>impresso foram reinventados depois do advento dos aplicativos, e mercados como o da</p><p>música precisaram se readequar a novos comportamentos dos seus consumidores.</p><p>A venda de aplicativos movimenta hoje um mercado mundial bilionário, é importante</p><p>ressaltar que sem o design de mídias digitais não existem boas interfaces, e sem uma</p><p>boa interface, um aplicativo não atinge o objetivo de chegar até o usuário. O futuro</p><p>aponta para um crescimento ainda maior na produção e no consumo de aplicativos, e</p><p>isso significa uma gigantesca demanda por profissionais qualificados do design digital.</p><p>OBSTÁCULOS, FUNÇÕES E OTIMIZAÇÃO DE FERRAMENTAS</p><p>Cuidados importantes no desenvolvimento de</p><p>aplicativos</p><p>Uma das principais características de um aplicativo é a sua funcionalidade. Aplicativos</p><p>são ferramentas com uma finalidade e seus objetivos podem variar em possibilidades</p><p>quase infinitas, que vão desde o entretenimento até o acesso a telescópios para observar</p><p>astros celestes.</p><p>Apesar de suas muitas potencialidades, os aplicativos dos dispositivos móveis possuem</p><p>algumas limitações, como tamanho da tela, tempo de bateria, processadores e memória</p><p>limitados e entrada de dados muitas vezes restrita ao toque na tela (touch screen).</p><p>O design da interface de aplicativos, quando bem realizado, pode ajudar a contornar</p><p>obstáculos e também contribuir para o melhor aproveitamento das funções e otimização</p><p>das ferramentas. Segundo Ferreira, Gonçalves e Wangenheim (2019, p. 80), "a interface</p><p>precisa atender seu propósito e dominar o acoplamento estrutural entre a ferramenta e o</p><p>usuário", o que possibilita a interação entre indivíduo e máquina.</p><p>Existem alguns aplicativos que são adaptações de modelos desenvolvidos para</p><p>computadores, mas o design pensado especificamente para dispositivos móveis tende a</p><p>apresentar conceitos mais eficazes e eficientes. Além das interfaces gráficas, os</p><p>dispositivos móveis possuem uma característica importante que, se não observada com</p><p>atenção pelos designers, pode se transformar em obstáculo. Trata-se da interface</p><p>tangível dos dispositivos móveis, caracterizada pela “manipulação de objetos físicos</p><p>com características digitais” (REIS; GONÇALVES, 2016, p. 92). É fundamental que</p><p>design interativo e elementos gráficos sejam cuidadosamente alinhados às</p><p>possibilidades tangíveis de uma interface para maior otimização do uso de um</p><p>aplicativo.</p><p>O design dos aplicativos</p><p>móveis é também sensorial e integra de forma estratégica</p><p>elementos estéticos e funcionais. Para Ferreira, Gonçalves e Wangenheim (2019, p. 85),</p><p>"desenvolver um design visual é muito mais que uma simples questão de estética. Além</p><p>da preocupação com a agradabilidade visual deve haver atenção em quão bem os</p><p>componentes da interface trabalham juntos".</p><p>É importante ressaltar que, embora os smartphones sejam os mais populares dos</p><p>dispositivos móveis, eles não são os únicos, tablets, GPS, games, televisões portáteis e</p><p>PDAs (Personal Digital Assistant) também fazem parte dessa categoria. Quaisquer que</p><p>sejam os dispositivos utilizados, existe um ponto em comum entre os aplicativos</p><p>móveis, eles dependem muito do bom uso da linguagem visual para um bom</p><p>desempenho.</p><p>A linguagem visual pode otimizar o uso dos aplicativos como ferramentas e, para isso,</p><p>“é preciso ter coerência, consistência, uniformidade e hierarquia de elementos de cor,</p><p>tipografia, imagens e controles” (FERREIRA; GONÇALVES; WANGENHEIM, 2019,</p><p>p. 92). Os melhores aplicativos são, não apenas aqueles que executam tarefas relevantes,</p><p>mas aqueles de fácil compreensão e capazes de proporcionarem uma boa experiência ao</p><p>usuário. No ano de 2021, o aplicativo com o maior número de downloads no mundo foi</p><p>o TikTok, com mais de 1 bilhão de downloads e 30,7 milhões de usuários diários</p><p>(SAMSUKHA, 2021). Trata-se de uma ferramenta de comunicação em rede e</p><p>entretenimento, com interface intuitiva que reúne complexos recursos de edição de</p><p>vídeo em uma experiência sensorial e amigável para o usuário.</p><p>O mercado dos aplicativos para dispositivos móveis encontra-se em crescente expansão,</p><p>mas não basta uma boa ideia para conquistar espaço e atenção dos usuários, é preciso ter</p><p>também a melhor apresentação. Cabe ao designer de mídias digitais integrar</p><p>funcionalidades e otimização em uma interface capaz de evitar quaisquer obstáculos</p><p>para o bom uso de um aplicativo.</p><p>PRINCÍPIOS DO DESIGN DE APLICATIVOS</p><p>Design de aplicativos</p><p>O design de aplicativos para dispositivos móveis possui características muito</p><p>específicas, que vão além dos conceitos elementares da comunicação visual. Com o</p><p>crescimento do mercado de aplicativos, o design de interface tornou-se um elemento</p><p>importante para a atração do usuário.</p><p>Existem alguns princípios do design de aplicativos que podem tornar a experiência mais</p><p>imersiva, fácil e interessante e quando bem aplicados, esses conceitos resultam em</p><p>interfaces de excelência. Segundo Puppi e Padovani (2017, p. 149), os "princípios para</p><p>o design de interfaces são características gerais que qualquer interface deve ter e que se</p><p>aplicam a todos os aspectos desta interface". Ainda nesse sentido, os autores propõem, a</p><p>partir de extensa revisão literária, oito princípios para o design de aplicativos que</p><p>servem como orientação para o desenvolvimento de boas interfaces.</p><p>• Consistência: o design deve ser coerente, com consistência entre as diferentes</p><p>páginas, ícones, cores e tipografia. Isso facilita a compreensão para o usuário e</p><p>integra os conceitos.</p><p>• Feedback: devem ser fornecidas respostas ao usuário sobre as atividades em</p><p>andamento ou concluídas. Esse princípio deve aparecer visualmente e/ou</p><p>sensorialmente na interface de forma simples e nítida.</p><p>• Controle: o usuário deve ter controle – direto ou indireto – da experiência e do</p><p>objeto de interação.</p><p>• Compatibilidade: é importante que o design seja pensado para contextos</p><p>diversificados, múltiplos e dinâmicos.</p><p>• Dispositivos pequenos: o design deve prever a miniaturização da interface e as</p><p>limitações de entrada de dados e digitação para evitar obstáculos à experiência.</p><p>• Velocidade e recuperação: a interface deve ser leve para não apresentar</p><p>problemas de interrupção associados à conectividade ou velocidade. O</p><p>funcionamento deve prever estratégias de recuperação de fácil localização.</p><p>• Mobilidade: as interfaces devem considerar a operação tangível – acesso com</p><p>apenas uma mão, e apresentar um projeto visual que considere questões</p><p>ergonômicas e usabilidade.</p><p>• Experiência: o sistema deve oferecer uma interface com fácil acesso ao</p><p>histórico, poupar tempo de aprendizado, minimizar custos e carga de trabalho da</p><p>memória.</p><p>Existem outros princípios propostos por diferentes autores e discussões relacionadas à</p><p>temática Dentre eles cabe mencionar: convenções estéticas, sociais e de privacidade,</p><p>que influenciam os usuários que utilizarão as aplicações; entonação apropriada, que é o</p><p>bom uso de polidez e reciprocidade nas mensagens apresentadas; uso de elementos</p><p>calmantes, evitando sobrecarga de informações ou estímulos para o usuário</p><p>e multireading, que é a possibilidade de o usuário realizar mais de uma tarefa ao mesmo</p><p>tempo (NETO, 2013).</p><p>Os princípios do design de aplicativos não são regras rígidas para o sucesso inequívoco</p><p>de uma ferramenta, mas são importantes enquanto orientações para o bom</p><p>desenvolvimento de interfaces digitais, podendo otimizar os resultados pretendidos.</p><p>Puppi e Padovani (2017, p. 149) observam que os princípios do design de aplicativos</p><p>“fornecem conceitos que auxiliam o pensamento durante o processo de design. Bem</p><p>como dão subsídios para que o designer defenda seus projetos”.</p><p>Em tempos de elevada procura e oferta no mercado de aplicativos, os princípios do</p><p>design podem ser o diferencial entre interfaces de excelência e produtos amadores, ou</p><p>de qualidade medíocre. Cabe ao bom profissional do design digital o uso estratégico</p><p>desses recursos para potencializar e destacar os seus trabalhos junto ao mercado e ao</p><p>usuário.</p><p>VIDEOAULA</p><p>Este vídeo convida você à reflexão sobre a importância dos aplicativos para dispositivos</p><p>móveis. Através de uma aula expositiva com a contextualização histórica do surgimento</p><p>dos primeiros aplicativos, são discutidos diversos aspectos relativos à inserção dessas</p><p>ferramentas nas cotidianidades humanas. São apresentados também obstáculos,</p><p>funcionalidades e usos dessas ferramentas, além de importantes princípios do design de</p><p>aplicação para dispositivos móveis.</p><p>Videoaula</p><p>Saiba mais</p><p>O primeiro smartphone</p><p>Que tal ver um pouco mais sobre a história dos telefones inteligentes? Neste vídeo da</p><p>TecMundo você poderá aprender um pouco mais sobre a história dos smartphones e as</p><p>evoluções ocorridas até a atualidade. Com uma linguagem dinâmica, o vídeo curto</p><p>apresenta curiosas informações sobre o mercado desses dispositivos e as transformações</p><p>possibilitadas por eles.</p><p>ENTENDA: qual foi o primeiro smartphone? – TecMundo. [S. l.: s. n.], 2022. 1 vídeo</p><p>(8 min). Publicado pelo canal TecMundo.</p><p>Templates para inspirar</p><p>Sabia que existem templates gratuitos que podem ajudar no seu processo criativo de</p><p>design de aplicativos? A InVision é uma das plataformas que possibilita isso. Com uma</p><p>livraria gratuita e de alta qualidade, são disponibilizados diversos conceitos e propostas</p><p>para aplicações.</p><p>INVISION. App Templates. 2022.</p><p>Design e engenharia de usabilidade</p><p>Este artigo científico de Cayley Guimarães, Ferraz dos Santos e Isabela Fontana discute</p><p>importantes aspectos metodológicos e técnicos da criação de um aplicativo, com ênfase</p><p>no design e usabilidade.</p><p>GUIMARÃES, C.; SANTOS, F.; FONTANA, I. Design & Engenharia de Usabilidade -</p><p>aplicação prática na criação de um aplicativo. Design & Tecnologia 14 (2017).</p><p>Universidade Federal do Rio Grande do Sul, 2017.</p><p>Aula 2</p><p>A EXPERIÊNCIA DO USUÁRIO (UX) EM APLICATIVOS</p><p>https://www.youtube.com/watch?v=vnRqglLRxlo</p><p>https://www.invisionapp.com/inside-design/design-resources/collections/mobile-app-templates/</p><p>https://dialnet.unirioja.es/descarga/articulo/6236889.pdf</p><p>Nesta aula serão discutidos importantes princípios do UX Design</p><p>no desenvolvimento de aplicativos, em que, através de reflexões</p><p>sobre usabilidade, necessidades, intuitividade e significatividade,</p><p>você aprenderá técnicas e estratégias para a elaboração atraente e</p><p>funcional no design</p><p>que influenciam muito na</p><p>compreensão e resposta dos indivíduos a determinadas mensagens.</p><p>A teoria da Gestalt busca explicar alguns elementos da compreensão sobre a parte e o</p><p>todo e surgiu em 1910 quando o psicólogo Max Wertheimer viajava de trem de Viena</p><p>para Renânia, e impressionou-se ao observar um efeito de luzes entre duas lâmpadas. A</p><p>palavra alemã "Gestalt" não tem correspondência na língua portuguesa, e tem como</p><p>significado a associação a algo concreto que apresenta entre seus atributos a forma</p><p>(ENGELMAN, 2002, p. 1). Desde 1912, quando foram publicados os primeiros escritos</p><p>da teoria da Gestalt, surgiram muitas correntes e interpretações relacionadas aos estudos</p><p>iniciais de Wertheimer, tendo em comum entre si o estudo dos estímulos e percepções</p><p>sobre as partes e o todo em composições visuais, de certa forma, pode-se dizer que a</p><p>teoria da Gestalt estuda a psicologia da boa forma.</p><p>Existem diversas leis – ou princípios – na teoria da Gestalt e dentre elas é importante</p><p>destacar:</p><p>Unidade</p><p>A lei da unidade afirma que um componente pode ser formado por uma ou mais partes</p><p>do conjunto da obra, ou seja, uma unidade é vista como um único objeto, ainda que</p><p>composto por diversos outros.</p><p>Figura 2 | Exemplo de unidade: logo da Adidas</p><p>Fonte: Pixabay.</p><p>Semelhança</p><p>Segundo a lei da semelhança, o cérebro tende a agrupar objetos de aparência parecida e</p><p>interpretá-los como uma única unidade. Este recurso é muito utilizado na publicidade</p><p>para agrupamentos estratégicos e releituras de imagens ou contextos.</p><p>Figura 3 | Exemplo de semelhança: publicidade de Natal da Nespresso</p><p>Fonte: Mendes (2020).</p><p>Proximidade</p><p>Segundo a Gestalt, os objetos próximos são assimilados conjuntamente pelo cérebro e</p><p>este é o princípio da proximidade, muito utilizado no design de criação de logo, dentre</p><p>outros.</p><p>Continuidade</p><p>O princípio da continuidade parte das percepções sobre fluxo, conexão e</p><p>complementação entre elementos. O cérebro busca uma sequência visual por meio de</p><p>linhas, planos e outros elementos da composição. Pode ser percebida na arquitetura ou</p><p>em logos famosas como a da marca Coca-Cola.</p><p>Fechamento</p><p>A lei do fechamento é bastante curiosa, ela parte da percepção de que o cérebro tende a</p><p>"completar" as partes que faltam em um determinado objeto ou composição. O bom uso</p><p>deste princípio pode resultar em designs criativos e muito inteligentes.</p><p>Figura 4 | Exemplo de fechamento: você consegue ver um cachorro dálmata?</p><p>Fonte: Mendes (2020).</p><p>Pregnância</p><p>Uma das mais importantes leis da Gestalt, também conhecida como a lei da forma, a</p><p>pregnância aponta para a simplicidade como um elemento favorável à construção visual.</p><p>De certa forma, é o conceito de "menos é mais". Quanto mais simples a forma ou a</p><p>composição, mais fácil é a sua compreensão e percepção. A pregnância, pode-se dizer, é</p><p>uma medida da facilidade de leitura de uma forma ou composição visual. Maior</p><p>pregnância significa mais facilidade e rapidez de compreensão pelo olhar, já uma baixa</p><p>pregnância indica uma peça poluída visualmente e de difícil entendimento visual.</p><p>Existem diversos outros aspectos da Gestalt que podem e devem ser estudado</p><p>minuciosamente. É imprescindível saber que o domínio destes conceitos teóricos é</p><p>fundamental para o design criativo e acrescentam muita eficiência na comunicação</p><p>visual.</p><p>TEORIA DAS CORES</p><p>O poder das cores</p><p>As cores têm um enorme impacto na comunicação visual. Mais do que um mero</p><p>elemento de pigmentação ou luz, o uso das cores tem relações com a cultura, sociedade</p><p>e com as emoções dos indivíduos, podendo influenciar seriamente as percepções do</p><p>design em uma mídia digital.</p><p>A cor nada mais é do que a percepção visual da luz. Estima-se que existam cerca de</p><p>350.000 (trezentas e cinquenta mil) cores visíveis. Segundo Farina et al. (2006, p. 13),</p><p>“a cor é vista e impressiona a retina. É sentida: provoca uma emoção. E é construtiva,</p><p>pois, tendo um significado próprio, tem valor de símbolo e capacidade, portanto de</p><p>construir uma linguagem própria que comunique uma ideia”.</p><p>As cores podem ser simbólicas, isso significa que a partir de regras e convenções elas</p><p>podem ter significados muito específicos. Por exemplo: o vermelho simboliza o amor</p><p>em diversas culturas; o verde que simboliza esperança e o preto pode representar o luto.</p><p>É também sabido que as cores podem influenciar o comportamento e até o desejo de</p><p>consumo, esta é a razão pela qual grandes redes de fast food costumam utilizar o</p><p>amarelo e o vermelho em suas marcas e estabelecimentos, pois são cores que estimulam</p><p>o apetite.</p><p>As cores têm características muito específicas que influenciam nas percepções de forma,</p><p>peso e movimento dentre outros fatores, por esta razão é importante observar a</p><p>harmonia e o equilíbrio entre elas ao utilizá-las. Cores primárias são aquelas que não</p><p>podem ser decompostas (o vermelho, o azul e o amarelo). Todas as demais cores do</p><p>espectro são obtidas a partir da combinação destas. As cores secundárias são aquelas</p><p>que surgem a partir de duas cores primárias e as terciárias são aquelas que existem</p><p>mediante a combinação de uma cor primária e uma cor secundária. São consideradas</p><p>cores quentes aquelas com predominância de vermelho e amarelo, ao passo que as cores</p><p>frias têm predominância do azul e do verde. Estes conceitos são muito importantes para</p><p>a comunicação visual. Por exemplo: um bom designer não deve jamais criar um</p><p>material para um festival de praia no verão em que predominem cores frias, pois isso</p><p>afetaria negativamente a mensagem de tropicalidade, calor e euforia.</p><p>Figura 5 | Círculo cromático</p><p>Fonte: Cagnin; Rocha (2019).</p><p>O uso equilibrado das cores também está ligado ao descanso visual, por isso deve-se</p><p>evitar a criação de composições poluídas ou cansativas. Na prática isto pode ser visto</p><p>em algumas escolhas estratégicas e cotidianas como o uso do verde nos uniformes dos</p><p>profissionais que participam de cirurgias em hospitais. O verde no círculo cromático é a</p><p>cor oposta ao vermelho do sangue, elemento predominante em uma cirurgia, então para</p><p>o alívio do olhar dos profissionais que frequentemente passam horas manuseando a cor</p><p>vermelha, utiliza-se o verde nas roupas e nas paredes como recurso de equilíbrio e</p><p>facilitação da visibilidade.</p><p>As cores podem emocionar, transmitir alegria, paz e até causar irritação, por esta razão é</p><p>muito importante que o profissional do design em mídias digitais conheça as</p><p>potencialidades, os recursos e riscos existentes na escolha das cores. Mais do que um</p><p>elemento decorativo, a cor pode ser o diferencial que faz um consumidor escolher se vai</p><p>levar ou não aquele produto.</p><p>VIDEOAULA</p><p>Nesta aula, por meio de uma exposição dialogada, você vai conhecer mais sobre</p><p>elementos fundamentais para uma comunicação visual de sucesso. Você perceberá que</p><p>recursos conceituais como o domínio de fundamentos da semiótica e da teoria</p><p>psicológica da Gestalt podem influenciar na criação de um bom design. Também vai</p><p>aprender que a aplicação prática e bem orientada de elementos como as cores pode</p><p>influenciar diretamente na recepção e opinião dos usuários.</p><p>Videoaula</p><p>Saiba mais</p><p>Semiótica</p><p>Para aprender mais sobre a semiótica e suas fascinantes perspectivas teóricas, leia o</p><p>livro Semiótica de Ana Paula Pinheiro da Silveira. São 140 páginas com muitos</p><p>https://biblioteca-virtual.com/detalhes/ebook/6087050a54aa8872fb666965</p><p>conceitos interessantes sobre o assunto. Disponível gratuitamente na biblioteca virtual.</p><p>Para estudar semiótica, um bom exercício é identificar ícones, índices e símbolos em</p><p>produções audiovisuais sem textos escritos ou falas. Um bom exemplo disso é o curta-</p><p>metragem Coin Operated – Animated Short Filme, uma premiada animação repleta de</p><p>metáforas</p><p>Pareidolia</p><p>Pareidolia é um fenômeno psicológico que todas as pessoas vivem e que está ligado à</p><p>Gestalt, trata-se da capacidade de reconhecer imagens e feições</p><p>de aplicativos.</p><p>25 minutos</p><p>INTRODUÇÃO</p><p>A experiência do usuário (UX) é hoje um dos principais motivadores para a aquisição e</p><p>uso de um aplicativo. Por isso, nesta aula serão discutidos importantes princípios do UX</p><p>Design no desenvolvimento de aplicativos. Através de reflexões sobre usabilidade,</p><p>necessidades, intuitividade e significatividade, você aprenderá técnicas e estratégias</p><p>para a elaboração atraente e funcional no design de aplicativos.</p><p>Esta aula também trata da importância da linguagem e da padronização nas mídias</p><p>digitais, principalmente em aplicativos móveis. No contexto de um mercado crescente e</p><p>competitivo no design de softwares específicos para dispositivos móveis, você precisará</p><p>dominar esses conceitos para oferecer um diferencial de qualidade e atratividade aos</p><p>usuários, cada vez mais exigentes.</p><p>DESIGN ORIENTADO ÀS NECESSIDADES</p><p>Aquilo que o usuário precisa</p><p>Em maio de 1998, Steve Jobs, fundador e CEO da Apple, pronunciou na Business</p><p>Week (Semana de Negócios) a célebre frase: “as pessoas não sabem o que querem, até</p><p>mostrarmos a elas”. A frase impactante e polêmica para alguns expressa o impacto de</p><p>um produto atraente nos comportamentos de consumo. No design de aplicativos é</p><p>preciso ir muito além de prever o que as pessoas querem, ou devem querer, é importante</p><p>saber do que elas precisam.</p><p>Na mesma linha de pensamento que Steve Jobs, Almeida (2020, p. 43) observa que</p><p>“geralmente, os usuários não estão cientes das desvantagens ou necessidades que</p><p>possam ter”, então para criar um bom design eficaz e eficiente, orientado às</p><p>necessidades dos usuários, o primeiro desafio é descobrir o que os usuários precisam.</p><p>Ao pensar nas necessidades no design de aplicativos, um importante aspecto a ser</p><p>considerado são as peculiaridades dos dispositivos móveis, dentre as quais cabe</p><p>destacar: velocidade da conexão e carregamento, limitações da tela reduzida,</p><p>inexistência de dispositivo mouse, área de toque para diferentes formatos anatômicos de</p><p>mãos e possibilidade de navegação nos sentidos verticais e horizontais.</p><p>Tendo em perspectivas tais questões, existem algumas categorias de</p><p>demandas/necessidades muito comuns aos usuários de aplicativos e que podem servir</p><p>como referência para a criação de bons designs e experiências (BRITO, 2019;</p><p>ALMEIDA, 2020; NIELSEN, 2003). Para fins didáticos, é importante destacar as</p><p>seguintes:</p><p>Agilidade</p><p>O design precisa ser pensado para ser bonito, mas também leve, fácil de carregar e</p><p>rápido para visualização. Criações muito complexas e de alta resolução tendem a ser</p><p>lentas e pesadas e, na modernidade, a economia do tempo é uma necessidade para quase</p><p>todos os usuários de aplicativos.</p><p>Conforto</p><p>O conforto é uma necessidade para a maioria dos usuários de dispositivos móveis, uma</p><p>vez que as pessoas geralmente passam diversas horas dos seus dias conectadas através</p><p>desses aparelhos. Para uma experiência confortável, é importante que o design não seja</p><p>agressivo, extravagante, invasivo, confuso ou de difícil visualização. Se a experiência</p><p>for minimamente desconfortável para o usuário, em decorrência de sons, iluminação ou</p><p>estética desagradável, de forma consciente ou não ele perderá o interesse e a assiduidade</p><p>no uso daquele aplicativo.</p><p>Vínculo</p><p>Tão importante quanto a conexão dos dados de um aplicativo, é a conexão com o</p><p>usuário. É importante estabelecer um vínculo afetivo ou sensorial que corresponda às</p><p>necessidades de familiaridade com o produto. Alguns aplicativos fazem isso através de</p><p>mascotes ou identidades visuais bem demarcadas. Para o usuário, isso pode evocar</p><p>sensações de pertença e fidelização com o que lhe é oferecido.</p><p>Bonificação</p><p>Alguns aplicativos oferecem bonificações ao usuário, mesmo sendo simbólicas – como</p><p>uma medalha virtual, elas podem ter resultados muito positivos na experiência. Existem</p><p>aplicativos de idiomas, por exemplo, que mediante a identificação de uma necessidade</p><p>de valorização por parte de seus usuários, oferecem prêmios simbólicos e pontuações</p><p>pela assiduidade ou tarefas desenvolvidas. Isso também ocorre nas redes sociais, onde o</p><p>número de conexões e seguidores pode resultar em propostas de marketing e</p><p>publicidade para os donos das contas.</p><p>Ao pensar no design orientado às necessidades do usuário, os desenvolvedores e</p><p>criadores aumentam as possibilidades de aceitação, popularização e engajamento de um</p><p>aplicativo. Em um mercado competitivo, destacam-se os profissionais capazes de</p><p>oferecer aos usuários produtos que satisfazem até mesmo as necessidades que eles</p><p>desconheciam ter.</p><p>DESIGN COM INTUITIVIDADE E SIGNIFICATIVIDADE</p><p>Intuição e significado</p><p>A palavra “intuição” é carregada de alguns estigmas e significados de natureza quase</p><p>mítica, mas ao contrário do que se pensa, a intuição pode ser ensinada. Intuição pode ser</p><p>definida como “a capacidade de chegar a conclusões e tomar decisões sem raciocínio</p><p>consciente” (RODRIGUES, 2019).</p><p>Ao pensar no design de aplicativos, a intuitividade é um elemento fundamental.</p><p>Segundo Alho Filho (2007) a intuição subdivide-se em três categorias, são elas:</p><p>a sensorial, ligada ao sentido da visão ou à compreensão instantânea; a interior, que</p><p>demanda um pré-conhecimento elementar desassociado da percepção sensorial; e</p><p>a racional, que diz respeito ao aprendizado da consciência sobre os fatos. No design de</p><p>aplicativos, a intuitividade é peça-chave para a usabilidade, que, dentre várias</p><p>definições, pode ser considerada o meio que os usuários encontram para o uso rápido e</p><p>fácil de um produto (DUMAS; REDISH, 1999). A grande vantagem do design intuitivo</p><p>é que ele dispensa o usuário de quaisquer treinamentos ou aprendizados prévios e</p><p>apresenta conceitos tão simples de identificar que qualquer um pode alcançar as tarefas</p><p>pretendidas com facilidade.</p><p>O uso intuitivo de um produto está muito associado à familiaridade com outros</p><p>arquétipos e à compreensão e percepção acerca das suas finalidades. Se um aparelho</p><p>telefônico tiver o formato e a aparência de uma bola de acrílico, possivelmente o</p><p>usuário gastará mais tempo para saber como utilizá-lo, o que não acontecerá com um</p><p>dispositivo que se assemelha no design a outros de sua mesma categoria. O autor</p><p>Everett McKay (2018) sugere oito etapas para um design intuitivo. São elas:</p><p>• Fácil descoberta: as ações mais importantes precisam ser óbvias, de preferência</p><p>na primeira tela.</p><p>• Abundância: é importante que existam várias sugestões de como acessar as</p><p>informações.</p><p>• Compreensão: linguagem simples, uso de ícones e símbolos são recursos que</p><p>contribuem para a compreensibilidade das informações.</p><p>• Feedback: deve haver uma indicação de fácil entendimento do que está</p><p>acontecendo no sistema durante a experiência.</p><p>• Previsibilidade: é importante que exista coerência e que o usuário seja capaz de</p><p>supor ou deduzir o que vai acontecer a cada comando.</p><p>• Eficiência: os padrões devem evitar repetições desnecessárias ou desperdício do</p><p>tempo do usuário com caminhos longos.</p><p>• Prevenção: o design deve reduzir o risco e os impactos de possíveis erros</p><p>operacionais.</p><p>• Exploração: o design deve fomentar a curiosidade e navegação sem medo de</p><p>erros. Ações destrutivas devem ser protegidas por telas com perguntas e</p><p>confirmações prévias.</p><p>Para além do uso intuitivo, é importante que o design também seja significativo para o</p><p>usuário. Um design significativo é aquele que, além de atrair e agradar o usuário, serve</p><p>como referência e é capaz de estabelecer paradigmas na comunicação. Um bom</p><p>exemplo de design significativo é a interface do sistema IOS, que revolucionou o</p><p>mundo digital no lançamento da sua primeira versão.</p><p>A navegação em aplicativos com design intuitivo e significativo é mais interessante,</p><p>natural, agradável e amigável. Os melhores designs de aplicativos são aqueles que, pelo</p><p>seu uso intuitivo e significatividade, promovem uma interface tão familiar ao usuário</p><p>que este sequer se preocupa</p><p>em pensar sobre ela ou sobre como utilizá-la durante a</p><p>experiência.</p><p>LINGUAGEM E PADRONIZAÇÃO</p><p>A linguagem dos aplicativos</p><p>Na comunicação está fundamentada a compreensão das mensagens. Quando uma falha</p><p>ocorre entre o emissor e o receptor de uma informação, costuma-se dizer que ali ocorreu</p><p>um “ruído”. Grande parte dos ruídos acontece em decorrência do uso da linguagem e da</p><p>ausência de padrões nítidos na mensagem, por essa razão, é fundamental que o design</p><p>de aplicativos preocupe-se com o estilo, a qualidade e a aplicação da linguagem.</p><p>Também é importante que padrões orientem a comunicação, para que ela se estabeleça</p><p>de forma compreensível, confortável e eficaz.</p><p>Dondis (2003, p. 9) observa que "a linguagem ocupou uma posição única no</p><p>aprendizado humano. Tem funcionado como meio de armazenar e transmitir</p><p>informações, veículo para o intercâmbio de ideias e meio para que a mente humana seja</p><p>capaz de conceituar". É através da linguagem que a vivência, existência e evolução das</p><p>sociedades se estabelecem.</p><p>No design de aplicativos, a linguagem visual é a mais forte, e ela deve ser simples,</p><p>única, padronizada e alinhada a uma boa identidade visual. É importante observar que,</p><p>diante das limitações do tamanho da tela e espaço para visualização, a linguagem no</p><p>design de aplicativos têm abordagem minimalista, com ênfase em símbolos e ícones</p><p>capazes de transmitir diversos significados da forma mais sucinta.</p><p>Segundo Carrion (2008, p. 149), "o minimalismo não se refere diretamente ao conceito</p><p>de 'pouco', e sim de ampliar a essência do que realmente é importante, chegando ao</p><p>ponto de tornar todo o restante dispensável perante o verdadeiro foco da criação". Por</p><p>essa razão, uma das prioridades do profissional designer na criação para aplicativos</p><p>deve ser identificar as mensagens mais importantes a serem comunicadas, uma vez feito</p><p>isso, essas mensagens devem ser codificadas através de cores, símbolos, ícones,</p><p>palavras e outros elementos. Um exemplo disso é a tela do aplicativo de alarmes de</p><p>despertador dos smartphones, existe nela um complexo conjunto de informações,</p><p>reunidas em uma tela simples e limpa que possibilita diversas ações de forma intuitiva e</p><p>padronizada. O usuário pode cadastrar novos alarmes, escolher os dias da semana e</p><p>ativar ou desativar o serviço de despertar sonoro sem precisar recorrer a novas telas ou</p><p>tutoriais.</p><p>Figura 1 | Comunicação minimalista em tela de aplicativo de despertador</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/assets/img/fig_a2_01.jpg</p><p>Fonte: elaborada pela autora.</p><p>A padronização da linguagem visual e do design contribui para a consolidação da</p><p>identidade e também para os processos de uso intuitivo de um aplicativo. Através da</p><p>repetição de elementos gráficos, o usuário não é forçado a aprender novos conceitos a</p><p>cada nova tela ou comando que desejar aceitar. Dondis (2003, p. 17) ressalta que "todo</p><p>padrão visual tem uma qualidade dinâmica que não pode ser definida intelectual,</p><p>emocional ou mecanicamente, através de tamanho, direção, forma ou distância".</p><p>Os melhores designs de aplicativos e interfaces são aqueles que se preocupam com os</p><p>diversos aspectos da linguagem, previnem ruídos e estabelecem padrões que facilitam o</p><p>uso intuitivo. Ao pensar no design de mídias digitais especificamente desenvolvidas</p><p>para dispositivos móveis, a principal premissa é da simplicidade como elemento</p><p>norteador para oferecer uma experiência eficaz e eficiente ao usuário.</p><p>VIDEOAULA</p><p>Este vídeo apresenta abordagens no design que podem contribuir para uma experiência</p><p>do usuário melhor em aplicativos. Por intermédio de uma apresentação expositiva, são</p><p>discutidos os conceitos de design orientado às necessidades, uso intuitivo e</p><p>significatividade na criação de aplicativo. A aula também traz um convite à reflexão</p><p>sobre linguagem visual, padronização e outros importantes conceitos do design para</p><p>mídias digitais com ênfase em aplicativos.</p><p>Videoaula</p><p>Saiba mais</p><p>Cynefin</p><p>O Cynefin é um modelo que ajuda na tomada de decisões e pode ser útil para definir as</p><p>necessidades do usuário em um aplicativo. Quer compreender um pouquinho mais o</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U3/assets/img/fig_a2_01.jpg</p><p>modelo Cynefin e sua aplicabilidade na identificação de necessidades do usuário?</p><p>Assista ao vídeo de Mário Trentin sobre essa abordagem.</p><p>O QUE é, e Como Utilizar O Cynefin? | Cynefin Framework #01. Andradina: [s. n.],</p><p>[2021]. 1 vídeo (14 min). Publicado pelo canal Mario Trentim - Tecnologia.</p><p>Design visual para interface de aplicativos</p><p>Em um elaborado trabalho científico, os pesquisadores Mirian Ferreira, Berenice</p><p>Gonçalves e Christiane Wangenheim analisam princípios, modelos e frameworks para</p><p>design de interfaces em aplicativos.</p><p>FERREIRA, M. N. F.; GONÇALVES, B. S.; WANGENHEIM, C. G. Design visual</p><p>para interfaces de aplicativos: análise de modelos de referência. Educação Gráfica,</p><p>Brasil, Bauru. Volume 23 – Nº 01. Abril de 2019. pp. 79-95.</p><p>O domínio do minimalismo</p><p>Por que o minimalismo dominou o design? Essa é uma boa pergunta para se fazer.</p><p>No vídeo do canal Forasteiro você encontra boas reflexões a esse respeito. São apenas</p><p>10 minutos de duração, com abordagens sobre o comportamento de consumo e</p><p>neurociência aplicada ao design.</p><p>POR QUE o MINIMALISMO dominou o DESIGN? | Ciência Explica. [S. l.: s. n.],</p><p>[2021]. 1 vídeo (10min). Publicado pelo canal Forasteiro.</p><p>Aula 3</p><p>LEI GERAL DE PROTEÇÃO DE DADOS (LGPD) PARA A CRIAÇÃO DE</p><p>APLICATIVOS</p><p>Nesta aula, você vai aprender sobre as origens, as características e</p><p>a relevância da Lei Geral de Proteção de Dados, uma vez que o</p><p>ciberespaço comporta um grande volume de informações pessoais</p><p>dos usuários e esses dados precisam ser protegidos.</p><p>27 minutos</p><p>INTRODUÇÃO</p><p>Com o advento da internet, pessoas do mundo inteiro podem se conectar umas às outras,</p><p>mas não só isso, os dados dessas pessoas também podem ser acessados e surgem novas</p><p>vulnerabilidades de informações. Nesta aula, você vai aprender sobre as origens, as</p><p>características e a relevância da Lei Geral de Proteção de Dados. O ciberespaço</p><p>https://www.youtube.com/watch?v=wPBGTiFM-Eg</p><p>http://www.educacaografica.inf.br/wp-content/uploads/2019/05/08_DESIGN-VISUAL-PARA-INTERFACES.pdf</p><p>https://www.youtube.com/watch?v=m3SXGMwWM8s</p><p>comporta um grande volume de informações pessoais dos usuários e esses dados</p><p>precisam ser protegidos.</p><p>É importante que você saiba que além de um ótimo design, as mídias digitais devem</p><p>respeitar e resguardar a privacidade dos dados que gerenciam, bem como a segurança</p><p>das informações que são voluntariamente fornecidas pelos usuários durante o acesso a</p><p>plataformas, softwares, produtos ou redes de comunicação.</p><p>CONTEXTUALIZAÇÃO HISTÓRICA DA LEI GERAL DE</p><p>PROTEÇÃO DE DADOS (LGPD)</p><p>Proteção de dados na internet</p><p>A internet facilitou a vida das pessoas, bastam alguns cliques e qualquer um pode</p><p>acessar uma infinidade de informações on-line. Acontece que essa vantagem também se</p><p>mostrou um grande problema, pois graças às informações fornecidas pelos usuários das</p><p>mais diferentes formas, bastam alguns cliques e pessoas de boa ou má índole podem ter</p><p>acesso a informações pessoais ou sigilosas disponíveis na rede. Como resolver esse</p><p>problema? Como proteger os dados e a privacidade do usuário? Foi a partir dessas</p><p>preocupações que surgiu a Lei Geral de Proteção de Dados (LGPD), a Lei nº</p><p>13.709/2018, em vigor desde o dia 18 de setembro de 2020.</p><p>Um longo caminho foi percorrido para que a LGPD entrasse em vigor, o projeto dessa</p><p>lei começou a ser discutido uma década antes, desde meados de 2010, tendo como</p><p>referência o GDPR (em inglês são as iniciais de Regulamento Geral de Proteção de</p><p>Dados).</p><p>Lugati e Almeida (2020, p. 4) observam que "Desde que o tratamento informatizado de</p><p>dados surgiu e ganhou enfoque,</p><p>houve a necessidade de que o conceito de direito à</p><p>privacidade se modificasse a fim de abranger a proteção de dados pessoais". Apesar da</p><p>importância da temática, a discussão abrangia questões tão inovadoras e desconhecidas,</p><p>tanto do ponto de vista tecnológico quanto jurídico, que se arrastou por anos na esfera</p><p>pública brasileira. Algumas das principais questões discutidas eram "a quem pertencem</p><p>as informações disponibilizadas na rede on-line e os seus direitos?", "Quais são as</p><p>responsabilidades daqueles que tutelam os dados fornecidos pelos usuários?".</p><p>Em 1981, a circulação de informações e o tratamento automatizado destas já era uma</p><p>preocupação na Europa, tanto que em 28 de janeiro desse ano ocorreu a primeira</p><p>Convenção Internacional sobre o Tema. Em 1995 essa discussão foi reforçada pela</p><p>Diretiva 95/46/CE, que tratava, no contexto da União Europeia, dos princípios da</p><p>proteção de dados em qualquer contexto dos países que partilham dos fundamentos da</p><p>Declaração Universal de Direitos Humanos (QUINTILANO, 2021). A Lei Geral de</p><p>Proteção de Dados no Brasil tem notável influência da legislação europeia, ela resultou</p><p>de dois projetos de lei nacionais, o 4.060/2012 e o 5.276/2016.</p><p>Em 2014, foi aprovada a Lei nº 12.965, também conhecida como Marco Civil da</p><p>Internet, essa lei federal foi um grande avanço e apresentou uma regulamentação</p><p>semelhante a uma "constituição da internet". O Marco Civil orienta algumas regras</p><p>gerais de aplicação no ciberespaço e tem ênfase nos direitos fundamentais</p><p>constitucionais aplicados a esse contexto. Com a sanção da LGPD em 2018, algumas</p><p>alterações foram realizadas na Lei nº 12.965, mas ela continua sendo uma das mais</p><p>importantes referências para direitos e deveres no ambiente das comunicações em rede.</p><p>Antes da LGPD, no Brasil existiam cerca de 40 normas que tratavam sobre proteção à</p><p>privacidade e segurança dos dados pessoais, mas é só a partir da sanção da Lei Geral</p><p>que passou a existir maior segurança geral em relação à temática. É importante ressaltar</p><p>que no mundo pouco mais de 100 países possuem leis adequadas para proteger o uso de</p><p>dados.</p><p>A proteção e o uso responsável, seguro e respeitoso dos dados do usuário devem ser</p><p>uma preocupação prioritária no desenvolvimento das mídias digitais. A não observação</p><p>da LGPD nos processos de desenvolvimento podem ter consequências desastrosas para</p><p>profissionais e empresas.</p><p>MAPEAMENTO, TRANSPARÊNCIA E PRIVACIDADE PARA O</p><p>USUÁRIO</p><p>A tutela de dados e seus cuidados</p><p>Você provavelmente já ouviu ou leu a frase “a internet não é terra sem lei”, mas sabe o</p><p>que isso significa na prática? Isso quer dizer que mesmo no ciberespaço, pessoas,</p><p>marcas e empresas são responsáveis pelas informações que fornecem e/ou tutelam.</p><p>Diante de todas as implicações previstas pela Lei Geral de Proteção de Dados, é muito</p><p>importante que os desenvolvedores de mídias digitais estejam atentos às</p><p>vulnerabilidades de suas plataformas, produtos e recursos. Cabe aos bons profissionais</p><p>mapear todos os possíveis riscos existentes à proteção dos dados do usuário, fornecer</p><p>uma estrutura transparente e assegurar a privacidade das informações fornecidas.</p><p>Mapeamento</p><p>O mapeamento de riscos nada mais é do que o levantamento de todos os fatores que</p><p>possam ameaçar a segurança e a privacidade dos dados dos usuários. É a partir dessa</p><p>análise estratégica que possíveis falhas e vulnerabilidades podem ser identificadas.</p><p>Quando uma empresa coleta, processa e armazena informações dos usuários, ela deve se</p><p>preocupar com três aspectos específicos: o propósito ou a finalidade legítima para o</p><p>tratamento dessas informações; o consentimento informado do titular; e a transparência</p><p>na gestão dos dados. São possíveis ameaças à segurança dos dados na internet: erro</p><p>humano; queda de energia; ataques cibernéticos; e problemas operacionais no sistema</p><p>(BATISTELLA, 2021).</p><p>Transparência</p><p>É fundamental que os dados pessoais sejam tratados com transparência e legalidade. Em</p><p>outras palavras, o usuário tem o direito de saber o que será feito com as informações</p><p>que fornece e como será feito. Antes das primeiras regulamentações relativas à internet,</p><p>os dados de usuários eram por vezes armazenados e até cedidos a outras empresas sem</p><p>autorização prévia do usuário, hoje isso é proibido e pode acarretar severas sanções.</p><p>Com a LGPD, o usuário deve ser informado de forma nítida e antes de dar início a</p><p>quaisquer processos de fornecimento de dados sobre a razão e a finalidade da coleta</p><p>daquelas informações, bem como sobre todo o caminho que será percorrido por elas.</p><p>Até mesmo os dados mais simples coletados por cookies – pequenos arquivos instalados</p><p>no computador do usuário para que a navegação ocorra, devem ser antecedidos por</p><p>alertas que permitam o navegador permanecer ou não naquela conexão.</p><p>Privacidade</p><p>A gestão da privacidade é um importante aspecto previsto pela LGPD e é importante</p><p>que as empresas apresentem ao usuário sua política de proteção às informações pessoais</p><p>dos clientes. O usuário precisa dar permissão à empresa para que ela tutele seus dados e</p><p>é obrigação da empresa proteger essas informações e armazená-las de forma segura. A</p><p>privacidade é um direito constitucional de todos os brasileiros, por isso cabe às</p><p>empresas que trabalham com dados na internet a criação de critérios que assegurem o</p><p>sigilo e a proteção das informações pessoais dos usuários.</p><p>A vulnerabilidade na segurança, o armazenamento e a proteção de dados dos usuários</p><p>podem resultar em vazamentos de informações pessoais e falhas graves, ameaçando não</p><p>apenas o sistema operacional de uma plataforma ou mídia digital, mas também expondo</p><p>seus clientes a riscos consideráveis.</p><p>A LGPD serve para orientar de forma criteriosa as etapas de desenvolvimento</p><p>tecnológico, resguardando empresas e clientes através da ênfase no tratamento</p><p>cuidadoso dos dados. Uma boa ideia deve ser acompanhada de um design atraente e, na</p><p>mesma proporção, de garantias de um acesso seguro, transparente e privativo aos</p><p>ambientes que oferece no ciberespaço.</p><p>ANÁLISE E DIAGNÓSTICO PARA SEGURANÇA</p><p>Estratégias de proteção aos dados</p><p>A segurança é uma grande preocupação humana. Todos os dias o mercado de segurança</p><p>movimenta milhões com a venda de seguros, travas, alarmes, câmeras, sensores de</p><p>movimento e outros recursos. Mas o que fazer quando o assunto é proteger informações</p><p>em uma plataforma virtual? Como impedir os prejuízos causados pelo roubo de dados</p><p>pessoais e sigilosos?</p><p>Para resolver questões como essas, existem estratégias para análise e diagnóstico da</p><p>segurança de dados digitais. Tão importante quanto criar e desenhar uma mídia digital</p><p>de qualidade é poder protegê-la e resguardar os usuários de quaisquer danos no uso dos</p><p>seus dados. Existem algumas dicas que podem ajudar muito na boa análise e no</p><p>diagnóstico da segurança de um aplicativo ou mídia digital (DURBANO, 2018):</p><p>Atualização</p><p>Além de prestar atenção nas tendências e evoluções tecnológicas disponível, é</p><p>fundamental que as empresas mantenham seus sistemas operacionais, drives e softwares</p><p>constantemente atualizados. Quanto mais obsoletos, mais vulneráveis os sistemas se</p><p>tornam à ação de hackers e outros ataques. Não atualizar é facilitar a invasão.</p><p>Bloqueio das saídas</p><p>É importante vigiar e bloquear os sistemas de saída para que impossibilitem a saída de</p><p>informações sem o conhecimento dos profissionais ou sistemas da empresa.</p><p>Mecanismos internos nos sites e aplicativos podem facilitar que arquivos e informações</p><p>saiam da rede segura, por isso é importante investir no bloqueio dessas</p><p>vulnerabilidades.</p><p>Políticas de segurança</p><p>É importante para a empresa e para o usuário que, após avaliações frequentes e</p><p>identificação de riscos, sejam estabelecidas regras norteadoras para a segurança e</p><p>privacidade dos dados. As normas de conduta estabelecem protocolos de cautela e</p><p>dificultam o acesso de cibercriminosos às informações.</p><p>Treinamento profissional</p><p>Os colaboradores precisam estar preparados para lidar com situações de perigo e</p><p>encontrar soluções rapidamente, para isso é importante investir frequentemente no</p><p>aperfeiçoamento. Basta um ponto de vulnerabilidade para que os dados fiquem em</p><p>risco. Com capacitação, toda a equipe passa a adotar comportamentos padronizados e</p><p>estruturados que trarão resultados rápidos em situações de eventuais ameaças.</p><p>Monitoramento</p><p>Para análise e diagnóstico eficazes na segurança de dados, é fundamental monitorar os</p><p>sistemas e suas informações. Quer seja através de abordagens, rotinas ou ferramentas</p><p>automatizadas, o monitoramento frequente permite a identificação precoce de erros.</p><p>Criptografia</p><p>A criptografia é fundamental para a segurança dos dados, através de codificações ela</p><p>impende que informações sejam acessadas por indivíduos ou sistemas que não dispõem</p><p>das chaves – códigos – necessárias.</p><p>Backup</p><p>Quando o assunto é proteção de dados, "quem salva, se salva". Isso quer dizer que os</p><p>dados devem ser copiados e armazenados em um segundo local seguro, um backup,</p><p>para não comprometer as atividades no caso de danos às informações. Quer seja num</p><p>servidor, nuvem ou HD externo, não se deve esquecer desse cuidado fundamental à</p><p>segurança dos dados.</p><p>Planos de contingência</p><p>Prevenir é a melhor estratégia de segurança, mas é preciso ter também um plano para a</p><p>crise. Na análise e diagnóstico da segurança dos dados é fundamental prever um</p><p>conjunto de ações para a eventualidade de um ataque ou uma exposição. Isso poupa</p><p>tempo e potencializa as chances de uma rápida solução.</p><p>É necessário investir esforços e recursos na segurança de qualquer ferramenta digital.</p><p>As consequências do descuido com essas questões podem ser catastróficas,</p><p>descredibilizando a empresa e expondo o cliente/usuário a riscos inúmeros.</p><p>VIDEOAULA</p><p>Este vídeo apresenta a Lei Geral de Proteção de Dados. Através de uma exposição</p><p>dialógica são apresentadas importantes informações sobre o contexto e a origem das</p><p>primeiras normas sobre privacidade e segurança digital no Brasil e no mundo. Esta aula</p><p>também discute estratégias de análise, diagnóstico e prevenção com ênfase na proteção</p><p>de dados no desenvolvimento de mídias digitais.</p><p>Videoaula</p><p>Saiba mais</p><p>LGPD aplicada aos negócios</p><p>Para aprender alguns aspectos jurídicos e técnicos que envolvem a LGPD, assista a</p><p>este vídeo com uma importante discussão sobre a Lei e suas origens. O material foi</p><p>desenvolvido pelo Sebrae de Santa Catarina.</p><p>LEI Geral de Proteção de Dados – LGPD. Santa Catarina: Sebrae, 2021. 1 vídeo</p><p>(1h20min). Publicado pelo canal Sebrae Santa Catarina.</p><p>Lei na íntegra</p><p>Quer conhecer com mais profundidade e na íntegra a Lei Geral de Proteção de Dados?</p><p>Acesse a publicação original através do link da presidência da república.</p><p>BRASIL. Lei nº 13.709 de 14 de agosto de 2018. Lei Geral de Proteção de Dados</p><p>(LGPD). Brasília, 14 de agosto de 2018.</p><p>Mapa da proteção de dados no mundo</p><p>Quer saber como funciona a proteção de dados no mundo? O governo federal possui</p><p>um mapa da proteção de dados. Além das informações sobre os níveis de proteção em</p><p>todo o mundo, você também pode encontrar a versão traduzida da GDPR que inspirou a</p><p>LGPD.</p><p>BRASIL. Em que "estágio" estamos? Confira o mapa da proteção de dados</p><p>pessoais no mundo. [s. d.]. Disponível em:. Acesso em: 27 abr. 2022.</p><p>Aula 4</p><p>FERRAMENTAS E PLATAFORMAS PARA DESIGN E CRIAÇÃO DE</p><p>APLICATIVOS</p><p>Nesta aula, você aprenderá sobre algumas das principais</p><p>ferramentas de desenvolvimento de aplicativos, suas vantagens,</p><p>desvantagens e recursos.</p><p>26 minutos</p><p>https://www.youtube.com/watch?v=PB05d7kLgiI&t=4849s&ab_channel=SebraeSantaCatarina</p><p>https://www.planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/l13709.htm</p><p>https://www.serpro.gov.br/lgpd/menu/a-lgpd/mapa-da-protecao-de-dados-pessoais</p><p>INTRODUÇÃO</p><p>Nas últimas décadas, o processo de criação e design de aplicativos tornou-se mais</p><p>simples e com maiores possibilidades de recursos para desenvolvedores e usuários.</p><p>Com o aumento da demanda por aplicativos, surgiram diferentes linguagens,</p><p>plataformas e meios para a criação e o design desses produtos digitais.</p><p>Nesta aula, você aprenderá sobre algumas das principais ferramentas de</p><p>desenvolvimento de aplicativos, suas vantagens, desvantagens e recursos. É importante</p><p>que você preste atenção às dicas e aos conceitos apresentados, pois não se trata de</p><p>definir quais ferramentas são superiores às outras, mas de conhecer suas potencialidades</p><p>e aplicações para cada demanda específica.</p><p>No mercado de trabalho não é necessário dominar todas as tecnologias de criação no</p><p>design de mídias digitais, mas saber interpretar as necessidades de um projeto e escolher</p><p>a melhor abordagem para o seu desenvolvimento é um importante diferencial, e isso</p><p>você poderá aprender aqui.</p><p>INTRODUÇÃO AOS CONCEITOS BÁSICOS DE JAVASCRIPT PARA</p><p>O DESIGN E A CRIAÇÃO DE APLICATIVOS</p><p>Linguagens para criar</p><p>Ao falar de Javascript (JS) é importante enfatizar que esta linguagem não é sinônimo de</p><p>Java e que uma não é abreviação da outra. O Java é uma linguagem de programação que</p><p>necessita de compilação, ou seja, ser interpretada por uma máquina. Já o JavaScript é</p><p>uma linguagem que é interpretada enquanto o programa é executado. JavaScript é uma</p><p>linguagem muito utilizada para desenvolvimento de websites e aplicativos,</p><p>principalmente no front-end, mas que, através de outras ferramentas (como NodeJS)</p><p>também pode ser utilizada para o desenvolvimento back-end. Aplicações como Netflix e</p><p>Airbnb são totalmente programadas em JavaScript.</p><p>Quando criado, em meados de 1995, o JavaScript funcionava como complemento para o</p><p>navegador da Netscape e apresentava algumas limitações, sendo, por essa razão, pouco</p><p>popular. Com o tempo o JS evoluiu bastante e hoje atua muito além do desenvolvimento</p><p>web e front-end, sendo bastante utilizado para o desenvolvimento de aplicativos e para o</p><p>design responsivo.</p><p>Node.js</p><p>O Node é uma ferramenta capaz de executar o JavaScript fora de um navegador e</p><p>permite funções como acessar arquivos do usuário na máquina, o que não ocorre por</p><p>razões de segurança no navegador (HANASHIRO, 2018). Dentre as vantagens que o</p><p>Node oferece está a possiblidade de mudanças nos aplicativos com maior flexibilidade e</p><p>até alterações no design de forma mais rápida do que em outras estruturas.</p><p>React Native</p><p>React Native é um framework desenvolvido pelo Facebook em 2015 e que permite ao</p><p>desenvolvedor web produzir um aplicativo multiplataforma que se comporte como</p><p>nativo. Esta é uma excelente alternativa para design responsivo, uma vez que a maioria</p><p>das pessoas, hoje, acessa páginas web através de seus dispositivos móveis. Os</p><p>aplicativos são desenvolvidos em JavaScript, que faz a comunicação com elementos</p><p>nativos dos dispositivos móveis, facilitando o processamento de forma assíncrona.</p><p>PhoneGap</p><p>Uma vantagem do uso de JavaScript para a criação de aplicativos mobile é que se pode</p><p>utilizar uma única linguagem para diferentes plataformas. Com o PhoneGap é possível</p><p>criar aplicativos híbridos que unem diferentes tecnologias. O JavaScript possibilita, por</p><p>exemplo, a integração do código nativo do Android – que é Java – e o acesso a essas</p><p>funcionalidades no dispositivo. Dessa forma, o conceito híbrido se dá a partir da junção</p><p>da tecnologia web com a tecnologia nativa (HANASHIRO, 2018), sendo muito eficaz</p><p>nas propostas de design responsivo.</p><p>Ferramentas desenvolvidas em Java</p><p>É importante enfatizar que a linguagem Java, apesar da semelhança no nome, é</p><p>completamente diferente da JavaScript, mas devemos mencioná-la dada a sua relevância</p><p>e popularidade no desenvolvimento de aplicativos. Como já apresentado, Java é a</p><p>linguagem nativa do sistema operacional Android, um dos mais utilizados em</p><p>dispositivos móveis. Duas importantes ferramentas gratuitas para a criação de</p><p>aplicativos com a linguagem Java são o Android</p><p>Studio e o MIT App Inventor que,</p><p>com interface amigável e intuitiva, facilitam o processo de desenvolvimento e design.</p><p>Essas abordagens são focadas no sistema operacional Android, um dos mais populares</p><p>no mundo.</p><p>Não é necessário ser um programador ou cientista da informação para trabalhar com o</p><p>design de aplicativos, mas é um grande diferencial quando o profissional conhece as</p><p>principais características de linguagens importantes, como JavaScript, dentre outras. O</p><p>bom designer de mídias digitais deve estar sempre atento às tecnologias, tendências e</p><p>dinâmicas que circunscrevem a sua atuação e isso inclui o mundo da programação.</p><p>INTRODUÇÃO AOS CONCEITOS BÁSICOS DE FLUTTER PARA O</p><p>DESIGN E A CRIAÇÃO DE APLICATIVOS</p><p>Framework de desenvolvimento híbrido</p><p>O mercado dos aplicativos tem um grande desafio: a variedade de sistemas operacionais</p><p>existentes. Antes, quando um aplicativo era criado para o sistema Android, por</p><p>exemplo, ele não poderia ser executado pelo sistema IOS, era necessária a criação de</p><p>uma outra versão do mesmo programa voltada para o sistema específico, isso sem falar</p><p>nas exigências das plataformas oficiais de publicação dos aplicativos.</p><p>Para solucionar questões como essas, foram desenvolvidos frameworks de</p><p>desenvolvimento híbrido “populares por permitirem o desenvolvimento</p><p>multiplataformas, possibilitando um único código ser compilado para várias plataformas</p><p>sem a necessidade de reescrevê-lo” (NEVES; MENDES JUNIOR, 2020, p. 3). Um dos</p><p>mais reconhecidos frameworks de desenvolvimento híbrido de aplicativos da atualidade</p><p>é o Flutter. Cabe ressaltar que um framework é uma estrutura ampla de códigos que tem</p><p>o propósito de facilitar os processos de desenvolvimento ao providenciar uma função</p><p>padrão dentro do código.</p><p>O Flutter é um Kit de Desenvolvimento de Software (SDK), um conjunto de</p><p>ferramentas que permite a criação e também o aperfeiçoamento de mídias digitais já</p><p>existentes. Suas funcionalidades permitem agilidade e simplicidade no processo</p><p>criativo. Com código aberto (open-source), esse conjunto de ferramentas possibilita a</p><p>criação de programas de alta performance multiplataforma. Uma outra grande vantagem</p><p>do Flutter é que ele é “um framework introduzido recentemente pelo Google, com foco</p><p>na construção de interfaces, possibilitando assim a construção de um aplicativo com</p><p>bom desempenho e uma UI de qualidade” (CORAZZA, 2018, p. 22).</p><p>Essa SDK é uma das favoritas entre profissionais do design, pois tem o fluxo orientado</p><p>para o design com widgets para definir interface, estilo, estrutura e layouts, dentre</p><p>outros, além de oferecer widgetes de design específico para cada sistema operacional,</p><p>tanto Android quanto IOS. A linguagem utilizada pelo Flutter é o Dart. Diferente de</p><p>outros frameworks, o Flutter não usa JavaScript e dispensa conversão ou interpretação</p><p>de códigos, e a linguagem Dart, embora não seja a mais popular dentre as linguagens, é</p><p>executa na plataforma nativa, dispensando conversões e pontes de interpretações</p><p>(MACORATTI, 2019).</p><p>É importante ressaltar que existem outros frameworks eficientes para a criação de</p><p>aplicativos híbridos, como o React Native, que trabalha com uma estilização muito</p><p>semelhante à da web, com CSS e HTML. O Flutter se destaca pela sua praticidade,</p><p>"basta alguns passos de instalação e o desenvolvedor já consegue rodar a aplicação no</p><p>celular ou no emulador sem dificuldade alguma e sem a incidência de erros. Basta</p><p>alguns comandos para gerar a APK do aplicativo e rodar o aplicativo em sua versão de</p><p>build no smartphone" (NEVES; MENDES JUNIOR, 2020, p. 16).</p><p>APK diz respeito ao arquivo de aplicação da empresa e build é o equivalente a uma</p><p>versão teste. Apesar das suas muitas vantagens, é necessário evidenciar que o Flutter é</p><p>ainda muito recente no mercado, utiliza uma linguagem não tão popular quanto o</p><p>JavaScript e possui algumas limitações em suas bibliotecas, por isso é necessário prestar</p><p>atenção à sua evolução e aceitação ao longo do tempo.</p><p>Para Neves e Mendes (2020, p. 22), “a escolha de um framework para determinado</p><p>projeto, na maioria dos casos, irá depender de diversos fatores, entre eles a experiência</p><p>dos desenvolvedores com a linguagem e/ou com o framework a ser escolhido, e não</p><p>somente questões técnicas”. O bom designer não deve descobrir qual é o melhor</p><p>framework para desenvolvimento de aplicativos, mas sim compreender que cada um</p><p>deles apresenta suas peculiaridades, linguagens, vantagens e desafios. Cabe a cada</p><p>profissional identificar, a partir de suas habilidades e seus conhecimentos, qual será a</p><p>melhor alternativa para o desenvolvimento eficaz e eficiente de uma boa interface</p><p>digital, atraente e interessante ao usuário.</p><p>PLATAFORMAS ON-LINE PARA CRIAÇÃO DE APLICATIVOS</p><p>Desenvolvimento de aplicativos para amadores</p><p>A crescente demanda por aplicativos e a popularização desses softwares para</p><p>dispositivos móveis fez com que surgisse um novo conceito de criação de aplicativos, as</p><p>plataformas on-line com interface para a criação por não programadores. Através dessas</p><p>plataformas, pessoas sem formação em tecnologia da informação ou programação</p><p>podem desenvolver, a partir de templates de modelos pré-prontos, ferramentas</p><p>funcionais para dispositivos móveis, prontas para a publicação e até venda em lojas de</p><p>aplicativos. Existem centenas de plataformas on-line para a criação de aplicativos, mas</p><p>para fins didáticos, é importante destacar algumas das mais populares no mercado atual:</p><p>App2Sales</p><p>O App2sales é uma plataforma de grandes potencialidades, que permite, entre outras</p><p>coisas, a criação de redes sociais exclusivas. Com diversos modelos, templates e layouts</p><p>disponíveis, possibilita a personalização com uso de logo e diversos outros recursos.</p><p>Traz ainda a possibilidade de publicação do aplicativo finalizado nas principais lojas</p><p>virtuais, facilitando diversos processos de gerenciamento e divulgação. A ferramenta é</p><p>paga, o preço da mensalidade pode variar conforme os recursos solicitados.</p><p>Appy Pie</p><p>Essa plataforma oferece uma interface simples e baseada na nuvem para seus usuários,</p><p>com a possibilidade de criação de aplicativos para todos os principais sistemas</p><p>operacionais existentes. Permite as revisões com atualização automática, notificações</p><p>de push e oferece APIs de análise e GPS. Os aplicativos criados nessa plataforma</p><p>podem ser publicados nas principais lojas existentes e os preços para os pacotes básicos</p><p>são acessíveis, havendo a possibilidade de planos gratuitos.</p><p>AppMachine</p><p>A AppMachine é voltada para aplicativos de alta perfomance para os sistemas iOS e</p><p>Android. Sua interface oferece a possibilidade de criação com diferentes blocos e a</p><p>conexão com alguma das mais populares redes sociais existentes. Embora seja de fácil</p><p>navegabilidade, tem foco no mercado profissional e não no público amador. Os planos</p><p>são pagos e com custos mais elevados que a média das plataformas on-line.</p><p>Fábrica de Aplicativos</p><p>Este é um dos mais populares serviços de criação de aplicativos no Brasil. Possibilita o</p><p>desenvolvimento de programas para dispositivos móveis a partir da linguagem HTML.</p><p>Com atendimento em português, diversos modelos de templates básicos e uma interface</p><p>bastante simples, o serviço tem conquistado um número cada vez maior de assinantes</p><p>no Brasil. Oferece um plano básico gratuito e vai até o profissional, com mensalidades</p><p>mais elevadas.</p><p>Criar um aplicativo tornou-se muito mais simples do que em qualquer outra época da</p><p>história, graças à evolução tecnológica e às plataformas on-line com suas interfaces</p><p>amigáveis. Mas poder fazê-lo não significa que qualquer um seja capaz de criar</p><p>aplicativos de qualidade a partir dessas ferramentas tecnológicas. Um bom aplicativo</p><p>demanda elementos de usabilidade e interface que só profissionais capacitados são</p><p>capazes de alcançar e, nesse sentido, a atuação do designer de mídias digitais é um</p><p>diferencial para produtos com maior</p><p>engajamento e uma melhor experiência para o</p><p>usuário.</p><p>VIDEOAULA</p><p>Este vídeo desafia você a se aprofundar no universo do design de aplicativos através do</p><p>conhecimento de novas ferramentas tecnológicas, linguagens e interfaces criativas. Para</p><p>além dos processos gráficos, você poderá se familiarizar com outros aspectos do</p><p>desenvolvimento de aplicativos para dispositivos móveis e conhecer importantes</p><p>aspectos que dialogam com o design, a criação de interfaces e a experiência do usuário</p><p>nos processos de concepção de um programa para celulares, tablets e outros.</p><p>Videoaula</p><p>Saiba mais</p><p>Criando uma calculadora em linguagem java</p><p>Se você nunca teve contato com a linguagem Java na criação de aplicativos, mas tem</p><p>essa curiosidade, que tal tentar desenvolver uma ferramenta simples mediante algumas</p><p>orientações técnicas? Assistindo a este vídeo da Stack Mobile você poderá criar, do</p><p>zero, um aplicativo para dispositivos móveis. É rápido, simples e uma interessante</p><p>experiência. CRIANDO um app de calculadora em Java – completo. [S. l.: s. n.], 2021.</p><p>1 vídeo (1h8min). Publicado pelo canal Stack Mobile.</p><p>Criando uma calculadora com flutter</p><p>Se você está em dúvida sobre frameworks que usam Java e Flutter, que tal tentar fazer a</p><p>calculadora das duas maneiras? Neste vídeo você encontra uma aula completa sobre</p><p>como criar uma calculadora do zero a partir do Flutter.</p><p>APP Flutter - Sua PRIMEIRA App COMPLETA. [S. l.: s. n.], 2020. 1 vídeo (1h18min).</p><p>Publicado pelo canal Cod3r Cursos.</p><p>Criando um aplicativo sem programação</p><p>Talvez você não goste da experiência de criar designs de aplicativos a partir da</p><p>linguagem de programação, então um bom desafio pode ser o uso de uma plataforma</p><p>on-line para isso. Se quiser testar suas habilidades e criatividade sem precisar aprender o</p><p>básico das linguagens de tecnologia da informação, a Fábrica de Aplicativos possibilita</p><p>isso através do seu plano básico e gratuito.</p><p>REFERÊNCIAS</p><p>6 minutos</p><p>https://www.youtube.com/watch?v=jTuxCv_XjlA</p><p>https://www.youtube.com/watch?v=jyjdXFsQoYw</p><p>https://fabricadeaplicativos.com.br/</p><p>Aula 1</p><p>FERREIRA, M.; GONÇALVES, B.; WANGENHEIM, C. Design Visual para</p><p>Interfaces de Aplicativos: Análise de Modelos de Referência. Revista Educação</p><p>Gráfica, v. 23, p. 79-95, 2019.</p><p>GUIDINI, P. A comunicação com o mercado por meio de aplicativos: desafios e</p><p>oportunidades. Signos do Consumo, São Paulo, v. 10, n. 1, p. 59-69, jan./jun. 2018.</p><p>LEMOS, A.; JOSGRILBERG, F. (orgs.). Comunicação e Mobilidade. Salvador,</p><p>EDUFBA, 2009.</p><p>NETO, O. Usabilidade da interface de dispositivos móveis: heurísticas e diretrizes</p><p>para o design. 2013. Dissertação (Mestrado) – Universidade de São Paulo. São Paulo,</p><p>2013.</p><p>PUPPI, M.; PADOVANI, S. Como estudantes de Design visualizam o uso de princípios</p><p>de design de interfaces mobile em aplicativos educacionais? Estudos em Design, v. 25,</p><p>p. 145-169, 2017.</p><p>REIS, A. V.; GONÇALVES, B. S. Interfaces Tangíveis: Conceituação e</p><p>Avaliação. Estudos em Design, Rio de Janeiro, v. 24, n. 2, p. 92-111, 2016.</p><p>SAMSUKHA, A. Most Popular e Most Downloaded apps 2021. Emizentech, 2021.</p><p>Disponível em: https://www.emizentech.com/blog/most-popular-apps.html. Acesso em:</p><p>22 mar. 2022.</p><p>Aula 2</p><p>ALHO FILHO, J. L. O delírio: transtorno da intuição. São Paulo: Robe Editorial, 2007.</p><p>ALMEIDA, F. V. Definição de um modelo orientado as necessidades do usuário para a</p><p>definição, priorização e otimização de indicadores. 2020. 143 f. Dissertação (Mestrado</p><p>em Informática) – Universidade de Brasília, Brasília, 2020.</p><p>BRITO, L.; QUARESMA, M. M. R. O design centrado no usuário nas metodologias</p><p>ágeis. In: 17º CONGRESSO INTERNACIONAL DE ERGONOMIA E</p><p>USABILIDADE DE INTERFACES HUMANO-TECNOLOGIA. Anais. São Paulo:</p><p>Blucher, 2019.</p><p>CARRION, W. Design para Webdesigners: Princípios do Desing para Web. São</p><p>Paulo: Brasport, 2008.</p><p>DONDIS, D. A. Sintaxe da linguagem visual. Martins Fontes: São Paulo, 2003.</p><p>DUMAS, J. S.; REDISH, J. C. A pratical guide to usability testing. Revised Edition.</p><p>Great Britain: Intellect, 1999.</p><p>GRZEBIELUCKAS, C. et al. Instrumento para identificação das necessidades do</p><p>consumidor no processo de desenvolvimento do design: um estudo ilustrado com o</p><p>projeto de um automóvel. Gestão & Produção [online]. 2011, v. 18, n. 2, pp. 337-350.</p><p>Disponível em: https://doi.org/10.1590/S0104-530X2011000200009. Acesso em: 27</p><p>https://www.emizentech.com/blog/most-popular-apps.html</p><p>https://doi.org/10.1590/S0104-530X2011000200009</p><p>abr. 2022.</p><p>MCKAY, E. Eight Steps to an Intuitive UI. [S. n.]: B.W. Publishing, 2018.</p><p>NIELSEN, J. Usability 101. Useit.com. 2003. Disponível</p><p>em: http://www.useit.com/alertbox/20030414.html. Acesso em: 29 mar. 2022.</p><p>RODRIGUES, E. A intuição é a chave para um bom design. 2019. Disponível</p><p>em: https://edrodrigues.com.br/blog/a-intuicao-e-a-chave-para-um-bom-design/. Acesso</p><p>em: 24 mar. 2022.</p><p>Aula 3</p><p>BATISTELLA, C. Mapeamento de riscos na área de TI e adequação à</p><p>LGPD. Certifiquei, 2021. Disponível em: https://www.certifiquei.com.br/mapeamento-</p><p>riscos/. Acesso em: 23 mar. 2022.</p><p>BRASIL. Lei nº 13.709 de 14 de agosto de 2018. Lei Geral de Proteção de Dados</p><p>(LGPD). Brasília, 14 de agosto de 2018. Disponível</p><p>em: http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/l13709.htm. Acesso</p><p>em: 27 abr. 2022.</p><p>DURBANO, V. Segurança da informação: o que é e 12 dicas práticas para garantir. Eco</p><p>IT, 2018. Disponível em: https://blog.ecoit.com.br/seguranca-da-informacao/. Acesso</p><p>em: 23 mar. 2022.</p><p>LUGATI, L. N.; ALMEIDA, J. E. Da evolução das legislações sobre proteção de dados:</p><p>a necessidade de reavaliação do papel do consentimento como garantidor da</p><p>autodeterminação informativa. Revista de Direito, Viçosa, v. 12, n. 2, p. 1-33, 2020.</p><p>Disponível em: https://periodicos.ufv.br/revistadir/article/view/10597. Acesso em: 20</p><p>mar. 2022.</p><p>QUINTILANO, L. Contexto histórico e finalidade da Lei Geral de Proteção de Dados</p><p>(LGPD). IAPD, 2021. Disponível em: https://iapd.org.br/contexto-historico-e-</p><p>finalidade-da-lei-geral-de-protecao-de-dados-lgpd/. Aceso em: 23 mar. 2022.</p><p>Aula 4</p><p>ANDRADE, J. P. B. O. de; BESTETE, W. M. Aplicativo Mobile para Realização de</p><p>Pedidos para Açaiteria Delivery. 2018. Monografia (Tecnólogo em Análise e</p><p>Desenvolvimento de Sistemas) – Instituto Federal do Espírito Santo, Espírito Santo,</p><p>2018. Disponível</p><p>em: biblioteca.ifes.edu.br:8080/pergamumweb/vinculos/000014/000014b0.pdf. Acesso</p><p>em: 29 mar. 2022.</p><p>CORAZZA, P. V. Um aplicativo multiplataforma desenvolvido com Flutter e</p><p>NoSQL para o cálculo da probabilidade de apendicite. 2018. Monografia (Bacharel</p><p>em Ciência da Computação) – Universidade Federal do Rio Grande do Sul. Porto</p><p>Alegre, 2018. Disponível em: https://lume.ufrgs.br/handle/10183/190147. Acesso em:</p><p>29 mar. 2022.</p><p>HANASHIRO, Akira. O que se pode fazer com JavaScript hoje em dia? 2018.</p><p>Disponível em: https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-</p><p>javascript-hoje-em-dia. Acesso em: 14 abr. 2022</p><p>HORSTMANN, C. Conceitos de computação com Java. 5. ed. Porto Alegre:</p><p>Bookman Editora, 2009.</p><p>MARCORATTI, J. C. Flutter - Material Design com Scaffold. Macorratti.net, 2019.</p><p>Disponível em: https://www.macoratti.net/19/07/flut_scaffd1.htm. Acesso em: 29 mar.</p><p>2022.</p><p>http://www.useit.com/alertbox/20030414.html</p><p>https://edrodrigues.com.br/blog/a-intuicao-e-a-chave-para-um-bom-design/</p><p>https://www.certifiquei.com.br/mapeamento-riscos/</p><p>https://www.certifiquei.com.br/mapeamento-riscos/</p><p>http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/l13709.htm</p><p>https://blog.ecoit.com.br/seguranca-da-informacao/</p><p>https://periodicos.ufv.br/revistadir/article/view/10597</p><p>https://iapd.org.br/contexto-historico-e-finalidade-da-lei-geral-de-protecao-de-dados-lgpd/</p><p>https://iapd.org.br/contexto-historico-e-finalidade-da-lei-geral-de-protecao-de-dados-lgpd/</p><p>http://biblioteca.ifes.edu.br:8080/pergamumweb/vinculos/000014/000014b0.pdf</p><p>https://lume.ufrgs.br/handle/10183/190147</p><p>https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia</p><p>https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia</p><p>https://www.macoratti.net/19/07/flut_scaffd1.htm</p><p>NEVES, J.; MENDES JUNIOR, V. Uma análise comparativa entre Flutter e React</p><p>Native como frameworks para desenvolvimento híbrido de aplicativos mobile:</p><p>estudo de caso visando produtividade. Universidade do Sul de Santa Catarina</p><p>(UNISUL). Tubarão, 2020. Disponível</p><p>em: https://repositorio.animaeducacao.com.br/bitstream/ANIMA/15960/1/Artigo%20fin</p><p>al.pdf. Acesso em: 29 mar. 2022.</p><p>SILVA, A. M.; PAIVA, I. G.; FORTES, D. X. Desenvolvimento de Aplicativo para</p><p>Android com Uso do MIT App Inventor. Revista Científica da FASETE, 2017.</p><p>Disponível</p><p>em: https://www.unirios.edu.br/revistarios/media/revistas/2017/13/desenvolvimento_de</p><p>_aplicativo_para_android_com_uso_do_mit_app_inventor.pdf. Acesso em: 29 mar.</p><p>2022.</p><p>Ver anotações0</p><p>•</p><p>Design para mídias digitais interativas: o design de jogos</p><p>• Aula 1 - Gamificação da informação</p><p>32 minutos</p><p>• Aula 2 - Introdução ao conceito de design de jogos</p><p>33 minutos</p><p>• Aula 3 - Princípios e elementos do design de jogos</p><p>30 minutos</p><p>• Aula 4 - Ferramentas e plataformas para o design e criação de jogos</p><p>34 minutos</p><p>• Referências</p><p>5 minutos</p><p>0%</p><p>T</p><p>A-AA+</p><p>DESIGN PARA MÍDIAS DIGITAIS INTERATIVAS: O DESIGN DE JOGOS</p><p>134 minutos</p><p>Aula 1 - Gamificação da informação</p><p>Aula 2 - Introdução ao conceito de design de jogos</p><p>https://repositorio.animaeducacao.com.br/bitstream/ANIMA/15960/1/Artigo%20final.pdf</p><p>https://repositorio.animaeducacao.com.br/bitstream/ANIMA/15960/1/Artigo%20final.pdf</p><p>https://www.unirios.edu.br/revistarios/media/revistas/2017/13/desenvolvimento_de_aplicativo_para_android_com_uso_do_mit_app_inventor.pdf</p><p>https://www.unirios.edu.br/revistarios/media/revistas/2017/13/desenvolvimento_de_aplicativo_para_android_com_uso_do_mit_app_inventor.pdf</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#referencias</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula2</p><p>Aula 3 - Princípios e elementos do design de jogos</p><p>Aula 4 - Ferramentas e plataformas para o design e criação de jogos</p><p>Referências</p><p>Aula 1</p><p>GAMIFICAÇÃO DA INFORMAÇÃO</p><p>Nesta aula, você será desafiado à reflexão sobre uso de games para</p><p>a comunicação e educação.</p><p>32 minutos</p><p>INTRODUÇÃO</p><p>O mundo mudou muito e muito rápido nos últimos dois séculos. Com as tecnologias,</p><p>novos dispositivos e plataformas, tarefas tradicionais puderam ser reinventadas, assim</p><p>como diversos hábitos, saberes e até estruturas culturais. Algumas das áreas mais</p><p>afetadas pelas mudanças tecnológicas foram a comunicação e o conhecimento.</p><p>Nesta aula, você será desafiado à reflexão sobre uso de games para a comunicação e</p><p>educação. Através de uma contextualização histórica sobre as origens e usos dos jogos</p><p>digitais você poderá compreender como entretenimento e informação podem ser</p><p>reunidos com um mesmo propósito. Você também será apresentado ao conceito de</p><p>ludificação do conhecimento e terá importantes dados sobre conceitos e técnicas</p><p>do storytelling, uma importante ferramenta para as mídias digitais.</p><p>CONTEXTUALIZAÇÃO HISTÓRICA DO USO DE JOGOS DIGITAIS</p><p>A história dos jogos</p><p>Durante muito tempo, os jogos, em especial os digitais, foram considerados um símbolo</p><p>de entretenimento e futilidade por alguns grupos da sociedade, mas a verdade é que os</p><p>jogos existem desde a pré-história e são uma importante ferramenta de estímulo ao</p><p>raciocínio, à criatividade e à comunicação entre os indivíduos. Hoje os jogos digitais se</p><p>consolidaram como uma linguagem capaz de auxiliar na propagação do conhecimento e</p><p>também como um esporte respeitável que movimenta todos os anos um mercado de</p><p>bilhões de dólares.</p><p>Historicamente, o jogo mais antigo de que se tem registro é chamado Senet, um jogo de</p><p>tabuleiro de aproximadamente 3.500 a.C. encontrado nas câmaras funerárias do antigo</p><p>Egito e cujo suposto objetivo seria de correr com as peças por uma placa usando varas</p><p>para uma função equivalente à dos dados.</p><p>Um longo caminho foi percorrido desde os primeiros jogos da humanidade até a</p><p>primeira versão eletrônica desses mecanismos. Estima-se que um dos primeiros jogos</p><p>eletrônicas tenha sido o "Bertie the Brain", um dispositivo canadense criado em Toronto</p><p>por Josef Kates e que simulava o popular "Jogo da Velha" em uma máquina gigantesca</p><p>com cerca de quatro metros de altura (CARVALHO, 2018). Embora fosse um jogo, seu</p><p>objetivo principal não era o entretenimento, mas sim demonstrar as capacidades da</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U4/index.html#referencias</p><p>máquina que o apresentava. Somente em 1958 foi divulgado o primeiro jogo eletrônico</p><p>com o objetivo principal de entretenimento, o “Tennis for two”.</p><p>No início da década de 1960, o MIT (Instituto de Tecnologia de Massachusets) lançou o</p><p>“SpaceWar”, que se tornaria uma referência de interface gráfica para muitos outros a</p><p>partir de então. Na década de 1970, a Atari teve um importante papel no mercado,</p><p>mostrando-se uma empresa à frente do seu tempo, ela lançou o “Pong”, seguido por</p><p>outros jogos e isso fez com que diversas outras grandes empresas, como a Nintendo e a</p><p>Mattel, passassem a investir recursos e tecnologia do desenvolvimento do promissor</p><p>mercado de videogames que cresceu e se consolidou.</p><p>Na primeira metade da década de 1980, o mercado de games ficou repleto de jogos</p><p>repetitivos e de qualidade baixa, levando a uma estagnação conhecida como o crash dos</p><p>games, mas em 1983 a Nintendo revolucionou essa tecnologia com o lançamento de um</p><p>console inovador, conhecido como Famicom no Japão e lançado como Nintendo</p><p>Entertainment System (NES) em 1985 nos Estados Unidos. A partir de então tem início</p><p>uma corrida acelerada de inovações na área, com grandes empresas como a Sega, Sony</p><p>e Microsoft investindo no mercado dos games.</p><p>Os avanços da computação permitiram a integração de tecnologias e funções, nos anos</p><p>1990 já era muito popular o uso de jogos eletrônicos nos desktops e notebooks. Jogos</p><p>como “Campo Minado” e “Paciência” foram alguns dos pioneiros nessa área, com uma</p><p>lógica simples, de funcionamento leve e uma interface gráfica de simples compreensão</p><p>e boa usabilidade. Com os avanços da internet e dispositivos móveis, os jogos passaram</p><p>a oferecer possibilidades mais dinâmicas e jogabilidade coletiva em rede.</p><p>Para além dos avanços tecnológicos e da evolução dos dispositivos, a maior revolução</p><p>relacionada aos games digitais é a percepção de que eles podem fazer bem mais do que</p><p>entreter. Para Savi e Ulbricht (2008), esses jogos também "têm a capacidade de facilitar</p><p>o aprendizado de várias áreas do conhecimento. Ao serem utilizados como um recurso</p><p>de representação de um determinado assunto, os jogos auxiliam no processo de</p><p>entendimento do que está sendo ensinado". Os jogos tornaram-se uma importante</p><p>ferramenta de comunicação na atualidade e apontam para o futuro do aprendizado em</p><p>uma sociedade cada vez mais integrada à tecnologia.</p><p>LUDIFICAÇÃO DO CONHECIMENTO</p><p>Ludificação e gamificação</p><p>Existem inúmeras formas de se transmitir uma mensagem ou informação. Isso pode ser</p><p>feito através da escrita, de sons, ilustrações, códigos, gestos e entonações, entre outros.</p><p>Dentre as diversas formas de comunicar e transmitir o conhecimento está a ludificação,</p><p>um conceito que pode ser definido como a “técnica de utilizar elementos de jogos, como</p><p>pontos, títulos, lista de líderes e outros, em ambientes que não são jogos, geralmente</p><p>com o intuito de aumentar o engajamento em alguma atividade” (ABREU, 2015, p. 3).</p><p>Com o advento das mídias digitais, a ludificação do conhecimento ganhou espaço em</p><p>diversas áreas da vivência humana através da transformação de informações importantes</p><p>em jogos digitais.</p><p>A ludificação, especialmente no contexto dos jogos digitais, apresenta-se com</p><p>frequência sob a terminologia de gamificação (derivação do inglês gamification), que</p><p>“envolve o uso de elementos de design de jogos, características dos jogos, em contextos</p><p>de não jogo” (DETERDING et al., 2011). "Ludo" (palavra que dá origem ao conceito</p><p>de ludificação) é o termo da língua portuguesa utilizado para fazer referência ao</p><p>conceito de jogo (sem ser o próprio jogo), mas o substantivo "gamificação", embora</p><p>seja uma tradução com sufixo original da palavra estrangeira considerado por alguns um</p><p>"barbarismo da língua portuguesa" (UMBRELLA, 2013), tornou-se mais popular do</p><p>que o termo original, substituindo-o em expressão numérica na publicação de artigos e</p><p>diversas discussões teóricas. Para fins didáticos, será adotada aqui a palavra</p><p>“gamificação”, mas é importante o conhecimento de que o conceito de “ludificação”</p><p>existe e ainda é adotado por alguns teóricos da área.</p><p>É importante observar que a ênfase do conceito de gamificação está no design, e não na</p><p>plataforma ou tecnologia em uso, e isso serve para evidenciar a importância do design</p><p>nessa metodologia de transmissão de informações e conhecimentos. Segundo Schell</p><p>(2011), o design de jogos apresenta algumas características específicas que devem ser</p><p>observadas, como: objetivos claros, ausência de distrações, feedback instantâneo e</p><p>desafiabilidade.</p><p>A gamificação pode ser utilizada por empresas, escolas, pesquisadores, educadores,</p><p>entre outros com o objetivo de estabelecer uma comunicação mais dinâmica,</p><p>interessante, leve e eficaz. A gamificação pode ser um instrumento de transformação de</p><p>comportamentos, um recurso de motivação e uma variação metodológica. No contexto</p><p>do ensino e da geração de conhecimento, as atividades intencionais desenvolvidas</p><p>através da gamificação podem permitir a aprendizagem de forma intuitiva e estratégica.</p><p>O uso estratégico de jogos tornou-se instrumento de publicidade, engajamento,</p><p>interação social e circulação de conteúdos, entre outros fins. A percepção do potencial</p><p>dessa ferramenta tem provocado o crescimento da demanda e expansão do mercado de</p><p>jogos para uma perspectiva além do entretenimento simples. Considerando que o design</p><p>é uma parte intrínseca e caracterizadora do conceito de gamificação, é possível constatar</p><p>que o uso estratégico de jogos digitais com finalidades de aprendizagem e divulgação de</p><p>conteúdos abre um grande espaço no mercado de trabalho para atuação específica e</p><p>qualificada dos designers de mídias digitais.</p><p>O uso da gamificação equivale à implementação de diversas ferramentas do design de</p><p>jogos de forma estratégica e com diferentes aplicações. Para sua boa aplicação e</p><p>eficácia, é necessário saber como os diferentes recursos interagem entre si e as</p><p>potencialidades e limitações ocasionadas por estes. O uso estratégico da gamificação</p><p>depende da definição de objetivos precisos e simples e sua boa execução está ligada ao</p><p>desenvolvimento de ferramentas do design, o que só pode ser feito de forma adequada</p><p>por profissionais qualificados da área.</p><p>INTRODUÇÃO AOS CONCEITOS E ÀS TÉCNICAS</p><p>DE STORYTELLING</p><p>Storytelling</p><p>A narrativa sempre foi um importante recurso da comunicação humana, antes mesmo da</p><p>existência da escrita. Na atualidade, quase todas as mídias e plataformas de</p><p>comunicação utilizam esse recurso como ferramenta de engajamento e vínculo, isso</p><p>pode ser observado em filmes, livros, novelas, séries, redes sociais, jogos imersivos,</p><p>entre outros. As pessoas gostam de ouvir e contar história e isso pode ser utilizado</p><p>desde as cotidianidades mais singelas às estratégias rebuscadas de vendas e</p><p>engajamentos em mídias digitais.</p><p>O storytelling é uma ferramenta muito utilizada nas mídias digitais e totalmente</p><p>fundamentada na premissa das narrativas. Segundo Antônio Núñez (2009),</p><p>o storytelling é uma ferramenta de comunicação organizada através de uma sequência</p><p>de fatos ou eventos que apelam aos sentidos e às emoções. Mcsill (2013, p. 31), por sua</p><p>vez, observa que "Storytelling é a arte de contar uma história, ou seja, por meio da</p><p>palavra escrita, da música, da mímica, das imagens, do som ou dos meios digitais".</p><p>No contexto da era digital, marcado pelo uso dos computadores, dispositivos móveis,</p><p>internet e redes sociais, o storytelling é evidenciado principalmente nas relações e na</p><p>comunicação em rede, tendo sido percebido por empresas e organizações como uma</p><p>estratégia de mobilização e engajamento de pessoas. A esse respeito, Nassar (2009, p.</p><p>199) observa que "são as mensagens, as histórias que configuram as redes de</p><p>relacionamentos, só por meio da análise, da interpretação e da opinião sobre esses</p><p>conteúdos é possível entender a rede".</p><p>Embora as origens do storytelling remetam aos primórdios da humanidade, hoje o</p><p>conceito vem se moldando no contexto das mídias digitais a partir da ideia de uma</p><p>comunicação inclusiva, colaborativa, de multiprotagonismos. Em um cenário cada vez</p><p>mais caracterizado pelo excesso de informações, o storytelling surge como possibilidade</p><p>de destaque em meio a outros tipos de conteúdos. Para Núñez (2009, p. 83), dentre</p><p>todos os tipos de informações existentes, "uma história tem muito mais poder de</p><p>persuasão que toda uma artilharia de dados, provas, apresentações e argumentos".</p><p>Nas mídias digitais, o storytelling permite a inclusão de narrativas junto ao produto e/ou</p><p>propósito de uma determinada marca, gerando vínculos afetivos e interesse prolongado.</p><p>Marcas que trabalham com personalização ou segmentação utilizam bastante esse</p><p>recurso para se posicionarem e conquistarem espaço, justificando através de narrativas</p><p>positivas sua existência e atuação. Outro recurso muito eficaz para o uso estratégico</p><p>do storytelling é a utilização de referências da cultura pop e memes, para atrair,</p><p>principalmente, o público mais jovem.</p><p>Existem diversos recursos técnicos capazes de elevar a qualidade e o potencial de</p><p>engajamento de um storytelling e, dentre estes, cabe destacar: uso da empatia, uma boa</p><p>história, bom uso de recursos audiovisuais, narrativa de impacto e oportunidade</p><p>(SANTOS, 2016). Para Brunner e Emery (2010, p. 21), "a diferença entre um ótimo</p><p>produto e um produto simplesmente bom é que um produto ótimo personifica uma ideia</p><p>que as pessoas conseguem entender e aprender, uma ideia que cresce em suas mentes,</p><p>com a qual elas se envolvem emocionalmente".</p><p>Com isso, fica evidente que o uso do storytelling nas mídias digitais é uma abordagem</p><p>estratégica de grande potencial capaz de posicionar e engajar produtos e marcas através</p><p>de ideias consolidadas com o auxílio de recursos narrativos.</p><p>VIDEOAULA</p><p>Este vídeo desafia você a refletir sobre as transformações sociais, culturais e conceituais</p><p>que resultaram</p><p>na inserção dos jogos digitais como ferramenta estratégica de ensino e</p><p>divulgação de informações. Através de uma contextualização histórica e científica sobre</p><p>o uso de games como metodologia de comunicação, apresenta importantes aspectos</p><p>ligados ao design e à definição dos conceitos de ludificação e gamificação do</p><p>conhecimento.</p><p>Videoaula</p><p>Saiba mais</p><p>Museu digital dos videogames</p><p>A Microsoft criou um museu digital dos videogames criados por ela para celebrar os 20</p><p>anos do console Xbox. O site Museu Xbox é dinâmico e interativo, cheio de</p><p>curiosidades sobre o assunto. Vale a pena conferir e viajar!</p><p>Gamificação na educação</p><p>A gamificação é também uma estratégia de engajamento e motivação. A investigadora</p><p>Bianca Vargas Tolomei escreveu um interessante trabalho de reflexão teórica sobre o</p><p>assunto, no contexto da educação a distância. O artigo científico tem apenas 12 páginas</p><p>e você pode acessar este material de forma gratuita no link:</p><p>TOLOMEI, B. V. A gamificação como estratégia de engajamento e motivação na</p><p>educação. Revista Científica em Educação a Distância, v. 7, n. 7. Universidade</p><p>Federal Fluminense, Rio de Janeiro, 2017.</p><p>Elementos de uma narrativa</p><p>O pesquisador Jobsonn Lopes Santos apresenta em um capítulo de sua dissertação de</p><p>mestrado alguns dos mais importantes elementos de uma narrativa. O capítulo de 38</p><p>páginas traz interessantes perspectiva e reflexões sobre a construção de uma narrativa.</p><p>SANTOS, J. L. Elementos da narrativa. In: SANTOS, J. L. A Escrita como Exercício</p><p>de Contrapoder. 2004. Tese (Mestrado) - Pontifícia Universidade Católica do Rio de</p><p>Janeiro - PUC-RIO. Rio de Janeiro, 2004.</p><p>Aula 2</p><p>INTRODUÇÃO AO CONCEITO DE DESIGN DE JOGOS</p><p>Você conhecerá importantes técnicas e fundamentos teóricos da</p><p>criação e concepção de games enquanto estratégias de</p><p>comunicação, produção de conteúdo e/ou entretenimento.</p><p>33 minutos</p><p>INTRODUÇÃO</p><p>O design é uma parte muito importante na criação e no desenvolvimento dos jogos</p><p>digitais, tanto que a própria definição de gamificação tem como referência conceitual o</p><p>design. Nesta aula, você aprenderá importantes processos relacionados ao design, à</p><p>interação, à interface do usuário e à experiência nos jogos interativos.</p><p>Você conhecerá importantes técnicas e fundamentos teóricos da criação e concepção de</p><p>games enquanto estratégias de comunicação, produção de conteúdo e/ou</p><p>entretenimento. Para além das estratégias criativas, você aprenderá sobre estruturas</p><p>essenciais de objetos de conhecimentos e diversos outros recursos que podem fazer de</p><p>um jogo digital um recurso diferenciado no competitivo mercado midiático.</p><p>https://museum.xbox.com/en/map</p><p>https://www.researchgate.net/publication/319868333_A_Gamificacao_como_Estrategia_de_Engajamento_e_Motivacao_na_Educacao</p><p>https://www.researchgate.net/publication/319868333_A_Gamificacao_como_Estrategia_de_Engajamento_e_Motivacao_na_Educacao</p><p>https://www.maxwell.vrac.puc-rio.br/9582/9582_6.PDF</p><p>PLANEJAMENTO DO DESIGN DE JOGOS</p><p>Planejando o design de games</p><p>O planejamento é etapa fundamental de qualquer processo criativo, é através dele que se</p><p>dá a organização, estruturação e definição dos processos. No design de jogos, faz-se</p><p>necessário um bom planejamento criativo.</p><p>Na gamificação não se trata apenas de criar ou utilizar jogos, mas de inserir abstrações,</p><p>metáforas e conceitos do design dos games em áreas não relacionadas a videogames.</p><p>Em relação ao design de jogos, Gee (2006, p. 59) observa que o “game design é também</p><p>design de uma boa aprendizagem, uma vez que bons games são, no fundo, experiências</p><p>de aprendizagem e resolução de problemas".</p><p>Para Adams e Rollings (2006), o design de games deve ser centrado principalmente no</p><p>jogador, para isso eles sugerem que o game designer responda perguntas estratégicas</p><p>com o intuito de mapear o seu público principal, perguntas como: "qual é o perfil deste</p><p>jogador?", "do que ele gosta e do que não gosta?", "porque ele compraria e jogaria este</p><p>jogo?". Credidio (2007, p. 22) observa que, ao pensar no mercado,</p><p>Um game designer deve ser capaz de identificar, através de pesquisas, qual o</p><p>mercado que quer atingir e consequentemente o público para quem está</p><p>produzido, já que o mercado vem mudando, não são apenas homens usuários</p><p>hard core ou crianças que jogam, mulheres, adolescentes, adultos, mães, todos</p><p>estão tendo acesso aos jogos e são consumidores potenciais.</p><p>Outro importante conceito relacionado ao planejamento do design de jogos é o Game</p><p>Design Document (GDD), trata-se de um documento "que apresenta detalhadamente</p><p>todas as características de um jogo, como histórias, conceitos, personagens, cenários,</p><p>mecânicas e sons, por exemplo" (HIRA et al., 2016, p. 329). Existem diversos modelos</p><p>e propostas de GDD, Machado (2013) e Hira et al. (2016) observam que quase todos</p><p>eles apresentam alguns pontos em comum entre si. São estes:</p><p>• Visão geral do game (High Concept): apresenta a ideia inicial do jogo a todos os</p><p>envolvidos no projeto.</p><p>• Regras: explica todas as regras e condições para a vitória no game.</p><p>• Controles: os comandos e as possibilidades disponíveis para o jogador em relação</p><p>ao(s) personagem(ns).</p><p>• Fluxo: detalhamento do gameplay com descrição e o maior número possível de</p><p>informações sobre recursos e experiência do jogador.</p><p>• Estilo: descreve gênero do jogo e abordagem (puzzle, estratégia, ação etc.).</p><p>• Pontuação: explica como serão computadas as conquistas, bonificações e perdas.</p><p>• Personagens: descreve personagens envolvidos, quer jogáveis ou não.</p><p>• Referências: apresenta referências conceituais de livros, filmes ou outros gêneros que</p><p>auxiliem na compreensão da proposta.</p><p>• Telas: detalha as telas de jogo do início ao fim, incluindo seleção de personagens e</p><p>cenário.</p><p>• Linha de arte: estabelece o visual do jogo e sua estética.</p><p>• Itens: objetos que podem ser utilizados de forma vantajosa ou não pelo jogador.</p><p>• Design de níveis: descreve o conteúdo de cada nível jogado.</p><p>• Tema: apresenta o assunto principal do jogo.</p><p>• Análise de competidores: comparação com jogos similares em desenvolvimento.</p><p>• Efeitos e trilha sonora: apresenta os efeitos, as músicas e os recursos sonoros que</p><p>serão utilizados.</p><p>O planejamento meticuloso do design de um jogo é uma etapa trabalhosa, mas que</p><p>resulta na agilidade e maior eficiência de todas as demais. O game designer é um dos</p><p>profissionais mais importantes no desenvolvimento de jogos e sua atuação planejada e</p><p>qualificada afeta direta e positivamente a experiência do jogador.</p><p>ESTRUTURAS ESSENCIAIS DE OBJETOS DE CONHECIMENTO</p><p>Objetos de conhecimento</p><p>Os jogos de entretenimento sempre fizeram sucesso, entretanto, o que se nota nas</p><p>últimas décadas é uma tendência de crescimento dos jogos com finalidades pedagógicas</p><p>e de divulgação de conteúdos. Ao se pensar os jogos educativos ou ligados ao</p><p>conhecimento, é necessário desenvolver estruturas similares à estrutura do objeto de</p><p>conhecimento, isto é, proximidade com o conteúdo que será trabalhado. Jogos de</p><p>aprendizagem podem ser utilizados para ensinar procedimentos cirúrgicos, técnicas de</p><p>voo, música e conhecimentos elementares de história, geografia, matemática, português,</p><p>ciências e inglês, entre outros.</p><p>Segundo Costa (2009, p. 3), "a presença da estrutura do objeto de conhecimento (aquilo</p><p>que se quer que seja aprendido) é fundamental para a aprendizagem deste". Por isso, é</p><p>importante que os objetos de conhecimento apresentem algumas estruturas essenciais</p><p>(OLIVEIRA, 2018), dentre as quais cabe destacar:</p><p>Similaridade</p><p>A aprendizagem em jogos se dá pela similaridade estrutural. No caso de um jogo de</p><p>treinamento cirúrgico, por exemplo, a estrutura pessoa-controle-tela é bastante similar à</p><p>estrutura de funcionamento real de uma videolaparoscopia. Segundo Costa (2009, p. 6),</p><p>"quando acontece de um jogador de videogames se tornar um cirurgião de</p><p>videolaparoscopia, este leva grande vantagem sobre outros</p><p>cirurgiões que nunca</p><p>jogaram um videogame".</p><p>Perceptibilidade</p><p>Costa (2009, p. 18) ressalta que "deve-se cuidar para que a estrutura base do projeto (a</p><p>estrutura do objeto de conhecimento) permaneça ao menos perceptível, similar à</p><p>original". Isso significa que o jogador deve perceber e compreender os mecanismos ali</p><p>abordados enquanto joga, e não observá-los como aleatoriedades ou associações às</p><p>cegas.</p><p>Indispensabilidade em relação ao objetivo</p><p>Para a promoção da aprendizagem e assimilação de conhecimentos, as estruturas do</p><p>objeto de conhecimento devem ser indispensáveis para o objetivo. Elas não devem</p><p>aparecer como recurso complementar ou decorativo, “pois, quando um jogo é projetado</p><p>com base em uma estrutura, é certo que esta estará no jogo, e quase certo que estará</p><p>perceptível e com a aprendizagem sobre ela sendo necessária ao jogador para que atinja</p><p>seu objetivo no jogo" (COSTA, 2009, p. 18).</p><p>Diversão e entretenimento</p><p>Às vezes, os jogos pedagógicos preocupam-se tanto com o conhecimento que se</p><p>esquecem do entretenimento ou da diversão. É necessário que o designer tenha</p><p>sensibilidade e bom gosto para unir esses conceitos, mas esta não é uma tarefa</p><p>impossível. "Em um jogo com fim pedagógico, tudo deve estar a favor da diversão e do</p><p>entretenimento" (COSTA, 2009, p. 18).</p><p>O principal erro no design de jogos de aprendizagem é que muitas vezes eles são feitos</p><p>apenas por educadores ou profissionais ligados ao objeto de conhecimento e sem o</p><p>auxílio qualificado de um game designer para acrescentar a esses elementos as</p><p>estruturas essenciais. A diversão e o entretenimento são estruturas do objeto de</p><p>conhecimento em um jogo, e sua ausência pode resultar em uma construção ruim dos</p><p>elementos de perceptibilidade, similaridade e indispensabilidade associados aos objetos</p><p>de conhecimento. Cabe ao game designer promover essa conexão a partir dos vários</p><p>campos técnicos que domina.</p><p>A EXPERIÊNCIA DO USUÁRIO EM JOGOS - GAMER</p><p>EXPERIENCE DESIGN</p><p>A experiência do jogador</p><p>Em todas as mídias digitais de interação, a experiência do usuário é uma parte</p><p>fundamental, assim como a interface. No design de games esse elemento adquire uma</p><p>dimensão ainda maior, em um conceito definido como gamer experience.</p><p>A experiência do usuário (UX) é algo dinâmico e modificável a partir de aspectos</p><p>circunstanciais, evoluções, desafios e recompensas. Nos jogos digitais, a experiência do</p><p>usuário jogador (também chamada gamer experience) acontece a partir da interface</p><p>gráfica e da interação, estando esses dois elementos profundamente conectados</p><p>(AZEVEDO et al., 2017, p. 4). Segundo Alexandre e Pasqueline Scaico (2018, p. 2),</p><p>"muitos jogos, especialmente os comerciais, têm agregado diversos elementos capazes</p><p>de transportar as pessoas para zonas de fluxos de experiência, entregando sentimentos</p><p>de satisfação e prazer”.</p><p>Os jogos digitais comumente apresentam propostas com dois tipos de interface gráfica:</p><p>controles (com uso de botões, menus outros recursos semelhantes) e Heads-Up</p><p>Display (HUD), que são elementos gráficos disponíveis na tela com informações de</p><p>jogabilidade para o usuário (cronômetro, vida, energia, inventário, poderes, etc.). É</p><p>sabido que a interface gráfica tem o importante papel de "traduzir informações para a</p><p>interação entre usuário e computador" (JOHNSON, 2001, p. 17), e nos jogos digitais ela</p><p>proporciona uma melhor experiência para o jogador quando executada de forma bem</p><p>planejada e inteligente. Nesse sentido, os conceitos de design e jogabilidade são</p><p>fundamentais, segundo Tonéis (2012, p. 158), isso significa "apresentar-se prazerosa</p><p>para o jogador; ser amigável, de fácil utilização (intuitiva); esteticamente agradáveis e</p><p>também divertidas".</p><p>A jogabilidade é um importante aspecto da experiência do jogador e, segundo Sanchèz,</p><p>Padilla-Zea e Gutiérrez (2009), é composta por sete propriedades, que são:</p><p>• Satisfação: possibilita a verificação dos níveis de contentamento do jogador na</p><p>interação com o jogo e sua perspectiva sobre a qualidade do jogo. Diversão e</p><p>desapontamento estão ligados à esta propriedade.</p><p>• Aprendizado: esta propriedade averigua o desenvolvimento do jogador e suas</p><p>capacidades de compreensão das regras e características apresentadas. São observados</p><p>nesta propriedade a dificuldade, a velocidade, o conhecimento prévio, a habilidade, a</p><p>frustração e outras características.</p><p>• Efetividade: determina a relação de tempo e recursos necessários para que seja</p><p>promovida uma experiência positiva para o jogador. Permite a averiguação do design</p><p>em suas capacidades de atração e interesse. Avalia a estruturação da proposta, os</p><p>objetivos e as possibilidades de exploração do jogo pelo jogador.</p><p>• Imersão: esta característica diz respeito à credibilidade do jogo, à destreza do jogador</p><p>na interação, ao vínculo sociocultural com o conteúdo e às diversas outras</p><p>características ligadas à absorção e ao foco da atenção do jogador.</p><p>• Motivação: averigua as capacidades de engajamento do jogo. Nesta propriedade são</p><p>observadas características de encorajamento, curiosidade, autoaperfeiçoamento e</p><p>diversidade, entre outras.</p><p>• Emoção: nesta propriedade são observadas as reações do jogador aos estímulos</p><p>oferecidos pelo jogo. Tem como ênfase o apelo sensorial do jogo, observando o</p><p>interesse, desejo e envolvimento do jogador.</p><p>• Socialização: esta propriedade busca averiguar o impacto das relações e interações</p><p>sociais em um grupo, observando a conexão do jogador com outros indivíduos e</p><p>também com o seu personagem ou avatar no jogo.</p><p>Cabe ao game designer o planejamento e a construção de uma proposta que inclua todas</p><p>essas propriedades, proporcionando ao usuário/jogador uma experiência positiva e</p><p>equilibrada com um jogo e a possibilidade de satisfação através do alcance dos</p><p>objetivos propostos.</p><p>VIDEOAULA</p><p>Neste vídeo você acompanha, através de uma exposição reflexiva, importantes</p><p>conceitos teóricos e técnicas do desenvolvimento de jogos digitais. Ele apresenta as</p><p>etapas e os elementos do planejamento do design de games e também mostra mais sobre</p><p>as estruturas essenciais dos objetos de conhecimento nessas mídias. Além dessas</p><p>informações, discute a importância da experiência do usuário e sua interface no</p><p>contexto do game user experience.</p><p>Videoaula</p><p>Saiba mais</p><p>Desenvolvimento de jogos</p><p>Se você tem vontade de se aprofundar nos conhecimentos sobre desenvolvimento e</p><p>design de jogos, o livro de Eduardo Azevedo e Michele Stelko traz importantes</p><p>informações sobre planejamento, modelagem e controle de objetos para jogos. São 400</p><p>páginas de muitos ensinamentos importantes. Disponível na biblioteca virtual no link:</p><p>AZEVEDO, E.; STELKO, M. Desenvolvimento de jogos 3D e aplicações em</p><p>realidade virtual. Rio de Janeiro: Elsevier Brasil, 2005.</p><p>Entretenimento ou conhecimento?</p><p>Já parou para pensar na diferença entre os jogos de entretenimento e todos os demais?</p><p>Leandro Costa propõe essa discussão de forma inteligente e desafiadora em um artigo</p><p>científico publicado no VIII Simpósio de Games e Entretenimento Digital do Brasil.</p><p>Uma leitura útil e rápida, disponível gratuitamente em 20 páginas no link:</p><p>COSTA, L. O que os jogos de entretenimento têm que os jogos educativos não</p><p>têm. In: VIII BRAZILIAN SYMPOSIUM ON GAMES AND DIGITAL</p><p>ENTERTAINMENT. Rio de Janeiro, RJ – Brazil, October, 8th-10th, 2009</p><p>Experiência do jogador no desenvolvimento de jogos</p><p>É importante refletir sobre os diversos aspectos da experiência do jogador ao pensar no</p><p>design de jogos. Em seu trabalho de dissertação de mestrado sobre o tema, André</p><p>Febeliano da Costa apresenta um profundo estudo sobre gamer experience no</p><p>desenvolvimento de jogos.</p><p>COSTA, A. F. Avaliação de experiência de jogador aplicada ao desenvolvimento de</p><p>jogos. 2016. Dissertação (Mestre em Ciências) – Universidade de São Paulo. São Paulo,</p><p>2016.</p><p>Aula 3</p><p>PRINCÍPIOS E ELEMENTOS DO DESIGN DE JOGOS</p><p>Você compreenderá</p><p>humanas nos objetos e</p><p>paisagens. Para saber mais sobre o assunto você pode ler esta interessante</p><p>reportagem Pareidolia: por que muitos veem ‘monstro’ em imagem de furacão feita</p><p>por satélite, produzida pela BBC News Brasil.</p><p>Combinando as cores</p><p>Uma ótima ferramenta para a criação de paleta de cores e testes de harmonização digital</p><p>é o Adobe Color. Com dez diferentes possibilidades de combinações, a descrição</p><p>técnica das cores e suas codificações, a plataforma é online, intuitiva e gratuita.</p><p>Aula 2</p><p>MÍDIAS DIGITAIS, DESIGN E COMUNICAÇÃO INTERATIVA</p><p>A beleza é algo agradável e que chama a atenção. Quanto mais</p><p>bonito um trabalho, mais atraente ele será. Mas existe uma grande</p><p>questão a este respeito: a beleza é uma qualidade absoluta ou um</p><p>conceito subjetivo?</p><p>27 minutos</p><p>INTRODUÇÃO</p><p>O fenômeno da comunicação interativa por meio de mídias digitais é recente, mas para</p><p>compreendê-lo é necessário ter consciência do contexto do qual ele emerge, suas</p><p>perspectivas históricas, culturais e sociais. O design e a estética refletem diversos</p><p>aspectos de uma sociedade, por isso é importante também ter atenção às transformações</p><p>e tendências que direcionam os consumidores de conteúdo. Existe uma grande distância</p><p>de tempo entre as pinturas rupestres nas cavernas pré-históricas e os memes que</p><p>“viralizam” nas redes sociais na atualidade, mas estes dois produtos gráficos estão</p><p>conectados entre si pelas noções estéticas e perspectivas do belo. Para o domínio do</p><p>design e melhoria dos elementos interativos nas mídias digitais é importante</p><p>compreender os aspectos subjetivos que regem o apreço e consumo coletivo de</p><p>materiais visuais.</p><p>https://www.youtube.com/watch?v=5L4DQfVIcdg</p><p>https://www.bbc.com/portuguese/brasil-37584260</p><p>https://www.bbc.com/portuguese/brasil-37584260</p><p>https://color.adobe.com/pt/create/color-wheel</p><p>CONTEXTUALIZAÇÃO HISTÓRICA DO BELO NA ARTE E NO</p><p>DESIGN</p><p>O conceito de beleza na história da humanidade</p><p>A beleza é algo agradável e que chama a atenção. Quanto mais bonito um trabalho, mais</p><p>atraente ele será. Mas existe uma grande questão a este respeito: a beleza é uma</p><p>qualidade absoluta ou um conceito subjetivo? O que determina se algo é bonito são suas</p><p>características ou a opinião dos apreciadores?</p><p>O princípio da beleza rege a maioria das expressões artísticas e visuais que existem.</p><p>Nesse sentido observa-se que “a beleza é, fundamentalmente, um artefato distinto,</p><p>sedutor e mágico e, portanto, exige um rigor mais apurado referente aos padrões</p><p>estéticos” (LABORDE, 2004, p. 9).</p><p>Na história da arte é possível perceber as variações do conceito de beleza em cada</p><p>época, cultura e sociedade. Enquanto na pré-história a beleza feminina era representada</p><p>por peças como a Vênus de Willendorf, que retratam uma mulher baixa com corpo</p><p>farto, barriga e seios volumosos, os gregos clássicos representavam a beleza feminina a</p><p>partir de um corpo magro e de músculos bem definidos.</p><p>Figura 1 | Comparação entre a beleza de duas Vênus</p><p>Fonte: adaptada de Canva Pro pela autora.</p><p>Entre os povos africanos do Egito, a beleza era representada por meio de pinturas com</p><p>corpos perfilados em traços delicados e coloridos, na arquitetura era expressa nas</p><p>pirâmides e estruturas gigantescas. Entre os povos astecas na América Latina, o belo era</p><p>representado também em pinturas perfiladas, mas sem muitas cores e com traços mais</p><p>pronunciados, ao passo que na arquitetura, a expressão máximas eram os zigurates.</p><p>Figura 2 | Representações de beleza na arte egípcia e na arte asteca</p><p>Fonte: adaptada de Canva Pro pela autora.</p><p>Ao longo da história, o conceito de beleza foi bastante discutido por pensadores e</p><p>filósofos, sendo importante destacar algumas destas mais conhecidas perspectivas.</p><p>Em meados dos anos 400 antes de Cristo, o filósofo grego Platão definiu o belo como</p><p>um conceito associado à perfeição, algo que só poderia ser contemplado em uma</p><p>perspectiva de total exclusão de sentidos ou interpretação. No diálogo "O banquete", ele</p><p>atribuiu aspectos científicos à beleza em uma ideia pura e universal de algo divino e não</p><p>apenas físico.</p><p>Já para Immanuel Kant, filósofo prussiano do século XVIII, e o primeiro a referir-se à</p><p>estética como a ciência do belo, a “beleza é a forma da conformidade a fins de um</p><p>objeto, na medida em que ela é percebida nele sem representação de um fim” (KANT,</p><p>1995, p. 82). Para este pensador, os critérios de apreciação da beleza estavam</p><p>profundamente ligados aos sentimentos de prazer e não a uma dimensão objetiva.</p><p>No século XIX o filósofo alemão George W. Hegel, a beleza não era um conceito</p><p>absoluto e rígido, mas o resultado do trabalho em sociedade. Ao contrário de Kant, ele</p><p>acreditava que o belo ia além do agradável, era um ideal a ser atingido, fruto da</p><p>potencialidade e evolução humana. Hegel via o belo como o resultado da junção</p><p>harmônica entre forma e conteúdo.</p><p>Embora não exista uma definição absoluta, consensual e rígida sobre o que é belo, para</p><p>a criação eficiente de designs para mídias digitais, é necessário compreender que estas</p><p>noções perpassam por diversos valores de cada sociedade. Em tempos de personalização</p><p>da informação é fundamental compreender os valores estéticos que orientam as</p><p>demandas dos usuários e motivam suas interações.</p><p>ESTÉTICA, CULTURA E AS MÍDIAS DIGITAIS</p><p>Interestética</p><p>Desde o surgimento da fotografia em 1826, iniciou-se uma nova discussão conceitual a</p><p>respeito da estética e da arte, isto fica claramente demarcado na obra de Walter</p><p>Benjamin (1993) com o tema: “A obra de arte na era da reprodutibilidade técnica”.</p><p>Desde então, muitas são as perguntas sobre o tema: com a possibilidade da reprodução</p><p>em larga escala de imagens, as obras de arte passariam a ser um mero produto? Existe</p><p>arte comercial? O artístico é apenas o raro ou o comum também pode ser considerado</p><p>arte? Mesmo após muitas décadas, ainda não existe consenso entre pesquisadores e</p><p>teóricos a este respeito, mas fato é que as novas mídias afetaram consideravelmente as</p><p>percepções, a cultura e as concepções estéticas da sociedade.</p><p>Existem diversos conceitos que tentam definir o que é estética, mas, para fins didáticos,</p><p>pode-se dizer que é o gênero de conhecimento autônomo e o estudo daquilo que é</p><p>considerado belo nas manifestações artísticas e naturais (CAMARGO, 2009). A estética</p><p>de uma sociedade reflete os elementos que a compõem como a cultura, a economia, as</p><p>tradições e os valores. Por meio de símbolos, normas e referências, os padrões estéticos</p><p>que definem belo, feio, aceitável, agradável, repugnante ou desprezível são construídos.</p><p>É importante ter consciência destas questões porque elas influenciam diretamente no</p><p>que será aceito como um design bonito e, portanto, bom ou ruim.</p><p>Com o advento das mídias digitais, surge uma nova estética, pensada exclusivamente</p><p>para as plataformas emergentes dos meios tecnológicos. Sem as preocupações com</p><p>custos de impressão, diferenças de pigmentações, grandes volumes de tiragem e</p><p>distribuição passa a existir mais liberdade para a criatividade no espaço da comunicação</p><p>visual digital. Embora surjam novos cursos na formação e qualificação dos</p><p>profissionais, o custo para a criação de distribuição de um grande volume de produtos</p><p>visuais é severamente reduzido nas plataformas digitais.</p><p>As mídias digitais trouxeram também novas possibilidades de consumo da arte e da</p><p>estética. Para Priscila Arantes (2004, p. 4) “pensar a arte em mídia digital a partir da</p><p>noção de sistema significa dizer que ela, em primeiro lugar, não é uma arte fechada, mas</p><p>processual, desenvolvendo-se a partir dos dispositivos interativos”. É neste contexto e</p><p>sentido que Philippe Quéau (1985) cunha o conceito de estética intermediária, para se</p><p>referir a uma "arte viva", interativa, desenvolvida a partir das tecnologias digitais. Esta</p><p>capacidade de reprodução e organização da arte interativa, que imita um organismo</p><p>vivo, deve ser compreendida</p><p>que existem aspectos subjetivos e sociais que</p><p>têm grande peso nos processos criativos e que devem ser</p><p>considerados no desenvolvimento do design de games.</p><p>30 minutos</p><p>INTRODUÇÃO</p><p>O planejamento e a execução técnica são primordiais no desenvolvimento de jogos</p><p>digitais, mas é importante também ter cuidado com alguns princípios e elementos no</p><p>design de games. Nesta aula, você aprenderá a definição e relevância dos conceitos de</p><p>agência e feedback. Através da reflexão teórica e de exemplos, você conhecerá também</p><p>os conceitos de fluxo e imersão no universo dos jogos.</p><p>Por fim, você será convidado a refletir sobre aspectos éticos, morais e culturais que</p><p>https://biblioteca-virtual.com/detalhes/ebook/608704b754aa8872fc616d70</p><p>https://biblioteca-virtual.com/detalhes/ebook/608704b754aa8872fc616d70</p><p>http://sbgames.org/papers/sbgames09/artanddesign/tutorialArtes3.pdf</p><p>http://sbgames.org/papers/sbgames09/artanddesign/tutorialArtes3.pdf</p><p>https://www.teses.usp.br/teses/disponiveis/3/3141/tde-29082016-134726/publico/AndreFebelianodaCostaCorr16.pdf</p><p>https://www.teses.usp.br/teses/disponiveis/3/3141/tde-29082016-134726/publico/AndreFebelianodaCostaCorr16.pdf</p><p>podem afetar, direta ou indiretamente o design de games. Ao final desta aula você</p><p>compreenderá que existem aspectos subjetivos e sociais que têm grande peso nos</p><p>processos criativos e que devem ser considerados no desenvolvimento do design de</p><p>games.</p><p>AGÊNCIA E FEEDBACK</p><p>Agir e saber</p><p>No design de jogos digitais, existem dois princípios essenciais para a experiência do</p><p>jogador, são eles: agência e feedback. Através desses conceitos se dá a imersão e o</p><p>engajamento dos usuários com o game.</p><p>Agência</p><p>Segundo Janet Murray (2013, p. 125), agência é, dentre outras definições, "a sensação</p><p>de poder exercer influência sobre um meio específico". A autora afirma ainda que</p><p>“agência é o poder satisfatório de realizar ações significativas e observar o resultado de</p><p>nossas decisões e escolhas”. A agência acontece quando é estabelecida uma boa relação</p><p>entre a dinâmica de comportamento do usuário e o sistema. Considerando que os jogos</p><p>são também mídias narrativas, a interação é parte fundamental do processo e permite o</p><p>caráter imersivo, fazendo com que o jogador se sinta parte da experiência ali proposta</p><p>(DIAS, 2020, p. 8). É muito importante adequar o sistema de jogo à bagagem cognitiva</p><p>do jogador, isso significa que a proposta deve ser compreensível e se adequar aos</p><p>conhecimentos do usuário. A simplificação mecânica é uma das estratégias que favorece</p><p>o aumento da agência.</p><p>Murray (2013), ao descrever o conceito, destaca ainda duas características das mídias</p><p>digitais que podem contribuir e influenciar a agência do jogador. São elas:</p><p>• Design procedural: um design que apresente normas lógicas a partir das quais o</p><p>usuário possa interagir, sem necessitar de uma previsão precisa das ações do jogador.</p><p>Trata-se de um "design baseado em contingências" (DIAS, 2020, p. 32).</p><p>• Design participativo: contexto relativo à demanda de interação entre usuário e</p><p>sistema. Nesse aspecto, às vezes é necessário que se estabeleça algum nível de</p><p>aprendizado para que o jogador domine os recursos oferecidos, mas isso deve ocorrer de</p><p>forma simples e fácil, quer de forma externa ou a partir do próprio software.</p><p>A sensação de agência melhora a experiência do jogador e sua imersão e, por essa</p><p>razão, deve ser observada como uma prioridade no planejamento e na criação do design</p><p>de um jogo.</p><p>Feedback</p><p>O termo feedback foi utilizado pelas primeiras vezes no sentido de "uma informação</p><p>usada por um determinado sistema para seu ajuste" (COSTA et al., 2016, p. 2) na área</p><p>da engenharia e como um substantivo composto (feed e back), desde então, com o uso</p><p>da definição por outras áreas do conhecimento, seu sentido foi se expandindo até o</p><p>sentido de "reação do receptor" na comunicação e "devolutiva" na psicologia</p><p>(CORDEIRO et al., [200?], p. 8). Para Wiliam (2016), "um bom feedback considera o</p><p>que se sabe sobre o conteúdo que está em discussão e, a partir desse ponto, essa prática</p><p>deve, por exemplo, provocar a resolução de um problema a partir do conhecimento atual</p><p>e avançar no aprendizado".</p><p>No universo dos games, o conceito de feedback está ligado à interface e usabilidade do</p><p>sistema, também é um princípio importante para a jogabilidade e experiência do</p><p>jogador. Feedback nos jogos digitais é</p><p>Qualquer aviso ou elemento, visual ou sonoro, que ajude a validar as ações do</p><p>jogador (confirma que tal ação foi recebida e processada), além de informar o</p><p>status do mundo do jogo. Isso serve não só para jogos, como também para</p><p>qualquer tipo de interface de equipamentos.</p><p>(GEHLING, 2012, [s. p.])</p><p>Um bom design de jogo apresenta agência e feedback adequados. Cabe ao game</p><p>designer promover a inserção desses princípios de forma robusta e estruturada, para</p><p>promover a melhor experiência possível ao jogador.</p><p>FLUXO E IMERSÃO</p><p>A teoria do flow (fluxo)</p><p>Um bom jogo digital é composto por inúmeros elementos, como imagens, narrativas</p><p>agradáveis, ambientes dinâmicos, interfaces interessantes e diversos outros. Para um</p><p>design equilibrado e uma boa experiência para o jogador, é necessário que exista um</p><p>balanceamento entre as habilidades do usuário, os desafios e o processos de</p><p>aprendizado. Isso significa que o fluxo das informações, conhecimentos, saberes e</p><p>habilidades deve acontecer de forma imersiva, na busca para atingir metas reais em um</p><p>jogo.</p><p>Em 1990, Csikszentmihalyi estudou a teoria do fluxo e chegou à conclusão de que</p><p>existe um estado de foco, imersão e concentração que leva o indivíduo a um contexto</p><p>em que "nada mais parece importar", esse seria o flow (fluxo). Segundo a teoria do</p><p>fluxo, quando as metas são estabelecidas de forma compreensível e há compatibilidade</p><p>entre desafios, feedback e habilidades do jogador, a atenção passa a receber total</p><p>investimento de forma ordenada. Isso significa que uma pessoa no fluxo tem total</p><p>concentração na atividade, na situação ou no jogo em questão (CSIKSZENTMIHALYI,</p><p>1990, p. 38).</p><p>Csikzentmihalyi chegou à conclusão de que as experiências de um indivíduo são</p><p>resultado das representações das informações em sua mente, e uma experiência ideal</p><p>resultaria da organização, da estruturação e do fluxo desses conhecimentos, o que ocorre</p><p>em situações de foco, como a imersão em um jogo, em que se busca atingir uma meta</p><p>conforme habilidades, oportunidades e ação (CAMPOS, 2021, p. 5). Csikzentmihalyi</p><p>desenvolveu uma metodologia de avaliação da qualidade da experiência e através dela</p><p>estabeleceu elementos do estado de fluxo que segundo ele são:</p><p>• Metas e submetas definidas - na imersão ao fluxo o jogador compreende o que</p><p>precisa fazer para atingir os objetivos. As metas e submetas são compreensíveis e bem</p><p>definidas.</p><p>• Feedback - o jogador sabe o seu desempenho no contexto da busca por determinados</p><p>objetivos.</p><p>• Tempo - o estado de fluxo é uma imersão tão profunda que interrompe a percepção de</p><p>tempo, permitindo que longos períodos pareçam poucos instantes. Isso ocorre em um</p><p>bom jogo imersivo, mas também em outros processos criativos como pintura,</p><p>composição, escrita, etc.</p><p>• Concentração - ocorre a imersão e a percepção entre ações e pensamentos não são</p><p>observadas no processo.</p><p>• Controle - o jogador compreende os objetivos a serem alcançados e controla a</p><p>situação, assim como os passos e as ambições nesse contexto.</p><p>• Capacidade e oportunidade - o jogador imerso no fluxo confia em si, mas de forma</p><p>equilibrada também está atento às oportunidades e novas ações em desdobramento.</p><p>• Exclusão do ego - a imersão faz com que o ego tenha importância diminuída diante</p><p>dos objetivos ou das tarefas a serem alcançadas.</p><p>A teoria do fluxo é uma premissa que se aplica a diversas áreas da ciência. Sua maior</p><p>contribuição para o design de jogos digitais está na confirmação de que metas, regras,</p><p>agência e feedback quando bem organizados</p><p>podem otimizar a experiência, atenção e</p><p>satisfação do usuário jogador.</p><p>CUIDADOS ÉTICOS, MORAIS E CULTURAIS</p><p>Ética, moral e cultura</p><p>Os aspectos subjetivos, éticos, morais e culturais são tão importantes quanto os técnicos</p><p>no desenvolvimento de jogos digitais. Um jogo pode ser executado à perfeição e errar</p><p>gravemente por não ter sensibilidade a questões importantes e de possível interpretação</p><p>ofensiva para os usuários/jogadores.</p><p>O termo "ética" deriva do grego ethos (caráter – modo de ser da pessoa) e observa de</p><p>forma racional, dentre outras coisas, o balanço entres interesses individuais e coletivos</p><p>na sociedade (MAINGUENEAU, 2008; CARVALHO et al., 2021). Já a moralidade é</p><p>uma percepção de conotação mais subjetiva e apelo emocional. Dessa forma, pode-se</p><p>dizer que os processos decisivos e reflexivos fundamentados na razão são decisões</p><p>éticas e isso não está atrelado ao conceito de moralidade ou imoralidade</p><p>(CARVALHO et al., 2021, p. 1).</p><p>Existem muitas controvérsias e diversos questionamentos da natureza ética em relação</p><p>aos jogos digitais, especialmente em relação àqueles de maior caráter imersivo e com</p><p>conteúdo de violência, ofensa, vício ou conotação sexual. A esse respeito, Joselli (2014,</p><p>p. 448) observa que "existem diversas pessoas e estudos que são veemente contra os</p><p>jogos digitais, principalmente por eles serem muito violentos, explorarem a sexualidade</p><p>e trazerem deturpações de valores considerados ‘bons’ pela sociedade”. A autora</p><p>ressalta ainda que esta não é uma definição de aceitação unânime, pois outros defendem</p><p>que “a violência nos games poderia ser útil para promoverem uma forma de catarse,</p><p>onde as pessoas cometem atos violentos nos games e deixariam de fazer na vida real".</p><p>A raiz das principais questões de embate reflexivo a respeito da ética nos jogos está no</p><p>questionamento sobre o domínio dos códigos de vida e conduta nos espaços lúdicos,</p><p>imaginários e virtuais constituídos pelos jogos. Por exemplo, é óbvio que uma morte em</p><p>um jogo não tem efeitos nem consequências comparadas ao mesmo evento no mundo</p><p>real, mas em uma perspectiva ética surge a interrogação sobre os impactos morais e</p><p>psicológicos desse evento em cenários cada vez mais semelhantes à realidade.</p><p>Joselli (2014, p. 449) observa que os jogos</p><p>Aprimoram, de forma lúdica, as aptidões inerentes a cada ser, sendo possível</p><p>melhorar a integração do indivíduo à rede do convívio social e estabelecer</p><p>relações emocionais e inter-relações. Isso faz com que surjam novas forma de</p><p>interação e o surgimento de novas questões filosóficas em relação a ética.</p><p>Dessa forma, a virtualidade não pode servir como justificativa ou liberalismo para</p><p>propagação de ideias ilegais e com potencial prejudicial para a sociedade. Para Gilson</p><p>Cruz Junior (2017, p. 9),</p><p>Mais do que manifestações da cultura passíveis de expressão por meio da</p><p>linguagem, os games representam uma linguagem autônoma que traz consigo</p><p>implicações para o modo como os indivíduos assimilam, interpretam e</p><p>engendram significados dentro e ao redor de seus contextos lúdicos de</p><p>interação.</p><p>O bom designer deve estar atento aos aspectos éticos, morais e culturais, não sob uma</p><p>perspectiva de censura, mas para a consciência e reflexão sobre a importância desses</p><p>elementos e seus impactos desde a jogabilidade à recepção pública de um jogo digital.</p><p>VIDEOAULA</p><p>Este vídeo apresenta em linguagem simples e dinâmica, importantes elementos e</p><p>princípios do design de games. Você será desafiado a refletir sobre os conceitos de</p><p>agência e feedback, bem como sobre a relevância deles no desenvolvimento da interface</p><p>gráfica e na experiência do usuário em um jogo.</p><p>No contexto téorico-científico, você será convidado a conhecer e se aprofundar na teoria</p><p>do fluxo, que discute, dentre outras coisas, os aspectos imersivos da experiência do</p><p>jogador. Para uma contextualização sociocultural, serão observados, ainda, importantes</p><p>quesitos éticos e morais que podem interferir na jogabilidade e receptividade de um</p><p>jogo.</p><p>Videoaula</p><p>Saiba mais</p><p>Zelda</p><p>A lenda de Zelda (The legend of Zelda) é uma das mais populares experiências de jogos</p><p>imersivos da Nintendo. Neste documentário legendado em português, você poderá</p><p>acompanhar importantes detalhes dos bastidores, desde o planejamento, processos</p><p>criativos e desenhos até os grandiosos investimentos na adaptação e desenvolvimento</p><p>técnico. Disponível no canal da Nintendo com legenda em português no link:</p><p>NOS BASTIDORES de The Legend of Zelda: Breath of the Wild - O início (Parte 1).</p><p>Portugal: Nintendo, 2017. 1 vídeo (10min). Publicado pelo canal Nintendo Portugal.</p><p>Teoria do fluxo e jogos educativos</p><p>No artigo científico da Dra. Ana Maria Antunes de Campos, é possível acompanhar</p><p>importantes reflexões e constatações no campo teórico sobre o fluxo e sua</p><p>aplicabilidade em jogos. O trabalho de 15 páginas é uma leitura rápida e agradável,</p><p>disponível no link dos Anais do III Encontro de Ludicidade e Educação:</p><p>CAMPOS, A. M. A. Teoria do Flow: construção de jogos para a aprendizagem da</p><p>matemática. In: III ENCONTRO DE LUDICIDADE E EDUCAÇÃO. Anais. v. 3, n. 1,</p><p>2021.</p><p>Classificação indicativa</p><p>Você sabe como é feita a classificação indicativa de um game no Brasil? Em 2018 a</p><p>revista Superinteressante publicou uma detalhada reportagem sobre o assunto. Nesse</p><p>trabalho é possível ver alguns aspectos éticos e outros culturais que têm impacto na</p><p>tomada de decisão sobre o tema.</p><p>FALCÃO, P. Como é feita a classificação indicativa de um</p><p>game? Superinteressante, 2017.</p><p>Aula 4</p><p>FERRAMENTAS E PLATAFORMAS PARA O DESIGN E CRIAÇÃO DE</p><p>JOGOS</p><p>Você será apresentado a conceitos e aspectos práticos do</p><p>desenvolvimento do design de jogos digitais.</p><p>34 minutos</p><p>INTRODUÇÃO</p><p>Nesta aula, você será apresentado a conceitos e aspectos práticos do desenvolvimento</p><p>do design de jogos digitais. Através de uma exposição sucinta, serão apresentadas</p><p>algumas importantes ferramentas para a criação e prototipação do design de jogos. Você</p><p>conhecerá alguns softwares e plataformas on-line para a criação de jogos e seus designs,</p><p>também poderá aprender mais sobre essas aplicações no contexto das redes sociais.</p><p>Além dos fundamentos práticos da criação do design de jogos, você conhecerá os</p><p>diferentes formatos e possibilidades criativas para os processos de desenvolvimento.</p><p>https://www.youtube.com/watch?v=gXVSGRPhfiQ</p><p>https://www.revistas.uneb.br/index.php/elem/article/view/11950</p><p>https://www.revistas.uneb.br/index.php/elem/article/view/11950</p><p>https://super.abril.com.br/mundo-estranho/como-e-feita-a-classificacao-indicativa-de-um-game/</p><p>https://super.abril.com.br/mundo-estranho/como-e-feita-a-classificacao-indicativa-de-um-game/</p><p>Preste atenção aos detalhes, pois o conhecimento dessas ferramentas pode ser um</p><p>importante diferencial na prática profissional e no mercado de trabalho.</p><p>SOFTWARES PARA DESIGN E CRIAÇÃO DE JOGOS</p><p>Softwares para design de jogos</p><p>Os primeiros jogos eletrônicos desenvolvidos exigiam uma imensa quantidade de</p><p>recursos criativos e de programação, mas em troca ofereciam limitadas possibilidades</p><p>de exploração para o jogador. Atualmente, o desenvolvimento de jogos ainda pode</p><p>demandar amplos recursos humanos e tecnológicos, mas em troca oferece um universo</p><p>de possibilidades gráficas, narrativas e de jogabilidade.</p><p>Para Guerreiro (2015, p. 62), "a tecnologia, que pode ser simples (os materiais usados</p><p>na construção de um jogo físico) ou sofisticada (como o uso de softwares e hardware)</p><p>no caso dos jogos digitais, define o que pode ser permitido ou não no jogo". O design de</p><p>jogos é uma atividade complexa, mas que felizmente encontra suporte em diversos</p><p>softwares do mercado, na atualidade.</p><p>Existem diversos conceitos possíveis no design, que variam de acordo com o propósito</p><p>do jogo e seu público-alvo. Existem Role-Playing Games (RPGs) com diversos</p><p>universos, gráficos complexos e de alta resolução ou baixa resolução, e</p><p>também jogos</p><p>com gráficos de baixa resolução, como Minecraft, tudo depende das escolhas do</p><p>designer. As possibilidades criativas são quase infinitas para o design, que pode ser</p><p>criado em 2D ou 3D, com telas minimalistas ou múltiplas telas e múltiplas plataformas.</p><p>O design de jogos inclui diversos aspectos, não se limitando apenas ao visual. Para</p><p>auxiliar no desenvolvimento das partes relacionadas à interface e ao design gráfico dos</p><p>jogos, algumas das ferramentas mais utilizadas são os softwares especializados, e estes</p><p>geralmente demandam o suporte de equipamentos com excelentes placas de vídeo,</p><p>memórias RAM e ROM e processadores.</p><p>O número de softwares para a criação de games cresceu potencialmente no mercado, e</p><p>existem ainda as linguagens de programação que também podem ser utilizadas para o</p><p>desenvolvimento direto dessas mídias digitais. Alguns dos softwares mais utilizados</p><p>para o design de games na atualidade são:</p><p>Adventure Game Studio</p><p>O Adventure Game Studio (AGS) é um software de código aberto com um ambiente de</p><p>desenvolvimento integrado (IDE) para criação de jogos em linguagem C. Surgiu no</p><p>final da década de 1990 por Chris Jones e começou com jogos de baixa resolução, hoje</p><p>a ferramenta suporta diversos filtros gráficos e formatos multimídias. Permite a criação</p><p>de jogos 2D, point and click (apontar e clicar), em que o jogador explora o cenário</p><p>clicando com o mouse.</p><p>Unity 3D</p><p>A Unity 3D apresenta uma extensa quantia de ferramentas e recursos, não se limitando</p><p>aos códigos de script, mas com uma boa interface visual amigável. Permite a criação de</p><p>jogos para consoles Microsoft, Sony, Nintendo, Apple, Google (Android) e também</p><p>para navegadores Web. Com possibilidades de elevada qualidade para o 3D, permite a</p><p>criação de gráficos complexos e designs rebuscados. É gratuito, mas também possui</p><p>uma versão Pro que é paga.</p><p>Unreal Engine</p><p>O Unreal Engine é um software gratuito, mas que possui uma taxa de royalty na</p><p>possibilidade de venda do jogo desenvolvido com o software. Pode ser utilizado por</p><p>iniciantes ou profissionais e possui recursos para propostas das mais simples às mais</p><p>complexas. Em abril de 2022 foi lançado o Unreal Engine 5 (UE5) com a promessa de</p><p>uma tecnologia capaz de renderizar mundos de forma precisa, detalhada e em tempo</p><p>real. Uma das grandes novidades da UE5 é que permite a colaboração simultânea de</p><p>diversos profissionais em uma mesma região.</p><p>A escolha do software para criação de jogos deve ser feita de acordo com a proposta</p><p>conceitual, estética e gráfica de um jogo, mas é importante que o bom game designer</p><p>esteja familiarizado com algumas das ferramentas existentes no mercado para executar</p><p>seus projetos da forma mais eficaz e eficiente possível.</p><p>PLATAFORMAS ON-LINE PARA DESIGN E CRIAÇÃO DE JOGOS</p><p>Criação on-line de jogos</p><p>O design de jogos não se limita aos gráficos de alta resolução, cenários complexos e</p><p>narrativas longas. Jogos de design e programação simples também podem alcançar</p><p>muito sucesso e adesão entre os usuários. Em 2020, um dos jogos de maior sucesso e</p><p>com o maior número de downloads foi o jogo social “Among Us”, com uma</p><p>jogabilidade simples, gráficos de baixa definição e possibilidade de conexão com</p><p>amigos para jogos coletivos (DIAS, 2021).</p><p>Figura 1 | Design de tela do Jogo “Among Us”</p><p>Fonte: captura de tela do PlaySation elaborada pela autora.</p><p>Riker e Maciel (2009) observam que a criação de jogos digitais, por ser uma tarefa</p><p>complexa, demanda equipes multidisciplinares e muitas vezes cabe ao game designer</p><p>atuar como gerente do projeto. Para jogos de design e conceitos mais simples, as</p><p>plataformas on-line são um excelente recurso tecnológico e permitem ao game designer</p><p>uma atuação mais participativa em aspectos mais técnicos e comumente destinados à</p><p>programação em projetos de grande proporção.</p><p>Plataformas on-line</p><p>Existem diversas plataformas on-line que permitem o desenvolvimento de jogos, dentre</p><p>elas é possível destacar algumas como exemplo:</p><p>Roblox</p><p>Essa é uma plataforma virtual digital gratuita com diversos cenários e possibilidades</p><p>criativas. Com mais de 15 milhões de games já prontos e jogáveis (2022) dialoga com</p><p>dispositivos Android, iOS, computadores e Xbox One. Permite a criação de um</p><p>universo jogável, trabalha com 3D e oferece ferramentas com uma interface complexa,</p><p>mas também bastante intuitiva. Apresenta algumas limitações de compatibilidade como</p><p>desvantagem.</p><p>Kogama</p><p>Nessa plataforma on-line é possível a criação gratuita e o compartilhamento de jogos,</p><p>do design às funções. Permite o desenvolvimento de jogos 3D e até a cooperação</p><p>criativa, uma vez que roda diretamente no navegador. Bastante simples, possui</p><p>ferramentas básicas e interface amigável. Os jogos e recursos são limitados, mas podem</p><p>ser bem aproveitados de acordo com a criatividade da proposta.</p><p>Wordwall</p><p>Muito utilizada para a gamificação educativa, essa plataforma tem ênfase na</p><p>aprendizagem. Com um plano gratuito com limitações e outro pago, a plataforma</p><p>oferece diversas opções de atividades e ainda a opção de impressão para propostas</p><p>como palavras-cruzadas e quiz. Com recursos de simples manuseio e interface intuitiva,</p><p>é limitada nas possibilidades de design, mas permite a personalização das propostas e o</p><p>acompanhamento dos jogadores.</p><p>Scratch</p><p>Essa é uma plataforma de criação de jogos que usa programação visual. Criada pelo</p><p>MIT (Instituto de Tecnologia de Massachusetts), é muito utilizada também para ensinar</p><p>programação de jogos a iniciantes. Trabalha com interface simples e intuitiva. Permite</p><p>criar animações, narrativas interativas e jogos. Não exige conhecimentos de lógica de</p><p>programação e trabalha com montagens de blocos, semelhante a um LEGO.</p><p>As plataformas on-line podem até mesmo ser utilizadas pelo game designer para</p><p>prototipar um projeto e apresentá-lo à equipe. O conhecimento dessas ferramentas pode</p><p>enriquecer e potencializar as propostas de design de jogos digitais, sendo por essa razão</p><p>muito importantes para a prática profissional diversificada no design de mídias digitais.</p><p>DESIGN E CRIAÇÃO DE JOGOS EM REDES SOCIAIS</p><p>Redes gamificadas</p><p>Com a popularização dos jogos digitais e das redes sociais, surge um novo conceito</p><p>híbrido, as redes sociais gamificadas. Segundo Recuero (2009, p. 24), o conceito de</p><p>rede social pode ser definido como “um conjunto de dois elementos: atores (pessoas,</p><p>instituições ou grupos; os nós da rede) e suas conexões (interações ou laços sociais)”.</p><p>Nas redes sociais on-line, o uso de técnicas de gamificação tem sido aplicado com o</p><p>objetivo de aumentar o engajamento dos usuários (ARNOLD et al., 2016).</p><p>Oliveira Filho (2012, p. 42) propõe, a partir de uma ampla revisão bibliográfica de</p><p>diversos autores, o entendimento simplificado do conceito de rede social gamificada</p><p>como: “a utilização de jogos na rede social". O conceito de gamificação das redes</p><p>sociais oferece possibilidades vantajosas para o mercado, mas também para o usuário.</p><p>Segundo Winter et al. (2014), em uma rede social gamificada, "o usuário pode não</p><p>apenas estabelecer suas relações sociais, mas também interagir com uma série de</p><p>mecânicas provindas dos jogos, o que promove uma maior motivação e engajamento do</p><p>usuário ao utilizar a Rede Social". Ao contrário dos jogos digitais que se encontram há</p><p>algumas décadas no mercado, as redes sociais gamificadas representam uma área ainda</p><p>em desenvolvimento, repleta de possibilidades e potencialidades.</p><p>O design e a criação de jogos digitais podem estar atrelados às redes sociais como</p><p>estratégia de engajamento, divulgação e funcionamento. Também é possível ter como</p><p>referência alguns importantes conceitos desses ambientes, e segundo Avellar et</p><p>al. (2012), pode-se encontrar algumas importantes categorias de referência para o</p><p>design de jogos sociais. São elas:</p><p>Recompensa - as redes sociais gamificadas utilizam recompensas através de itens,</p><p>engajamento, bonificação,</p><p>detalhes, avatares, recursos gráficos e diversas outras</p><p>possibilidades para motivar o usuário a permanecer e progredir naquela experiência.</p><p>Reforço - o reforço enfatiza a recompensa e possibilita a percepção da interação dos</p><p>indivíduos com o ambiente e a rede. Essa abordagem também auxilia no direcionamento</p><p>da experiência através da ênfase em alguns comportamentos em detrimento de outros.</p><p>Social -é nessa categoria que estabelecem-se os nós das redes, o engajamento,</p><p>viralizações e divulgações. Pode ser estabelecido através de interações diretas</p><p>ou feeds de notícias e contatos entre indivíduos e grupos.</p><p>Dinâmica de progressão - as dinâmicas de progressão observam as percepções do</p><p>usuário sobre sua progressão no sistema, isso se dá através da definição de níveis e</p><p>também com feedbacks bem delineados.</p><p>Tempo - o tempo está relacionado aos conceitos, aos eventos e às ações de natureza</p><p>temporal. Marcadores cronológicos, contagens regressivas, agendamentos, fluxo e</p><p>imersão são algumas das perspectivas relacionadas.</p><p>As redes sociais gamificadas fundamentam-se nessas categorias principais, elas</p><p>bonificam ações e incentivam a produção de conteúdos, participação e imersão do</p><p>usuário possibilitando melhoras e engajamento mais orgânico.</p><p>As ações gamificadas têm sido adotadas por empresas como estratégia de divulgação de</p><p>seus produtos e marcas nas redes sociais. Para Tonon (2021, p. 22) "o objetivo de se</p><p>criar uma experiência gamificada é o de estimular a motivação de continuidade de uso</p><p>de um serviço e de um comportamento-chave, produzindo experiências positivas e</p><p>motivações similares às obtidas em jogos e que afetam o comportamento do usuário ou</p><p>jogador".</p><p>O design e a criação de jogos em redes sociais e para redes sociais são um promissor</p><p>espaço no mercado das mídias digitais. Os bons profissionais devem estar atentos a</p><p>esses ambientes em que é possível encontrar referências, espaços para desenvolvimento</p><p>e possibilidades de engajamento de seus produtos.</p><p>VIDEOAULA</p><p>Este vídeo mostra mais sobre ferramentas técnicas para o design e criação de jogos</p><p>digitais. apresenta alguns dos mais populares softwares para criações com gráficos</p><p>complexos e também traz informações sobre plataformas on-line que permitem o</p><p>desenvolvimento de diversos tipos de trabalhos. Para fins didáticos e reflexivos, o</p><p>desafio é pensar sobre os jogos digitais no contexto das redes sociais e sua importância</p><p>para a comunicação e o mercado.</p><p>Videoaula</p><p>Saiba mais</p><p>Dimensão sensorial em minecraft</p><p>Os pesquisadores Ivan Mussa e Vinicius Pereira desenvolveram um brilhante trabalho</p><p>sobre a dimensão sensorial da comunicação jogador-jogo, analisando o game Minecraft.</p><p>O artigo científico de apenas 13 páginas traz importantes reflexões sobre</p><p>descentralização do jogador e outros conceitos.</p><p>MUSSA, I.; PEREIRA, V. Descentralização do jogador: Minecraft e a dimensão</p><p>sensorial da comunicação jogador-jogo. Revista Fronteiras – estudos midiáticos</p><p>22(3):16-28 setembro/dezembro, 2020. Unisinos.</p><p>Documentário sobre games</p><p>Para ampliar suas percepções e concepções sobre os games, seu mercado e cultura, o</p><p>documentário Consoles, Joysticks e um punhado de histórias traz uma perspectiva</p><p>interessante e histórica sobre o assunto. Lançado em 2010 e disponível no YouTube, o</p><p>material permite acompanhar as transformações no design e conceito dos jogos,</p><p>principalmente nas formas como eram desenvolvidos.</p><p>DOCUMENTÁRIO completo: Consoles, Joysticks e um punhado de histórias (2010)</p><p>[ZeroQuatroMidia]. [S. l.: s. n.], 2016. 1 vídeo (47min). Publicado pelo canal</p><p>ZeroQuatroMidia.</p><p>Waving</p><p>Um grupo de empreendedores brasileiros lançou em 2021 uma rede social gamificada</p><p>que combina conceitos das redes TikTok, Snapchat e jogos, a Waving. Voltada para o</p><p>público jovem, ela propõe que as publicações de seus usuários sejam acessadas por</p><p>pessoas do mundo todo em tempo real e transforma isso em pontos, junto a outras</p><p>atividades executadas.</p><p>REFERÊNCIAS</p><p>5 minutos</p><p>Aula 1</p><p>ABREU, J. A. O. LUDUS EDU: Ludificação como ferramenta para favorecer o</p><p>balanceamento da avaliação de aprendizado do estudante pelo professor. 2015.</p><p>Dissertação (Mestre em Ciência da Computação) - Universidade Federal de</p><p>Pernambuco. Recife, 2015.</p><p>BRUNNER, R.; EMERY, S. Gestão Estratégica do Design: como um ótimo design</p><p>fará as pessoas amarem sua empresa. 1. ed. São Paulo: M. BOOKS, 2010.</p><p>CARVALHO, G. R. A importância dos jogos digitais na educação. 2018. Trabalho</p><p>de Conclusão de Curso (Tecnólogo em Sistemas de Computação) - Universidade</p><p>Federal Fluminense. Niterói, 2018. Disponível</p><p>em: https://app.uff.br/riuff/bitstream/handle/1/8945/TCC_GABRIEL_RIOS_DE_CAR</p><p>VALHO%20%281%29.pdf?sequence=1&isAllowed=y. Acesso em: 5 abr. 2022.</p><p>DETERDING, S. et al. From game design elements to gamefulness: defining</p><p>gamification. In: PROCEEDINGS OF THE 15TH INTERNATIONAL ACADEMIC</p><p>http://revistas.unisinos.br/index.php/fronteiras/article/download/fem.2020.223.02/60748114/60769819</p><p>http://revistas.unisinos.br/index.php/fronteiras/article/download/fem.2020.223.02/60748114/60769819</p><p>https://www.youtube.com/watch?v=pcyP1e_Y_5U</p><p>https://www.youtube.com/watch?v=pcyP1e_Y_5U</p><p>https://waving.app/</p><p>https://app.uff.br/riuff/bitstream/handle/1/8945/TCC_GABRIEL_RIOS_DE_CARVALHO%20%281%29.pdf?sequence=1&isAllowed=y</p><p>https://app.uff.br/riuff/bitstream/handle/1/8945/TCC_GABRIEL_RIOS_DE_CARVALHO%20%281%29.pdf?sequence=1&isAllowed=y</p><p>MINDTREK CONFERENCE: Envisioning Future Media Environments, [S. l.]. p. 9-15.</p><p>Disponível em: https://doi.org/10.1145/2181037.2181040. Acesso em: 7 abr. 2022.</p><p>MCSILL, J. 5 lições de storytelling: fatos, ficção e fantasia. 1. ed. São Paulo: DVS</p><p>EDITORA, 2013.</p><p>NASSAR, P. História e memória organizacional como interfaces das relações</p><p>públicas. In: KUNSCH, M. M. K. (org.). Relações Públicas - história, teorias e</p><p>estratégias nas organizações contemporâneas. São Paulo: Saraiva, 2009. p. 291-306.</p><p>NÚÑEZ, A. É melhor contar tudo: o poder da sedução das histórias no mundo</p><p>empresarial e pessoal. Trad. Marylene Michael. São Paulo: Nobel, 2009.</p><p>SANTOS, L. S. Storytelling: o poder da narrativa estratégica dentro do branding e</p><p>marketing. 2016. Artigo (MBA) – Curso de Branding & Business, Universidade do</p><p>Vale do Taquari - Univates, Lajeado, 1 jul. 2016. Disponível</p><p>em: http://hdl.handle.net/10737/1629. Acesso em: 28 abr. 2022.</p><p>SAVI, R.; ULBRICHT, V. R. Jogos Digitais Educacionais: Benefícios e Desafios.</p><p>Universidade Federal do Rio Grande do Sul, Porto Alegre, v. 6, n. 2, 2008. Disponível</p><p>em: https://seer.ufrgs.br/renote/article/download/14405/8310. Acesso em: 22 abr. 2022.</p><p>SCHELL, J. A arte de game design: o livro original. Rio de Janeiro: Elsevier, 2011.</p><p>UMBRELLA, B. Ludificação ou Gamificação? Opusphere, 2013. Disponível</p><p>em: https://opusphere.com/ludificacao-ou-gamificacao/. Acesso em: 19 abr. 2022.</p><p>Aula 2</p><p>ADAMS, E.; ROLLINGS, A. Fundamental of game design. New Jersey: Pearson,</p><p>2006.</p><p>AZEVEDO, F. M. et al. Game User Experience (UX): Explorando a Teoria da</p><p>Diegese. 2017. 12f. TCC (Graduação em Engenharia de Software) – Uniritter Laureate</p><p>International Universities, Faculdade de Informática, Brasil, Curitiba, 2017.</p><p>COSTA, L. D. O que os jogos de entretenimento têm que os educativos não têm.</p><p>Rio de Janeiro: PUCRio, 2009.</p><p>CREDIDIO, D.; MENEZES, M. N. A. Metodologia de design aplicada à concepção</p><p>de jogos digitais. 2007. Dissertação (Mestrado em Design) – Universidade Federal de</p><p>Pernambuco, Recife, 2007.</p><p>FEDEROFF, M. Heuristics and Usability Guidelines for the Creation and</p><p>Evaluation of Fun in Video Games. Tese (Mestrado) – Indiana University, 2002.</p><p>Disponível em: http://melissafederoff.com/thesis.html. Acesso em: 13 abr. 2022.</p><p>GEE, J. P. Thy Games Studies Now? Video Games: A new art form. Games And</p><p>Culture: A journal of Interactive Media, London, v. 1, n. 6, p. 58-61, set. 2006.</p><p>HIRA, W. K. et al. Criação de um modelo conceitual para Documentação</p><p>de Game</p><p>Design. In: SBGames 2016 - XV SYMPOSIUM ON COMPUTER GAMES AND</p><p>DIGITAL ENTERTAINMENT. p. 329-336. São Paulo, 2016. Disponível</p><p>em: http://www.sbgames.org/sbgames2016/downloads/anais/157033.pdf. Acesso em:</p><p>14 abr. 2022.</p><p>JOHNSON, S. A cultura da Interface. Rio de Janeiro: Ed. Jorge Zahar, 2001.</p><p>MACHADO, T. L. A. Game Live Logs: uma plataforma de conversação para atenuar</p><p>conflitos no desenvolvimento de games. 2013. Dissertação (Mestrado em Ciência da</p><p>Computação) – Universidade Federal de Pernambuco, Recife, 2013.</p><p>OLIVEIRA. F. N. Conheça 7 princípios para um game design de jogos educativos e</p><p>divertidos. Fábrica de Jogos, 2018. Disponível</p><p>em: https://www.fabricadejogos.net/posts/conheca-7-principios-para-um-game-design-</p><p>de-jogos-educativos-e-divertidos/. Acesso em: 29 abr. 2022.</p><p>https://doi.org/10.1145/2181037.2181040</p><p>http://hdl.handle.net/10737/1629</p><p>https://seer.ufrgs.br/renote/article/download/14405/8310</p><p>https://opusphere.com/ludificacao-ou-gamificacao/</p><p>http://melissafederoff.com/thesis.html</p><p>http://www.sbgames.org/sbgames2016/downloads/anais/157033.pdf</p><p>https://www.fabricadejogos.net/posts/conheca-7-principios-para-um-game-design-de-jogos-educativos-e-divertidos/</p><p>https://www.fabricadejogos.net/posts/conheca-7-principios-para-um-game-design-de-jogos-educativos-e-divertidos/</p><p>SANCHÈZ, J. L.; PADILLA-ZEA, N.; GUTIERREZ VELA, F. L. From Usability to</p><p>Playability: Introduction to Player-Centered Video Game Development</p><p>Process. In: PROCEEDINGS OF THE 1ST INTERNATIONAL CONFERENCE ON</p><p>HUMAN CENTERED DESIGN: Held as Part of HCI International 2009 (HCD 09),</p><p>Masaaki Kurosu (Ed.). Springer-Verlag, Berlin, Heidelberg, 65-74, 2009.</p><p>SCAICO, P.; SCAICO, A. Gamers' Experience beyond the Boundaries of Games: An</p><p>Exploratory Research on Learning to Code. In: LATIN AMERICAN CONFERENCE</p><p>ON LEARNING TECHNOLOGIES. 2018.</p><p>TONÉIS, C. N. Experiência estética e a interface nos jogos digitais: a produção de um</p><p>edutainment game: Lua. Revista Tecnologia e Sociedade (Online), v. n. 15, p. 150-</p><p>165, 2012.</p><p>Aula 3</p><p>CAMPOS, A. M. A. Teoria do Flow: construção de jogos para a aprendizagem da</p><p>matemática. In: III ENCONTRO DE LUDICIDADE E EDUCAÇÃO. Anais. v. 3, n. 1,</p><p>2021. Disponível</p><p>em: https://www.revistas.uneb.br/index.php/elem/article/view/11950. Acesso em: 29</p><p>abr. 2022.</p><p>CARVALHO, L. P. et al. Ética e Jogos, jogo ético e ética em jogo. In: SBC –</p><p>Proceedings of SBGames, XX SBGames – Gramado – RS – Brazil, October 18th –</p><p>21st, 2021.</p><p>CORDEIRO, E. et al. O uso de feedbacks em jogos educacionais digitais para o ensino</p><p>de operações básicas de matemática: um estudo exploratório. Em Teia - Revista de</p><p>Educação Matemática e Tecnológica Iberoamericana. v. 12, n. 1. 2021.</p><p>COSTA, E. de B. et al. An Approach that Support Multiple Linked Representations</p><p>Within an Intelligent Tutoring System for Helping Students to Develop Skills on</p><p>Designing Digital Circuits. In: NEW ADVANCES IN INFORMATION SYSTEMS</p><p>AND TECHNOLOGIES: Volume 2. Cham: Springer International Publishing, 2016. p.</p><p>255-264.</p><p>CSIKSZENTMIHALYI, M. Flow: the psychology of optimal experience. 1st. ed.</p><p>Harper Perennial Modern Classiscs, 1990.</p><p>CSIKSZENTMIHALYI, M. Flow: a psicologia do alto desempenho e da felicidade. 1.</p><p>ed. Rio de Janeiro: Objetiva, 2020.</p><p>CRUZ JUNIOR, G. Vivendo o jogo ou jogando a vida? Notas sobre jogos (digitais) e</p><p>educação em meio à cultura ludificada. Revista Brasileira de Ciências do Esporte, v.</p><p>39, n. 3, 2017, pp. 226-232. Colégio Brasileiro de Ciências do Esporte. Curitiba, Brasil.</p><p>DIAS, V. O. S. Game design e agência: Pax Azteca, expandindo a influência do</p><p>jogador sobre o enredo. 2020. 114f. Trabalho de Conclusão de Curso (Bacharelado em</p><p>Design) – Universidade de Brasília, Brasília, 2020.</p><p>GEHLING, M. A importância do feedback. 2012. Disponível</p><p>em: https://mbg3dmind.wordpress.com/2012/04/30/a-importncia-do-feedback/. Acesso</p><p>em: 14 abr. 2022.</p><p>JOSELLI, M. A ética e os games: “morais, imorais ou amorais? ”. Um estudo sobre a</p><p>ética em games segundo Aristóteles, Santo Agostinho e Kant. In: SIMPÓSIO</p><p>BRASILEIRO DE JOGOS E ENTRETENIMENTO DIGITAL, 13, 2014, Porto Alegre.</p><p>Culture Track – Full Papers. Porto Alegre: SBC – Proceedings Of SBGames 2014,</p><p>2014. p. 448-456.</p><p>MAINGUENEAU, D. A propósito do Ethos. In: MOTTA, A. R.; SALGADO, L. S.</p><p>Ethos Discursivo. São Paulo: Contexto, 2008.</p><p>https://www.revistas.uneb.br/index.php/elem/article/view/11950</p><p>https://mbg3dmind.wordpress.com/2012/04/30/a-importncia-do-feedback/</p><p>MURRAY, J. H. Hamlet no Holodeck. São Paulo: Editora UNESP, 2013.</p><p>WILIAM, D. The secret of effective feedback. Educational Leadership, v. 73, n. 7, p.</p><p>10-15, 2016.</p><p>Aula 4</p><p>ARNOLD, R. et al. Análise de gamificação em redes sociais gamificadas. Teknos</p><p>Revista Científica. 16(2):77, 2016. Disponível em: 10.25044/25392190.823. Acesso</p><p>em: 21 abr. 2022.</p><p>AVELLAR, C. et al. Modelo de Análise de Gamificação Aplicado a Redes Sociais</p><p>Gamificadas. In: SIMPÓSIO BRASILEIRO DE GAMES E ENTRETENIMENTO</p><p>DIGITAL, 6, 2012, Brasília. Proceedings. Brasília: Sbgames, 2012. p. 189-196.</p><p>DIAS, N. Quem criou o Among Us? Veja quando foi lançado, o que significa e</p><p>mais. TechTudo, 2021. Disponível</p><p>em: https://www.techtudo.com.br/noticias/2021/03/quem-criou-o-among-us-veja-</p><p>quando-foi-lancado-o-que-significa-e-mais.ghtml. Acesso em: 29 abr. 2022.</p><p>GUERREIRO, M. A. da S. Os efeitos do Game Design no processo de criação de</p><p>jogos digitais utilizados no ensino de Química e Ciências: o que devemos considerar?</p><p>2015. 297f. Dissertação (Mestrado) - Universidade Estadual Paulista Júlio de Mesquita</p><p>Filho, Faculdade de Ciências, São Paulo, 2015. Disponível</p><p>em: http://hdl.handle.net/11449/126484. Acesso em: 19 abr. 2022.</p><p>OLIVEIRA FILHO, A. Q. de. A dinâmica interacional de participantes de uma rede</p><p>social gamificada. 2012. Dissertação (Mestrado em Psicologia Cognitiva) –</p><p>Universidade Federal de Pernambuco, Recife, 2012. Disponível</p><p>em: https://repositorio.ufpe.br/handle/123456789/18287. Acesso em: 24 abr. 2022.</p><p>RECUERO, R. Redes Sociais na Internet. Porto Alegre: Sulina, 2009.</p><p>RIKER, D. S.; MACIEL, F. R. O papel do profissional de Design em uma equipe de</p><p>criação e desenvolvimento de jogos. In: VIII BRAZILIAN SYMPOSIUM ON GAMES</p><p>AND DIGITAL ENTERTAINMENT, p. 1-3, 2009.</p><p>TONON, B. Ação gamificada como estratégia de relacionamento e engajamento nas</p><p>redes sociais: um estudo de caso na SportAção. Dissertação (Mestrado) – Fundação</p><p>Getúlio Vargas. Rio de Janeiro, 2021. Disponível</p><p>em: https://bibliotecadigital.fgv.br/dspace/handle/10438/30374?show=full. Acesso em:</p><p>21 abr. 2022.</p><p>WINTER, N. J. et al. Incentivo ao estudo através dos jogos: experiências no</p><p>desenvolvimento de uma rede social gamificada. Ingeniería e Innovación, [S. l.], v. 2,</p><p>n. 1, 2014. Disponível</p><p>em: https://revistas.unicordoba.edu.co/index.php/rii/article/view/1407. Acesso em: 21</p><p>abr. 2022.</p><p>Ver anotações0</p><p>https://www.techtudo.com.br/noticias/2021/03/quem-criou-o-among-us-veja-quando-foi-lancado-o-que-significa-e-mais.ghtml</p><p>https://www.techtudo.com.br/noticias/2021/03/quem-criou-o-among-us-veja-quando-foi-lancado-o-que-significa-e-mais.ghtml</p><p>http://hdl.handle.net/11449/126484</p><p>https://repositorio.ufpe.br/handle/123456789/18287</p><p>https://bibliotecadigital.fgv.br/dspace/handle/10438/30374?show=full</p><p>https://revistas.unicordoba.edu.co/index.php/rii/article/view/1407</p><p>a partir das múltiplas possibilidades que surgem destes</p><p>processos e relações. Felix Guattari (1992, p.135) observa que a arte "leva ao ponto</p><p>extremo uma capacidade de invenção de coordenadas mutantes, de engendramento de</p><p>qualidades de ser inéditas, jamais vistas, jamais pensadas".</p><p>O conceito de interestética surge, então, a partir da definição de "uma estética híbrida</p><p>que pretende diluir os limites, trazendo para seu interior as inter-relações e</p><p>interconexões com outras áreas do saber. É uma estética que rompe com qualquer ideia</p><p>de fronteira rígida entre perto e longe, artificial e natural, real e virtual" (ARANTES,</p><p>2004, p. 10).</p><p>A estética das mídias digitais não é uma mera adaptação de outros formatos, ao</p><p>contrário, ela possui características próprias das plataformas que lhe dão suporte. A</p><p>interestética requer uma leitura da realidade e das tendências socioculturais, algo que</p><p>vai muito além do tecnicismo e que está atrelado à individualidade da experiência de</p><p>cada usuário.</p><p>PERSONALIZAÇÃO DA INFORMAÇÃO, FEEDBACK E</p><p>FIDELIZAÇÃO</p><p>Elementos importantes do design interativo</p><p>A comunicação visual por meio do design esteve por muito tempo restrita a uma seleta</p><p>camada de artistas como pintores, escultores e ilustradores. Com a chegada das</p><p>tecnologias digitais, o leque de possibilidades criativas para o design se ampliou</p><p>significativamente. No contexto da interestética atual é importante ressaltar três</p><p>importantes componentes aliados do design atrativo: a personalização da informação,</p><p>o feedback e a fidelização.</p><p>Personalização da informação</p><p>A personalização no design é a definição de algumas diretrizes e parâmetros com o</p><p>intuito de atender a um determinado usuário ou grupo de usuários. Nas mídias digitais, a</p><p>personalização permite a experiência de consumo centrada no usuário e não no produto</p><p>ou conteúdo. Para que isso aconteça é necessário planejar e estudar as demandas. Para</p><p>Koch (2000, p. 145), “o processo de desenvolvimento demanda um estudo de</p><p>viabilidade exaustivo, planejamento adequado e experiência em construção de</p><p>aplicações hipermídia, técnicas de modelagem e de adaptação”. Ao proporcionar uma</p><p>experiência não apenas agradável, mas principalmente centrada no usuário, as</p><p>possibilidades de vínculo e fidelização entre marca e indivíduo podem ser consolidadas,</p><p>tendo como intermediário principal o design. Para Batista e Ulbricht (2007, p. 30),</p><p>"personalização, também denominada adaptação, em informática, significa definir um</p><p>conjunto de parâmetros para atender às exigências de um usuário específico; ajustar</p><p>para o uso pessoal". Um estudo feito pela Forrester (SERIEDESIGN, 2018) apontou</p><p>que empresas que trabalham com personalização têm consumo aumentado em 15% nas</p><p>compras e 20% de aumento de receita por usuário. Quanto mais pessoal é a experiência,</p><p>mais especial ela pode se tornar para indivíduo.</p><p>Feedback</p><p>Nem sempre é possível acertar ou prever as demandas do usuário com precisão, por isso</p><p>é fundamental que existam canais para feedback, não só no que diz respeito aos</p><p>conteúdos, mas também em relação ao design e à interação. Isso pode ser feito por meio</p><p>de canais de atendimento e chatbots, dentre outros. Além do feedback para criadores e</p><p>marcas, no que diz respeito ao design de interação, é importante que o usuário também</p><p>receba um feedback de suas ações. Isso significa que para toda ação do usuário existe</p><p>uma expectativa de resposta. Na prática, existem duas categorias de feedback: o ativador</p><p>(activational feedback) e o comportamental (behavioral feedback). O feedback ativador</p><p>é aquele em que a resposta se manifesta de forma sensorial, por meio de um alarme,</p><p>mudança visual ou vibração. Por exemplo, um botão que muda de cor quando se clica</p><p>nele para confirmar algo. Já o feedback comportamental é uma resposta a um comando</p><p>ativado com eficácia nos sistemas, como uma caixa de mensagem após o envio de um e-</p><p>mail avisando que a correspondência eletrônica foi encaminhada com sucesso.</p><p>Fidelização</p><p>A comunicação interativa é centrada no usuário, por isso é fundamental que ele seja</p><p>envolvido e motivado a interagir com frequência. Designs atraentes, intuitivos,</p><p>personalizados e acessíveis contribuem com a fidelização dos clientes. Por meio de uma</p><p>comunicação visual bem executada, o usuário se sente atendido e a marca recebe como</p><p>retorno um consumidor frequente.</p><p>O design é responsável pela vitrine nas mídias digitais, por isso o bom profissional deve</p><p>dominar as mais diversas ferramentas e nuances da comunicação visual. Para consumir,</p><p>o usuário precisa primeiro se sentir atraído pelo produto e a atuação de um bom</p><p>designer faz toda a diferença neste processo.</p><p>VIDEOAULA</p><p>O design para mídias digitais e para a comunicação interativa vai muito além de</p><p>conceitos práticos e ferramentas técnicas. É importante compreender fundamentos da</p><p>cultura e estética atual. Nesta aula serão demonstrados conceitos e exemplos da</p><p>construção dos padrões de beleza em diferentes épocas e sociedades. Por meio de</p><p>temáticas importantes e contemporâneas como: interestética, personalização da</p><p>informação, feedback e fidelização são abordados também conceitos práticos do design</p><p>aplicado à comunicação digital interativa.</p><p>Videoaula</p><p>Saiba mais</p><p>Arte e ilustração</p><p>Na obra Arte e ilustração de Valter do Carmo Moreira (2018) é possível aprender e</p><p>refletir sobre a comunicação visual ao longo da história. O livro também aborda o uso</p><p>da ilustração na comunicação e a aplicação de ferramentas de edição e manipulação de</p><p>imagem. Disponível gratuitamente na biblioteca digital.</p><p>Museu virtual</p><p>A Pinacoteca é um belo museu de arte localizado na cidade de São Paulo, no Brasil. Seu</p><p>acervo de mais de 9.000 obras pode ser acessado de qualquer lugar do mundo. Uma</p><p>ótima oportunidade para refletir sobre estética e transformações na arte e design.</p><p>Realize um tour virtual para saber mais.</p><p>História da arte e do design</p><p>Para conhecer melhor a história e os elementos que contribuíram para as atuais</p><p>concepções do design interativo, o livro História da arte e do design de Ariadne</p><p>Catanzaro é um excelente recurso. Disponível gratuitamente na biblioteca virtual.</p><p>Aula 3</p><p>TENDÊNCIAS NAS MÍDIAS DIGITAIS</p><p>O mundo da comunicação passou por gigantescas mudanças nas</p><p>últimas décadas. Com a chegada das mídias digitais e a</p><p>democratização do acesso à internet até o relacionamento social foi</p><p>afetado.</p><p>30 minutos</p><p>https://biblioteca-virtual.com/detalhes/ebook/6087055454aa8872fb666b4b</p><p>https://pinacoteca.org.br/visite/tour-virtual/</p><p>https://biblioteca-virtual.com/detalhes/ebook/6087053f54aa8872fb666abd</p><p>INTRODUÇÃO</p><p>O mundo da comunicação passou por gigantescas mudanças nas últimas décadas. Com</p><p>a chegada das mídias digitais e a democratização do acesso à internet até o</p><p>relacionamento social foi afetado. Nesta aula serão discutidos diversos aspectos da</p><p>criação de conteúdo com ênfase nas relações comerciais. A partir de conceitos teóricos e</p><p>científicos, você aprenderá mais sobre o recente fenômeno do marketing de conteúdo,</p><p>marketing específico para consumo em celulares e a automação da informação. Nas</p><p>mídias digitais, o design não é um elemento isolado das outras informações, mas parte</p><p>do conteúdo, tão importante quanto os textos. Por isso, se você quer dominar a arte</p><p>criativa com qualidade nas plataformas digitais, preste muita atenção aos temas</p><p>discutidos nesta aula.</p><p>MARKETING DE CONTEÚDO</p><p>O que o consumidor quer</p><p>Quando você vai adquirir algum produto ou informação, quais são os critérios das suas</p><p>escolhas? Dentre os elementos que contribuem para a sua decisão, com certeza, as suas</p><p>impressões sobre a marca ou empresa são alguns dos mais importantes e é por isso que</p><p>o marketing de conteúdo é hoje a mola propulsora do comércio digital e presencial no</p><p>mundo.</p><p>Marketing de conteúdo é um conjunto de estratégias focada na criação de conteúdos</p><p>específicos para os usuários,</p><p>com o intuito de desenvolver um relacionamento e facilitar</p><p>o processo de aquisição de produtos ou informações.</p><p>De acordo com Barger (2013), na era digital é importante que as empresas e seus</p><p>profissionais da criação de conteúdo compreendam as expectativas dos clientes, muitas</p><p>vezes externadas por meio das redes sociais. Ainda a este respeito, Rez (2016, p.135)</p><p>afirma que "no caso do marketing de conteúdo, as vendas precisam 'acontecer de forma</p><p>natural'. Existe um processo, uma sequência, o que chamamos de jornada de compra ou</p><p>funil de vendas. É o caminho que seu cliente passa até ter total confiança em sua</p><p>marca".</p><p>Figura 1 | Funil de vendas</p><p>Fonte: WSISTE (2022).</p><p>Alguns elementos da estrutura visual interferem significativamente na recepção das</p><p>informações do marketing de conteúdo, por isso o design é peça fundamental no</p><p>engajamento de uma marca, sua comunicação com o público e produtos.</p><p>Identidade visual</p><p>A identidade visual é composta pelos elementos gráficos que buscam comunicar e</p><p>divulgar as ideias e os valores de uma marca. É ela que estabelece os vínculos e</p><p>referências com o usuário. Uma boa identidade visual pode ajudar a posicionar a marca</p><p>e aumentar o seu engajamento. São elementos da identidade visual: nome, logo, slogan,</p><p>paleta de cores e tipografia, dentre outros. Marcas de sucesso como a Coca-Cola têm</p><p>uma identidade visual tão forte e bem definida que basta mencionar o nome para que as</p><p>pessoas pensem em uma série de qualidades, referências e características visuais como</p><p>as cores símbolo – vermelho, branco e preto, e a fonte utilizada nos rótulos de seus</p><p>produtos principais.</p><p>Simplicidade e clareza</p><p>O lema do design para mídias digitais é “menos é mais”. Além da tendência estética do</p><p>minimalismo na atualidade, existe o fato de que uma mesma campanha ou peça visual</p><p>deve ser acessada por meio dos mais diversos dispositivos e tamanhos de tela. Desta</p><p>forma, um design com excesso de informações e que talvez funcione bem em um</p><p>computador ou televisão dificilmente poderá ser apreciado em sua totalidade na</p><p>dimensão reduzida de um smartphone. A simplicidade no design torna dispensável o</p><p>óbvio e busca a significatividade de uma mensagem visual por meio de elementos</p><p>semióticos e psicológicos.</p><p>Infografia</p><p>A infografia nada mais é do que o binômio imagem + texto se complementando e</p><p>ocupando importantes espaços no processo de comunicação. Nas mídias digitais, as</p><p>demandas por interatividade, concisão e dinamismo fazem do infográfico um</p><p>importante recurso para a comunicação rápida e atraente de informações complexas. A</p><p>infografia é hoje amplamente utilizada no marketing, ensino, jornalismo e comércio.</p><p>Não existe marketing de conteúdo sem design. É o designer de conteúdo que apresenta</p><p>de forma atrativa a contextualização dos temas, informações e experiências oferecidas</p><p>por uma marca. Mais do que uma estratégia, ele é quem ajuda a chamar a atenção dos</p><p>clientes e persuadi-los a permanecer em um relacionamento com aquela marca.</p><p>MOBILE MARKETING</p><p>Marketing para dispositivos móveis</p><p>O acesso à internet por meio de dispositivos móveis tem crescido todos os anos.</p><p>Segundo dados divulgados pelo setor de telecomunicações do governo do Brasil (2020,</p><p>[s. p.]), “em dezembro de 2020, o Brasil registrou mais de 234 milhões de acessos</p><p>móveis à internet. Os números de 2020 representam um aumento de 7,39 milhões em</p><p>relação a 2019, o equivalente a 3,26%”. Isso representa um número de acessos superior</p><p>à população total do país que no ano de 2020 era de 212,6 milhões de habitantes.</p><p>Com o crescimento do consumo de informações por meio de celulares, uma das</p><p>principais expressões do marketing de conteúdo tem sido o mobile marketing, pensado</p><p>preferencialmente para dispositivos móveis.</p><p>O mobile marketing é uma abordagem estratégica com o propósito de interatividade e</p><p>relacionamento por meio das funções de dispositivos mobile, que são celulares, tablets e</p><p>demais aparelhos móveis com conexão à internet. Segundo definição da Mobile</p><p>Marketing Association (SOUZA, 2017, p. 6), trata-se do "marketing que inclui</p><p>propaganda, aplicativos, mensagens, comércio móvel (m-Commerce) e CRM (Customer</p><p>Relationship Management) em todos os tipos de dispositivos móveis, incluindo</p><p>smartphones e tablets".</p><p>São ferramentas do mobile marketing: SMS e MMS - mensagens de texto e de media</p><p>por meio de linha telefônica, e-mails, aplicativos, QR Code e mídias sociais, sendo esta</p><p>última a mais utilizada. À exceção do uso de SMS e MMS – que apresentam maiores</p><p>limitações aos recursos gráficos, toda a comunicação no mobile marketing tem como</p><p>alicerce a comunicação visual e suas potencialidades para despertar o interesse do</p><p>usuário.</p><p>Saiba mais</p><p>Acesse o infográfico Mobile Marketing: O Futuro do Marketing Através dos</p><p>Aparelhos Móveis para conhecer mais detalhes sobe Mobile Marketing.</p><p>No contexto do marketing de conteúdo e do mobile marketing é importante destacar</p><p>também o inbound marketing, que é "uma estratégia que tem como objetivo atrair</p><p>voluntariamente os consumidores para o site da empresa. O Inbound Marketing possui 5</p><p>etapas essenciais que devem ser seguidas para se obter uma estratégia de sucesso. São</p><p>elas: atrair; converter; relacionar-se; vender; analisar" (COMARU, 2018, p. 3). Dentre</p><p>todas estas funções do inbound marketing, uma delas é muito específica do design,</p><p>trata-se do “atrair”.</p><p>Para um design eficiente, é importante reduzir os excessos, aproveitar as peculiaridades</p><p>das demandas e realizar um bom posicionamento dos itens, consciente das</p><p>particularidades do consumo por meio de dispositivos de tamanhos reduzidos.</p><p>Segundo a designer K. Fonseca, uma estratégia de otimização do mobile marketing por</p><p>meio do design é a centralização das ações ou conteúdos mais importantes, da esquerda</p><p>para a direita, considerando não apenas o percurso óptico como o fato de que a maior</p><p>https://viverdeblog.com/mobile-marketing/</p><p>https://viverdeblog.com/mobile-marketing/</p><p>parte da população mundial é destra e utiliza a mão direita para manusear seus</p><p>dispositivos móveis.</p><p>Figura 2 | Posicionamento de itens de design no mobile</p><p>Fonte: Fonseca (2018, [s. p.]).</p><p>O baixo custo do mobile marketing, que dentre outras coisas dispensa gastos com</p><p>impressões e outras produções gráficas é um dos fatores de vantagem que esta</p><p>abordagem oferece. Para os autores Marco Pinto e Célia Ramos (2014, p. 1380), "é</p><p>então impossível ignorar as potencialidades do mobile marketing, pois pode chegar aos</p><p>consumidores 'a qualquer tempo, qualquer lugar, de qualquer forma', para além disso</p><p>permite a criação de mensagens personalizadas”.</p><p>Cabe ao design de conteúdo e mobile tornar as informações estruturadas e focadas na</p><p>experiência do usuário, tendo em perspectiva a realidade de que boa parte dos acessos e</p><p>compras realizadas pela internet acontecem a partir de dispositivos móveis na</p><p>atualidade. Mais do que um elemento decorativo, o design é hoje parte importante da</p><p>informação. No contexto das novas mídias digitais é por meio da comunicação visual</p><p>que é arquitetada uma mensagem clara, objetiva e relevante.</p><p>AUTOMAÇÃO, BOTS E BIG DATA</p><p>Indústria 4.0</p><p>A mais recente revolução tecnológica nos setores da indústria e da prestação de serviços</p><p>foi o surgimento da inteligência artificial. Por meio de técnicas de lógica, uso de nuvens</p><p>para armazenamento de dados e operação de grandes volumes de informação tem-se a</p><p>Indústria 4.0, um novo degrau na história da evolução tecnológica.</p><p>A primeira revolução industrial teve início no século XVIII na Europa e é caracterizada</p><p>pela inserção das máquinas no sistema produtivo que até então era de manufatura. A</p><p>segunda revolução é marcada pelo uso científico com o intuito de maximização da</p><p>produção, com o uso da eletricidade e do petróleo, dentre outras inovações. A terceira</p><p>fase, também chamada de revolução tecno-científica é marcada pelos avanços da</p><p>eletrônica e</p><p>informática nos processos industriais. Já a quarta revolução, ou Indústria</p><p>4.0 é “um conceito de indústria proposto recentemente e que engloba as principais</p><p>inovações tecnológicas dos campos de automação, controle e tecnologia da informação,</p><p>aplicadas aos processos de manufatura” (SILVEIRA, 2016 [s. p.]).</p><p>Com a inserção da internet na indústria e nas cotidianidades humanas, tem-se o</p><p>crescimento do uso da inteligência artificial e da inteligência coletiva a partir do</p><p>armazenamento e distribuição de grandes volumes de dados, bem como da automação</p><p>de diversos processos. Com o uso dos dispositivos móveis para acessar informações</p><p>surgiu um novo perfil de consumidor, caracterizado pelo consumo personalizado e</p><p>influência da experiência do usuário nos processos de decisão. Todos estes processos</p><p>contribuíram com a aplicação da inteligência artificial também no design, a partir da</p><p>análise de grandes volumes de dados e automação de diversos processos.</p><p>Saiba mais</p><p>Acesse o infográfico A Revolução da Inteligência Artificial para conhecer mais como a</p><p>tecnologia de Inteligência Artificial (IA) está impulsionando a transformação dos</p><p>negócios.</p><p>O design nas novas mídias digitais também se aplica a produtos de inteligência artificial</p><p>que trabalham com big data (grandes volumes de dados) e processos automatizados. É o</p><p>design que torna um bot (robô virtual) responsável pelo atendimento em chats</p><p>automatizados, uma ferramenta simpática ao público ou não. Outro exemplo disso é o</p><p>dispositivo da Amazon, a Alexa. A Alexa utiliza princípios do machine learning e pode</p><p>aprender a desenvolver algumas tarefas com o mínimo de interferência possível. Ela</p><p>também acessa a grandes volumes de dados e filtra informações. Atende a comandos de</p><p>voz e é capaz de automatizar funções domésticas como ligar lâmpadas e aparelhos</p><p>eletrodomésticos com IoT (inteligência das coisas). Tudo isso em um design suave,</p><p>ergonômico, minimalista e confortável.</p><p>O design é uma importante parte da Indústria 4.0, pois integra diferentes tecnologias e</p><p>conhecimento em formatos intuitivos que facilitam a experiência.</p><p>Figura 3 | O design na Indústria 4.0</p><p>Fonte: Bossie; Santos (2021, [s. p.]).</p><p>O designer digital pode atuar nas mais diferentes áreas, desde os processos criativos de</p><p>produtos até o design de serviços, na interface de grandes bancos de dados ou na</p><p>elaboração da aparência de chats automatizados. Em todas estas e diversas outras</p><p>https://stefanini.com/pt-br/trends/artigos/revolucao-da-inteligencia-artificial</p><p>possibilidades de atuação, é fundamental que o bom profissional desta área compreenda</p><p>que tudo aquilo que ele elabora tem grande impacto nas percepções do público e</p><p>principalmente na experiência do usuário em relação à marca.</p><p>VIDEOAULA</p><p>Nesta aula serão discutidos importantes tendências nas mídias digitais. Por meio de uma</p><p>apresentação expositiva serão demonstradas novas ferramentas e abordagens do</p><p>mercado que estão diretamente ligadas aos processos de design, como o marketing de</p><p>conteúdo, o mobile marketing e o uso de inteligência artificial. Pela discussão destes</p><p>temas propõe-se a reflexão sobre as diferentes abordagens do design, que vão muito</p><p>além da mera tarefa de desenhar ou criar ou layouts.</p><p>Videoaula</p><p>Saiba mais</p><p>Marketing digital</p><p>Para aprofundar os seus conhecimentos sobre o marketing voltado às mídias digitais,</p><p>uma ótima opção é a obra Marketing digital de Renata Storti. Em apenas 208 páginas é</p><p>possível ver diferentes perspectivas e usos desta ferramenta que hoje ajuda a</p><p>movimentar a economia no mundo inteiro. Disponível gratuitamente na Biblioteca</p><p>digital.</p><p>Histórias e acepções do design</p><p>Para compreender melhor a história do design, sua evolução e atual espaço na</p><p>sociedade, a leitura do livro de Catanzaro é uma excelente alternativa. Com o</p><p>título Histórias e acepções do design, o trabalho de 240 páginas aborda diferentes</p><p>momentos históricos do design, desde a primeira guerra mundial até a pós-modernidade.</p><p>Disponível gratuitamente na Biblioteca digital.</p><p>Criando chatbots</p><p>Em tempos de inteligência artificial e automação dos processos, o chatbots são uma</p><p>tendência na comunicação empresarial. Se quiser testar as possibilidades e os recursos</p><p>existentes nesta ferramenta, existem plataformas online com gratuidade temporária.</p><p>Uma delas é a Cosmobots. Que tal desafiar sua criatividade e bolar um bot para uma</p><p>empresa fictícia?</p><p>Aula 4</p><p>DESIGN DE INTERAÇÃO (IXD)</p><p>As mídias digitais acrescentaram ao design um novo e poderoso</p><p>recurso: a interatividade. Junto com esta potencialidade, surgem</p><p>novas responsabilidades para o profissional designer.</p><p>32 minutos</p><p>https://biblioteca-virtual.com/detalhes/ebook/6087050c54aa8872fb66696e</p><p>https://biblioteca-virtual.com/detalhes/ebook/6087054954aa8872fb666b02</p><p>https://cosmobots.io/</p><p>INTRODUÇÃO</p><p>As mídias digitais acrescentaram ao design um novo e poderoso recurso: a</p><p>interatividade. Junto com esta potencialidade, surgem novas responsabilidades para o</p><p>profissional designer. Nesta aula, você vai aprender importantes fundamentos para a</p><p>criação de um visual atrativo, responsivo e bem executado para mídias digitais. Serão</p><p>estudados os princípios da legibilidade, da funcionalidade e da aparência no design de</p><p>interação. O bom designer compreende a importância de transformar as demandas do</p><p>usuário em estratégias simplificadas de interação e estes serão alguns dos principais</p><p>pilares das discussões do conteúdo dessa aula. Se você quer conhecer os mais</p><p>importantes recursos do design interativo, então preste atenção aos detalhes desta</p><p>exposição de conhecimentos.</p><p>LEGIBILIDADE DO DESIGN</p><p>Fácil compreensão</p><p>Como você se sentiria se precisasse enviar uma mensagem por meio de um aplicativo,</p><p>mas não conseguisse enxergar onde ficam os botões de escrever e enviar as</p><p>informações? E se tudo estivesse em um idioma que você não compreende? Certamente,</p><p>você desistiria após uma experiência tão ruim. Não é possível utilizar um serviço ou</p><p>produto cujo design é de difícil compreensão.</p><p>Um dos principais princípios da interface gráfica digital é a legibilidade e ela está</p><p>diretamente ligada ao uso estratégico das cores e da tipografia, dentre outros recursos.</p><p>"O texto presente na interface deve apresentar alto contraste para ser lido. Utilizar</p><p>tamanhos de fonte que sejam suficientemente adequadas e legíveis. Levar em</p><p>consideração as necessidades das pessoas mais velhas e os seus problemas de visão"</p><p>(PREDEVELLO, 2011, p. 93).</p><p>Para uma legibilidade eficiente é importante ter atenção a diversos detalhes como: a</p><p>escolha dos ícones, o uso de imagens, cores e contrates, espaçamentos, uso de fontes e</p><p>diversas outras nuances gráficas.</p><p>Em relação às cores e contrastes, Kulpa (2009) faz as seguintes recomendações: utilizar</p><p>no máximo sete cores simultâneas; utilizar o fundo branco facilita o contraste, mas é</p><p>preciso tomar cuidado porque em situações de exposição por muito tempo pode causar</p><p>cansaço aos olhos do usuário; o vermelho é eficiente para chamar a atenção, mas deve</p><p>ser evitado como cor de fundo; a cor cinza é uma boa indicação para fundo de</p><p>interfaces; o amarelo é uma boa alternativa para indicação de ação; o verde é a cor mais</p><p>visível entre as primarias do RGB (sistema de cores eletrônico, pela adição de luzes); é</p><p>necessário ter cautela com a luminosidade e o brilho das cores; cores complementares</p><p>juntas podem ser difíceis de focar.</p><p>No que diz respeito à poluição visual, é importante lembrar que a legibilidade é</p><p>facilitada pelo minimalismo e alta pregnância. Quanto mais informações visuais em</p><p>uma imagem, mais difícil é para o usuário encontrar as informações de maior</p><p>importância e concentrar-se nelas.</p><p>Em relação à tipografia, segundo Fontoura (2004), a legibilidade está associada à</p><p>tipografia e alguns fatores são importantes: desenho da letra, espaçamento entre as</p><p>letras, tamanho das letras, entrelinhas e quebra de visualização.</p><p>Ou seja, para telas</p><p>recomendam-se textos curtos, o uso de fontes sem serifas, sem grandes espaços entre as</p><p>linhas, com tamanho bom para a leitura, tendo em consideração o público-alvo, espaços</p><p>de entrelinha harmoniosos e um suporte adequado à visualização. Também deve-se</p><p>evitar letras com muitos efeitos artísticos ou caligráficos, especialmente quando for</p><p>utilizar caixa alta (todas em maiúscula) pois isso dificulta a visualização.</p><p>Figura 1 | Contraste, tipografia e poluição visual no design</p><p>Fonte: elaborada pela autora.</p><p>A legibilidade também deve levar em conta questões de acessibilidade. Para Silva,</p><p>Ferreira e Sacramento (2018), a acessibilidade é um direito de todos os indivíduos e no</p><p>design de produtos e serviços isso se estenda à capacidade de qualquer pessoa poder</p><p>aproveitar aquilo que é oferecido sem limitações associadas às capacidades motoras,</p><p>físicas, sociais e culturais. Por isso é muito importante que os designers de mídias</p><p>digitais considerem a importância e o impacto da acessibilidade nos processos de</p><p>interação. É uma responsabilidade do design de interação proporcionar uma experiência</p><p>confortável e acessível para todos os seus usuários por meio de uma boa legibilidade da</p><p>interface.</p><p>FUNCIONALIDADE DO DESIGN</p><p>Fácil utilização</p><p>É importante que o design interativo seja funcional, ou seja, o usuário deve conseguir</p><p>fazer o que ele deseja. O design precisa ter utilidade e resultados compreensíveis para</p><p>que a experiência seja a melhor possível. Fundamentado nestes princípios, o</p><p>funcionalismo foi um importante movimento das escolas artísticas e de design. O estilo</p><p>modernista marcou esta influência por meio de frases como "a forma segue a função" de</p><p>Louis Sullivan e "menos é mais" de Mies van der Rohe. Neste contexto, o design é que</p><p>se adequa às funcionalidades de um projeto e não o contrário.</p><p>Com o aumento da produção industrial a partir da Segunda Guerra Mundial, surge uma</p><p>nova perspectiva do design, ele passa a diferenciar produtos de uma mesma função e</p><p>natureza. Medeiros (2012, p. 33) observa que “"defronte as inúmeras transformações a</p><p>partir da segunda metade do século XX, o estilo funcionalista começou a sofrer</p><p>rupturas, contradições e novas formas e contraculturas surgiram". A partir da quarta</p><p>revolução industrial, o funcionalismo no design cede espaço para a demanda por</p><p>projetos segmentados e personalizados, com foco na experiência do usuário. É</p><p>importante ressaltar que isso não significa a desvalorização das funcionalidades pelo</p><p>design, mas trata-se de um processo de uso estratégico dos recursos, de dar melhor</p><p>sentido à função da forma, uma vez que "a produção em série supre o desejo de</p><p>consumo, desejos de um grupo e uma necessidade comum, mas o desejo de identidade a</p><p>inda é latente dentro do consumidor” (MEDEIROS, 2012, p. 36).</p><p>É importante que o designer de interação domine não apenas os conceitos da</p><p>comunicação visual, elementos gráficos e estética, mas que compreenda os processos de</p><p>desenvolvimento e os propósitos dos produtos ou serviços oferecidos. O design de</p><p>interação é também experiencial. Ele não precisa apresentar todas as funcionalidades de</p><p>uma vez, mas deve oferecer possibilidades de uma navegação e exploração intuitiva</p><p>para o usuário. Um smartphone, por exemplo, não demonstra em sua tela inicial tudo o</p><p>que é capaz de fazer, mas até uma criança pode explorar seus recursos a partir de um</p><p>bom design interativo.</p><p>A usabilidade é uma grande aliada da funcionalidade no design de interação, pois diz</p><p>respeito à navegabilidade e facilidade que o usuário tem para encontrar os recursos que</p><p>necessita em uma mídia digital.</p><p>Figura 2 | Metas de usabilidade</p><p>Fonte: Preece, Rogers e Sharp (2005, p. 41).</p><p>É a usabilidade que se preocupa com os meios de manipulação do sistema pelo usuário,</p><p>ao passo que a funcionalidade, de acordo com Rosson e Carroll (2002), determina o que</p><p>pode ser feito neste sistema, sendo a essência da interatividade e por isso buscando</p><p>responder aos objetivos e questões principais do usuário.</p><p>O design de interação é capaz de unir com maestria função e forma, atribuindo a cada</p><p>uma delas usabilidade estratégica e sentidos específicos nos sistemas que integram.</p><p>Trata-se da delicada arte de integrar propósito, meio e forma com o intuito de oferecer</p><p>ao usuário uma experiência singular e agradável.</p><p>APARÊNCIA, BELEZA E INTERAÇÃO</p><p>Agradável de ver</p><p>Imagine que, depois de um longo dia de trabalho, você esteja voltando para a casa com</p><p>fome e muito cansado. No caminho, você se depara com os dois últimos restaurantes</p><p>abertos, um é bem iluminado, com a fachada nova, grandes janelas de vidro e um</p><p>interior arrumado, já o outro tem uma fachada manchada, mesas de plástico sem forro e</p><p>sinais de pouco cuidado com a limpeza no interior. Qual deles você escolheria para</p><p>comprar uma refeição? Muito provavelmente, o primeiro. Afinal, a aparência não</p><p>apenas influenciaria na sua decisão como também traria consigo alguns valores sobre</p><p>higiene e qualidade do produto a ser adquirido, no caso, o seu alimento.</p><p>Na filosofia kantiana, a estética é definida como uma experiência sensorial e baseada no</p><p>prazer desinteressado. Ao contrário do pensamento de Sócrates que via uma finalidade</p><p>na beleza dos objetos, a estética kantiana parte do pressuposto de que "o julgamento de</p><p>gosto ou estético não é algo que particulariza o indivíduo, ou seja, não é próprio de cada</p><p>um, já que depende do jogo de imaginação e entendimento" (SILVA, 2017, p. 35).</p><p>As pessoas são atraídas por aquilo que acham belo, por isso é fundamental que o design</p><p>seja atraente e agradável ao público. "A aparência visual é literalmente a primeira coisa</p><p>que o usuário vê quando entra em um site e visuais atraentes são uma grande</p><p>oportunidade de estabelecer a credibilidade" (NIELSEN, 2000, p. 92).</p><p>Mais do que uma mera preocupação com a beleza, a estética no design de interação</p><p>busca adequar a aparência à proposta de um trabalho de forma que ele provoque prazer</p><p>e boas sensações ao ser visualizada. Segundo Patrick Jordan, autor do livro Designing</p><p>Pleasurable Products, existe uma ordem de prioridades nas qualidades de um produto e</p><p>elas são: funcionalidade, usabilidade e, por último, prazer ou emoção. Mesmo que a</p><p>aparência seja a última prioridade na pirâmide proposta por Jordan, o autor observa que</p><p>um design bonito ou agradável pode tornar o usuário mais tolerante a possíveis falhas</p><p>na funcionalidade ou usabilidade de um projeto.</p><p>Existe um estudo na psicologia intitulado halo effect que trabalha com o princípio da</p><p>primeira impressão. Segundo Edward Thorndike, o primeiro a discutir este fenômeno,</p><p>as primeiras percepções sobre algo afetam os demais julgamentos sobre aquela mesma</p><p>coisa ou pessoa. De acordo com diversas pesquisas sobre o tema (AELA, 2020, [s. p.])</p><p>"leva-se cerca de 0,05 segundos para que o usuário forme uma opinião sobre a sua</p><p>interface — se ele gosta ou não, se continua ou não. Em 0,05 segundos não há tempo</p><p>suficiente para se fazer uma avaliação detalhada dos aspectos da interface, como o</p><p>conteúdo. O único aspecto percebido é o visual e se ele é atrativo ou não". Isso significa</p><p>que, embora a aparência de um projeto não seja o objetivo principal, de acordo com a</p><p>teoria do halo effect, ela é o que determina se o usuário vai permanecer ou não naquela</p><p>experiência.</p><p>Assim como a fachada de uma loja influencia nas intenções do consumidor de entrar ou</p><p>não, a aparência do design de uma mídia digital tem grande impacto nos processos</p><p>decisivos e na experiência do usuário. Não se trata de um detalhe supérfluo, afinal existe</p><p>certa verdade científica no ditado “a primeira impressão é a que fica”.</p><p>VIDEOAULA</p><p>Nesta aula são discutidos importantes fundamentos do design de interação. Por meio de</p><p>uma perspectiva expositiva e dialógica, são apresentadas abordagens que podem</p><p>facilitar a legibilidade, compreensão, aproveitamento de experiência e</p><p>apreciação do</p><p>design de interação. O vídeo demonstra que o design de interação exige do profissional</p><p>mais do que o conhecimento de elementos da comunicação visual, é necessário dominar</p><p>também princípios técnicos do desenvolvimento de mídias digitais.</p><p>Videoaula</p><p>Saiba mais</p><p>Cultura do desing</p><p>Quer saber um pouco mais sobre regras da tipografia e suas aplicações? Na página</p><p>do Design Culture você pode encontrar bons exemplos do que fazer e o que evitar.</p><p>https://designculture.com.br/obedecer-as-regras-tipograficas</p><p>Interação humano-computador (IHC)</p><p>Para ampliar as reflexões sobre design de interação, interface e as relações humano-</p><p>computador, vale a pena conferir a obra Interação humano-computador de Everson</p><p>Morais. São 160 páginas de discussão sobre estes temas e estão disponíveis</p><p>gratuitamente na Biblioteca digital.</p><p>História dos padrões de beleza</p><p>Os padrões estéticos mudaram muito ao longo da história. No rápido vídeo Os padrões</p><p>de beleza pela história da série “Conexões Históricas” é possível acompanhar reflexões</p><p>históricas e neurológicas sobre os padrões de beleza e atração ao longo do tempo. Com</p><p>uma linguagem dinâmica e simples, o material está disponível no Youtube.</p><p>REFERÊNCIAS</p><p>7 minutos</p><p>Aula 1</p><p>BARROS, C. M.; CAFÉ, L. Estudos da semiótica na ciência da informação: relatos de</p><p>interdisciplinaridades. Perspectivas em Ciência da Informação, n. 3, v. 17, p. 18-33,</p><p>2012.</p><p>CAGNIN, G.; ROCHA, P. R. O estudo da cor na criação de ambientes. Revista de</p><p>Iniciação Científica, Tecnológica e Artística Edição Temática em Comunicação,</p><p>Arquitetura e Design, São Paulo, n. 2, v. 7. mar. de 2019. Disponível</p><p>em: http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03</p><p>/231_IC_ArtigoRevisado.pdf. Acesso em: 2 fev. 2022.</p><p>ENGELMANN, A. A psicologia da Gestalt e a ciência empírica contemporânea.</p><p>Psicologia: Teoria e Pesquisa [online]. 2002, v. 18, n. 1, pp. 1-16. Disponível</p><p>em: https://doi.org/10.1590/S0102-37722002000100002. Acesso em: 5 fev. 2022.</p><p>EPSTEIN, I. O signo. São Paulo: Ática, 1997.</p><p>FARINA, M.; PEREZ, C.; BASTOS, D. Psicodinâmica das cores em comunicação. 5</p><p>ed. rev. e ampl. São Paulo: Edgard Blücher, 2006.</p><p>MENDES, H. 2020. Marketing digital 360. 8 princípios da Gestalt para você criar</p><p>bons conteúdos visuais. Disponível em: https://marketingdigital360.com.br/8-</p><p>principios-da-gestalt/. Acesso em: 7 fev. 2022.</p><p>Aula 2</p><p>ARANTES, P. Interestética: em busca de um novo paradigma estético na era digital. In:</p><p>Congresso Brasileiro de Ciências da Comunicação, 27, 2004, Porto Alegre. Anais... São</p><p>Paulo: Intercom, 2004.</p><p>BATISTA, C.; ULBRICHT, V. Informação Personalizada no Web Site "Diferente todo</p><p>https://biblioteca-virtual.com/detalhes/ebook/6087052f54aa8872fb666a52</p><p>https://www.youtube.com/watch?v=rVeXkr1XE9g</p><p>https://www.youtube.com/watch?v=rVeXkr1XE9g</p><p>http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03/231_IC_ArtigoRevisado.pdf</p><p>http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03/231_IC_ArtigoRevisado.pdf</p><p>http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03/231_IC_ArtigoRevisado.pdf</p><p>http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03/231_IC_ArtigoRevisado.pdf</p><p>http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03/231_IC_ArtigoRevisado.pdf</p><p>mundo é". Infodesign (SBDI. Online), v. 4, p. 29-38, 2007.</p><p>BENJAMIN, W. A obra de arte na era de sua reprodutibilidade técnica. In: Obras</p><p>escolhidas. Magia e Técnica, Arte e Política, v. 1, 6 ed. Trad. Sérgio Paulo Rouanet.</p><p>São Paulo: Brasiliense, 1993.</p><p>CAMARGO, M. H. As estéticas e suas definições da arte. Revista Científica/FAP,</p><p>[S.l.], jun., p.1-15, 2009. Disponível em: http://periodicos.unespar.edu.br/index.php/</p><p>revistacientifica/article/view/1593. Acesso em: 10 fev. 2022.</p><p>GUATTARI, F. Caosmose. Rio de Janeiro: Ed. 34, 1992.</p><p>KANT, I. Crítica da faculdade do juízo. Trad. Valério Rohden e Antônio Marques. 2.</p><p>ed. Rio de Janeiro: Forense Universitária, 1995.</p><p>KOCH, N. P. Software Engineering for Adaptive Hypermedia Systems: Reference</p><p>Model, Modeling Techniques and Development Process. Munich. Thesis (doctor of the</p><p>Natural Sciences at the Faculty for Mathematics and Computer Science), Ludwig</p><p>Maximilians University Munich. 2000. Disponível</p><p>em: http//:qqwww.pst.informatik.unimuenchen.de/personen/kochn/thesis.html. Acesso</p><p>em: 10 fev. 2022.</p><p>LABORDE, A. A Mais Bella do Rio Grande: um estudo sobre as relações de gênero</p><p>no universo dos concursos de beleza na década de 70. Rio Grande: FURG, 2004.</p><p>(Monografia de Pós-Graduação).</p><p>QUÉAU, P. Metaxu: théorie de l’art intermediaire. Paris: Champ Vallon, 1985.</p><p>SERIEDESIGN. E-commerce - Personalização, seu cliente jamais te esquecerá. 2018.</p><p>Disponível em: https://seriedesign.com.br/personalizacao-fator-decisivo/> Acesso em:</p><p>10 fev. 2022.</p><p>Aula 3</p><p>BARGER, C. O estrategista em mídias sociais. 1 ed. São Paulo: DVS, 2013.</p><p>BOSSIE, C.; SANTOS, M. Qual a relação do Design de Serviços, a UX e a Indústria</p><p>4.0? 2021. Disponível em: https://www.aquare.la/qual-a-relacao-do-design-de-servicos-</p><p>a-ux-e-a-industria-4-0/. Acesso em 13 fev. 2022.</p><p>BRASIL. Ministério da Comunicação. Brasil registrou mais de 234 milhões de acessos</p><p>móveis em 2020. Disponível em: https://www.gov.br/pt-br/noticias/transito-e-</p><p>transportes/2021/05/brasil-registrou-mais-de-234-milhoes-de-acessos-moveis-em-2020.</p><p>Acesso em: 11 fev. 2022.</p><p>CARVALHO, H. Infográfico Mobile Marketing: O Futuro do Marketing Através dos</p><p>Aparelhos Móveis. Viver de Blog. Disponível em: https://viverdeblog.com/mobile-</p><p>marketing/. Acesso em: 11 fev. 2022.</p><p>COMARU, L. F. Uma análise sobre o uso do inbound marketing como estratégia para a</p><p>prospecção de novos clientes nas mídias sociais. 2018. Disponível</p><p>em: https://semanaacademica.org.br/system/files/artigos/uma_analise_sobre_o_uso_do_</p><p>inbound_marketing_como_estrategia_para_prospeccao_de_novos_clientes_nas_midias</p><p>_sociais.pdf. Acesso em: 11 fev. 2022.</p><p>FONSECA, K. Mobile design: 5 boas práticas para desenhar interfaces. Disponível</p><p>em: https://brasil.uxdesign.cc/mobile-design-5-boas-práticas-para-desenhar-interfaces-</p><p>e0bf40c6d454. Acesso em: 11 fev. 2022.</p><p>PINTO, M.; RAMOS, C. Mobile Marketing: A nova abordagem dos marketeers e dos</p><p>novos turistas. Revista GEINTEC. 4. 1376 -1387. 10.7198/S2237-0722201400050007.</p><p>Faro, 2014.</p><p>REZ, R. Marketing de conteúdo: a moeda do século XXI. São Paulo: DVS, 2016.</p><p>SILVEIRA, C. B. Indústria 4.0. 2016. Disponível</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/ARANTES,%20P.%20Interest%C3%A9tica:%20em%20busca%20de%20um%20novo%20paradigma%20est%C3%A9tico%20na%20era%20digital.%20In:%20Congresso%20Brasileiro%20de%20Ci%C3%AAncias%20da%20Comunica%C3%A7%C3%A3o,%2027,%202004,%20Porto%20Alegre.%20Anais...%20S%C3%A3o%20Paulo:%20Intercom,%202004.%20%20BATISTA,%20C.;%20ULBRICHT,%20V.%20Informa%C3%A7%C3%A3o%20Personalizada%20no%20Web%20Site%20%22Diferente%20todo%20mundo%20%C3%A9%22.%20Infodesign%20(SBDI.%20Online),%20v.%204,%20p.%2029-38,%202007.%20%20BENJAMIN,%20W.%20A%20obra%20de%20arte%20na%20era%20de%20sua%20reprodutibilidade%20t%C3%A9cnica.%20In:%20Obras%20escolhidas.%20Magia%20e%20T%C3%A9cnica,%20Arte%20e%20Pol%C3%ADtica,%20v.%201,%206%20ed.%20Trad.%20S%C3%A9rgio%20Paulo%20Rouanet.%20S%C3%A3o%20Paulo:%20Brasiliense,%201993.%20%20CAMARGO,%20M.%20H.%20As%20est%C3%A9ticas%20e%20suas%20defini%C3%A7%C3%B5es%20da%20arte.%20Revista%20Cient%C3%ADfica/FAP,%20%5bS.l.%5d,%20jun.,%20p.1-15,%202009.%20Dispon%C3%ADvel%20em:%20http:/periodicos.unespar.edu.br/index.php/%20revistacientifica/article/view/1593.%20Acesso%20em:%2010%20fev.%202022.%20%20GUATTARI,%20F.%20Caosmose.%20Rio%20de%20Janeiro:%20Ed.%2034,%201992.%20%20KANT,%20I.%20Cr%C3%ADtica%20da%20faculdade%20do%20ju%C3%ADzo.%20Trad.%20Val%C3%A9rio%20Rohden%20e%20Ant%C3%B4nio%20Marques.%202.%20ed.%20Rio%20de%20Janeiro:%20Forense%20Universit%C3%A1ria,%201995.%20%20KOCH,%20N.%20P.%20Software%20Engineering%20for%20Adaptive%20Hypermedia%20Systems:%20Reference%20Model,%20Modeling%20Techniques%20and%20Development%20Process.%20Munich.%20Thesis%20(doctor%20of%20the%20Natural%20Sciences%20at%20the%20Faculty%20for%20Mathematics%20and%20Computer%20Science),%20Ludwig%20Maximilians%20University%20Munich.%202000.%20Dispon%C3%ADvel%20em:%20http:qqwww.pst.informatik.unimuenchen.de/personen/kochn/thesis.html.%20Acesso%20em:%2010%20fev.%202022.%20%20LABORDE,%20A.%20A%20Mais%20Bella%20do%20Rio%20Grande:%20um%20estudo%20sobre%20as%20rela%C3%A7%C3%B5es%20de%20g%C3%AAnero%20no%20universo%20dos%20con</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/ARANTES,%20P.%20Interest%C3%A9tica:%20em%20busca%20de%20um%20novo%20paradigma%20est%C3%A9tico%20na%20era%20digital.%20In:%20Congresso%20Brasileiro%20de%20Ci%C3%AAncias%20da%20Comunica%C3%A7%C3%A3o,%2027,%202004,%20Porto%20Alegre.%20Anais...%20S%C3%A3o%20Paulo:%20Intercom,%202004.%20%20BATISTA,%20C.;%20ULBRICHT,%20V.%20Informa%C3%A7%C3%A3o%20Personalizada%20no%20Web%20Site%20%22Diferente%20todo%20mundo%20%C3%A9%22.%20Infodesign%20(SBDI.%20Online),%20v.%204,%20p.%2029-38,%202007.%20%20BENJAMIN,%20W.%20A%20obra%20de%20arte%20na%20era%20de%20sua%20reprodutibilidade%20t%C3%A9cnica.%20In:%20Obras%20escolhidas.%20Magia%20e%20T%C3%A9cnica,%20Arte%20e%20Pol%C3%ADtica,%20v.%201,%206%20ed.%20Trad.%20S%C3%A9rgio%20Paulo%20Rouanet.%20S%C3%A3o%20Paulo:%20Brasiliense,%201993.%20%20CAMARGO,%20M.%20H.%20As%20est%C3%A9ticas%20e%20suas%20defini%C3%A7%C3%B5es%20da%20arte.%20Revista%20Cient%C3%ADfica/FAP,%20%5bS.l.%5d,%20jun.,%20p.1-15,%202009.%20Dispon%C3%ADvel%20em:%20http:/periodicos.unespar.edu.br/index.php/%20revistacientifica/article/view/1593.%20Acesso%20em:%2010%20fev.%202022.%20%20GUATTARI,%20F.%20Caosmose.%20Rio%20de%20Janeiro:%20Ed.%2034,%201992.%20%20KANT,%20I.%20Cr%C3%ADtica%20da%20faculdade%20do%20ju%C3%ADzo.%20Trad.%20Val%C3%A9rio%20Rohden%20e%20Ant%C3%B4nio%20Marques.%202.%20ed.%20Rio%20de%20Janeiro:%20Forense%20Universit%C3%A1ria,%201995.%20%20KOCH,%20N.%20P.%20Software%20Engineering%20for%20Adaptive%20Hypermedia%20Systems:%20Reference%20Model,%20Modeling%20Techniques%20and%20Development%20Process.%20Munich.%20Thesis%20(doctor%20of%20the%20Natural%20Sciences%20at%20the%20Faculty%20for%20Mathematics%20and%20Computer%20Science),%20Ludwig%20Maximilians%20University%20Munich.%202000.%20Dispon%C3%ADvel%20em:%20http:qqwww.pst.informatik.unimuenchen.de/personen/kochn/thesis.html.%20Acesso%20em:%2010%20fev.%202022.%20%20LABORDE,%20A.%20A%20Mais%20Bella%20do%20Rio%20Grande:%20um%20estudo%20sobre%20as%20rela%C3%A7%C3%B5es%20de%20g%C3%AAnero%20no%20universo%20dos%20con</p><p>https://conteudo.colaboraread.com.br/202202/WHITE_LABEL/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO/U1/ARANTES,%20P.%20Interest%C3%A9tica:%20em%20busca%20de%20um%20novo%20paradigma%20est%C3%A9tico%20na%20era%20digital.%20In:%20Congresso%20Brasileiro%20de%20Ci%C3%AAncias%20da%20Comunica%C3%A7%C3%A3o,%2027,%202004,%20Porto%20Alegre.%20Anais...%20S%C3%A3o%20Paulo:%20Intercom,%202004.%20%20BATISTA,%20C.;%20ULBRICHT,%20V.%20Informa%C3%A7%C3%A3o%20Personalizada%20no%20Web%20Site%20%22Diferente%20todo%20mundo%20%C3%A9%22.%20Infodesign%20(SBDI.%20Online),%20v.%204,%20p.%2029-38,%202007.%20%20BENJAMIN,%20W.%20A%20obra%20de%20arte%20na%20era%20de%20sua%20reprodutibilidade%20t%C3%A9cnica.%20In:%20Obras%20escolhidas.%20Magia%20e%20T%C3%A9cnica,%20Arte%20e%20Pol%C3%ADtica,%20v.%201,%206%20ed.%20Trad.%20S%C3%A9rgio%20Paulo%20Rouanet.%20S%C3%A3o%20Paulo:%20Brasiliense,%201993.%20%20CAMARGO,%20M.%20H.%20As%20est%C3%A9ticas%20e%20suas%20defini%C3%A7%C3%B5es%20da%20arte.%20Revista%20Cient%C3%ADfica/FAP,%20%5bS.l.%5d,%20jun.,%20p.1-15,%202009.%20Dispon%C3%ADvel%20em:%20http:/periodicos.unespar.edu.br/index.php/%20revistacientifica/article/view/1593.%20Acesso%20em:%2010%20fev.%202022.%20%20GUATTARI,%20F.%20Caosmose.%20Rio%20de%20Janeiro:%20Ed.%2034,%201992.%20%20KANT,%20I.%20Cr%C3%ADtica%20da%20faculdade%20do%20ju%C3%ADzo.%20Trad.%20Val%C3%A9rio%20Rohden%20e%20Ant%C3%B4nio%20Marques.%202.%20ed.%20Rio%20de%20Janeiro:%20Forense%20Universit%C3%A1ria,%201995.%20%20KOCH,%20N.%20P.%20Software%20Engineering%20for%20Adaptive%20Hypermedia%20Systems:%20Reference%20Model,%20Modeling%20Techniques%20and%20Development%20Process.%20Munich.%20Thesis%20(doctor%20of%20the%20Natural%20Sciences%20at%20the%20Faculty%20for%20Mathematics%20and%20Computer%20Science),%20Ludwig%20Maximilians%20University%20Munich.%202000.%20Dispon%C3%ADvel%20em:%20http:qqwww.pst.informatik.unimuenchen.de/personen/kochn/thesis.html.%20Acesso%20em:%2010%20fev.%202022.%20%20LABORDE,%20A.%20A%20Mais%20Bella%20do%20Rio%20Grande:%20um%20estudo%20sobre%20as%20rela%C3%A7%C3%B5es%20de%20g%C3%AAnero%20no%20universo%20dos%20con</p><p>https://seriedesign.com.br/personalizacao-fator-decisivo/</p><p>https://www.aquare.la/qual-a-relacao-do-design-de-servicos-a-ux-e-a-industria-4-0/</p><p>https://www.aquare.la/qual-a-relacao-do-design-de-servicos-a-ux-e-a-industria-4-0/</p><p>https://www.gov.br/pt-br/noticias/transito-e-transportes/2021/05/brasil-registrou-mais-de-234-milhoes-de-acessos-moveis-em-2020</p><p>https://www.gov.br/pt-br/noticias/transito-e-transportes/2021/05/brasil-registrou-mais-de-234-milhoes-de-acessos-moveis-em-2020</p><p>https://semanaacademica.org.br/system/files/artigos/uma_analise_sobre_o_uso_do_inbound_marketing_como_estrategia_para_prospeccao_de_novos_clientes_nas_midias_sociais.pdf</p><p>https://semanaacademica.org.br/system/files/artigos/uma_analise_sobre_o_uso_do_inbound_marketing_como_estrategia_para_prospeccao_de_novos_clientes_nas_midias_sociais.pdf</p><p>https://semanaacademica.org.br/system/files/artigos/uma_analise_sobre_o_uso_do_inbound_marketing_como_estrategia_para_prospeccao_de_novos_clientes_nas_midias_sociais.pdf</p><p>https://brasil.uxdesign.cc/mobile-design-5-boas-pr%C3%A1ticas-para-desenhar-interfaces-e0bf40c6d454</p><p>https://brasil.uxdesign.cc/mobile-design-5-boas-pr%C3%A1ticas-para-desenhar-interfaces-e0bf40c6d454</p><p>em: http://www.citisystems.com.br/indústria-4-0/. Acesso em: 11 fev. 2022.</p><p>SOUZA, S. S. C. Mobile marketing e a internet das coisas. 2017. 14 f. Trabalho de</p><p>Conclusão de Curso (Especialização em Marketing Digital e Comércio Eletrônico) –</p><p>Universidade do Sul de Santa Catarina, Tubarão, 2017a. Disponível em:</p><p>http://www.riuni.unisul.br/handle/12345/4895. Acesso em: 15 fev. 2022</p><p>STEFANINI Group. A revolução da inteligência artificial - Infográfico. Disponível</p><p>em: https://stefanini.com/pt-br/trends/artigos/revolucao-da-inteligencia-artificial.</p><p>Acesso em: 11 fev. 2022.</p><p>WSITE Brasil. O que é funil de vendas. Disponível</p><p>em: https://www.wsitebrasil.com.br/blog/post/empreendedorismo/o-que-e-funil-de-</p><p>vendas/37. Acesso em: 19 fev. 2022.</p><p>Aula 4</p><p>AELA. Design e cursos. Halo effect e o impacto visual em UX Design. 2020.</p><p>Disponível em: https://aelaschool.com/designvisual/halo-effect-e-ux-design/> Acesso</p><p>em: 14 fev. 2022</p><p>FONTOURA, A. M. Vade-mécum de tipografia. Curitiba: Champagnat, 2004. 86p.</p><p>KULPA, C. A contribuição de um modelo de cores na usabilidade das interfaces</p><p>computacionais dos usuários de baixa visão. Universidade Federal do Rio Grande do</p><p>Sul, Programa de Pós-Graduação em Design. Porto Alegre, 2009.</p><p>MEDEIROS, D. P. Design de produto e processos de projetos com ênfase na</p><p>customização pós-produção. Dissertação de mestrado. PGDESIGN – UFRGS, Porto</p><p>Alegre, 2012.</p><p>NIELSEN, J. Projetando web sites. Rio de Janeiro: Campus, 2000.</p><p>PREECE, J.; ROGERS, Y.; SHARP, H. Design de interação: além da interação</p><p>humano-computador. Bookman: São Paulo, 2005.</p><p>PREVEDELLO, C. F. Design de interação e motivação nos projetos de interface</p><p>para objetos de aprendizagem para EaD. 2011. Dissertação (Mestrado em Design) -</p><p>Universidade Federal do Rio Grande do sul, Porto Alegre, 2011.</p><p>ROSSON, M.; CARROLL, J. Usability engineering: scenario-based development of</p><p>human-computer interaction. São Francisco: Morgan Kaufmann, 2002.</p><p>SILVA, C.; FERREIRA, S.; SACRAMENTO, C. Mobile Application Accessibility in</p><p>the Context of Visually Impaired Users [internet]. Association for Computing</p><p>Machinery New York NY United States; 2018. Disponível</p><p>em: https://dl.acm.org/doi/10.1145/3274192.3274224. Acesso em: 23 jan. 2021.</p><p>SILVA, W. P. S. Estética visual e experiência do usuário em interfaces humano-</p><p>computador: um estudo de caso de sistemas de gestão de atividades de ensino</p><p>(SiGAEs). 2017. 175 f. Dissertação (Mestrado em Design). Universidade Federal do</p><p>Maranhão, São Luís, 2017.</p><p>Ver anotações0</p><p>•</p><p>Design para mídias digitais interativas: o design de interfaces (UI)</p><p>http://www.citisystems.com.br/ind%C3%BAstria-4-0/</p>