Page 1


ERICK LIBERATO DOS SANTOS THUANY CAROLINE PAIXÃO GOMES VITÓRIA ALVES DA SILVA

REDESIGN DE WEBSITE Monografia apresentada ao programa de graduação em design da Universidade Nove de Julho, como requisito parcial para a obtenção do grau de tecnólogo em design gráfico. Prof. Doutor Ailton dos Santos Silva

SÃO PAULO 2018


SUMÁRIO RESUMO

CAPÍTULO III

PÁGINA 04

REDESIGN DA FUNDAÇÃO PÁGINA 22

ABSTRACT

CONCORRENTES FUNDAÇÃO OSCAR AMERICANO

PÁGINA 04

INTRODUÇÃO PÁGINA 05

PÁGINA 06

OBJETIVO GERAL OBJETIVO ESPECÍFICO

PÁGINA 06

PÁGINA 07

EXPLOSÃO TECNOLÓGICA PÁGINA 08 PÁGINA 10 PÁGINA 14

ARQUITETURA DA INFORMAÇÃO PÁGINA 15

PÁGINA 26 PÁGINA 27

FLUXOGRAMAS PÁGINA 28 PÁGINA 29 PÁGINA 29

CARD SORTING PÁGINA 29

WIREFRAMES PÁGINA 31

USABILIDADE

BAIXA FIDELIDADE ALTA FIDELIDADE

PÁGINA 16

ROTULAÇÃO

PÁGINA 31 PÁGINA 33

PERSONAS

PÁGINA 16

PÁGINA 35

DIREÇÃO DE ARTE

STYLE TILE

PÁGINA 16

PÁGINA 37

HIERARQUIA VISUAL PÁGINA 17

TENDÊNCIAS PÁGINA 19 PÁGINA 19 PÁGINA 19 PÁGINA 19

PRINCÍPIOS DA GESTALT PÁGINA 20

CENTRO CULTURAL FIESP MUSEU DA CASA BRASILEIRA

ATUAL REDESIGN

A FUNDAÇÃO

FLAT DESIGN MOBILE FIRST TIPOGRAFIA DESIGN RESPONSIVO

PÁGINA 25

PÁGINA 26

MÉTODOS

PÁGINA 19

FUNDAÇÃO RICARDO BRENNAD

CONCORRENTES INDIRETOS

PÁGINA 06

CAPÍTULO II

PÁGINA 22

PÁGINA 25

PÁGINA 05

CAPÍTULO I

PÁGINA 22

CONCORRENTE DIRETO

JUSTIFICATIVA OBJETIVOS

PÁGINA 21

CORES TIPOGRAFIA FLAT DESIGN RESPONSIVIDADE

PÁGINA 37 PÁGINA 37 PÁGINA 38 PÁGINA 38

VERSÃO FINAL DO REDESIGN PÁGINA 38

CONSIDERAÇÕES FINAIS PÁGINA 41

REFERÊNCIAS E IMAGENS PÁGINA 42


PÁGINA 04

RESUMO

ABSTRACT

Devido aos avanços tecnológicos tornou-se possível realizar a transmissão de dados e informações cada vez mais rápidas via web, transformando progressivamente a forma com que a sociedade se comunica. Com os surtos de tecnologia vivenciados no século XXI ocasionou-se uma amplitude de informes cada vez mais complexos e misturados, fazendo-se necessário desenvolver métodos para tornar essa disseminação de conteúdos mais precisa e eficaz, afim de eliminar a forma maldisposta de dados postos na internet.

Due to technological advances it has become possible to transmit data and information faster and faster via the web, gradually transforming the way society communicates. With the technological outbreaks experienced in the 21st century, an ever-increasing number of reports have become increasingly complex and mixed, making it necessary to develop methods to make this dissemination of content more precise and effective, in order to eliminate the ill-disposed form of data Internet.

Em meio a esse mundo digital amplo, capaz de receber, organizar, enviar e disseminar informações, tem-se por meio do profissional designer um aliado para solucionar e evitar más experiências durante a navegação de internautas. Este profissional, capacitado a exercer as áreas denominadas “design da informação e design de interfaces”, tem por premissa atuar sobre a comunicação usuário-máquina promovendo uma interação satisfatória e objetiva dentro de uma interface digital, ou seja, a navegação na web sem sombra de duvidas foi criada e vem sendo aperfeiçoada para permitir a absorção de dados e noções. Além disso, acaba promovendo uma ampla interatividade através de diversos elementos que a compõe.

In the midst of this broad digital world, capable of receiving, organizing, sending and disseminating information, we have, through the professional designer, an ally to solve and avoid bad experiences during Internet browsing. This professional, who is able to practice the areas called “information design and interfaces design”, has as a premise to act on the user-machine communication promoting a satisfactory and objective interaction within a digital interface, ie, shade-free web browsing of doubts has been created and has been perfected to allow the absorption of data and notions. In addition, it ends up promoting a wide interactivity through several elements that compose it.

Afim de sanar eventuais problemas que possam chegar a existir por conta da sobrecarga de conteúdos se vê a importância do designer e sua atuação no ramo digital, sendo desta forma o responsável por permitir uma excelente experiência com o novo mundo além dos limites físicos.

In order to remedy any problems that might arise due to the overload of contents, one can see the importance of the designer and his performance in the digital field, being thus responsible for allowing an excellent experience with the new world beyond the physical limits.

PALAVRAS-CHAVE:

KEYWORDS:

#DESIGN #REDESIGN #WEBSITE #INTERNET #USUÁRIO #USABILIDADE #NAVEGABILIDADE #INTERFACE

#DESIGN #REDESIGN #WEBSITE #INTERNET #USER #USABILITY #NAVEGABILITY #INTERFACE


PÁGINA 05

INTRODUÇÃO Segundo dados do IBGE, o Brasil durante o ano de 2017 evidenciou que 70,5% das casas brasileiras passaram a ter acesso a rede, formando o equivalente a 49,2 milhões de domicílios conectados à internet. Desta parcela da população com acesso ao mundo virtual, aproximadamente 69% das pessoas afirmam utilizarem internet via aparelho móvel, o que acarreta em uma constante interação com questões como usabilidade e navegabilidade. Com o crescente uso das tecnologias, é imprescindível que a interação humano-máquina esteja cada vez mais afiada, logo, o uso de técnicas que lidem com essa necessidade se torna uma obrigação. A usabilidade visa facilidade de uso do, nesse caso, website, seguindo uma filosofia de menor distância até o objetivo desejado, que faria com que o usuário chegasse à informação desejada sem muitos problemas. Já a navegabilidade vem para fazer o internauta se sentir “em casa”, fazendo com que ele saiba transitar nas diversas páginas e menus do site. Levando em consideração todos os fatores acima citados, viu-se a necessidade da realização de um redesign no endereço da “Fundação Maria Luísa e Oscar Americano”, já que a mesma se encontrava defasada. Este trabalho se constrói em três capítulos, apresentando no primeiro questões referentes a comunicação com auxílio da tecnologia e o compartilhamento de informações via web, que em meio a explosão tecnológica do século XXI trouxeram as necessidades de se apresentar dados cada vez mais claros e eficazes em websites, aplicativos e demais meios, para melhor compreensão dos usuários. Referenciando a importância de uma interface digital precisa e bem organizada, o capitulo I ainda aborda a escolha do website “Fundação Maria Luísa e Oscar Americano” para o projeto de redesign. Nele será apresentado com maior particularidade a fundação esco-

lhida, como o local se encontra no meio virtual antes das modificações que serão realizadas, explicação sobre porque o redesign se faz necessário para esse meio e como o usuário que utiliza a plataforma se beneficiará com as modificações programadas para o website. Em sequência, no intitulado capitulo II será explanado a importância do design frente a web, abordando conceitos como: usabilidade, navegabilidade, flat design, design responsivo, ergo design, arquitetura da informação e UX Design, utilizados de forma imprescindível para que o projeto se desenvolvesse da maneira mais adequada possível. Dando prosseguimento, no capitulo III, será demonstrado questões como as análises de concorrência ao qual o website se relaciona, testes de usuário realizados com a interface digital e demais conceitos que se associem diretamente ao redesign do projeto. Após a elucidação dos capítulos mencionados encontra-se também neste projeto as considerações finais e as referências bibliográficas, detalhando pontos relevantes para a finalização do projeto. Consequentemente, por meio dos fatos apresentados no decorrer desta introdução ocorrerá a realização deste estudo, afim de mostrar a interação usuário-máquina referentes a um processo de redesign de um website.


PÁGINA 06

JUSTIFICATIVA A escolha do tema constrói sua base na ideia de melhorar o acesso que os cidadãos possuem à cultura. Por intermédio de um website bem estruturado, procura-se atingir uma quantidade maior de pessoas que se interessem por arte. O redesign do website “Fundação Maria Luísa e Oscar Americano” se faz necessário, para inseri-lo no meio digital atual de forma mais atrativa e eficaz, ocasionando maior credibilidade a interface e consequentemente promovendo ainda mais o local físico. Ao fazer com que o usuário tenha melhor interação com a plataforma, devido a melhoria na navegação e acessibilidade dos conteúdos, o inserem a um reposicionamento promissor, capaz de atingir seu público alvo de forma mais precisa, além de torna-lo pertinente no quesito informativo.

OBJETIVOS

OBJETIVO GERAL Realizar o redesign do website Maria Luísa e Oscar Americano para melhorar a usabilidade dos usuários e adaptar suas características para que sejam condizentes com as mídias digitais atuais.

OBJETIVO ESPECÍFICO • Analisar a navegação e o comportamento do internauta. • Verificar a relação entre o usuário e o website. • Verificar as melhores maneiras de solucionar os problemas de interação com a interface. • Reconhecer as prioridades do usuário. • Desenvolver uma navegação sucinta.

MÉTODOS Uma série de etapas, serão desenvolvidas com o propósito de alcançar o objetivo por nós definido. São elas: • Pesquisa bibliográfica: Agrupar dados que servirão de base para análises e elaborações aprofundadas sobre o tema proposto, observando questões como usabilidade, navegabilidade, acessibilidade e identificar pontos fortes e fracos do

• • • •

website. Análise de concorrência: Avaliar quem são os concorrentes do website, apresentar o que os diferencia em relação ao site da fundação e proceder a partir destas pesquisas. Criação de personas: Definir com maior precisão as necessidades dos usuários do website por meio de uma descrição de público mais focada. Elucidar o problema: Definir, a princípio, os problemas apresentados nas páginas do site. Redigir pesquisa: Preparar pesquisa a ser mostrada no texto da monografia. Ponderar as soluções: Buscar a resolução hipotética dos problemas encontrados no website. Definir a solução: Após discutir as hipóteses, analisar a melhor escolha e aplicá-la. Checagem do resultado: Avaliar a situação após a implantação da solução escolhida e caso não se mostre satisfatória, deve-se voltar à etapa de “ponderação”. Fechamento: Explanar sobre as consequências das ações tomadas e sobre a absorção do conteúdo por meio do trabalho realizado, além de finalizar o conteúdo para monografia.


CAPÍTULO I EXPLOSÃO TECNOLÓGICA A FUNDAÇÃO


PÁGINA 08

EXPLOSÃO TECNOLÓGICA Entre o século XV e XVIII ocorria na Europa uma revolução comercial nomeada de “A primeira revolução Industrial”. Esse movimento se iniciou na Inglaterra e fez com a mecanização tomasse o lugar da manufatura, se estendendo desde o setor têxtil até a área metalúrgica por intermédio de invenções que transformaram o sistema de produção. Em meados da segunda metade do século XIX, surge a nomeada “Segunda Revolução Industrial” que aprimora e aperfeiçoa as características presentes na “Primeira Revolução”. O surgimento de um novo tipo de combustível, o petróleo, fez com que os motores, que antes eram alimentados com carvão, ganhassem uma nova potência que incrementou ainda mais a eficiência das máquinas para a indústria. Essa etapa da revolução, ocorrida entre 1850 e 1950, marcou esses anos com a procura de novas tecnologias que aumentassem o bem-estar do ser humano. Surgiram novos processos de fabricação, novas formas de se produzir energia elétrica, houve a evolução dos meios de transporte, o progresso da área química e médica, com a descoberta de novas substâncias e remédios, e principalmente a invenção dos meios de comunicação, como o telégrafo, o telefone, a televisão e até mesmo a criação do cinema. Ao mesmo tempo que a “Segunda Revolução” acontecia, irrompia uma guerra. Entre os anos de 1939 e 1945, um conflito de proporções mundiais envolveu vários países em um conflito pernicioso. A eclosão dessa guerra se deu por uma grande quantidade de motivos, desde o desfecho do Tratado de Versalhes, encarregado de responsabilizar a Alemanha por todos os danos causados na guerra, até os ideais do partido nazista fundado por Adolf Hitler. Em 1942, a Aliança do eixo, comumente conhecida como “O eixo”, formada por: Alemanha, Itália e Japão, começou a se enfraquecer e per-

Trabalhadores na fábrica durante a Primeira Revolução

der a guerra contra os “Aliados”, grupo formado pelo EUA, o Reino Unido e a União Soviética. A Segunda Guerra Mundial envolveu o mundo em terror e medo, mas apesar dessa sua faceta, grandes avanços tecnológicos foram feitos. Uma das invenções mais importantes foi o computador. No ano de 36, o primeiro projeto para essa máquina foi construído por Konrad Zuse (1910-1995), um engenheiro alemão. Nomeada de Z1, sua invenção era responsável por executar cálculos. Embora fosse inovador, o governo alemão não considerava que sua iniciativa seria de ajuda na guerra. O exército da Alemanha possuía uma vantagem sobre os Aliados: A Lorenz, um codificador que permitia à eles criptografar e transmitir mensagens via rádio. Essa máquina era uma peça chave de comunicação entre as altas patentes nazistas, chegando a ser uma fonte de contato com o próprio Hitler. Na Inglaterra, o primeiro ministro, Winston Churchill, aprovava uma iniciativa para a construção de um novo instrumento que pudesse se sobrepor em eficiência, comparado ao possuído por seus inimigos, com o intuito de decifrar o código morse que continha as informações que ajudariam os Aliados a vencer a guerra. A equipe formada por Alan Turing, Tommy Flowers, Bill Tutte, Max Newman e alguns cientistas poloneses foi responsável


PÁGINA 09 por construir o “BOMBE”, um decodificador mecânico que identificava o sinal protegido pelo padrão da “Enigma” e o quebrava para gerar a mensagem transmitida. Após uma série de acontecimentos históricos e a agilidade estabelecida pelo Plano Marshall, logo surgiu a “Terceira Revolução Industrial”. Na segunda metade do século XX, em torno de 1940-1950, houve no mundo a introdução de novas tecnologias nos processos de produção, principalmente em áreas como a robótica e a informática. A alta tecnologia alcançada nesse período permitir a criação de softwares e computadores, as transmissões de rádio e televisão e etc. Essa revolução técnico-cientifica-informacional proporcionou ao mundo uma conexão jamais vista na história. A integração econômica e cultural realizada por ela fez com que o conceito de globalização fosse estabelecido. Além de introduzir os países à mundialização, a Terceira Revolução também foi responsável por solidificar o sistema capitalista, expandir as multinacionais, descentralizar as indústrias e flexibilizar o trabalho.

Modernização das máquinas durante a Terceira Revolução

Durante esse período de revolvimento, o mundo passava por mais uma situação de conflitos armados, a Guerra Fria. Entre os anos de 1945 a 1991, os antigos aliados de guerra, Estados Unidos e União Soviética, se tornaram inimigos devido às diferenças em seus sistemas econômicos, se segregando em: a América capitalista e URSS comunista. O país norte americano temia um ataque re-

pentino da atual Rússia, então resolveu criar, em 1969, um sistema de compartilhamento de informações nomeado primeiramente de ARPANET (Agência de Pesquisas em Projetos Avançados). Utilizando um esquema complexo de ligações, a ARPANET interligava as bases militares aos departamentos de pesquisa e vice-versa. Sua estrutura foi posicionada embaixo da terra, tornando esse sistema comunicativo quase indestrutível. Em 1980, a rede começou a tomar maiores proporções, iniciando sua transição de rede privada para uma rede compartilhada. Com a ajuda de um novo protocolo aberto, o TCP/IP, assim houve a possibilidade de interligar equipamentos, inicialmente, em um mesmo espaço. Cerca de dez anos depois, no início dos anos 90, Tim Berners-Lee desenvolveu a WWW (World Wide Web ou Rede Mundial de Computadores), também conhecida como Internet. Ao mesmo tempo as empresas privadas começaram a ter acesso à essa nova tecnologia, começando a fornecer o serviço para os cidadãos. A década de 90 foi marcada como o ano da evolução tecnológica. Os mainframes, computadores com grandes proporções, deram lugar aos Personal Computers (PC) ou Computadores pessoais, versões de pequeno porte e baixo custo voltados ao uso pessoal; Os celulares se tornaram populares, embora tivessem uma bateria de curta duração; O Windows, sistema operacional, foi lançado e facilitou o uso do computador; Os LP’s foram substituídos pelos CD’s e ao mesmo tempo as formas de se reproduzir sons iam se aprimorando: surgiram o discman, as caixas amplificadoras, os rádios para carros e etc. As mudanças continuaram acontecendo conforme os anos foram passando, as tecnologias antes sutilmente limitadas aos detentores de uma maior condição financeira, gradualmente se transformaram e se tornaram acessíveis. Essa popularização foi nomeada de “Revolução Digital”, ou seja, o mundo foi deixando de ser analógico e começou a se tornar digital. A tecnologia não para e continua se desenvolvendo cada vez mais e


PÁGINA 10 mais rápido. Ela já mudou o modo como as pessoas interagem com o mundo e com os outros. A “Quarta Revolução Industrial” surge como um conceito que reafirma a atualidade da era digital. As três primeiras grandes revoluções surgem como mudanças profundas na sociedade. A característica principal da “Primeira” seria o vapor, a da “Segunda” é a eletricidade, a da “Terceira” é a computação e da “Quarta” seria a “Inteligência”.

“Uma revolução industrial é caracterizada pelo aparecimento de novas tecnologias e novas maneiras de perceber o mundo que impulsionam uma mudança profunda na economia e na estrutura da sociedade.”

(SCHWAB, KLAUS 2016) O Dr. Klaus (2016), fundador do Fórum Econômico Mundial (“WEF”) e autor do livro “The Fourth Industrial Revolution”, afirma que a Quarta Revolução “Começou na virada deste século e teve como fundamento a revolução digital” e “É caracterizada por uma Internet muito mais móvel e global, por sensores menores e mais poderosos e por inteligência artificial e machine learning.” A Revolução Digital e a Quarta Revolução Industrial se diferenciam nos quesitos de velocidade, alcance e impacto. A característica “Inteligência” se dá principalmente pelo conceito de estar conectado. As tecnologias nos ajudam a construir máquinas autônomas, melhorar análises e investigações, sejam médicas ou policiais, por exemplo, nos ajudam a nos comunicar entre nós mesmos ou com inteligências artificiais, como assistentes virtuais, nos ajudam a modificar até mesmo códigos genéticos.

A FUNDAÇÃO Sendo parte integrante de absoluta importância para a realização do projeto, a FUNDAÇÃO MARIA LUISA E OSCAR AMERICANO requer uma acurada descrição, que venha mostrar sua relevância à comunidade de apreciadores de arte, design, arquitetura e cultura no geral, expondo a magnitude de uma área dedicada ao lazer e ao ganho de aprendizagem. Além disso, a apresentação do ambiente elucida como seu website, espaço que comporta todas as informações a respeito da sede física e alvo do redesign de aprimoramento que se é explanado no decorrer deste trabalho, possui o importante papel de divulgar o local através do mundo digital, que nos dias atuais, em meio a explosão tecnológica, se tornou o meio que atinge a população de maneira mais direta.

Jardim interno da Fundação Maria Luísa e Oscar Americano


PÁGINA 11

Ou seja, a descrição do recinto se faz necessária para aclarar a base que sustenta o website alvo de mudanças na interface. Ainda existente nos dias atuais e em pleno funcionamento, a fundação localizava na Avenida Morumbi, número 4077, zona sul de São Paulo, teve sua instituição no ano de 1974, pelo engenheiro e empresário Oscar Americano, logo após o falecimento de sua esposa, Maria Luisa Ferraz Americano. De acordo com, Dolce Morumbi (2013), o local que outrora pertencia ao casal já falecido, compõe uma casa de arquitetura modernista, farta em coleções de obras de arte e um considerável parque com aproximadamente 75 mil metros quadrados cercado de mata atlântica, que passaram a se tornar nos dias presentes um ambiente destinado à população. O espaço comporta artefatos, escrituras e até mesmo preserva algumas relíquias ligadas a natureza, que se relacionam a história do Brasil. Além disso, oferece aulas, concertos, visitas monitoradas e outras mais atividades que promovem aos visitantes uma reflexão temporal da história do país, preservando as memorias culturais da sociedade e viabilizando uma ligação com o passado. A casa que se encontra no recinto da fundação, projetada pelo arquiteto Oswaldo Arthur Bratke, é composta por um significativo acervo formado por pinturas que constam ser do século XVII, juntamente a mobiliários, pratarias, porcelanas e tapeçarias do século XVIII. (ÁREAS VERDES DAS CIDADES, 2013). Desde a data de instituição da fundação até alguns anos precedentes, que possibilitaram a visitação do ambiente, fizeram com que o local e seu acervo, passassem por adaptações, afim de proporcionar uma melhor experiencia de ida até a região.

Segundo Fundação Maria Luisa e Oscar Americano (2016), inicialmente apenas objetos pertencentes à família Americano eram usados como acervo, toda via, ao longo dos anos foi-se adquirindo novos elementos, de distintos lugares e épocas, o que serviram para criar o conjunto de posses atual. Três distintos segmentos constituem os bens da fundação, sendo apresentados aos visitantes que frequentarem o local. São os chamados, Brasil colônia, que se forma por pinturas do século XVII, incluindo obras de Frans Post e por objetos do século XVIII; Brasil império, que reúne retratos feitos a óleo e objetos da época; e mestres do século XX, constituídos por meio de obras de artistas brasileiros consideráveis, desde Candido Portinari à Di Cavalcanti. (FUNDAÇÃO MARIA LUISA E OSCAR AMERICANO, 2016). Através destas divisões, os visitantes observam preciosidades de diferentes momentos da história brasileira. Todos esses recursos que compõem o espaço físico e concreto da fundação acabam por promover aos visitantes uma experiência de ligação histórica valiosa e de extrema relevância a vida da sociedade. Além da casa, a fundação contempla o espaço dedicado ao parque, sendo possível analisar uma vegetação composta por árvores como o pau-brasil, jacarandás, sibipirunas, pés de café e muitas outras variedades de flora que retratam o imenso patrimônio natural característico do Brasil. Essa riqueza em natureza que o local possui se deve em partes ao próprio Oscar Americano, o qual em seus vários anos como proprietário do lugar priorizou conservar o ambiente, tendo foco em respeitar o meio natural que o cercava. Ademais, a área verde também contou com o paisagismo do agrônomo Otávio Teixeira Mendes, responsável por arquitetar e implementar a disposição e organização do espaço. Hoje em dia, o parque se tornou uma das mais importantes reservas ecológicas da cidade de


PÁGINA 12

Área de eventos da Fundação Maria Luísa e Oscar Americano

São Paulo, sendo capaz de disponibilizar aos visitantes um ambiente confortável para estudar, passear e se divertir em sua vasta atmosfera pacífica e revigorante. Junto as visitas ao parque, a fundação também promove uma ação educativa, que possibilita a conservação dos ambientes do recinto e o envolvimento com escolas e outras instituições, mantendo o local frequentado e ao mesmo tempo resguardado. Além disso, realiza eventos sociais e corporativos em uma estrutura com mais de 300 metros quadrados e possibilita ao público, reservar um salão de chá para lazer e até mesmo participar de concertos que ocorrem no auditório do local. Isso tudo acaba por promover a união da arte, da paisagem e da música clássica erudita, tudo isso, afim de proporcionar uma experiência completa em entretenimento a todos que se envolverem com o ambiente. Sem dúvidas, a fundação Maria Luisa e Oscar Americano é um espaço completo para a capital paulistana, abrigando em um só lugar o rico e diversificado acervo brasileiro, comportando eventos de interesse ao público e contendo um parque de vegetação exuberante, que atrai consigo uma surpreendente fauna. Tudo isso acessível a qualquer público, uma vez que prove de adequados meios de acessibilidade para deficientes físicos e até mesmo fornece estacionamento com serviços de valet para o conforto do visitante (VEJA, São Paulo, 2015).

Devido a amplitude de atrações que se contemplam no ambiente, capaz de deixar uma grande quantidade de pessoas imersas em um mundo incrivelmente vasto de informações, atividades e conforto, fazia-se necessário divulgar esse local para além de seu espaço físico, afim de alcançar os mais distintos ramos e interesses humanos, ligados a áreas como biologia, história, artes plásticas e demais. Para que isso se tornasse possível, o uso da tecnologia presente na vida de milhões de pessoas e indispensável nos tempos presentes, se fez importante, atuando como o instrumento chave para a propagação das informações do local, e por meio da criação de um website, localizado em http://www.funcacaooscaramericano.org.br procurou-se relacionar o encantador local físico a novos meios de comunicação (no campo digital). Todavia, no que se refere a disponibilidade de todo o conteúdo da fundação sob um website de sua responsabilidade, o qual teria em foco, atuar como um instrumento capaz de dispersar as amplas informações por meio do mundo da internet, tornou-se defasado com o passar do tempo, adquirindo uma má organização em relação aos dados e materiais expostos, prejudicando assim o despertar de interesse de possíveis novos visitantes ao local e acabando por tirar a credibilidade da fundação. Isso se deve ao fato de suas páginas serem falhas, apresentando erros que datam desde a formatação de textos até a exorbitante quantidade de fotos, o que acabam atrapalhando a experiência do internauta na plataforma.


PÁGINA 13 Em um mundo em que a informação se vê tão presente dentro das comunidades via internet e que as redes digitais cumprem o papel de facilitar a vida das pessoas, promovendo interatividade e compreensão desde os primeiros cliques, o presente website não cumpre efetivamente seu papel, deixando assim de ser o meio que auxiliaria a atrair visitantes. Por meios destes fatos, o redesign do mesmo tornou-se de total necessidade, pois, o melhoramento da plataforma trará como consequência em um despertar de fascínio e simpatia à população, a qual nos dias atuais se vê à mercê da tecnologia como aliada para despertar curiosidade e vir a conhecer locais até então desconhecidos. Tal responsabilidade de modificar um website para se adequar ao atual mundo da web, foi passado à equipe de designers CODE 3, que se fez encarregada por aperfeiçoar a interface, inserindo-a aos requisitos padrões que regem a navegação nos dias presentes, ou seja, a equipe de designers se disponibilizou para alterar toda arquitetura de informação e design da interface que compõem o atual conjunto de páginas da fundação, com intensão de lapidar o conteúdo que a integra. Através do aprimoramento do website, se tornará possível apresentar uma mais sensata e objetiva divulgação da fundação, colocando-a em um patamar que desperte interesse e alcance positivamente uma maior quantidade de visitantes, fazendo com que os mesmos se sintam integrados aos assuntos que dizem a respeito ao local. Uma vez que o objetivo de um website de divulgação de história e informações, seja conseguir transmitir a seus usuários precisão e maior praticidade quando estiver em uso, faz com que, o redesign da plataforma da fundação Maria Luisa e Oscar Americano passe a ter como intuito promover esta praticidade que é necessária ao meio, fazendo com que tudo seja transmitido em seus conformes. Desse modo, as pessoas que se beneficiam da interface classificadas (segundo análi-

ses, construções de personas e pesquisas relacionadas a visitas da fundação), como jovens e adultos, interessados em questões ligadas à arte e cultura brasileira, terão uma nova e melhorada experiência de navegação, podendo se programar a respeito de idas ao local, assim como observar os conteúdos presentes no espaço físico através do website com maior precisão e interatividade, promovendo um aumento exponencial no contato entre público e fundação. Em relação a seus concorrentes, classificados como museus, institutos, centros culturais e até mesmo outras fundações que serão analisadas e discorridas com maior ênfase nos próximos capítulos deste projeto, passam a ter um oponente melhor preparado e equivalente para disputar lugares de destaque no mercado de entretenimento cultural. Já que a concorrência com esses websites de maior prestigio, proprietários de plataformas digitais bem formuladas e de interesse coletivo, faz com que o aprimoramento do website da fundação o inclua no mesmo patamar de uma série de sites bem influentes. Desta forma, o redesign do website da fundação além de promover sua inserção de maneira mais apropriada no mundo dominado pela tecnologia, presente na vida de grande parte da população, acaba por trazer maior visibilidade ao ambiente, explicitando sua história e importância junto a cultura brasileira, além de promover maior confiabilidade ao ambiente através de uma interface que transmita segurança, precisão e facilidade de navegação ao usuário.


CAPÍTULO II ARQUITETURA DA INFORMAÇÃO USABILIDADE ROTULAÇÃO DIREÇÃO DE ARTE HIERARQUIA VISUAL DESIGN APLICADO À WEB ERGONOMIA TENDÊNCIAS PRINCÍPIOS DA GESTALT


PÁGINA 15 ARQUITETURA DA INFORMAÇÃO Para que um website tenha total funcionalidade e praticidade de acesso há quem dele se utilizar é necessário mais do que simplesmente dispor os conteúdos em sua interface intentando uma disposição visual atraente aos olhares dos usuários. É preciso que os itens que compõem essas plataformas sejam estruturados com precisão, para que assim, se tornem transitáveis durante o processo de navegação. Está constatação exemplifica a necessidade da utilização dos fundamentos propostos pela arquitetura da informação, meio ao qual o designer recorre para ser capaz de organizar dados, elementos e fluxos em um ambiente virtual, promovendo ao internauta a capacidade de chegar com facilidade onde desejar. Desta forma, tem-se que:

“Arquitetura da informação é a prática de decidir como organizar as partes de alguma coisa, como websites e aplicativos, de modo a torná-las mais compreensíveis.” (INFORMATION ARCHITECTURE INSTITUTE, 2018) Em outras palavras, a arquitetura da informação viabiliza o melhor caminho para estruturação consistente de conteúdo dentro de uma página virtual. Por meio dela, torna-se possível facilitar a utilização de uma plataforma, contribuir para uma melhor captação dos elementos presentes na tela e até mesmo evitar más interpretações em questão das temáticas do website, satisfazendo assim as necessidades do usuário final. Diversos são os elementos que permitem que a arquitetura da informação venha a se tornar um caminho utilizável para adquirir maior precisão e objetividade em projetos web, entre eles, um dos mais analisados durante pesquisas sobre o tema corresponde a interação entre três pilares que sustentam esse ponderoso meio. São denominados segundo Rosanfeld,L., Morville, P (2006) como: Usuário, meio o qual evidencia as necessidades e comportamentos que um internauta manifesta em uma plataforma; Contexto, sendo a forma com que as coisas organizadas adquiram especificidades precisas; e Conteúdo, que se compõem por documentos e demais dados que venham a estar no meio digital. Esse conjunto de três pilares, podendo ser nomeado também como ecologia da informação, representa um ambiente interdependente o qual desenvolve um conteúdo com atenção voltada ao usuário e ao contexto em que ele se encontra. Eles possibilitam a formulação de uma estrutura voltada a suprir as necessidades do utente das redes digitais, diminuindo seu tempo de procura por determinados materiais e até mesmo encolhendo caminhos para que o mesmo consiga encontrar o que procura em meio as páginas web. Além do equilíbrio entre os três pilares que possibilitam o emprego da arquitetura da informação outros termos são inseridos nesse meio, como é o caso de wireframes (responsáveis por transmitir uma representação da disposição dos dados e elementos que vão compor o produto final), taxonomia (que envolve a utilização de nomes para agrupar e descrever os conteúdos), hierarquia (a qual torna possível aos usuários compreenderem em qual nível estão em relação a aplicação e como o conteúdo das telas se relacionam uns com os outros) e inventários de conteúdo (que permitem ter uma visão geral dos conteúdos que um projeto virá a ter). Esses elementos auxiliam na estruturação das informações, tendo desta forma, importante papel nos trabalhos do designer na construção de ambientes virtuais, favorecendo a navegação e descomplicando buscas, tornando dados complexos ou até mesmo desorganizados, mais claros para o entendimento dos usuários. (MARKETING DE CONTEUDO, 2018)


PÁGINA 16 USABILIDADE Estando relacionado de forma direta com a arquitetura da informação o termo usabilidade pode ser definido, de acordo com Pedro Dias (2018), como: um meio que enfatiza um conjunto de princípios e boas práticas que avaliam como os internautas aprendem e usam um produto para atingir seus desejos, sendo avaliado também a satisfação dos usuários durante esse processo. De acordo com Jakob Nielsen (2012), a usabilidade é analisada por meio de cinco componentes, sendo eles: A aprendizagem, que estuda o quão simples é para os usuários a relação de tarefas básicas na primeira vez que encontraram com o design; Eficiência, relatando com que rapidez conseguem realizar as tarefas; Reminiscência: facilidade que se estabelece; Erros, contando quantos equívocos o usuário cometeu ou encontrou, quais os mais graves e como superar esses problemas; E por fim, satisfação: quão agradável é usar o design da plataforma em questão. Nos projetos digitais esse método é utilizado pelos designers para fazer com que o usuário obtenha uma experiência agradável durante sua navegação, sendo assim um meio importante durante para o desenvolvimento de trabalhos do profissional, uma vez que, quanto mais objetivo e prático for seu trabalho, menores serão as perdas de interesse pelos usuários, que estarão por sua vez satisfeitos.

ROTULAÇÃO A rotulação é um recurso que consiste em empregar palavras-chave para que o usuário, em interação com uma plataforma, venha a alcançar seus propósitos. Nesse meio as palavras acabam por representar os conceitos abarcados na estrutura de todo o website, chamando a atenção devido a presença de links. Ou seja, rótulos navegacionais (ou rotulação) são um conjunto de “gatilhos” que auxiliam os visitantes de um website quando estão procurando opções de navegação. (AVELLAR E DUARTE, 2017).

Para que o emprego desse termo seja bem-sucedido é necessário que o designer procure acatar algumas regras, como: procurar falar a língua do usuário; Evitar a utilização de jargões; Evitar terminologias muito técnicas para não confundir o indivíduo que não detém o conhecimento de programação avançada, além de verificar o tamanho e a possibilidade que as fontes terão ao ser traduzidas para que não haja complicações na hora da interpretação do conteúdo.(KALBACK, 2006). A rotulação navegacional se faz importante pois através da mesma torna-se viável a passagem de confiança de navegabilidade, evitando as frustrações de não encontrar precisamente o que se queira, ou até mesmo passar por várias páginas para alcançar um elemento em específico. Os rótulos devem ser bem utilizados para que os internautas não tragam consigo significados ambíguos deixando as pessoas confusas, sem saber ao certo onde clicar. Se o usuário de um website faz um caminho errado devido um rótulo mal projetado, certamente desiste de interagir com a plataforma. (KALBACK, 2006).

DIREÇÃO DE ARTE Em sequência a organização e estruturação dos conteúdos propostos pela arquitetura da informação, surge a direção de arte, parte da criação de um website a qual coloca em foco o tratamento do layout da plataforma de maneira altamente detalhada e cuidadosa. Nessa etapa, cada elemento a ser colocado no website é analisado e refinado, afim de garantir equilíbrio visual e agradar ao público alvo. E para que isso aconteça, o profissional passa a trabalhar com princípios de alinhamento, balanço, contraste, proximidade, repetição, consistência e demais, para que assim se torne possível estabelecer um planejamento sobre seu trabalho, definir graus de importância de conteúdo, pro-


PÁGINA 17 porções a serem usadas, detalhes relevantes e até mesmo algumas restrições que serão vistas durante o percurso, ou seja, antes mesmo de iniciar a disposição do layout são definidos estilos visuais para formar uma linguagem clara e consistente. (BERNARDES, 2015).

HIERARQUIA VISUAL Hierarquia visual é um elemento de total importância dentro da área de design, responsável por organizar e priorizar conteúdos para transmitir mensagens a um público de forma eficaz e bem estruturada. Ou seja, é um dos princípios chaves que possibilita distribuir informações segundo uma ordenação bem planejada. Segundo Vasconcelos (2015), esse meio se divide em seis partes afim de ordenar da melhor forma possível conteúdos e demais dados. Sendo eles: 1. A visualização das páginas: que procura sempre estabelecer uma leitura precisa do conteúdo, levando em consideração questões culturais, como a leitura de cima para baixo e da esquerda para direita, a até mesmo, pesquisas para definir o padrão de visualização dos indivíduos, o qual é formado por dois tipos (a visualização em f, aplicada a páginas pesadas com textos longos e a visualização em z, aplicadas em páginas com anúncios ou sites onde as informações não são necessariamente vistas em blocos de parágrafos). 2. Tamanhos: que auxiliam a dar maior impacto visual à mensagem que se quer transmitir, tornando-as mais significativas. 3. Espaços e Texturas: os quais bem combinados promovem a atenção do público em determinada pagina, reduzem a poluição visual e deixam o conteúdo mais visível. 4. Cores: que despertam a atenção do usuário de acordo com a tonalidade usada. 5. Direção: a qual analisa posições estratégicas para se transmitir o que deseja. 6. Tipografias: onde são definidos estilos de fontes, atribuição de peso gráfico, regulagem de larguras e demais.

DESIGN APLICADO À WEB Seja dentro ou fora dos computadores, o design existe e é extremamente importante para a realização de projetos com excelência. O web design, uma de suas vertentes, é focado na criação de websites e documentos que possam ser disponibilizados na rede mundial de computadores. Essa área do design costuma ser multidisciplinar, já que que envolve uma série de conhecimentos, desde arquitetura da informação, passando por Gestalt, indo até acessibilidade, até chegar, por exemplo, e principalmente, em programação. O web design tem como função conduzir os usuários facilmente até as informações desejadas, de maneira agradável e eficiente, através de competências técnicas e artísticas, procurando potencializar determinado tipo de conteúdo e exigências de um público-alvo. Entretanto esta é uma definição bastante simples e limitada dentre as inúmeras atribuições da profissão web designer. Uma página web deve conter um assunto relevante, de tal forma que agregue valor e possa motivar os usuários/utilizadores a prosseguirem navegando de modo a atender suas necessidades com clareza e exatidão. Visando que é responsabilidade do profissional tornar o site mais acolhedor e satisfatório para quem visita, dando liberdade e autonomia para que o mesmo possa aceder por todo o site, remetendo toda a praticidade e usabilidade, levando-o a encontrar o que está procurando, seja um produto para comprar, uma notícia, um texto acadêmico, entre outros.


PÁGINA 18 Cada usuário terá sua própria experiência, a mesma será influenciada por toda organização dentro do site. Apresentar consistência e facilidade são princípios essenciais. O usuário deve sempre se sentir o mais seguro e confortável possível em qualquer página ou situação.

ERGONOMIA A ergonomia (termo derivado do grego “ergo”, cujo significado é trabalho, e “nomos”, que significa leis.) diz respeito à relação homem-máquina-ambiente, ou seja, essa ciência se responsabiliza por ajudar os seres humanos à se adaptar a diferentes tipos de situações, com diferentes tipos de equipamentos. Segundo Sanders e Mccornick (1993) e Helander (1997), a ergonomia contemporânea descobre e aplica informações sobre o comportamento humano, habilidades, limitações e outras características do design de ferramentas, máquinas, sistemas, tarefas, trabalhos e ambientes para um uso produtivo, seguro, confortável e efetivo pelo ser humano. Com o crescimento desse conceito, a Associação Internacional de Ergonomia então a dividiu em três especializações distintas: a Física, responsável pela anatomia humana; a Cognitiva, que estuda os processos mentais; e a Organizacional, que ocupa-se da melhoria de sistemas sócio-técnicos, processos e estruturas organizacionais. A ergonomia cognitiva diz respeito à percepção, memoria, raciocínio, etc. Essa especialização se relaciona fortemente com o web design, já que durante o desenvolvimento de um website e durante sua utilização deve-se considerar majoritariamente a experiência que o usuário terá com a página. A memória do ser humano, diretamente relacionada à ergonomia cognitiva, é dividida em três setores, sendo eles de curto prazo, longo prazo e a memória sensorial. A memória operacional, ou de curto prazo, é importante para que o internauta entenda e aprenda rapidamente a utilizar o website, pois é essencial que ele encontre o que procura sem ter que se exaurir.

Alguns processos da criação se relacionando com a ergonomia cognitiva, seriam considerar os testes realizados com usuários experientes e leigos, anotando e corrigindo os erros identificados por eles, perceber a necessidade de mudança e focar em sua melhoria, desenvolvendo quantas versões forem necessários até que o website satisfaça seu utilizador. No quesito design, além de se utilizar o conceito cognitivo, a ergonomia pode ser baseada em: estética, interface do usuário e qualidade do conteúdo, ou em outras palavras, design, usabilidade e utilidade. As duas últimas características consistem em tanto diminuir o cansaço do usuário durante a utilização, quanto oferecer segurança ao mesmo para que ele possa escolher soluções sem grandes dificuldades. Essas tarefas podem ser de complicada execução, mas para que elas sejam executadas com primor, deve-se haver alguns estudos de público antes de o projeto ser iniciado, já que a maior dificuldade está em conseguir agradar um grande público. Esses estudos devem contemplar principalmente informações como: O nível de conhecimento em informática dos usuários, os dispositivos com os quais o website poderá ser acessado, quais são os comportamentos ou hábitos da pessoa, sua idade e quais informações eles estão buscando. Outros critérios também podem ser abordados, como: A sobriedade, que deve garantir a boa organização de forma simples e sem sobrecarregamento; A legibilidade que deve garantir a clareza na escrita, principalmente, a estrutura, nivelando os diferentes tipos de informações textuais; A fun-


PÁGINA 19

cionalidade, que diz respeito à localização, facilidade do usuário se situar a qualquer momento, à liberdade de navegação, que seria a possibilidade do usuário ir e vir sem ter que recorrer à página inicial, à homogeneidade, que garante que os elementos utilizados estejam no mesmo lugar, garantindo consistência; à velocidade de carregamento de páginas, imagens ou avisos; à interatividade; à acessibilidade; à adaptabilidade; Entre outros.

TENDÊNCIAS FLAT DESIGN Sua principal característica é ser clean, não dependendo de grande quantidade de efeitos ou elementos que possam criar alguma poluição visual. A ideia principal é não usar elementos que denotem tridimensionalidade, fazendo com que o site possua, não apenas cores, mas também, componentes chapados. A simplicidade pode ser notada ao se observar os elementos, como botões e ícones, que se caracterizam por formas simples, como retângulos, quadrados ou círculos; A tipografia é utilizada como um chamariz, possuindo fontes correspondentes ao layout, mas que podem se utilizar da ousadia; As cores são um ponto forte nesse tipo de design, já que complementam a ideia do chapado.

TIPOGRAFIA Esse recurso surge para inserir personalidade ao layout. Letras grandes podem ser utilizadas, já que os dispositivos se adaptaram com o passar dos anos. Letras grandes e que chamem bastante atenção se consolidaram como uma forte tendência, além disso, combiná-los com imagens e adicionar cores também se revelam um recurso que permite ao website uma aparência mais criativa e atrativa. Junto à essa tendência, podemos citar também que o evento não ocorre apenas nos cabeçalhos, mas também nos títulos, fazendo com que o usuário tenha a atenção capturada facilmente, o localizando e não atrapalhando sua navegação em nenhum quesito.

DESIGN RESPONSIVO MOBILE FIRST Com o passar dos anos, a utilização de smartphones, tablets ou outros dispositivos de pequeno porte cresceu de maneira inimaginável. O uso de websites em desktop foi superado pela navegação móvel, logo, é necessário atender as necessidades dos usuários que mudaram com o tempo. Os layouts mobile são pensados antes dos layout desktop, devido à essa grande demanda. “Se você criar o mobile first, criará uma noção sobre o que é mais importante, então poderá aplicar o mesmo raciocínio à versão desktop/ laptop do site.” (MARCOTTE, ETHAN, 2010)

O web design responsivo é uma técnica de estruturação, ela prevê que o site se adapte de acordo com o dispositivo no qual ele é visualizado, seu conteúdo deve ser bem estruturado e coeso mesmo em dispositivos pequenos como celulares, por exemplo. Como citado anteriormente, o uso de celulares no dia a dia das pessoas tem crescido muito desde sua criação. Pesquisas do IBGE (2016) comprovam que 92,1% dos brasileiros acessam a internet por intermédio do celular, logo, a necessidade de programas, websites, aplicativos que sejam eficientes nessa plataforma deixa de ser apenas um bônus para se tornarem uma obrigação. Segundo o Google Think Insights (2015), se um usuário acessar um website por um smartphone ou outro dispositivo que forneça ao


PÁGINA 20 mesmo uma versão mobile, e não encontrar o que procura, há 61% de chances de ele desistir e partir para outro site. Enquanto se ele se sentir satisfeito, a chance de ele aderir à sua página é de 67%. Uma informação também relacionada à Google é a de que websites que possuem responsividade, principalmente quando sua busca é feita por mobile, tem preferência ao aparecem os resultados da pesquisa, assim, garantindo maior visibilidade ao website. O design responsivo pode ser resumido em 6 princípios, sendo eles: 1. O fluxo: Diz respeito ao fenômeno de diminuição do site desktop para o mobile, onde tudo deve seguir um caminho mais vertical, tendo os conteúdos “empurrados” para se alinharem corretamente no dispositivo; 2. As unidades relativas: São feitas na programação baseando as especificações do código em porcentagem e não em pixels, já que o “%” é proporcional ao tamanho da tela do equipamento utilizado; 3. Os pontos de interrupção: Fazem o layout se dividir em pontos pré-programados; 4. Valores mínimos e máximos: Auxiliam na ocupação dos elementos na largura total da tela; 5. Os elementos agrupados: Facilitam no momento das quebras de dispositivo para dispositivo, já que com os elementos soltos, eles apenas ficariam bagunçados na tela a cada mudança. 6. Mobile first.

PRÍNCIPIOS DA GESTALT Teoria fundada por Max Wertheimer, a Gestalt visa a orientação, compreensão e interpretação da visão humana e da forma como ela é compreendida. Segundo essa proposição, ao observarmos um objeto, ao primeiro momento vemos o seu todo, antes de notar suas partes. A Gestalt goza de oito princípios fundamentais, sendo alguns deles: A pregnância, que se apresenta como o nível de facilidade e rapidez com a qual algo é interpretado; A lei da segregação imprime a capacidade do nosso cérebro de diferenciar ou evidenciar objetos, ainda que sobrepostos, sendo eles pontos, linhas, texturas, etc. Esse tipo de contraste no design se faz extremamente importante para uma boa leitura e entendimento do público; A lei da unidade, responsável por compilar uma série de elementos com características individuais de forma harmoniosa. Essa lei de faz essencial por seu teor de organização e disposição de elementos. Com essa série de princípios, podemos notar algumas sensações sendo reproduzidas por nós, como a harmonia, sensação de simetria, equilíbrio, balanceio, ou a desordem, que mesmo sendo o contrário do conceito harmonioso, também chama a atenção do observador, ou a lembrança, que designa que mesmo que o observador nunca tenha visto a obra, ele ainda tem sensações de memória ou reconhecimento, entre outras muitas.


CAPÍTULO III REDESIGN DA FUNDAÇÃO CONCORRENTE DIRETO CONCORRENTES INDIRETOS FLUXOGRAMA DO WEBSITE CARD SORTING WIREFRAMES PERSONAS STYLE TILE VERSÃO FINAL DO REDESIGN


PÁGINA 22 REDESIGN DA FUNDAÇÃO ANÁLISE DE WEBSITES CONCORRENTES Para o melhor redesign do website “Maria Luisa e Oscar Americano”, proposto à equipe CODE 3, fez-se necessária a análise inicial do mesmo e de seus concorrentes a fim de obter informações necessárias para inicializar o projeto de modificação da interface digital e da organização estrutural das informações contidas no website. O presente relatório tem como intuito registrar as verificações e conclusões obtidas, relatando elementos como: os pontos fracos e fortes destes conjuntos de páginas, a funcionalidade das interfaces, o público-alvo atingido e outros.

FUNDAÇÃO OSCAR AMERICANO A pesquisa exploratória realizada pela equipe se iniciou com verificações do próprio site da fundação, o que tornou possível concluir em primeiro momento que seu objetivo não é fácil de se compreender logo na página principal, já que no primeiro contato a mesma passa a sensação de que o local é uma casa de repouso ou uma academia de ioga, por conta da sobrecarga de fotos expostas de uma casa, em um ambiente calmo e pacífico, desprovido de mais informações, o que acaba levando o usuário a prestar atenção apenas nas imagens e tirar conclusões precipitadas. Todavia, apesar do grande problema visual no início do site, o conteúdo total disponibilizado nas demais páginas condiz com a proposta que a fundação procura transmitir a seus visitantes, mostrando-lhes alguns conteúdos bem informativos. Conforme a sequencialidade da análise do website, tendo em mente seu real objetivo ( expor os eventos e o local da fundação), tornou-se possível definir o público alvo da plataforma, sendo eles homens e mulheres jovens, em seus 20 a 30 anos, de classe média, que sejam interessados em arte e que por buscarem apenas informações na plataforma, não necessariamente possuem experiência técnica com internet. No que diz respeito ao design do website, alguns itens podem decepcionar o usuário que o utiliza, como: o conteúdo principal não se encontrar antes da dobra da página (o que causa um ruído nas informações a serem passadas); os itens como textos, imagens, pdfs, e demais acabarem confundindo o objetivo do site (por conterem em algumas páginas exageros, falta de padronização e formatação de fontes e corpos); a identificação (logo e menu da fundação) mudar conforme a navegação do internauta; além de que o site não possui breadcrumbs e nem uma de opção e busca. Esses fatos relatados acabam se sobressaindo comparado aos pontos positivos que são encontrados no site, como: Os espaços em branco que ajudam a organizar o conteúdo textual nas demais páginas; a diferença entre conteúdo e serviço oferecidos ( já que boa parte das informações aparecem na barra de informações do site); e os contrastes das fotos que despertam a atenção do usuário apesar de seus exageros. Por fim, se tratando da funcionalidade do website, o mesmo não apresentou falhas, travamentos ou problemas técnicos que atrapalhassem sua utilização; não possui páginas em construção e seu carregamento é rápido; há formulários para entrar em contato com seus administradores e este está em pleno funcionamento, além de permitir ser compartilhado nas redes sociais e se adequar a web 2.0, seu único problema no quesito funcionalidade é tido pelo fato de não ser responsivo, o que pode prejudicar o correto funcionamento nas demais plataformas.


PÁGINA 23

Primeira página do website analisado (visto em: https://www.fundacaooscaramericano.org.br )

Primeira página do website analisado (visto em: https://www.fundacaooscaramericano.org.br )

Página: O parque (visto em: https:// www.fundacaooscaramericano. org.br/o-parque)

Página: Acervo (visto em https:// www.fundacaooscaramericano. org.br/acervo)

Página de divulgação dos concertos do website (visto em https:// www.concertosfmloa.com/)

Página: Salão de chá (visto em https://www.fundacaooscaramericano.org.br/salaodecha)


PÁGINA 24

Página: história da fundação (visto em: https://www.fundacaooscaramericano.org.br/historia)

Página: Ação educativa (visto em https://www.fundacaooscaramericano.org.br/acaoeducativa)

Página: Informações (visto em https://www.fundacaooscaramericano.org.br/informacoes)


PÁGINA 25 Após a verificação do site da Fundação Maria Luisa e Oscar Americano, a equipe se encarregou de conhecer outros sites considerados concorrentes, com a intenção de obter uma visão mais ampla sobre o mercado em que o website está inserido e consequentemente observar melhorias que podem ser aplicadas no redesign do mesmo. Em meio a uma grande quantidade de concorrentes que disputam esse mercado digital, foram eleitos: O Instituto Ricardo Brennand para concorrente direto (especializado na mesma linha de atrações, serviços e conteúdos) e o Museu da Casa Brasileira (MCB) juntamente com o Centro Cultural Fiesp para concorrentes indiretos (os quais atingem o mesmo público alvo), afim de analisar pontos chaves que possam auxiliar na melhoria do website da fundação.

CONCORRENTE DIRETO FUNDAÇÃO RICARDO BRENNAND Diferente do website anterior, é possível perceber que seu objetivo é evidenciado de forma eficaz logo na primeira página, fazendo com que as informações sobre todas as atividades disponíveis no instituto sejam passadas com excelência e que a tentativa de atrair visitantes seja realizada efetivamente. Assim como o da fundação, possui um público alvo composto por homens e mulheres (jovens adultos e adultos), da classe média, em torno dos seus 20 a 30 anos, que possuam grande interesse na apreciação da arte e suas vertentes, não sendo necessária grande experiência com o meio digital para usufruir dos conteúdos disponibilizados na internet. Analisando o design do website pode-se afirmar que, os itens que chamam atenção dos usuários (tais como imagens, textos, vídeos, etc) estão relacionados harmonicamente. Apesar de seu conteúdo principal estar localizado após a dobra da página, essa característica não influencia negativamente na navegação do usuário, pois tudo está distribuído de forma a se complementar. É fácil de se identificar os serviços e conteúdos que o site oferece, uma vez que tudo está bem explicado, com frases curtas e objetivas, além da organização de informações que facilita a diferenciação. O site se utiliza de palavras-chave e ícones

para simplificar a busca das informações por parte do usuário; os elementos se relacionam com harmonia, tanto em questão de proximidade, quanto alinhamento, eles são bem dispostos na interface; os contrastes e espaços em branco foram bem utilizados, despertando a atenção dos internautas; toda navegação é persistente com todos os textos legíveis, alinhados e bem formatados, não utilizando termos incompreensíveis. Sua identificação (logo e menu) permanecem no mesmo lugar; mesmo não possuindo breadcrumbs, há uma certa organização no site que supre essa carência. O que pode incomodar o usuário nesse quesito acaba sendo a falta da ferramenta de busca, fora isso, é um forte concorrente. Se tratando de funcionalidade, o website funciona corretamente em qualquer equipamento, já que o mesmo é responsivo; seu conteúdo condiz fielmente com o objetivo (não havendo matérias deslocados em toda sua disposição); não travou ou apresentou mau funcionamento durante a navegação, não há páginas em construção ou que não carreguem; há formulário para entrar em contato com seus administradores, é possível compartilhá-lo com outras pessoas através das redes sociais e se encaixa na web 2.0. O que impede que o site tenha uma funcionalidade excepcional é somente o período de tempo que se deve esperar para que suas


PÁGINA 26 páginas carreguem.

Página Inicial (visto em: http://www.institutoricardobrennand.org.br/)

CONCORRENTES INDIRETOS CENTRO CULTURAL FIESP Dando continuidade ao processo de pesquisa, o grupo passou a estudar os concorrentes indiretos, sendo um deles o Centro Cultural FIESP, o qual procura informar em seu website a programação e demais eventos que se realizam em sua sede física. Os conteúdos dispostos nas páginas se encontram bem organizados e condizentes com o objetivo principal do site. Suas informações essenciais se encontram dispostas de maneira clara e sucinta, permitindo até mesmo definir seu público alvo de imediato, sendo eles, jovens e adultos da classe média, em torno de 20 a 30 anos interessados em apreciar arte e design. Tendo em consideração o design do website, nota-se que seu conteúdo principal aparece antes da dobra da página, o que favorece a transmissão de informações para o usuário, junto a isso, o mesmo possui simetria e padronização dos elementos bem estabelecidos, tornando o ambiente virtual agradável e evitando confusões durante a navegação. Sua interface simples e objetiva torna fácil a diferenciação entre os conteúdos, como as informações sobre o local, os eventos que ocorreram em dias específicos, programações especiais para a população e demais informes. Pode-se observar que os materiais disponíveis no website estão relacionados e organizados por meio de agrupamentos, tais como: galeria digital, domingo na paulista, etc, o que promove uma identificação rápida e precisa dos conteúdos. Os contrastes de imagens, espaços em branco, textos, informações e demais foram bem utilizados e além de despertar a atenção dos internautas auxiliam na utilização do ambiente vir-


PÁGINA 27 tual. Toda a navegação é persistente, onde seus itens principais permanecem iguais em todas as páginas, além do conteúdo ser organizado para diminuir a poluição visual. O que pode causar um certo incômodo ao internauta em questão de design do website deve-se ao fato de que não há um botão que permita-o voltar a página anterior, ou que o leve de volta para a página inicial. Além disso este website não possui a opção de busca, fazendo com que o usuário tenha que encontrar uma informação desejada procurando-a na página referente a seu conteúdo. A funcionalidade do website possibilita que o mesmo carregue suas páginas rapidamente, sem travar ou apresentar problemas técnicos que atrapalhem sua performance. Nele não há páginas em construção ou que por algum motivo não venham a carregar. O site encontra-se responsivo rodando em qualquer equipamento, é possível compartilhar seu endereço através das redes socias e assim como os demais sites analisados se enquadra na web 2.0. O único adendo quanto a funcionalidade do website é tida por não possuir formulários ou demais formas de se entrar em contato com seus responsáveis.

Página Inicial: (visto em: http://centroculturalfiesp. com.br/)

MUSEU DA CASA BRASILEIRA Ao acessar pela primeira vez o site do Museu Da Casa Brasileira o usuário pode ter a impressão de que na verdade acessou um website sobre uma escola de artes, pois a quantidade de informações disponíveis na página inicial é excessiva, existindo chamadas desde temas como artesanato a música, por exemplo. A sensação de um ambiente bagunçado e confuso está presente desde o primeiro clique. O público-alvo não se diferencia muito dos concorrentes anteriores ou do próprio website alvo do redesign, consistindo em homens e mulheres, na casa dos 20 a 30, pertencentes à classe média, interessados em trabalhos artísticos que se voltem, principalmente, à educação e como na maioria dos sites desse segmento, o usuário não precisa de conhecimento profundo sobre a utilização da internet. Apesar de sua má impressão inicial e de sua apresentação desestruturada, vale destacar que conteúdo condiz com o objetivo do site, que seria alertar os visitantes sobre todos os eventos e a programação do museu, e que as informações principais se encontram antes da “dobra” da interface. Embora as matérias sejam pertinentes, o conteúdo visual a elas relacionadas não é, pois, as imagens escolhidas para retratá-las se remetem de forma literal ao título, fazendo com que não haja harmonia entre os elementos, principalmente por estarem dispostos um ao lado do outro de modo exagerado. Outro ponto negativo seria o fato de as legendas estarem desalinhadas, causando certo incômodo visual. Como já citado anteriormente, a organização é uma característica que se encontra em falta neste website, principalmente no quesito de se encontrar a informação procurada. O conteúdo está muito fragmentado e disposto sem nenhum tipo de separação, como subtítulos, ou formatação consistente, já que em cada página acessada existe algum elemento que se diferencia a um igual visto


PÁGINA 28 anteriormente. Todas essas deficiências causam grande dúvida no momento da navegação. Após essas considerações, podemos concluir que a movimentação pelo site é uma tarefa árdua. A presença dos breadcrumbs é constatada, mas sua eficiência é duvidosa, já que os caminhos não estão feitos corretamente. A navegação também é dificultada pela quantidade de links disponíveis, que confundem em demasia. Uma preocupação a menos com o site que chega a ser classificada até mesmo como ponto positivo é sua capacidade de rodar em qualquer equipamento, apresentando responsividade. Além disso, podemos citar que não houveram problemas que impediram o site de funcionar corretamente.

Página Inicial (visto em: http://www.mcb.org.br/)

FLUXOGRAMA DO WEBSITE Para que o website pertencente à Fundação Maria Luísa e Oscar Americano pudesse ser reestruturado, de modo a suprir as necessidades de navegação dos internautas e sanar problemas encontrados na plataforma antiga, fez-se necessário a criação e utilização de um novo fluxograma, o qual permitiu a equipe CODE 3 reorganizar toda a estrutura que compõe o presente website. Com o uso dessa representação gráfica e esquemática pode-se definir a hierarquia de exibição dos conteúdos através de uma visão geral das páginas, tornando menos complexo o processo de compreensão de informações para os usuários.


PÁGINA 29 ATUAL

REDESIGN

CARD SORTING Após a construção de um novo fluxograma para o conjunto de páginas da fundação foi realizado o primeiro teste de usuário, que se consistiu em pedir aos participantes que organizassem os nomes e conteúdos das páginas de acordo a percepção de cada um, afim de identificar possíveis complicações ou más interpretações ainda existentes na plataforma e corrigí-las.


PÁGINA 30


PÁGINA 31 WIREFRAMES Nessa fase, a equipe CODE 3 desenvolveu através de duas etapas (denominadas Wireframe de baixa e alta fidelidade) como seria o novo visual do website, tendo em vista que wireframes são protótipos que possibilitam a visualização do layout e disposição de interfaces. O primeiro passo se constituiu por desenhar o layout do website através de simples linhas, respeitando espaçamentos, títulos, locais para imagens e botões, obtendo-se assim o denominado wireframe de baixa fidelidade. Posteriormente a melhorias realizadas pós-testes de usuário no layout anterior, o segundo passo se compreendeu por representar o design das páginas através do programa Xd design, onde tornou-se possível detalhar com mais precisão as características como: cores, tamanhos, ícones, tipografias e demais, obtendo se assim o denominado wireframe de alta fidelidade. Esses processos resultaram se nas imagens vistas a seguir.


PÁGINA 32 BAIXA FIDELIDADE


PÁGINA 33 ALTA FIDELIDADE


PÁGINA 34


PÁGINA 35

PERSONAS

“Persona é um personagem semi-fictício criado para ajudar um determinado negócio a entender melhor quem é o seu cliente ideal” (ROCKCONTENT, 2018) A persona, como ferramenta auxiliar, é criada a partir de pesquisas, entrevistas, análises de redes sociais, etc, contribuindo para a obtenção de dados sobre o público alvo do projeto em questão. Essa estratégia de criação torna o desenvolvimento do website mais exato, já que com ela, a usabilidade pode ser fundamentada com bases sólidas em arquetipos de pesssoas existentes combinadas em uma só. Pensando nisso, a equipe CODE 3 desenvolveu três personas afim de auxiliar no processo de redesign do website da fundação, baseando-se nos gostos, modos e preferências desenvolvidas para com estes personagens de modo a obter exatidão no andamento do projeto.


PÁGINA 36


PÁGINA 37 STYLE TILE CORES Para o novo redesign foram utilizadas as cores verde e roxo, as quais auxiliam na representação da identidade e missão do local. A cor verde foi selecionada por transmitir harmonia, sensação de natureza e tranquilidade (características evidenciadas na construção da identidade da fundação), além disso a cor também representa a extensa área florestal que compõe o local. Enquanto que, a cor roxa, também empregada no novo design da plataforma foi escolhida por representar riqueza e extravagância, características encontradas nos ambientes internos da fundação. Além disso, foram utilizadas também as cores branco e cinza, que além de representarem consecutivamente pureza e neutralidade promovem harmonização no design do website.

TIPOGRAFIA As tipografias escolhidas para este projeto foram Rubik e Muli, selecionadas pelo fato de juntas conseguirem transmitir modernidade e tradição.


PÁGINA 38 FLAT DESIGN Nos dias atuais nos encontramos em meio ao excesso de conteúdo online que acaba causando insatisfação durante a navegação de usuários, além de poder causar também falta de entendimento dos assuntos dispostos na web e levar o usuário e não sanar suas necessidades. Para evitar problemas de usabilidade e navegabilidade causados pelo excesso de dados e mensagens, o novo design do website da fundação passou a ter como princípio o uso do flat design (tendência que busca pela simplicidade de elementos e pelo minimalismo na construção de interfaces, evitando itens como sombras, gradientes ou texturas, afim de trazer clareza ao layout), desta forma a compreensão dos conteúdos passam a estar organizados por conta da hierarquia de concepção e posicionamento dos itens da interface, tornando a navegação descomplicada.

RESPONSIVIDADE De acordo com pesquisas realizadas pelo Instituto Brasileiro de Geografia e estatísticas (IBGE), o uso crescente de smartphones e demais aparelhos móveis pela população ultrapassa a do computador desde o ano de 2016. Pensando no crescimento do uso de aparelhos móveis e demais eletrônicos de tamanhos distintos se faz necessário adaptar websites para que não haja irregularidades, e devido a isso, o conjunto de páginas da Fundação Maria Luisa e Oscar Americano passaram a se tornar responsivos, ou seja, se adaptando a qualquer plataforma mobile. “Um site responsivo muda a sua aparência e disposição com base no tamanho da tela em que o site é exibido. Então, se o usuário tem uma tela pequena, os elementos se re-organizam para lhe mostrar as coisas principais em primeiro lugar.” (COMERSITE, 2018)

VERSÃO FINAL DO REDESIGN


PÁGINA 39


PÁGINA 40


PÁGINA 41

CONSIDERAÇÕES FINAIS Em meio a era da informação, em que a população faz constante uso dos meios tecnológicos para suprir necessidades, resolver problemas, ter momentos de lazer e demais, torna essencial a existência de plataformas que correspondam aos desejos do usuário, sendo fáceis e precisas de se navegar. O website Fundação Maria Luísa e Oscar Americano, em sua antiga disposição, não se adequava aos requisitos indispensáveis à nova era. Para resolver esta questão, foi realizado o redesign do conjunto de páginas da fundação que resultaram no desenvolvimento desse projeto. A proposta de realizar um novo design em um website já existente, tornou-se útil para orientar os alunos de que o profissional designer possui a responsabilidade de criar projetos que vão muito além de simples layouts com aparência encantadora, mais sim, configurar desde estruturação e organização de conteúdos até a apresentação final, que será utilizada por diversos tipos de pessoas. Para desencadear todas essas funções viu-se que o profissional adere ao uso de métodos como a criação de fluxogramas, o uso de wireframes, mapas de navegação, rotulação, ergo-design, flat design e demais meios para conseguir deixar seus projetos funcionais. Tais procedimentos garantem a boa prática do design e resultam em trabalhos de alta competência, sendo eles utilizados durante o processo de melhoria do website da fundação. Sem dúvidas, a ação de projetar e concluir uma tarefa como esta, que mostra a importância de um designer em deixar uma interface acessível e acima de tudo útil a qualquer tipo de público, serviu como experiência enriquecedora à equipe CODE 3, a qual pode explorar, conhecer e compreender alguns caminhos essenciais para a atividade da profissão designer. Os objetivos propostos com o novo visual do site da fundação foram cumpridos, uma vez que testes de usuários puderam comprovar a eficiência e facilidade dos processos de navegação. De maneira geral, pode-se concluir que o projeto de conceber um novo website e seu relato por meio desta monografia serviram como alicerce para formar uma nova visão sobre as atividades que foram e as que ainda serão realizadas dentro da área de design digital.


PÁGINA 42 REFERÊNCIAS BIBLIOGRÁFICAS Imagens da Fundação Maria Luisa e Oscar Americano Disponíveis em: <https://www.fundacaooscaramericano.org.br/> Acesso em 18/10/2018 A importância da hierarquia visual Disponível em: <https://designculture.com. br/a-importancia-da-hierarquia-visual> Acesso em 15/10/2018 Information Architecture Institute Disponível em:<https://www.iainstitute.org> Acesso em 17/10/2018 NIELSEN, Jakob: Introdução a usabilidade Disponível em: <https://www.nngroup.com/ articles/usability-101-introduction-to-usability/> Acesso em:20/09/2018 A nova tendência do flat design Disponível em: <https://www.des1gnon. com/2013/06/a-nova-tendencia-do-flat-design-o-que-por-que/> Acesso em: 20/09/2018 A arquitetura de informação e o seu propósito - Coletivo UX Disponível em:<https://coletivoux.com/arquitetura-de-informa%C3%A7%C3%A3o-e-o-seu-prop%C3%B3sito-29cd278ebdfe> Acesso em: 15/10/2018 O que é Usabilidade? - Biblioteca de SEO e UX - Pedro Dias Disponível em:<https://www.pedrodias.net/ biblioteca/o-que-e-usabilidade> Acesso em: 20/09/2018 Instituto Ricardo Brennand Disponível em: <http://www.institutoricardobrennand.org.br> Acesso em: 05/09/2018 Rótulos dos links (labels) –Avellar e Duarte Disponível em: <http://www.avellareduarte. com.br/arquitetura-informacao/links/rotulos-dos-links/> Acesso em: 09/09/2018

Centro Cultural Fiesp Disponível em: <http://centroculturalfiesp. com.br/> Acesso em: 05/09/2018 Museu da Casa Brasileira- MCB Disponível em:<http://www.mcb.org.br> Acesso em: 05/09/2018 Maria Luisa e Oscar Americano - Dolce Morumbi Disponível em: <http://www.dolcemorumbi. com/138-hist/100-fundacao-maria-luiza-e-oscar-americano> Acesso em: 07/09/2018 Fundação Maria Luisa e Oscar Americano em São Paulo -Áreas verdes de São Paulo Disponível em: <https://www.areasverdesdascidades.com.br/2013/08/fundacao-maria-luisa-e-oscar-americano.html> Acesso em: 07/09/2018 Fundação Maria Luisa e Oscar Americano (Chás) | VEJA SÃO PAULO Disponível em: <https://vejasp.abril.com.br/ estabelecimento/fundacao-maria-luisa-oscar-americano/> Acesso em: 05/09/2018 Arquitetura da Informação: entenda esse conceito e como ele funciona Disponível em: < https://marketingdeconteudo.com/arquitetura-da-informacao/ > Acesso em: 09/09/2018

LISTA DE IMAGENS Primeira Revolução Industrial, PÁG 08 Jardim interno da fundação, PÁG 09 Terceira Revolução Industrial, PÁG 10 Área de eventos da fundação, PÁG 12 Layout antigo da fundação, PÁG 23/24 Layout concorrente direto, PÁG 26 Layout concorrentes indiretos, PÁG 27/28 Fluxogramas, PÁG 29 Paper prototype, PÁG 29/30 Wireframes, PÁG 31-34 Personas, PÁG 35/36 Style Tile, PÁG 37 Versão final do redesign, PÁG 38-40


Profile for Thuany Paixão

FMLOA Monografia  

Monografia realizada para a conclusão do técnico em design gráfico na Universidade Nove de Julho.

FMLOA Monografia  

Monografia realizada para a conclusão do técnico em design gráfico na Universidade Nove de Julho.

Advertisement