Dani Guerrato

Palestra Online – Guias de Estilos para a interface do usuário

Por | Comentários: 3

Veja todo o material complementar a nossa palestra sobre Guia de Estilos, incluindo slides, artigos, ferramentas úteis e, é claro, o video da transmissão na integra.

Gostaríamos de agradeceram a todos que nos assistiram a nossa palestra nesta última quinta-feira através da plataforma Eventials. Foi uma experiência muito interessante interagir ao vivo com o pessoal via chat e trocar conhecimentos. Se você perdeu, não se preocupe. Você pode assistir o video quantas vezes quiser.

Sobre

Entregar conceitos de design sempre foi uma tarefa confusa. Wireframes são arbitrários e pouco precisos, mock-ups de alta fidelidade são precisos demais e acabam tomando uma grande quantidade de tempo… Somado a este problema a infinidade de dispositivos com formatos, tamanhos e resoluções de tela diferentes fica bem difícil prever todas as necessidades de um determinado projeto, tanto na etapa de criação visual quanto no processo de desenvolvimento front-end.

Afinal, como criar layouts para a internet sem perder tempo?

Relembre os bons tempos de brincar de lego, entenda por que wireframes são seus amigos (mais nem tanto), aprenda a planejar websites como sistemas, defina com precisão interações, coloque ordem no front e construa os seus próprios Guias de Estilo para a interface do usuário.

Material de Referência

Video da Palestra

Guias de Estilo para a interface do usuário, via Eventials.

Slides da Palestra

Artigos

Guia de Estilos, por Dani Guerrato, via Tableless.
O que é Design Atômico, por Dani Guerrato, via Tableless.
Atomic design, por Brad Frost, via Brad Frost Blog.
Front-end Style Guides, por Anna Debenham, via 24ways.
Writing an Interface Style Guide, por Jina Bolton, via A List Apart.
A Style guide guide, por Elyse Holladay, via Elyse Holladay Blog.

Inspiração

Showcase de Guias de Estilo
A List apart
Firefox
GitHub
MailChimp – Assets
MailChimp – Patterns
MailChimp – Voice and Tone
Salesforce1
Starbucks
WordPress
Yellowshoe Standarts

Referências

Tabela de elementos mais comuns em frameworks e boilerplaters, por Tyler Sticka.
HTML Periodic Table, por Josh Duck.

Ferramentas

PatternLab
Barebones
Style-Guide-Boilerplate
Pattern Primer
Pears

Idéias para o seu Guia de Estilos…

  • Paleta de Cores
  • Grid
  • Tipografia (com font-stacks)
  • Títulos e parágrafos
  • Links e Botões
  • Citações
  • Navegação
  • Imagens
  • Ícones e Avatares
  • Campos de Formulário
  • Listas
  • Publicidade
  • Tabelas
  • Comentários
  • Mensagens e notificações
  • Animações
  • Carrossel e slider
  • Lightbox
  • Tooltips
  • Breadcumbs
  • Interações (normal, hover, ativo…)
  • Unidades de medida (px, em, %)
  • Snippets de código
  • Padronização da estrutura
  • Regras de usabilidade
  • Tecnologias e formatos
  • Comunicação escrita
  • Downloads úteis
  • Wireframes
  • Informações de contato para suporte
  • O que mais você achar necessário!

Tags: > , , , ,

Dani Guerrato

Dani Guerrato

Uma geek que adora Design, Literatura Fantástica, Games de RPG e mochaccinos de chocolate branco - não exatamente nesta ordem. É designer, desenvolvedora front-end, palestrante e co-fundadora da PopUp. Gosta de coisas estranhas como cheiro de livro e bandas de heavy metal que ninguém ouviu falar.

Você pode achar a Dani por aqui:
Facebook - Twitter - - Instagram

  • Willian

    Qual o Guia de Estilo que vocês usam? Podem disponibilizar?

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Willian,
      Nós utilizamos um Guia de Estilos criado internamente por aqui. Infelizmente não podemos disponibilizar, mas neste post existem referências de guias base tão legais quanto o nosso para você conhecer. :)
      Um abraço!

  • Lucas de Melo

    Valeu galera, muito bom a palestra. Muito boa análise crítica de tudo, buscando a relatividade: metodologias, tecnicas e softwares. Parabéns aos dois!!!

Postamos coisas legais aqui


Google

Adicione no GOOGLE+

Instagram

Siga nosso perfil no INSTAGRAM

Quer utilizar o conteúdo do BlogUp?

Gostamos de compartilhar conhecimento por isto os textos sa seção Blog são licenciado sob Creative Commons com as condições: Atribuição - Não Comercial - CompartilhaIgual.

Em português claro, você pode reproduzir este artigo se cumprir TODOS os requisitos:
1. Ninguém esteja lucrando nada em função disto.
2. Exista crédito para a PopUp Design e o autor do post em um local claro com link para o conteúdo original.
3. O material derivado seja distribuido da mesma maneira.

Obs 1. Leia a licença completa para entender todos os termos.
Obs 2. Se o seu site tiver qualquer tipo de anúncio, como AdSence, por exemplo, isto já é considerado fim comercial e portanto você não pode reproduzir o texto.
Obs 3. Se você gostaria de utilizar este material sob outros termos e/ou possui dúvidas envie um e-mail contato@popupdesign.com.br e requisite uma autorização.