Curso Web Design Responsivo - Parte 1 de 4

Parte 1 de 4: webdesigner workflow.

Propondo novos deliverables para produção de websites responsivos.

Curso ministrado em Março/2014.

#rwd #responsive #webdesign #course #NIC.

Transcript

1. Workflow do Designer™ “Vou fazer um website…” Blog, loja, landing page, one-page, portfolio, etc.
2. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 “Lálálááá… vou abrir o Photoshop e rabiscar umas idéias…” Workflow do Designer™
3. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Designer™
4. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Designer™
5. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 “Vou então trabalhar direto no navegador. Uso uns templates umas bibliotecas já prontas dou uma adaptada e pronto…” Workflow do Designer™
6. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Designer™
7. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Designer™ Entramos numa era “Pós-PSD”?
8. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 http://danielmall.com/articles/the-post-psd-era/ Workflow do Designer™
9. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 http://bradfrostweb.com/blog/post/the-post-psd-era/ Workflow do Designer™
10. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Designer™ Planeja Desenha Desenvolve Publica Antes do responsive
11. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Designer™ Planeja Desenha Desenvolve Publica C elular Tablet D esktop Ajustes no design Depois do responsive Prazo total de execução = Prazo original * 1.8
12. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Designer™ “O que mudou?”
13. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
14. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Fonte: http://qz.com/145704/slides-mobile-is-eating-the-world/
15. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ Na era “responsiva” & “Pós-PSD” Ferramentas: Empatia & Rascunhos
16. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
17. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 http://bolshoipub.com.br/evento/20/03/2014/
18. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™
19. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Sketchs NÃO mostrar aos clientes
20. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 “Não posso fazer layout no Photoshop, não posso mostrar sketches… O que pode então?” Workflow do Web Designer™ Pós-PSD
21. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 “Não acho que estamos em uma era Pós-PSD, acho sim que estamos entrando numa era Pós-full-comp” Workflow do Web Designer™ Dan Mall
22. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ Desvantagens dos layouts em Photoshop 1. Possuem largura fixa;! 2. Pensamento inicia pelo estilo e não pelo conteúdo;! 3. A experiência de uso da interface não pode ser demonstrada de forma adequada (cliente não consegue usar/interagir ou sentir o fluxo da interface);! 4. Sinônimo de trabalho repetido (mesmo com smart- objects);! 5. Os layouts/mockups nunca representam exatamente o que será entregue ao cliente.
23. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ Style tiles 1. Menos vagos que moodboards;! 2. Menos trabalhosos que full-comps ou mockups;! 3. Apresentam o look & feel;! 4. Flexibilidade na criação e montagem dos elementos e apresentação;! 5. Não criam uma expectativas irreais no cliente, colegas de trabalho e desenvolvedores. http://styletil.es Soluções
24. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
25. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
26. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
27. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 “[Style tiles são] catalisadores de diálogos em torno das preferências e objetivos do cliente.” Workflow do Web Designer™ Samantha Warren http://samanthatoy.com
28. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ Element Collages 1. Forma abstrata de documentar design;! 2. Não é o design final mas sim uma montagem arbitrária de partes sem uma lógica ou ordem;! 3. Propõe dialogo (cliente ativo) ao invés de apresentação (cliente no pedestal);! 4. “Obviamente isso não é um website mas consigo ver claramente como ele pode ser tornar um.” Soluções http://danielmall.com/articles/rif-element-collages/
29. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
30. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
31. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
32. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
33. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ Atomic Design 1. Metodologia para criar “design systems” no browser, usando techs web, HTML e CSS;! 2. Modularidade como principio da web;! 3. “Não estamos desenhando páginas e sim sistemas de componentes” (Stephen Hay). Soluções http://bradfrostweb.com/blog/post/atomic-web-design/
34. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
35. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Atoms
36. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Moléculas
37. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Organismos
38. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ Style Tiles Element Collages Atomic Design Soluções Mood Boards Design System/Guide Web Components Pattern Primer… etc.
39. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
40. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
41. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ 1) Conteúdo + Forma = Design; 2) Desenhar de dentro (conteúdo) pra fora (página); 3) Modularizar tudo.
42. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
43. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ E o responsive web design?
44. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ “Web design é 95% Tipografia” Olivier Reicheinstein, Out. 2006 http://ia.net/blog/the-web-is-all-about-typography-period/
45. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Uma página web sem design já é responsiva
46. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
47. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ O bom responsive é “Mobile First"
48. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014
49. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Workflow do Web Designer™ Exercício proposto!!!11 1. Escolha um elemento de um site que sempre lhe incomodou; 2. Rascunhe 2 ou mais variações nas versões mobile e desktop deste elemento. “Mobile First” Lembre-se Exercício proposto!!!11