WEB DESIGN

ATIVIDADE PRÁTICA

Prof. MSc. Jorge Kimieck

 TEMA DA ATIVIDADE

Nesta atividade prática deverão ser criados os wireframes para três

páginas de um site pessoal, tendo como base os materiais, conceitos e técnicas
abordados nas aulas da disciplina de webdesign e no texto complementar. O
objetivo é o de exercitar os conceitos de prototipação/wireframes e layouts em
busca do desenvolvimento de competências relacionadas aos conhecimentos
básicos necessários para a construção de layouts para sites web e produtos
digitais, criando wireframes que possuam coerência entre design e os princípios
de navegação e usabilidade.

TEXTO COMPLEMENTAR: WIREFRAMES

Os wireframes compõem um esboço ou rascunho que é elaborado antes

da elaboração do layout final de uma página para um site web ou um produto
digital, servindo como um modelo para auxiliar na sua diagramação, e que
podem ser utilizados desde a etapa da arquitetura de informação, com
wireframes menos detalhados e com menor complexidade, visando testar ideias
antes do seu desenvolvimento, até a criação de protótipos mais detalhados e
funcionais apresentando e materializando os conceitos de design propostos
durante os planos do projeto.
As bases para a criação dos wireframes são fundamentadas nos
princípios do design, no briefing com o cliente, na experiência do usuário (UX) e
em testes de usabilidade, otimizando o processo de webdesign como um todo.
Pensando em princípios do design, deve-se levar em conta a hierarquia
das informações, o tamanho e o posicionamento dos elementos, as cores de
acordo com os objetivos e foco principal do site/produto digital a ser desenvolvido
entre outros princípios como interatividade, usabilidade, etc. Outro fator a ser
considerado é a estrutura tida como padrão das páginas web, que consiste em
um cabeçalho, um corpo e um rodapé, e que possuem informações e elementos
específicos a serem inseridos em cada um deles.

2
 Desta forma, podemos classificar os wireframes em três tipos principais:
wireframe de baixa fidelidade, de média fidelidade ou anotado e de alta
fidelidade.
Nos wireframes de baixa fidelidade são apenas definidas áreas para os
elementos da página de forma simplificada, podendo até ser feito manualmente
em folhas de papel, post-its, etc. Na figura 2 podemos ver um exemplo deste tipo
de wireframe.

Figura 2 – wireframe de baixa fidelidade

Multigon/shutterstock

3
 Os wireframes de média fidelidade também são chamados de “anotado”
e é o modelo intermediário entre baixa e alta fidelidade, apresentando uma maior
organização dos elementos visuais, já simulando o layout de uma página web ou
de um produto digital, além de apresentar legendas e descrições das
áreas/elementos da página. Veja um exemplo de wireframe anotado na figura 3.

Figura 3 – wireframe anotado (média fidelidade)

Stanis.Olga/shutterstock

No desenvolvimento dos wireframes de alta fidelidade é incluída a

possibilidade de interação, simulando a versão final do layout proposto para a
página. Neste caso, deve-se utilizar softwares específicos que possuam estes
recursos de prototipação, como o Adobe XD, por exemplo.

4
 Figura 4 – wireframe de alta fidelidade

PureSolution/shutterstock

É importante ressaltar que os wireframes ainda não são a versão

finalizada do layout, mas devem apresentar de forma clara e objetiva como será
a estrutura do site ou do produto digital, de acordo com as características de
cada um de seus tipos, ou seja, apresentando sua estrutura básica nos
wireframes de baixa fidelidade, sua organização espacial e visual na média
fidelidade ou a simulação do layout final, simulando os recursos de navegação e
com a inclusão de conteúdos e de detalhes, quando na elaboração de um
wireframe de alta fidelidade.

DESCRIÇÃO DA ATIVIDADE

O aluno deverá criar os wireframes utilizando softwares como o FIGMA,

Adobe Illustrator, Photoshop, Adobe XD ou outro de sua escolha. Para os
wireframes, deverá seguir as seguintes diretrizes:

5
 - O tipo de wireframe a ser produzido deverá ser de média fidelidade
(anotado);
- Cada wireframe deverá ter áreas determinadas e identificadas para
navegação, texto, imagens, entre outros elementos que sejam necessários para
a arquitetura de navegação do site (figura 1);

Figura 1 – mapa de navegação

HOME

SOBRE PORTIFOLIO

....

...
Elaborado por: Kimieck, 2021

A atividade está subdividida em três partes e serão avaliadas

individualmente:
Atividade 1 – Wireframe para a página Home
O aluno deverá criar o wireframe de média fidelidade – anotado – e
determinar as áreas de navegação, texto, imagens, ícones, entre outros
elementos necessários e identificá-los corretamente. Também deverá aplicar
uma cor de fundo (background) para a página.

6
 Atividade 2 – Wireframe para a página Portifólio
O aluno deverá criar o wireframe de média fidelidade – anotado – e
determinar as áreas de navegação, texto, imagens, ícones, entre outros
elementos necessários e identificá-los corretamente. Também deverá aplicar
uma cor de fundo (background) para a página.
Deve também inserir pelo menos 1 (uma) imagem, que pode ser de seu
portifólio pessoal ou de banco de imagens em uma das áreas de imagem
definidas no layout.

Atividade 3 – Wireframe para a página Sobre

O aluno deverá criar o wireframe de média fidelidade – anotado – e
determinar as áreas de navegação, texto, imagens, ícones, entre outros
elementos necessários e identificá-los corretamente. Também deverá aplicar
uma cor de fundo (background) para a página.
Para esta página, deverá prever e inserir uma área para um formulário de
contato.

Avaliação
Cada atividade será avaliada individualmente, conforme os critérios
estabelecidos no template e na sua apresentação

7
 REFERÊNCIAS

ADOBE. Get Started with our step-by-step guide. AdobeXD. Learn. Disponível
em: < https://www.adobe.com/products/xd/learn/get-started.html> acesso 07 out.
2021.
FANGUY, Will. How to make your first wireframe. Invision. Inside Design.
2019. Disponível em: < https://www.invisionapp.com/inside-design/how-to-
wireframe/> acesso 07 out. 2021.
GARRETT, Jesse James. The Elements of User Experience. Berkeley: New
Riders, 2011.
GUERCI, Jonatas. Uma metodologia para a etapa de arquitetura da
informação. Brasil: UX Collective, 2017. Disponível em:
https://brasil.uxdesign.cc/arquitetura-da-informação-d057cf7301a . acesso 07
out. 2021.
LIDWELL, William; HOLDEN, Kritina; BUTLER, Jill. Universal Principles of
Design. Gloucester, EUA: Editora Rockport, 2003.
NIELSEN NORMAN GROUP. 10 Usability Heuristics for User Interface
Design. EUA: Nielsen Norman Group, 2020. Disponível em:
<https://www.nngroup.com/articles/ten-usability-heuristics/ >. acesso 07 out.
2021.
PAZ, Mônica. Web Design. Curitiba: Intersaberes, 2021.