A apresentação discute o novo paradigma de diversas plataformas digitais e propõe o design responsivo como solução para criar sites e aplicações adaptáveis a diferentes telas. O design responsivo utiliza porcentagens flexíveis, imagens adaptáveis e media queries para ajustar automaticamente o layout. A interação também deve considerar se está sendo feita por mouse ou gestos, priorizando áreas inferiores para toques.

1. DESENHO DE SOLUÇÕES INTERACTIVAS PARA DIVERSAS PLATAFORMAS

2. QUEM SOU EU? MAURO MARTINS Software Developer Web Developer iPhone Developer AUG Porto Co-Manager mauroalexandremartins@gmail.com imauro.com/blog @Mauredo linkedin.com/in/mauromartins

3. AGENDA Novo paradigma? Responsive Web Design Aplicações VS Websites Rato VS Corpo Less is more! Dicasparacriaruma boa aplicação

4. amigahistory.co.uk

5. flickr.com

6. apple.com

7. apple.com

8. NOVO PARADIGMA? Desktop Laptop Smartphones Tablets Consolas Quiosquesmultimédia Instalações TV?

9. NOVO PARADIGMA? Desktop Laptop Smartphones Tablets Consolas Quiosquesmultimédia Instalações TV?

10. NOVO PARADIGMA?

11. NOVO PARADIGMA? Todos com diferentestamanhos, resoluções, formas de utilização!

12. NOVO PARADIGMA? Apenasos smartphones* * Smartphones maisvendidosnos EUA

13. OS CLIENTES? QUEREM TUDO! Desktop + Smartphones + Tablets! e o quemaishouver…

15. m.meusite.com

17. RESPONSIVE WEB DESIGN Uma “fundação” flexível Layouts com percentagens Imagens com percentagensmáximas Media Queries paraesconder / modificarobjectos

23. m.meusite.com

24. tablet.meusite.com

26. m.meusite.com

27. tablet.meusite.com

29. APLICAÇÕES VS SITES Soluçãoquevariabastanteconformecadasituação!

30. COMO TRANSFORMAR O NOSSO SITE EM UMA APLICAÇÃO? * Tambémfunciona com os sites mobile

31. LESS IS MORE!

32. LESS IS MORE Menosfuncionalidades Navegaçãorápida e simples Nãoterinformaçãodesnecessária Hierarquizarbem a informaçãoparacadaecrã Usarmetáforas do dia-a-dia Utilizargestosjáapreendidos

33. LESS IS MORE

34. LESS IS MORE

35. RATO VS CORPO

36. RATO VS CORPO

37. RATO VS CORPO 48px

38. RATO VS CORPO

39. RATO VS CORPO

40. RATO VS CORPO

41. RATO VS CORPO Ternoção do corpohumano Validarbem as nossasescolhas a nível de design Interacçõesfrequentesdevemestarnazona inferior; Fazerbotões com +/- 48px

42. DICAS PARA SEREM BEM SUCEDIDOS Encontrar um problema Resolver esse problema Criar um nicho de mercado

44. Pensar de forma global!

45. Tentarusarelementosfluídos e adaptáveis

46. Ternoção do nossocorpocomoobjectointeractivo

47. Menosémais!