Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Boas Práticas para Web Designer

Apresentação sobre boas práticas em desenvolvimento front-end
by

Lucas Azevedo

on 14 March 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Boas Práticas para Web Designer

Boas Práticas para Web
Saiba como facilitar a vida dos usuários e como atraí-los a acessar o seu site.
Por: Lucas Azevedo
Não deixe que o usuário pense muito!
O site deve ser o mais intuitivo possível para que os usuários possam encontrar o que querem rapidamente.

A limpeza e a organização do site devem ser feitas com muito cuidado para que nada tenha ambiguidade e para que os usuários não se percam no site.
Um padrão nas páginas deve ser seguido para que os usuários não se peguntem:

"Eu ainda estou no site ?"
Web Design.
Veja o mundo de uma forma
diferente!

Imagine...
...que você está em um site buscando por uma receita de bolo.
E suas únicas opções de menu são:
Cinema, Culinária, Cultura, Música e Novelas
Que menu você seleciona?
Isso é intuitividade!
A evolução da Web.
1993
2007
2004
Web Dinâmica
Web Estática
Web Participativa
3.0
1.0
2.0
Ou ainda...
Você está tentando se cadastrar em um site e ao final do cadastro é exibido apenas um "V" na cor verde!
O que será que ele quer dizer?
Como escolher a fonte certa?
A fonte do seu site deve ser a mais legível possível.
Fontes sem serifas são mais fáceis de se ler.
Essa é uma fonte com serifas
Fontes com serifas apesar de também serem legíveis, fazem com que o usuário leve um pouco mais de tempo para codificá-las.
O espaçamento das letras e linhas também faz diferença...
Palavras muito juntas tendem a ser ilegíveis. Da mesma forma, palavras muito distantes ou com letras muito separadas serão mais dificilmente lidas, além do que ocuparão espaço desnecessário na página.
As cores da fonte
e do plano de fundo também são de extrema relevância!
O texto e o plano de fundo devem possuir cores que contrastam entre si, para que o texto seja legível. Quanto mais visibilidade você quiser, mais contraste.
Alinhamento do texto...
Considera-se uma boa prática justificar textos quando se redige um documento.
Isso também vale para a Web?
NÃO!!!
isso é uma serifa!
Web Design.
A arte da "vidência"!
Você deve prever os possíveis conteúdos dos elementos que cria...
Você deve também criar objetos reutilizáveis!
Mas o que é isso?!
Antes de tudo,
limpeza é fundamental.
Como anda a
sua gramática?
Certifique-se
de que o seu site vai funcionar para todos!
O que é crossbrowser?
"Facilitando a vida" dos buscadores!
Como e por quê?
Boas práticas
Trabalhando com imagens...
Uma página com muitas imagens demora à ser carregada.
A melhor prática é, sempre que possível substituir as imagens por textos ou apenas não usá-las.
Use imagens
apenas quando necessário.
O complexo mundo dos espaços em branco!
A maioria dos desenvolvedores de backend veem os espaços em branco como monstros enormes de duas cabeças que devem ser eliminados a qualquer custo.
Um design os vê como um sinal de limpeza e como uma forma de fazer os elementos da página respirarem.
Claro que tudo em excesso pode ser prejudicial.
Você tem o poder!
Hey, Designer...
Mas só uma boa aparência não é tudo...
O seu código deve ser organizado e deve seguir os padrões de codificação da linguagem que vai usar.
Além disso, você, como ótimo programador que é, deve prever que outras pessoas no futuro poderão usar seu código e fazer alterações.
Você deve escrever o seu código de forma que o mesmo não precise de manutenção constante.

W3C
Consulte a
Valide o seu código!
Mas o que é essa tal de
W3C
?
Inove!
Esteja atualizado!
Busque por novas soluções, novas tecnologias e pelas tendências da web.
Referências
http://kaus.com.br/design-checklist/
http://www.w3c.br/Sobre
Krug, Steve - Não Me Faça Pensar. Editora STARLIN ALTA CONSULT, traduzido por Fernandes, Acauan Pereira.
http://garotodeprogramaupe.blogspot.com.br/2011/12/definicoes-basicas-web-10-web-20-e-web.html
http://www.evolutionoftheweb.com/?hl=pt-br#/evolution/day
Full transcript