Baixado 24 vezes
Carregado porMauro
Desenho de soluções interactivas para diversas plataformas
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.
Desenho de soluções interactivas para diversas plataformas
- 1. DESENHO DE SOLUÇÕESINTERACTIVASPARADIVERSAS PLATAFORMAS
- 2. QUEM SOU EU?MAUROMARTINSSoftware DeveloperWeb DeveloperiPhone DeveloperAUG Porto Co-Managermauroalexandremartins@gmail.comimauro.com/blog@Mauredolinkedin.com/in/mauromartins
- 3. AGENDANovo paradigma?Responsive WebDesignAplicações VS WebsitesRato VS CorpoLess is more!Dicasparacriaruma boa aplicação
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. NOVO PARADIGMA?Todos comdiferentestamanhos, 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…
- 14. OS CLIENTES?Desktop +Smartphones + Tablets!meusite.cssm.meusite.csstablet.meusite.cssmeusite.com
- 15.
- 16.
- 17. RESPONSIVE WEB DESIGNUma“fundação” flexívelLayouts com percentagensImagens com percentagensmáximasMedia Queries paraesconder / modificarobjectos
- 18.
- 19.
- 20.
- 21. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/RESPONSIVE WEB DESIGNCSS2<link rel="stylesheet" type="text/css" href="core.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />CSS 3<link rel="stylesheet“type="text/css“media="screenand(max-device-width: 480px)" href="shetland.css" /><link rel="stylesheet“type="text/css“media="screenand (max-device-width: 480px)and (resolution: 163dpi)" href="shetland.css" />@media screenand (max-device-width: 480px) {.column { float: none; }}
- 22. OS CLIENTES (parte2)Desktop+ Smartphones + Tablets!meusite.com
- 23.
- 24.
- 25. ?OS CLIENTES (parte2)Desktop+ Smartphones + Tablets!meusite.com
- 26.
- 27.
- 28.
- 29.
- 30. COMO TRANSFORMAR ONOSSOSITE EM UMA APLICAÇÃO?* Tambémfunciona com os sites mobile
- 31.
- 32. LESS IS MOREMenosfuncionalidadesNavegaçãorápidae simplesNãoterinformaçãodesnecessáriaHierarquizarbem a informaçãoparacadaecrãUsarmetáforas do dia-a-diaUtilizargestosjáapreendidos
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. RATO VS CORPOTernoçãodo corpohumanoValidarbem as nossasescolhas a nível de designInteracçõesfrequentesdevemestarnazona inferior;Fazerbotões com +/- 48px
- 42. DICAS PARA SEREMBEM SUCEDIDOSEncontrar um problemaResolver esse problemaCriar um nicho de mercado
- 43.
- 44. Pensar de formaglobal!
- 45.
- 46.
- 47.
- 48. Estaratento a problemase vê-los comooportunidades!OBRIGADO!Questões?mauroalexandremartins@gmail.comimauro.com/blog@Mauredolinkedin.com/in/mauromartins
Notas do Editor
- #5 AMIGA 500
- #6 SPECTRUM 48k
- #7 AIR
- #8 IPAD
- #13 ATENÇÃO AOS DPI
- #28 REGRA DOS 20% DO SITE -> APLICAÇÃO!
- #30 NAO TEM INFORMACAO DESNECESSARIA!POUCAS FUNCIONALIDADES POR ECRA!
- #31 REGRA DOS 20% DO SITE -> APLICAÇÃO!
- #34 REGRA DOS 20% DO SITE -> APLICAÇÃO!
- #37 REGRA DOS 20% DO SITE -> APLICAÇÃO!
- #38 IPOD