Design para Web aula 04

Prévia do material em texto

Design para Web
Aula 04: Conceituação do projeto
Apresentação
A conceituação é, em muitos projetos, relegada a um segundo plano e realizada de maneira super�cial, sem detalhar o
projeto e as condições de seu desenvolvimento. Nessa etapa do design do website, identi�camos os requisitos como
representação genuína das necessidades do usuário. É importante também, nesse momento, descrever os motivos da
existência do projeto, justi�cando sua necessidade e pontuando as vantagens de sua implementação.
Outro aspecto relevante é a pesquisa nos sites da empresa (caso existam) e dos concorrentes, pontuando os pontos
positivos e negativos.
A conceituação editorial visa de�nir os conceitos que serão usados no projeto, apontando o que é relevante no design do
website, focando na relação de comunicação com o público-alvo e valorizando a experiencia do usuário.
Objetivos
Identi�car requisitos e justi�cativas do projeto;
Analisar empresa e concorrentes;
De�nir o conceito editorial.
 Justi�cativas e requisitos do projeto de website
 Fonte: Shutterstock
Justificativas do projeto de website
A justi�cativa do projeto re�ete os motivos de sua necessidade, tratando a solução e suas razões. Deve-se apontar, ainda, a
importância do projeto para os envolvidos, bem como pontuar os aspectos positivos, suas vantagens e benefícios, ou seja, as
contribuições proporcionadas pela solução proposta com o website.
Em geral, a primeira justi�cativa dirige-se ao patrocinador (sponsor) do projeto, em busca de verba para seu �nanciamento. A
justi�cativa deve ser clara e concisa, em geral, em um único parágrafo. Deve ser pautada pela lógica, clareza e objetividade,
justi�cando porque sua ideia deve ser �nanciada em detrimento de outra.
Abaixo, listamos algumas orientações para declarar, com sucesso, as justi�cativas.
01 Apresente respostas às seguintes questões: Qual o problema que motiva o website? Quais as soluções alternativas?Por que o projeto deve ser aprovado e implementado? Quais os benefícios com a implantação do website?;
02 Esclareça o motivo das atividades e investimentos serem necessários e como ajudam no alcance dos objetivos eresultados esperados;
03 Sempre que possível, acrescente dados numéricos e/ou estatísticos pertinentes ao assunto em questão. Se possível,apresente os benefícios causados pelo novo website;
04 Use a criatividade em seu poder de convencimento ao patrocinador;
05 Convença o patrocinador de que a organização tem capacidade de concretizar o projeto e contribuirá para uma causarelevante.
Abaixo, destacamos alguns exemplos de justi�cativas de projetos.
EXEMPLO 1
O sistema de robô de compra e
venda de ações é uma solução
para ajudar os investidores em
suas operações diárias na bolsa,
apresentando os papeis que
devem ser comprados ou
vendidos, conforme atingimento
do setup 9.1, 9.2 e 9.3. O sistema
visa automatizar o processo de
compra e venda de ações,
enviando as ordens, autorizadas
pelo usuário, diretamente a B3.
Leia +
EXEMPLO 2
O sistema de gestão de
estacionamentos permite que o
cliente veri�que as vagas
disponíveis num raio de X km
(con�gurável). O sistema mostra
os locais (estacionamentos
privados e públicos) com vagas
disponíveis para seleção e
bloqueio da vaga. O cliente tem X
minutos (con�gurável por cada
local) para ocupar a vaga, quando
a mesma será desbloqueada e
liberada.
Leia +
EXEMPLO 3
O website proposto visa oferecer
uma solução criativa ao setor
imobiliário, que foi profundamente
atingido pela pandemia do
coronavírus no início de 2020. O
setor precisa de uma solução
tecnológica com qualidade e
pro�ssionalismo, que permita a
realização de bons negócios,
atendendo ao cliente com
qualidade e diferenciando-se no
mercado. .
Leia +
https://estacio.webaula.com.br/cursos/go0413/aula4.html
https://estacio.webaula.com.br/cursos/go0413/aula4.html
https://estacio.webaula.com.br/cursos/go0413/aula4.html
Requisitos do projeto de website
Na fase de planejamento (aula 1), começamos a elaborar a primeira lista dos requisitos. Quando elaboramos a descrição do
escopo do website, listamos os requisitos funcionais, não funcionais e as regras de negócio, de forma rápida e genérica,
extensiva e não profunda.
Agora é o momento de aprofundarmos essa declaração de requisitos, descrevendo maiores detalhes ou até mesmo usando
ferramentas e técnicas adicionais, como, por exemplo, elaborar diagrama de casos de uso e especi�cação de cada caso de
uso.
No diagrama, mostramos todas as funcionalidades do sistema de forma grá�ca e os atores que com elas interagem. E na
especi�cação descrevemos, textualmente, a interação do ator com cada funcionalidade, explicitando os requisitos não
funcionais e as regras de negócio.
No que tange aos requisitos não funcionais, apresentamos a seguir a Tabela 1 com as categorias.
Tabela 1: Categorias de requisitos não funcionais.
Categoria Descrição
Desempenho Relacionado ao desempenho do sistema sob os seguintes aspectos: Tempo de resposta da funcionalidade, restrições
de performance, balanceamento de cargas, dentre outros.
Disponibilidade Medida da disponibilidade do sistema, restrições sobre períodos de manutenção do sistema, ações para o caso de
queda de energia etc.
Segurança Refere-se à segurança do sistema, como, por exemplo, algoritmo de criptografia, regras para criação e manutenção
de usuários e senhas, uso de certificados digitais, uso de protocolos seguros específicos como https etc.
Interoperabilidade Capacidade de integração com outros sistemas, seja por APIs, componentes, banco de dados externos ou outras
formas.
Usabilidade Aspectos que tratam da facilidade de uso do sistema, considerando aspectos como: Cliques máximos de
determinada função, uso de componentes, padronização de componentes gráficos, inserção de recursos de
acessibilidade, compatibilidade com idiomas etc.
Compatibilidade Ambiente de execução do sistema, como navegador e sistemas operacionais, versões de sistema operacional e
navegador, protocolos, linguagens de programação etc.
Confiabilidade O quão confiável é o sistema. Ações: Políticas de backup (sistema e dados), regras para rollback em transações de
banco de dados, regras e diretrizes para restauração de dados em caso de queda de energia etc.
Padrões Padrões em geral, aplicáveis ao software e ao projeto: Padrão de log de erro, de log de informação, padrão de
mensagens, metodologia para desenvolvimento do sistema, padrões de projeto (design patterns) a serem aplicados,
padrões arquiteturais etc.
Legais Exigências de conformidade do software com legislação pertinente ao projeto, por exemplo, atendimento a alguma
norma da Agência Nacional de Saúde para software de hospital, a norma do Banco Central para sistemas financeiros
etc.
Tabela 2: Requisitos funcionais e não funcionais.
Abaixo, na Tabela 2, apresentamos um quadro com a de�nição e exemplos de requisitos funcionais e não funcionais. Atente
que determinadas funcionalidades podem ter preferência a critérios de qualidade diferentes, e outras funcionalidades podem
não ter requisitos não funcionais associados (como o último da Tabela 1).
Da mesma forma, pode haver requisitos não funcionais que se destinam a mais de um requisito funcional, e até mesmo a
todos.
Requisitos funcionais Requisitos não funcionais
Definem as funcionalidades do sistema Declaram as características ou propriedades que o sistema deve atender,
estando relacionadas a uma ou mais funcionalidades
Exemplos
O sistema deve permitir que o aluno realize sua
matrícula nas disciplinas oferecidas em um semestre
UDesempenho: Deve-se privilegiar o desempenho nessa funcionalidade,
pois o aluno deve selecionar as disciplinas e, ao confirmar, sua matricula
deve ser efetivada em cada uma delas
Os coordenadores devem ter acesso às estatísticas de
aprovação, reprovação e trancamento em todas as
turmas de disciplinas selecionadas
Para aprofundarmos e ampliarmos a lista de requisitos que atendam às necessidades de seus usuários, pode ser necessário
um novo contato, usando técnicas de levantamentode dados mais propícias. Agora, nossa intenção é detalhar a funcionalidade
e de�nir com mais clareza cada requisito não funcional.
Nesse aprofundamento é fundamental que entendamos as necessidades do público-alvo, os requisitos comerciais, as
restrições, premissas e, principalmente, os objetivos do projeto.
Os conteúdos aqui apresentados podem ser incorporados a qualquer
processo de desenvolvimento de software que seja usado no projeto do
website.
 Requisitos funcionais do projeto de website
 Clique no botão acima.
Requisitos funcionais do projeto de website
Para aprofundarmos as declarações dos requisitos funcionais, veremos os dados constantes do template:
Descrição: Descreve a funcionalidade que o sistema deve executar. Verbo no in�nitivo + complemento verbal.
Pode ser uma função que alimente o banco de dados (por exemplo, Incluir Disciplina), que emita um relatório
(saída) ou que realize algum processamento (Calcula CR do período);
Usuário: Quem interage com o sistema. Pode ser mais de um per�l;
Dados de entrada: Dados que o usuário informa ao sistema;
Informações de saída: Informações ou retorno (feedback) que o sistema apresenta ao usuário;
Requisitos não funcionais: Descreve, dentro da categoria de requisitos não funcionais, aqueles que se aplicam à
funcionalidade;
Regras de negócio: Regras de negócio que se aplicam à funcionalidade.
Vamos exempli�car os dois primeiros requisitos apresentados na Tabela 1 referentes ao sistema acadêmico de EaD,
rodando na web.
Requisito Funcional: 1. Lançar as notas dos
alunos da turma.
Requisito Funcional: 2. Matricular aluno em
disciplina
Descrição: O professor deve informar a disciplina e a
turma. O sistema apresenta os alunos e suas notas atuais
(se não houve prova ainda, a nota será zero). Professor
informa a nota de cada aluno e confirma. Sistema registra
a nota informada e apresenta uma lista ao professor com
as notas atualizadas.
Descrição: O aluno deve informar o período letivo. O sistema
apresenta as disciplinas que podem ser cursadas, o aluno marca
a(s) que deseja cursar e clica em Confirmar. O sistema registra as
disciplinas a serem cursadas no semestre letivo pelo aluno e as
apresenta em uma lista, que pode ser impressa ou salva em PDF
se o aluno desejar.
Usuário: Professor Usuário: Aluno
Dados de entrada: Disciplina e turma Dados de entrada: Matrícula (obtida no login do aluno), período
letivo
Informações de saída: Relação da nota de cada aluno Informações de saída: Relação das disciplinas matriculadas
Requisitos não funcionais: Usabilidade 🡪 professor lança
cada nota e no final confirma, para que o sistema atualize,
em lote, as notas informadas.
Requisitos não funcionais: Performance 🡪 A apresentação das
disciplinas e o registro ao final devem ser muito rápidos, máximo
de 3 segundos para cada operação.
Regras de negócio: Não há Regras de negócio: O sistema, ao avaliar as possíveis disciplinas a
serem cursadas, deve trazer as do período corrente do aluno,
observando os pré requisitos.
 Fonte: Shutterstock
 A empresa e os concorrentes
Imagem à esquerda e texto à direita
Agora que os requisitos estão declarados em maiores
detalhes, abordaremos os elementos inspiradores para o
design grá�co do website. Temos duas ações fundamentais
nesse sentido: A pesquisa visual na empresa e em seu site
(caso exista, e deve existir, pois hoje toda empresa tem um
site, nem que seja na bio das redes sociais).
Clique nos botões para ver as informações.
É comum os clientes informarem seus desejos para o novo website em uma lista de funcionalidades. A equipe de
webdesign deve veri�car se essas são as necessidades e expectativas médias do segmento de mercado que a empresa
atua.
A pesquisa visual envolve o levantamento e entendimento de todo e qualquer elemento que sirva de inspiração para o
design do website. Nos dias de hoje é bem provável que a empresa já possua um site e/ou per�l comercial nas redes
sociais, no qual poderemos observar: sua composição e elementos, o estilo da navegação, estrutura, fontes, tipogra�a,
cores etc.
A pesquisa deve incluir:
Cores: As cores nos proporcionam distintas emoções e estados de espírito, conforme nossa percepção, e têm um
forte poder de comunicação. As cores dependem da cultura do público-alvo, do contexto, de sua combinação. Por
isso, é importante observar o que já existe, pois pode ter havido um trabalho de comunicação visual no site atual da
empresa;
Tipogra�a: As letras traduzem as ideias que queremos passar ao leitor, logo é importante que tenhamos
conhecimento de como operar com tipogra�a na web, priorizando a usabilidade. Hoje existem muitas tipogra�as,
saber selecionar a mais adequada é fundamental;
Formas: Refere-se à aplicação das leis de Gestalt no projeto do website (Gestalt, do alemão, abrange a teoria da
percepção visual pautada na psicologia da forma). Leis da Gestalt: Uni�cação e segregação, fechamento, boa
continuidade, proximidade e semelhança, fatores que ajudam na criação e obtenção de resultados favoráveis;
Arquitetura da informação: Refere-se à organização da estrutura da interface e à distribuição das informações ao
longo da tela, classi�cando os conteúdos através de taxonomia e atribuição de prioridade às informações mais
relevantes. Para tal, usa-se geralmente o wireframe. Com base nele é que o layout do website é construído;
Navegação: A exposição dos menus e a adequação dos links são fundamentais para garantir um bom ambiente de
navegação do website, devendo ser muito bem planejados e alinhados com a experiência dos usuários (público-
alvo).
Terminando a pesquisa, deve-se destacar os materiais utilizados como referência visual.
Pesquisa visual (empresa) 
Esta pesquisa visa conhecer a concorrência da empresa, através de seus respectivos websites, identi�cando e analisando
seus aspectos positivos e negativos. Trata-se de uma pesquisa de interfaces dos websites concorrentes considerando os
itens levantados na pesquisa visual. Deve-se analisar e descrever as características que o tornam um concorrente
relevante, avaliando padrões e tendências.
A pesquisa deve identi�car os concorrentes diretos, ou seja, aqueles que comercializam os mesmos produtos e serviços,
bem como os indiretos, que ofertam produtos ou serviços semelhantes, disputando o mesmo per�l de consumidor.
Para de�nir os concorrentes a serem pesquisados, identi�que os que competem de forma mais acirrada com a empresa
em estudo. Essas empresas podem estar geogra�camente mais próximas ou praticarem estratégias de comunicação
semelhantes.
Podem ser usadas, eventualmente, ferramentas que analisem o site, como por exemplo Similar Web, que informa os
visitantes e as estatísticas de tráfego através de grá�cos ao longo do tempo, possibilitando identi�car crescimento ou
diminuição da presença online. Essa ferramenta pode ser útil para descobrir os concorrentes com mais acessos e
comparar com as análises dos elementos desses websites.
Essa pesquisa deve servir para descobrir oportunidades a serem exploradas no projeto, avaliando os mesmos aspectos
citados na pesquisa visual.
Pesquisa da concorrência 
Saiba mais
Acesse o site e conheça melhor oSimilar Web.
Conceito editorial
 Fonte: Shutterstock
O conceito editorial direciona o desenvolvimento de uma interface que busque atingir o foco do site, valorizando o conteúdo
oferecido e compartilhado. A conceituação editorial, além do enfoque de criação e edição do conteúdo do website, mostra-se
útil como princípio que conduz a experiência do usuário.
São muitas as variáveis que podem interferir na conceituação editorial. Dependendo do foco, o direcionamento, a estrutura do
site, seus elementos e sua navegação podem ser projetados de maneira diferente, visando atender a determinada necessidade.
 Fonte: globo.com
O foco no conteúdo de notícias diárias (como a globo.com)
exige que o projeto do site facilite o leitor a encontrar as
informações mais atualizadas, as mais relevantes etc. Ao
tratar de relação entre pessoas (como o Instagram), a
interfacedeve facilitar a comunicação clara, simples e
objetiva, considerando a quantidade de conversas
simultâneas.
Um banco de armazenamento de dados especí�cos (como
o Pixabay) demanda fácil localização daquilo que o usuário
procura.
javascript:void(0);
Com o conceito editorial, a ideia é de�nir o que será usado no projeto. Existem muitas ferramentas e modos que permitem
traçar o conceito a ser adotado. O conceito deve considerar os requisitos e objetivos do projeto, bem como entender a
identidade da empresa através dos levantamentos realizados até esta etapa, procurando um resultado mais sólido e coerente.
A Conceituação Editorial pode ser materializada pelo painel visual, conforme a Imagem 1 abaixo. O painel visual ajuda a
"conceituar uma marca, um produto de design, uma ideia, criar produtos, compartilhar �uxos de trabalho".
 
 Figura1: Painel visual | Fonte: shutterstock
A conceituação editorial e comercial demanda seleções que levam ao modo de interlocução com o público, incluindo:
O uso de recursos como conteúdo em diversos formatos, janelas de
diálogo;
O desenvolvimento de bancos de dados, páginas personalizadas,
formulários, chats ou grupos de discussão;
A funcionalidade (facilidade de uso) e a acessibilidade das páginas;
O tratamento visual e editorial geral e das seções;
O valor do conteúdo oferecido e seu relacionamento com o público;
O tipo de conteúdo veiculado;
A relação entre o nome do domínio e seu conteúdo.
Atividades
No que se refere às justi�cativas do projeto, avalie as assertivas a seguir:
I. Deve-se declarar o problema a ser resolvido, mas sem descrever os benefícios;
II. Apresentar números, como valores das receitas provenientes do resultado do projeto, de forma a sensibilizar, especialmente, o
patrocinador do projeto;
Esclarecer os motivos das atividades e investimentos necessários.
Com base em sua análise, assinale a única opção que apresenta a(s) assertiva(s) correta(s):
a) Apenas II.
b) I e III.
c) I e II.
d) II e III.
2. No que tange aos requisitos funcionais e não funcionais, avalie as assertivas a seguir:
I. Os funcionais descrevem as funcionalidades que o sistema precisa ter para atender às demandas de seus usuários. Um
exemplo seria: Toda venda em cartão acima de R$ 200,00 pode ser paga em 3x sem juros;
II. Os requisitos não funcionais descrevem propriedades de uma única e exclusiva funcionalidade;
III. Desempenho e usabilidade são duas categorias de classi�cação de requisitos não funcionais;
A execução de determinada funcionalidade em uma quantidade inferior de segundos refere-se a um requisito funcional de
qualidade.
Com base em sua análise das assertivas, assinale a única opção correta.
a) Apenas III.
b) I e III.
c) Apenas I.
d) II e III.
e) Apenas I, II e IV.
3. Considere o projeto de um website para educar �nanceiramente as pessoas, que envolve desde investimentos tradicionais de
renda �xa até renda variável e investimentos estruturados.
O foco é ensinar a vender a assinatura do serviço em dois planos: O básico, custando 50,00, no qual o usuário tem acesso ao
conteúdo e duas conversas de 20 minutos, ao mês, via chat com especialistas.
O plano avançado oferece o que o básico disponibiliza, sendo que, ao invés de duas conversas via chat, são 10 de 30 minutos ao
mês. Estima-se um custo de R$ 50.000,00 para o desenvolvimento do website. E, mensalmente, um custo de R$ 10.000 para os
conteúdos técnicos a serem inseridos.
Elabore a justi�cativa do projeto e mostre ao patrocinador que vale a pena investir esses R$ 50.000,00 iniciais e os R$ 10.000,00
mensais por 3 meses, pois considera-se que, a partir do 3º mês, as receitas permitirão que se pague os custos mensais.
4. Sobre a pesquisa visual, quais dos itens abaixo não devem ser considerados:
a) Tipografia.
b) Cores.
c) Arquitetura da informação.
d) Identificação do público-alvo.
e) Formas.
5. O ________ direciona o desenvolvimento de uma interface que busque atingir o foco do site, valorizando o conteúdo oferecido e
compartilhado. Além do enfoque de criação e edição do conteúdo do website, mostra-se útil como princípio que conduz a
experiência do usuário.
Assinale a única opção que completa a frase acima:
a) planejamento
b) projeto de interação com usuário
c) objetivo
d) Engajamento
e) conceito editorial
Notas
EXEMPLO 1 - Leia +
A estimativa são ganhos entre 5 e 10%, aos clientes, no intraday. Espera-se um volume de clientes na ordem de 100.000 CPFs
inicialmente (até 6 meses) e um crescimento de 5% ao mês nos próximos 12 meses. O volume de CPF ativos na Bolsa
Brasileira (B3) hoje é de 2 bilhões.
A um ticket médio de R$ 189,00, a expectativa é de um faturamento de R$ 18.900.000,00 até o sexto mês e um crescimento de
R$ 945.000,00 ao mês;
EXEMPLO 2 - Leia +
O cliente pode realizar o pagamento por cartão (débito ou crédito) ou cash após deixar a vaga. O estacionamento poderá
disponibilizar as vagas que desejar, dentro de um período selecionado, conforme a pior demanda (sazionalidade), e assim
ampliar a performance de ocupação e faturamento. Estima-se um aumento no faturamento de 10% a 30%, conforme a
localidade.
O serviço será cobrado por um % (5%) do faturamento gerado ao estabelecimento, mensalmente. Para o cliente, as vantagens
são: Comodidade do cliente em estacionar rapidamente, sem necessidade de buscar vaga, o que nos grandes centros, além de
complexo, pode ser perigoso, dependendo da localidade. Para os estabelecimentos é a chance de ocupar as vagas disponíveis
durante o dia;
EXEMPLO 3 - Leia +3
O website visa aproximar compradores e vendedores, e cada um apresenta o que precisa e o que possui, respectivamente. O
site cruza os dados, identi�ca possíveis negócios e põe as duas pontas em contato; havendo fechamento, o ganho é de 3% do
preço de venda.
O valor de intermediação é menos da metade dos preços praticados no mercado e a burocracia restringe-se aos levantamentos
iniciais, realizados por agentes inteligentes, que emitem as certidões necessárias, acessando os sites.
Título modal 1
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente
uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da
indústria tipográ�ca e de impressos.
Referências
BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro: Alta Books, 2012. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788582601969/. Acesso em 10 jul. 2020.
KALBACH, J. Design de Navegação Web: Otimizando a Experiência do Usuário. Porto Alegre, RS: Bookman, 2009. Disponível
em: https://integrada.minhabiblioteca.com.br/#/books/9788577805310/. Acesso em 10 jul. 2020.
MEMÓRIA, F. Design para internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.
Próxima aula
Design de interação e arquitetura da informação no projeto web;
tMapa do site e wireframe como ferramentas de modelagem da interface.
Explore mais
Veja exemplo de justi�cativade projeto em outro contexto.
javascript:void(0);
javascript:void(0);
javascript:void(0);