RESUMO WEB 1, 2 E3

Prévia do material em texto

CAPITULO 1 - INTRODUÇÃO 
1.1 - O que é Web design? 
Web design é a criação de ambientes digitais que facilitam e incentivam a atividade humana. Busca refletir sobre ou adaptar-se 
aos indivíduos, além de buscar uma atualização ao longo do tempo, mantendo sempre a sua identidade. Sua criação consiste na 
produção de ambientes digitais na perspectiva do usuário, combinando conhecimentos técnicos e de design para tornar ainda mais 
eficaz os conceitos propostos. (Zeldman, 2007) 
 
Esta atividade combina, essencialmente, competências técnicas e artísticas de forma a potenciar o papel dos seguintes 
conceitos, assumindo um determinado domínio de conteúdo, i.e. a informação vocacionada para alimentar as exigências de um 
público-alvo: 
Usabilidade – é a facilidade com que os usuários podem utilizar uma ferramenta para executar uma tarefa específica; 
Aparência – é o aspecto ou aquilo que se mostra superficialmente (ou, digamos, à primeira vista); 
Visibilidade – é a destreza com que os usuários localizam e interpretam a informação. 
 
O conteúdo de um site (conjunto de páginas ligadas por hiperligações - links) tem que ser relevante/útil, pois é a alma de 
qualquer site, já que o conteúdo é que motiva o usuário a acessar a uma determinada página web. Sendo assim, há que apresentar 
a informação, tendo em conta as necessidades apontadas para um determinado público-alvo, de forma clara e objetiva. P.ex. 
Imagine-se uma situação em que o site é dedicado a pessoas idosas, neste contexto o tamanho da letra será um grande aspecto a 
ser levado em conta. 
 
O Web Design também é responsável pela escolha do conteúdo sempre em função de um determinado público-alvo. 
 
1.2 - Porque aprender Web Design? 
Um bom projeto de web design transcende as tendências e para isso é de fundamental importância um trabalho multidisciplinar 
e conhecimentos do ambiente web. 
Conhecer o ambiente web é imprescindível para que o Designer Gráfico e o Publicitário trabalhem na concepção e no 
desenvolvimento de páginas web; colaborem no levantamento de requisitos no desenvolvimento do ambiente digital; participem na 
avaliação e fiscalização da qualidade do produto. Para a criação de um estilo e necessário considerar conhecimentos envolvendo a 
estrutura, a navegabilidade, o uso das cores, o uso dos tipografias próprias para os meios digitais, etc. 
Estes profissionais ainda tem, em suas atividades, a responsabilidade de desenvolver estratégias visando apresentar o conteúdo, 
tendo em conta as necessidades apontadas para um determinado público-alvo, de forma clara e objetiva. O conhecimento de ambos 
profissionais podem garantir, além da facilidade de uso e desempenho gráfico, a experiência perfeita do usuário. 
 
1.3 - Papel do Web Designer 
A função de um Web Designer é definir a estrutura (arrumação dos conteúdos e a navegabilidade), o aspecto visual e a 
usabilidade de um site, ou seja, produzir um modelo atrativo para o usuário, que tenha lógica de navegação e que tenha a informação 
visível realmente necessária. 
A atividade de um Web Designer está intimamente ligada com a interação sistemática com o Cliente. 
Em termos metodológicos, o Web Designer deve seguir algumas etapas das quais se destacam: levantamento dos requisitos, 
desenho do modelo e implementação. 
 
Características desejáveis em um profissional da área 
 Total conhecimento das etapas de criação de uma interface web. 
 Conhecimento das tendências e novas tecnologias presentes no mercado. 
 Capacidade para colaborar na definição de escopo, objetivos e requisitos para o projeto. 
 Habilidade para trabalhar em equipe e intermediar contatos com clientes. 
 Responsabilidade com os prazos de cada etapa do projeto. 
 Manter a organização de documentos e arquivos referentes ao projeto. 
 Criatividade e destreza ao propor soluções eficientes. 
 Capacidade em conciliar e entender a demanda do cliente e as necessidades do usuário. 
 
1.4 - A evolução da web 
No início do web design as telas eram literalmente pretas e com limitações de cores. 
A interface gráfica veio a evoluir por volta de 1990. 
Em agosto de 1991, Tim Berners‐Lee publicou o primeiro site, objetivo era falar sobre a World Wide Web (WWW). 
Em 1994, foi formado o Consórcio World Wide Web (W3C), liderado pelo inventor da web Tim Berners‐Lee e o CEO Jeffrey 
Jaffe, o W3C tinha como missão conduzir a World Wide Web explorando todo o seu potencial, desenvolvendo protocolos e diretrizes 
afim de garantir o seu crescimento ao longo dos anos. Por fim, o HTML foi definido como padrão para as páginas de web. 
 
 
 
Os estilos de estrutura e interface 
Em 1995 surgiram os primeiro navegadores que pudessem mostrar as imagens. Nesta época, surge o Javascript, cujo objetivo 
era ir além das limitações do HTML possibilitando novas formas de criações como nos caso da janela pop‐up. 
 
Surgimento do Flash e CSS ‐ 1996 
Em 1996 foi a era do Flash, trazendo uma grande liberdade à criação de formas, layouts, animações, interações, uso de fontes, 
etc. O uso de imagens GIF também se tornou comum. Esta época foi marcada também pelo surgimento do CSS (Cascading Style 
Sheets), tornando‐se rapidamente parte do HTML por causa de seus muitos benefícios. 
 
Adobe Flash® é um software gráfico vetorial com suporte a imagens bitmap e vídeos, utilizado na criação de animações 
interativas usadas em jogos, anúncios e propagandas, execução de vídeos, etc., que funcionam embutidas nos navegadores web, 
desktops, celulares, smartphones, tablets e televisores. É uma ferramenta para o desenvolvimento de Aplicações de Internet Rica, 
funcionando também como uma plataforma multimídia. 
 
O CSS vai ganhando seu espaço ‐ 1998‐2002 
Nesta época, o profissional responsável pelo desenvolvimento do site era o Webmaster, cuja responsabilidade envolvia criação 
da interface e programação do site. O webmaster tinha que ter conhecimentos de cores, tipografia, programas de criação de interface 
(Photoshop®, por exemplo), e também programar em HTML e Javascript. 
 
Web 2.0 ‐ 2004 
Outra era começou em 2004, quando o chamado conceito web 2.0 apareceu pela primeira vez. O profissionalismo passou a ser 
visto cada vez mais nos sites. A interatividade se tornou cada vez maior com os fóruns, plataformas de blogs e serviços de e‐mail 
que estavam presentes no cotidiano. O uso de Flash® se tornou mais popular e a maioria dos sites passou a explorá‐lo cada vez 
mais. As animações estava presentes da página de introdução até o site como um todo. 
 
Porém, a web como a conhecemos hoje, começou em 2005. Surgiram as páginas únicas simplificando a navegação. Designers 
passaram a explorar os tamanhos de fonte e cor combinando‐os para criar focos. O botão "voltar ao topo" também foi visto pela 
primeira vez neste período e muitos sites o adotaram, tornando a navegação cada vez mais fácil. 
“Web 2.0 é um termo popularizado em 2004, utilizado para designar a segunda geração de comunidades e serviços, novas e 
emergentes formas de comunicação utilizadas na Internet. 
Neste universo dinâmico temos os blogs, os microblogs, wikis, as redes sociais, RSS Feeds, SMSs, telefones móveis, podcasts, 
videologs, mensagens instantâneas (IM), agregadores de conteúdo, dentre outros. Hoje, a informação está disponível quase que ao 
mesmo tempo em que ela é produzida. Alguns exemplos são Blogger, Wordpress, Twitter, Orkut, Facebook, LinkedIn, MySpace, 
Wikipedia, Del.icio.us, Digg, Flickr, Picasa, YouTube, Last.fm, Second Life, só para citar uma pequena lista de aplicativos que 
possuem milhares, senão vários milhões de usuários.” 
 
A liberdade na navegação ‐ 2006‐2012 
Navegar na internet já era habitual, porém com os uso dos telefones móveis passou a ser um desafio. Adaptar os layouts a estas 
novas plataformas não foi algo fácil. As primeiras mudanças para tal adaptação foi a utilizaçãode colunas e padronização dos 
elementos comuns como formas, navegação e botões. A navegação ganhou mais liberdade, se dando em qualquer direção do eixo 
axial. 
Ethan Marcotte (2010) propôs o uso do mesmo conteúdo em layouts diferentes para o design, iniciando o Design Responsivo. 
O que tornou a ideia ainda mais brilhante, foi que o HTML e o CSS não precisariam ser substituídos. 
O ano de 2008 foi o período do estilo “retro", onde antigos elementos começaram a se tornar populares, como cores, texto, 
ilustrações e outros elementos (exceto gifs). Outro detalhes que marcaram o período foram os efeitos de sombra extravagantes, 
belas fotografia, tipografia e ilustrações nítidas. Nesta época iniciou também o surgimento de outro estilo, cuja característica se dava 
na simplificação dos elementos visuais que passou a ser chamado de Design Flat. Outra mudança muito benéfica foi a criação de 
fontes totalmente para o contexto digital. A abordagem minimalista começou a ganhar força em 2010, perdurando até hoje. Apesar 
das cores diversas ainda prevalecer, o uso branco e o preto tornou‐se comum. 
 
HTML 5 e CSS3 e as novas formas de criação ‐ 2013 até hoje 
Época marcada pela variedade de dispositivos digitais e do Design Responsivo com toda a sua flexibilidade, porém com controle 
total. O HTML e CSS passaram por grandes mudanças permitindo maior flexibilidade para posicionar elementos, possibilitando criar 
layouts e modificá‐los com uma única propriedade em vez de escrever muito código. 
 
Mobile First 
Mobile First é um conceito aplicado em projetos web onde o foco inicial da arquitetura e desenvolvimento é direcionado aos 
dispositivos móveis e em seguida para os desktops. A técnica tem se popularizado cada vez mais entre os profissionais de marketing 
e tecnologia. O conceito de Mobile First foi elaborado por Luke Wroblewski em 2009 e 2010. 
 
CAPÍTULO 2 - PLANEJAMENTO E PROJETO 
O planejamento é essencial para a maioria das empresas e organizações. Na prática, muitas pessoas não conseguem planejar 
seus sites. Mas, isto geralmente acontece porque as pessoas não conseguem reconhecer ou desconhecem que o planejamento 
para o desenvolvimento de um website é tão importante quanto o planejamento de qualquer outra coisa em uma empresa. 
Um planejamento feito de forma consistente e estruturada é uma ferramenta indispensável. Só com um bom planejamento é 
possível identificar riscos e oportunidades, analisar a concorrência, elaborar planos e estratégias de ação, estabelecer marcos 
regulatórios, metas a serem alcançadas, acompanhar as atividades executadas, medir os recursos necessários e a sua melhor 
aplicação, analisar impactos e desempenhos, avaliar a aplicação de investimentos, prever o retorno sobre o capital investido, etc. 
 
2-1. Fases de criação de um web site 
Um modelo de desenvolvimento de websites, apresentado por John Furnnes em 2011, é um procedimento adotado e utilizado 
no mundo inteiro, mas ele não é um padrão. O modelo de John consiste em uma estrutura linear de processo que descreve a 
importância de cada evento e o relacionamento que o designer deve ter com cada etapa do projeto. 
Seja qual for o modelo adotado, um processo efetivo de desenvolvimento de um web site irá envolver algumas fases. A definição 
destas fase irá depender do projeto que se está executando, mas a maioria dos projetos envolve as seguintes fases: 
 Planejamento - envolve determinar qual o assunto/tema objeto do seu web site e como você irá apresentar a informação ao seu 
público-alvo (primário e auxiliares) e como irá ajustar o conteúdo e o design focando neste propósito. 
Algumas questões levantadas neste passo envolvem: Qual o conteúdo (texto, imagem, vídeo, áudio, etc.) que você tem? Qual o 
esquema gráfico e navegacional da página? Como as informações vão ser organizadas? O projeto vai ser todo ele desenvolvido 
manualmente ou será usado algum modelo pronto (template) ou algum sistema gerenciador de conteúdo (p.ex.; Wordpress, 
Drupal, etc.)? 
 Composição - envolve a elaboração de todo o conteúdo (texto, visual, gráfico, áudio, etc.), adequado ao propósito, contexto e 
audiência do seu web site. 
Algumas decisões envolvem: usar algum software específico para a criação de páginas web e os seus conteúdos (p.ex. 
Dreamweaver®); usar um editor de texto para programar HTML; escrever em um processador de texto (p.ex. Word) e depois 
exportar o conteúdo para o HTML; se o site possui imagens, áudio ou vídeo, qual software devemos usar para preparar os 
conteúdos; 
 Teste - envolve o processo de verificar as funcionalidades do seu web site, se os usuários podem acessar e interagir com elas. É 
verificar: se o seu site é visualizado corretamente em diferentes dispositivos e aparelhos, em diferentes (browsers), em diferentes 
sistemas operacionais (p.ex. Windows, Linux, Mac, Android, etc.), em diferentes resoluções de tela, etc.; se todos os links da 
página funcionam corretamente; se todas as páginas seguem o mesmo padrão e design; como os usuários interagem com o site; 
 Publicação/hospedagem - envolve o processo de encontrar um servidor que hospede seu site e que tenha todos recursos 
(hardware, software, serviços, segurança, etc.) disponíveis e necessários para a aplicação do seu site, colocar todos os arquivos 
do site nesse servidor, etc. 
 Acompanhamento - envolve o processo de: acompanhar as estatísticas de acesso do site e de suas páginas; saber quais são 
conteúdos mais acessados, comentados e/ou compartilhados; saber de onde os usuários estão acessando o site; saber como 
eles se informaram a respeito do site; atender adequadamente as reclamações, elogios e sugestões fornecidas pelos usuários; 
saber qual o horário de maior/menor acesso; etc. 
 Divulgação - processo que envolve a aplicação de diversas técnicas de otimização de modo a melhorar os resultados de pesquisa, 
melhorando o posicionamento (pagerank) de um site nos resultados dos sites de busca. 
 Atualização/Manutenção - envolve o processo de periodicamente checar se todo o seu site ou alguma página individual possui 
alguma informação desatualizada ou algum link quebrado. 
 Design - processo de criação que define a aparência (ou layout) de um website e como os usuários irão interagir com ele, tomando-
se o cuidado em aplicar os conceitos de design e usabilidade, moldando/ajustando o conteúdo do website de acordo com os 
usuários que irão acessá-lo. 
 Desenvolvimento - processo de construção do website propriamente dito que envolve a codificação das páginas e o emprego de 
diversas tecnologias usada na sua construção (HTML, CSS, JavaScript, etc.). 
 
2-2. Profissionais envolvidos em um projeto de web site 
O processo de produção de um web site envolve (ou deveria envolver) alguns especialistas. Os profissionais mais comuns em um 
projeto são: 
 Gerente de projetos - Responsável por integrar todos os participantes da equipe, inclusive o cliente. Gerencia o escopo e 
acompanha a realização em todas as etapas. Verifica a realização das tarefas, os prazos e ajuda a resolver qualquer situação de 
emergência, seu objetivo é ser o facilitador. Deve ainda, entender os objetivos e as tecnologias de desenvolvimento envolvidas no 
projeto. 
 Gestor de comunicações - Responsável por formular estratégias online, propor projetos de relacionamento, realizar pesquisas 
com usuários, analisar e relatar os resultados destas estratégias ao cliente. Define como o ambiente digital chegará ao público ao 
qual se destina desde seu lançamento. Prevê atualizações, manutenções e o crescimento a médio prazo. Tem como objetivo 
também, estabelecer conexões entre o ambiente digital e outras mídias, para que componham uma imagem integrada. 
 Arquiteto da informação - Tem como responsabilidade criar a estrutura de conteúdo, incluindo a realização de pesquisas, a 
elaboração das taxonomias, a seleção dos rótulos das seções,a realização de testes de navegação e o acompanhamento das 
soluções. Elabora protótipos funcionais e documentos de especificação para a equipe de programação (mapa do site, wireframes 
e fluxos de navegação). É responsável pela definição clara dos objetivos do site e pela organização do conteúdo, navegação e 
usabilidade em função desses objetivos. É comum ver esta função sendo atribuída ao web designer. 
 Web Designer - Responsável por propor soluções visuais para a interface digital e de manter uma perspectiva técnica em relação 
a questões como usabilidade, arquitetura da informação e inclusão. Cria o projeto estético e funcional dos ambiente digitais. 
Trabalha buscando uma sintonia entre a estética, funcionalidade e os objetivos do projeto. Deve ter domínio de ferramentas de 
design para web como Photoshop®. 
 Desenvolvedor Front-End - Responsável por possibilitar que a interface seja visível pelos usuários. Deve ter os conhecimentos 
específicos, tais como: HTML e CSS. Trabalha junto com o web designer para construir o site, buscando atender os requisitos 
técnicos, funcionais e estéticos. 
 Desenvolvedor Back-end - Responsável pela parte técnica do projeto. Deve possuir conhecimento de linguagens de 
programação, assim como bancos de dados. Realiza a montagem, os testes dos programas, bem como a manutenção. Deve 
conhecer os padrões web, compatíveis com as especificações do W3C. Participa dos testes da interface buscando avaliar a 
solução proposta. 
 Editor/Redator (estrategista de conteúdo - Webwriter) - Muitas vezes define o conceito editorial do veículo, a abordagem dos 
assuntos nos textos, imagens, vídeos, sons, como o conteúdo deve ser estruturado para atender os objetivos do projeto. 
Responsável pela rotulação das seções do site junto com o Arquiteto de Informação. Escreve textos dentro de um conceito editorial 
realizando pesquisas para embasar o conteúdo publicado. Precisa ter conhecimento do perfil do usuário buscando um padrão de 
comunicação mais eficiente. 
 Especialista em otimização de sites (SEO - Seach Engine Optimization) - Tem como objetivo planejar e trabalhar para que o 
site/aplicativo seja encontrado nas primeiras posições de resultados de buscas orgânicas, pesquisando, analisando e propondo 
modificações no site, de forma a melhorar o posicionamento. 
 Profissional de Suporte - Tem como responsabilidade auxiliar o cliente a realizar as ações que deseja realizar dentro do site. 
Sua função pode ser realizada via chat, telefone ou até mesmo pessoalmente. Em alguns casos esta função do suporte é realizada 
pelo Programador Back-end. A participação de todos os profissionais no planejamento é fundamental para que possam 
compreender e participar do projeto do início ao fim. 
 
2.3 – Briefing 
O briefing é um roteiro que fornecerá as informações necessárias que precisamos para o nosso projeto. Este roteiro é composto 
por perguntas que deverão ser feitas ao nosso cliente e cujas respostas nos darão a noção daquilo que ele espera do seu website. 
 
Elementos essenciais na construção de um briefing 
Algumas empresas preferem briefings descritivos, outras itemizados, alguns ilustrados, etc. Dependendo, alguns itens podem não 
ser mencionados, uns podem ser incluídos, outros excluídos do briefing. 
Pontos essenciais da maioria dos briefings: a natureza e o contexto do projeto; análise setorial; público-alvo; portfólio da empresa; 
objetivos do negócio e estratégia de design; objetivo, prazo e orçamento do projeto; pesquisas; etc. 
 
2.4 - Complexidades de um web site (Ramos, 2015) 
Temos que avaliar basicamente quatro pontos: o conteúdo, a dinâmica das informações contidas no site, o porte do cliente e a 
expectativa de prazo do cliente para a conclusão do projeto. 
 "O conteúdo é o rei" - é o conteúdo que o internauta está sempre buscando na web e, sobretudo, a qualidade desse conteúdo 
que é o que vai determinar a satisfação do visitante e, consequentemente, é a qualidade dessa informação que irá determinar em 
grande parte o sucesso do site. 
 Dinâmica das informações - Um conteúdo dinâmico não necessariamente torna um site complexo, da mesma forma que um 
conteúdo não dinâmico torna o seu site mais simples. 
O aspecto que define a complexidade de informações ditas dinâmicas é a forma como elas são geradas e interagem umas com as 
outras no contexto geral. Em termos práticos, um conteúdo dinâmico como a publicação de notícias pode ser considerado simples, 
enquanto que um conteúdo não dinâmico como uma apresentação interativa poderá ser mais complexo, podendo envolver 
diversos outros profissionais, como ilustradores, animadores, modeladores 3D, entre outros. 
 O porte do cliente - podemos dizer que quanto maior o porte do cliente, maiores são as responsabilidades que nós é imposta. 
Alguns fatores são importantes: prazo, audiência, abrangência e forma. 
Com relação aos prazos, normalmente, o clientes de grande porte têm um controle maior de prazos e cronogramas. 
Com relação a audiência, é de supor que quanto maior o tamanho do cliente maior será o seu público. Assim como a quantidade 
de visitantes que um site deve receber, a variedade desses visitantes também é fator de maior ou menor complexidade em relação 
ao que se vai construir. Via de regra, a maior ou menor variedade e abrangência do público do site que vamos produzir determinará 
os aspectos qualitativos, quantitativos e formais do conteúdo. 
No que se refere à forma, os conteúdos poderão ser mais especializados ou mais genéricos, mais técnicos ou mais superficiais, 
mais ou menos segmentados, etc. 
 Expectativa de prazo - a complexidade de um site também pode ser medida pela sua expectativa (ou necessidade) que o cliente 
tem em relação ao prazo. Se o tempo para a produção normal for uma, mas a expectativa/necessidade do cliente for outra de que 
o site fique pronto antes, isto significa que será necessário envolver mais pessoas e recursos no processo para cumprir essa meta. 
Logicamente, além de complicar o processo, isso interferirá no valor final do site, pois o esforço, planejamento e gerenciamento 
será todo ele afetado por essa diminuição de tempo, podendo inclusive inviabilizá-lo. 
 
2.5 - DEFINIÇÃO DO PROJETO 
Um projeto é um plano para a realização de algo, com um objetivo específico bem definido, pré-estabelecido, único e claro, com 
prazos de início e termino determinados, empregando recursos limitados. Deve ser temporário, tem que ter começo e fim definidos 
e conhecidos. Se não tem fim, não é um projeto, é um produto, um processo ou uma operação. 
 
2.6 - Definição do escopo do projeto 
"O escopo de um projeto descreve todos os seus produtos, os serviços necessários para realiza-los e os resultados 
esperados. Descreve também o que é preciso fazer para que alcance seus objetivos com os recursos e funções 
especificados. 
(...) O consenso inicial sobre o escopo do projeto se estabelece entre pessoas, organizações, departamentos. Uma pessoa, 
empresa ou departamento é o cliente, e outra pessoa, empresa ou departamento é o mediador entre o dono do produto e a equipe 
designada para realizá-lo. 
No caso de projeto de mídia digital, embora a definição do escopo às vezes pareça descrever informações com alguma 
redundância, é um processo necessário para explicitar as expectativas do cliente e o produto que os projetistas precisam realizar. 
Inclui a negociação de fatores como prazos e custos, para não deixar margem a interpretações ambíguas – embora 
normalmente seja necessário, mais adiante, revê-los para ajustar também as expectativas sobre o produto. 
A definição de escopo ajuda a evitar que as equipes de projeto percam tempo e recursos resolvendo problemas que fogem à 
sua alçada." (Avellar e Duarte; 2017 [2]) 
 
 
 
Requisitos do usuário 
"Os requisitos de usuário estabelecem a base para os demais passo do processo de design. O processoexige que você tome as 
solicitações abstratas dos usuários e as converta em necessidades significativas. 
Seu plano deve incluir uma lista de requisitos de usuário. Essencialmente, essa lista representa as necessidades dos usuários 
e não deve incluir soluções tecnológicas". (LOWDERMILK, 2013) 
 
Requisitos do projeto 
Definem as condições ou capacidades com as quais o projeto deve atender. Busca-se entender o projeto, fazendo perguntas sobre 
o problema a ser resolver e buscando responde-las. Faz-se necessário entender o público, os requisitos comerciais e as 
funcionalidades necessárias para que se possa atender os objetivos do projeto, considerando também as pesquisas de mercado e 
com os usuários. 
 
2.7 - Formalização de acordos 
O contrato ou termo de referência (termo de referência pode ser um anexo do contrato, com descrições técnicas relacionadas mais 
ao produto que às questões comerciais) é assinado pelas partes envolvidas na realização. No caso de projeto interno de uma 
organização, o responsável é o gerente do projeto ou dono do produto (designado nesta fase), um gestor externo ao dia-a-dia da 
execução, que atua como patrocinador (sponsor) responsável pelo apoio institucional. 
 
CAPÍTULO 3 – CONCEITUAÇÃO 
3-1. Iniciando a conceituação 
O modelo conceitual de uma mídia digital ajuda a estabelecer um consenso na equipe de projeto a avaliar sua aderência aos 
objetivos e a verificar sua aderência às linhas gerais de desenvolvimento, compreendendo sobre o que vem a ser o website, seu 
contexto de uso, pressupostos, demandas do público-alvo e do cliente. 
 
3.2 - Definindo a missão para a equipe de desenvolvimento e os manifestos dos projetos 
O desenvolvimento de um website é um processo dinâmico e que envolve diversos profissionais trabalhando em torno de um mesmo 
projeto com um mesmo propósito. A definição de missão que seja um reflexo deste propósito e do seu comprometimento com os 
seus clientes e de uns com os outros é uma ótima maneira de lembrar a equipe do motivo pelo qual estão trabalhando. 
 
3.3 - Construindo uma NARRATIVA 
Uma narrativa de um website é uma história de como o site molda as vidas dos seus usuários. Diferente dos manifestos, que 
contém afirmações específicas e declarativas, em uma narrativa podemos enriquecer a narração com cenários detalhados sobre 
como o website será utilizado. 
 
3.4 - Criando PERSONAS 
Uma maneira de ampliar a narrativa é por intermédio da criação de personas. Uma persona é personagem fictício que representa 
o seu cliente típico ou ideal, com todas as suas principais características e necessidades. Uma persona permite que você 
realize uma rápida análise e possa identificar características comuns entre os seus potenciais clientes, de modo a ajudá-lo na tomada 
de decisões a respeito do seu website, as funcionalidades desejadas que deverão ser implementadas, como deverá ser a 
navegação, as interações que terá com os seus cliente, etc. 
Para criar nossa persona, precisamos descobrir: 
 Quem é o seu potencial cliente? (Características físicas e psicológicas do responsável pela compra) 
 Que tipo de assunto interessaria para ele sobre o seu setor? 
 Quais são as atividades mais comuns que ele realiza (tanto pessoalmente quanto profissionalmente)? 
 Qual seu nível de instrução? Quais seus desafios e obstáculos? 
 Que tipo de informações ele consome e em quais veículos? 
 Quais são seus objetivos, suas dificuldades e desafios? 
 Como podemos ajudá-la? 
 
Diferenças entre personas e público-alvo 
A diferença crucial entre os dois conceitos de persona e público-alvo é que o último deles acaba sendo mais amplo que o 
primeiro. Ao tratar um determinado segmento de pessoas como uma grande massa, seus hábitos, anseios, desejos e problemas 
acabam sendo ignorados. 
O conceito de persona se destaca por ser completo e retratar o consumidor ideal do seu produto, serviço ou website. Ao definir uma 
persona, você dá uma atenção especial às suas dificuldades e, principalmente, como seu negócio pode ajudá-lo, focando as suas 
estratégias na geração de valor para esta pessoa. 
 
3-5. Criando cenários 
Após obter os personas, um cenário é uma mini-história que reflete as situações em que seus personas podem se encontrar. 
Em um cenário, você deve prestar uma atenção particular na forma como o seu website melhorará a experiência do usuário. Quanto 
mais detalhes você atribuir a suas personas, mais fácil será imaginar como elas reagirão a um dado cenário. 
 
3-6. Pesquisa visual 
Envolve pesquisar elementos que podem servir de inspiração e referência para o projeto web. Deve-se buscar observar e 
analisar os elementos que compõe o site, o estilo de navegação e a formação de sua estrutura, indo além do óbvio. Eles devem 
necessariamente conter as imagens (em cor) das pesquisas icônicas, tipográficas, de linguagem visual, etc. feitas para a construção 
do conceito criativo. 
 
3-7. Pesquisa dos sites dos concorrentes 
Serve para conhecer a empresa e seus concorrentes. O objetivo é analisar nos sites os pontos fracos e fortes, assim como seus 
resultados. Não se trata de uma pesquisa de marketing, mas sim de interfaces considerando os itens levantados na pesquisa visual 
(p.ex.: cor, tipografia, navegação, etc.). Deve-se analisar e descrever como o site concorre com o projeto em desenvolvimento; as 
características que o tornam um concorrente forte. Estas análises devem servir para descobrir oportunidades a serem exploradas 
no projeto. 
 
3-8. Conceito editorial 
São muitas as variáveis que podem direcionar a conceituação editorial. Dependendo do foco o direcionamento, a estrutura do site, 
seus elementos e sua navegação podem ser projetada de maneira diferente visando atender a determinada necessidade. 
O conceito editorial direciona o desenvolvimento de uma interface que busque atingir o foco do site, valorizando o 
conteúdo oferecido e compartilhado. Nesta etapa, deve-se buscar definir o conceito que será usado no projeto. Existem muitas 
ferramentas e modos que permite traçar o conceito que será adotado. O conceito editorial deve considerar também os requisitos e 
objetivos do projeto, além de ser mais um elemento que comunique a marca. 
 
3-9. Teste de usabilidade 
Se for um projeto de reconstrução de um site, o teste de usabilidade irá ajudar a verificar com facilidade se o site que o cl iente já 
possui pode ser claramente compreendido e manipulado pelo usuário.