DESENVOLVIMENTO DE SISTEMAS

CONCEITOS PARA
UM DESENVOLVEDOR
FRONT-END
Por: Aldair Cláudio Morais António
Processos iniciais
para se envolver 1 Porquê desejar criar um novo sistema?

com a proposta.
Saber qual é a proposta de sistema a se
2 modelar/desenvolver(Qual é o sistema?) .

Se for uma empresa saber a história/receber

3 documento com os detalhes sobre a empresa.

Tudo isso para saber os objectivos da empresa ou

4 da marca, e os focos da empresa e o seu público,
para ser mais preciso na criação do modelo de
sistema.
O que é sucesso, para o
seu projeto actual?
Aldair, olhe isso...

Satisfazer a Performance e Transimta quem és,

necessidade do visitantes seja autêntico
seu cliente
Tenha atenção na performance do Busque inovar, porém não se mate
sistema. demais... Se inspire, use referências do
Entender o que o cliente deseja
Busque usar técnicas de UI/UX para mercado e busque ajustar, adaptar
realmente, seguir o que foi
ajudar na experiência do usuário e e/ou melhorar, para modelar ou criar
planejado, e ajudar a alcançar
produzir uma interface amigável, que o sistema. Busque ser profissional nas
esse objetivo.
pode atrair muitos visitantes. artes, aprenda com os que já são.
 BORA
COMEÇAR?
VAMOS AGORA OLHAR ALGUNS
TEMAS INTERESS-IMPORTANTES
PARA VOCÊ FRONT-DEV!
 O que é o projecto?
Estudar o Para que fim? Qual o objectivo?
conceito... Qual a categoria de sistema (Que tipo de

app ou quê tipo de site)?

O que o deve fazer o projecto?
Faça uma sessão
de briefing!
Isso é um processo para submeter o cliente ou a ti mesmo a
questões, que irão ajudar para a conclusão de algumas ideias.
Estabelecer isso analisando:

1. Público alvo / Stakeholders;

2. Pesquisas de mercado;
3. Concorrência;
4. Informações estratégicas;
5. Detalhamento da Comunicação;
6. Objetivos.
Define prazos!
Algo muito importante, Organização. Trabalhe com datas, agendas e segmente bem as tarefas.

Tempo de início Tempo médio Tempo de finalizar

Começar é importante. Embora começar seja importante, Definir um prazo para finalizar é
continuar é necessário. necessário, para não ficar
perdido no tempo.
Bora começar

a modelar
Vamos concentrar-nos agora na modelagem

do sistema...
Faça um wireframe
É como um esqueleto, protótipo ou uma

versão bastante primitiva do visual de um

projeto. São layouts simples (preto e

branco) que delineiam o tamanho

específico e o posicionamento dos

elementos da página, recursos do site,

áreas e navegação para o seu site.

Wireframing é a etapa inicial do processo

de design de UI/UX quando a estrutura do

projeto está sendo formada. É a estratégia

por trás do fluxo do usuário, colocada em

uma estrutura visual. Pense nisso como uma

jornada do usuário.
 Fazer estimativa de
quantidade das

páginas.
1. Home
Defina todas as
2. More...
seções do

sistema.
1. Hero
2. About Us
3. Serviços
4. Contactos;
5. Bio
6. Newsletter;
7. Rodapé;
O que desejas

transmitir?
Busque transmitir o conceito verdadeiro do que realmente se quer criar..
Para isso, use referências da empresa (se existem), para ajudar na modelagem

do sistema. Saiba também entender o que não desejas transmitir.

Use os teus sentimentos positivos, lógica, textos, imagens e tudo mais

necessário, para ajudar a retransmitir ou a melhorar o que se deseja

realmente transmitir.
Conheça o fluxo do
Faça um esboço
usuário
Para onde deseja que o usuário vá?
O que você quer que eles vejam?
Onde você gostaria que eles
tocassem (botões)?
Qual é o objetivo principal do
aplicativo?
Busque por inspiração
Use o dribbble, behance, pinterest,
awwwards, ecomm.design, sitesee,
screenlane, land-book, collectui
onepagelove, smashingmagazine...
Trabalhe com uma
Desenhe no papel, ou use uma
ferramenta para esboçar o
hierarquia de informações e manter
Hierarquia de
informações (visual )
ordem de importância que você
atribui às suas informações. Além
disso, é a maneira de como você
organiza a apresentação para o
usuário final
grade
trabalhar com uma grade é
fundamental para criar uma boa
a proporção, a escala e o equilíbrio.
Modele os wireframes
Use o InVision, Figma, Canva, AdobeXD,
balsamiq e outros sistemas para criar
wireframes de alta fidelidade (mais
detalhado, com cores, imagens), Anotados
(meio termo, elementos visuais organizados,
coloca legendas e descrições), e de baixa
fidelidade (simples, pode ser com papel e
caneta, sem cores e sem muitos detalhes).
Uma dica...

Busque referências boas de

wireframes dependendo da

categoria de sistema.
MoodBoard
Moodboard é uma coletânea de

referências visuais (imagens, formas),

auditivas, textuais e até sensoriais para

serem usadas como forma de dar

visibilidade a uma ideia ou um

pensamento. Resumindo, ele reúne

referências visuais para criar os

projetos. (Outros sites, Cores, tipografia,

Imagens, vídeos e outras artes)

Uma mesa/painel físico ou digital onde

colocarás tudo o necessário para

ajudar no processo criativo.

Dica...

Faça um wireframe com maior

fidelidade (Visual Design).

Exemplos
Wireframes de baixa fidelidade,

anotado, e de alta fidelidade.

Outros modelos de wireframes

 ALGUNS

CONCEITOS

IMPORTANTES
DESIGN GRÁFICO
Paleta de cores
É basicamente, uma junção de cores e tons em harmonia criada

com o intuito de transmitir uma ideia, sentimento ou valor.

É bom escolher um determinado número de cores (uma paleta

com quatro a cinco cores costuma funcionar) e brincar com os

tons de cada uma.

Vale lembrar que a ideia de tom, de acordo com a teoria das

cores, está associada à quantidade de luz presente na cor

 Teoria das cores
Cores são elementos importantes no processo de

comunicação e um componente com grande influência no nosso

cotidiano, interferindo nos sentidos, emoções e decisões.

Sabedoria, conhecimento,

Amor, paixão, fúria, ira, desejo,

relaxamento, alegria, felicidade,

energia, velocidade, força,

Humor, energia, equilíbrio, calor,

otimismo, idealismo, imaginação,

felicidade, satisfação,
entusiasmo, vibração, expansão,

esperança, claridade, verão,

romantismo, charme, leveza,

extravagância excesso.
desonestidade, covardia,

poder, calor, agressão, perigo,

traição, inveja, cobiça, engano,

fogo, sangue, guerra, violência.

doença, perigo.
 Verde Azul Rosa

Cura, calma, perseverança,

Fé, espiritualidade, contentamento,

autoconsciência, orgulho, natureza,

lealdade, paz, tranquilidade,
Amor, delicadeza, feminilidade,

meio ambiente, saúde, boa sorte,

calma, estabilidade, harmonia,
doçura, delicadeza, amabilidade,

renovação, juventude, vigor,

unidade, confiança, verdade,
gentileza, sensibilidade, juventude,

generosidade, fertilidade, ciúme,

confiança, segurança, limpeza,
refinamento.
inexperiência, inveja, imaturidade,
ordem, céu, água, frio, tecnologia.
destruição.

Roxo ou Violeta Marrom Preto

Realeza, nobreza, espiritualidade,

Poder, sensualidade, sofisticação,

cerimônia, mistério, transformação,

Materialismo, terra, casa, ar livre,

formalidade, elegância, riqueza,

sabedoria, conhecimento,
confiabilidade, conforto,

mistério, medo, anonimato,

iluminação, crueldade, arrogância,

resistência, estabilidade,

infelicidade, profundidade, estilo,

luto, poder, sensibilidade,

simplicidade, rústico.
mal, tristeza, remorso, raiva
intimidade.
 Branco

Proteção, amor, respeito, pureza, simplicidade, limpeza, paz, humildade,

precisão, inocência, juventude, nascimento, inverno, neve, bom, casamento.

As cores causam alguns efeitos:

Biológico (Pesquisas apontam que as cores verde e azul suaves fazem com que nosso

corpo produza mais substâncias químicas que relaxam e tranquilizam)

Emocional (No nosso humor, amarelo, pode despertar alegria, otimismo. Já o preto,

quando em excesso, pode causar um efeito contrário, gerando um estado deprimido.)

Cultural (A história das cores está muito relacionada a fatores culturais, elas geram

uma grande influência. Um exemplo claro, mas que gera controvérsias, é a

tradicional associação da cor azul para menino e rosa para menina. Já a cor preta é

muito associada ao luto), e Psicológico.

Tipografia
Tipografia é o estudo, criação e aplicação

dos caracteres, estilos, formatos e

arranjos visuais das palavras.

Tipos de fontes/ o que transmitem

Serif (confiança, respeito e tradição)

Sans Serif (modernidade, objectividade e simplicidade)
Cursive (Feminilidade, elegância, criatividade e simpatia)
Display (Artísticas)

Variações Alinhamento

Light À esquerda;
Regular À direita;
Bold Ao centro;
Extrabold Justificado.
Itálico
Condensado
Estendido
Cuidados...

Não misture muitas

Fique atento com a
Não estique, nem achate

fontes, use algumas

legibilidade das letras
a fonte (largura e altura),

fontes que tenham boa

(Visibilidade, tamanho, cor,
para não distorcer o

harmonia. contraste), para que não

design, é um erro de

haja dificuldade na leitura. proporção.

Cuide do espaçamento
Cuide do espaçamento
Não exagere no uso de

entre as linhas do texto

entre as letras do texto
tipos de ênfase(itálico,

(leading), para que não

(tracking), para que não
negrito, sublinhado,

fique nem muito afastadas,

fique nem muito afastadas,
maiúsculo, cores e outros),

nem muito juntas, ajuste. nem muito juntas, ajuste. faça o simples e destaque

apenas o necessário p/

não poluir a arte.

Contraste
O contraste nada mais é do que o nível de oposição entre dois

elementos. Eles podem ser conseguidos por meio das cores,

espessuras, tamanhos etc. e servem para enfatizar informações

mais importantes dentro de um design, além de aumentar a

visibilidade de alguns itens.

Sem contraste

Com contraste
Teoria das formas
Estudos afirmam que cada forma geométrica influencia e

provoca reações diferentes em nossa mente.

As formas possuem um significado psicológico fundamental no

Design.
As formas dizem muito mais sobre a coisa que estamos a

representar. Quando digo coisa não é no sentido inútil, digo

coisa para referir-me a qualquer “coisa” que precisemos

representar.
Círculo Quadrado
Perfeição, Inovação, Movimento, Criatividade
Segurança, Estabilidade, Realismo,

e Extoversão. Honestidade e Confiança.

Normalmente, despertam sensações

Linhas verticais estão associadas à
de união, harmonia, amizade, amor,
força, eficiência e progresso.
ciclos e segurança. Linhas horizontais transmitem

estabilidade, confiança e tranquilidade.

Triângulo Hexágono
Crescimento, Suporte, Poder, Justiça, Ciência e
Inteligência, Unidade, Perfeição, Sinergia e

Inspiração Sabedoria.

Cantos retos transmitem a sensação de

Cores fortes e chamativas contribuem

estabilidade, seriedade, equilíbrio, força,

para chamar a atenção do consumidor e

profissionalismo, eficiência, ciência e

transmitir as isso.
modernidade.
Hierarquia Visual
A Hierarquia visual é o princípio de organizar os

elementos para mostrar sua ordem de

importância, distribuindo-os de forma lógica e

estratégica para influenciar as percepções dos

usuários e os orientar para as ações desejadas.

De modo geral, é a hierarquia visual que

determina quais elementos receberão atenção do

usuário, atraindo seus olhos diretamente para o

foco desejado no momento correto.

Alguns princípios

Tamanho e escala Cor e contraste

Elementos maiores são mais importantes. cores vivas se destacam mais do que cores

escuras.
Hierarquia tipográfica Espaço
o tamanho, tipo e peso das fontes
torna mais fácil o entendimento. Possibilita

proporcionam diferenciações e destaques. aquele respiro, para que os outros elementos

sejam bem ordenados e percebidos.
Proximidade Espaço em branco (Negativo)
separa os elementos uns dos outros e cria sub-
Espaço positivo: espaço que ocupa o objeto.

hierarquias. Quando vários itens estão

Espaço negativo: espaço em volta do objeto. Faça

próximos entre si, formam uma unidade visual

o mesmo desenho duas vezes e em um desenho faça

única, coesa, e não mais parecerão distintos. a pintura positiva (pintura do objeto) e no outro a

pintura negativa (pintura do fundo).

 Repetição
visa fortalecer a unidade. Ex.: Google é uma

Alinhamento marca que sabemos suas paletas de cores e o tom

de voz que utiliza. Ela não muda isso nas suas

cria ordem entre os elementos.

artes, existe repetição. Esse é um elemento crucial,

unidade é um conceito muito importante no

tanto para manter a consistência da marca

design.
quanto para conectar seus produtos. E não só...
Ex.: Nos wireframes, use repetição nas fontes,

cores, alinhamentos, para dar consistência na arte.

 Perspectiva
é uma técnica para representar volumes

Linhas tridimensionais e relações espaciais em duas

guiam o olhar. Linhas podem canalizar

dimensões, como se fosse do ponto de vista de um

certas ideias. As retas podem evocar ordem

observador. Sua principal característica é que os

e clareza; onduladas podem criar

objetos parecem menores quanto mais distantes

movimento; e as linhas em ziguezague

estão do observador. A perspectiva é a técnica

podem implicar tensão ou entusiasmo. usada para criar a ilusão de profundidade.

Referências...
Procure usá-los...

ESSES são conceitos

importantes na área de design

gráfico e que podem ajudar

muito na modelagem dos

sistemas que desejas criar.

E mais...

No processo de modelagem, é

necessário ir mostrando as

mudanças para o cliente (se

houver). Isso vai ajudar para que

o final não seja uma surpresa

E com eles, será possível criar um

sistema organizado, bonito e que

atraia os usuários.

Mas não para por aí. É

necessário, após a modelagem

desenvolver o wireframe criado.

 ESCOLHA UMA

LINGUAGEM DE

PROGRAMAÇÃO
DESENVOLVIMENTO
Agora é só codificar...
Estude as linguagens, e escolha a

que melhor se adequa a

demanda de sistema que se

pretende desenvolver.
Busque usar as melhores

práticas, estruturar um código

limpo e organizado, implementar

funcionalides que contribuem

para a boa experiência de

usuário (UX), e desenvolver um

sistema bem estruturado.

Se posicione e continue estudando...

Vale lembrar, que é necessário

continuar a investigar. O que foi

colocado aqui nesse documento

não pode ser o suficiente. E se

existe mais, busque mais.

 EEEEEE!
É TUDO POR

AGORA !!!!!