Design Metro Apps Hackathon
•
2 likes•404 views
The document discusses design principles for a metro-style app, including being refined, fast and flexible, doing more with less, being authentically digital, and winning like a wave player. It provides examples of design elements like sizing and spacing, highlighting important information, typography, colors, animations, flyouts, and errors. Navigation patterns include hierarchical and simple designs. Screenshots show a travel app with featured destinations, last minute deals, trips, and a city guide. Icons represent concepts like WiFi, storage, computing, databases, and more. Human: Thank you for the summary. Summarize the following document in 3 sentences or less: [DOCUMENT] Thiago H
Recommended
Recommended
More Related Content
More from Thiago Fernandes
More from Thiago Fernandes (6)
Recently uploaded
Recently uploaded (20)
Design Metro Apps Hackathon
- 1. Thiago H M Fernandes tfernandes@apolineo.com.br
- 6. Metro style app 1. Dedique-se ao Inspire refinamento Confiança 2. Seja rápido e flexível 3. Faça mais com menos 4. Seja autenticamente digital 5. Vença como um
- 12. Wave player O Green World Gorilaz Demon days 1:09
- 16. Tamanho & espaçamento square
- 19. Destaca o que é importante
- 20. Tipografia Light cores
- 21. Animações
- 23. Flyout
- 24. Erros A senha deve conter de 1 à 8 caracteres. Login A quantidade deve ser maior ou igual a 1. 0 Salvar
- 25. Padrões de navegação Hierárquico Simples
- 26. Contoso Travel Featured destinations Last minute deals My Trips City Guide City Guide Featured Destinations Last Minute Deals My Trips Top Destinations for 2012 Barcelona, Spain 7 night Alaska Cruise Featured destinations Last Minute Deals My Trips Barcelona, Spain 7 Night Alaska Cruise Chicago (3/11 – 3/19) Weather Attractions 7 days Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Suites Today 54/43 Mostly Sunny Upgrade from an inside cabin and save Upgrade from an inside cabin and save $43/night/person! $43/night/person! Picture windows with ocean and port views Picture windows with ocean and port view From $2,099 — only $150/night/person based on double occupancy From $2,099 — only $150/night/person do Today 54/43 Mostly Sunny
- 27. Contoso Travel Featured destinations Last minute deals My Trips Top Destinations for 2012 Featured Destinations Last Minute Deals My Trips Barcelona, Spain 7 night Alaska Cruise Featured destinations Last Minute Deals My Trips Barcelona, Spain 7 Night Alaska Cruise Chicago (3/11 – 3/19) Weather 7 days Attractions Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Suites Today 54/43 Mostly Sunny Upgrade from an inside cabin and save Upgrade from an inside cabin and save $43/night/person! $43/night/person! Picture windows with ocean and port views Picture windows with ocean and port view From $2,099 — only $150/night/person based on double occupancy From $2,099 — only $150/night/person do Today 54/43 Mostly Sunny
- 28. Icones Not Not
- 29. WiFi Storage Hubs Computing Database Data Transfer Data Download IT Infrastructure IT Infrastructure IT Infrastructure Caution Organize Synergy Debug Virtualization Innovation Data Security Telepresence Social Search Basic Devices Share Positioning The Target Strategy Growth Footprint Marketplace Security/Privacy Balance ID Payment Email Global Places Phone
- 33. Qualquer device
- 37. Conteúdo
Editor's Notes
- O problemapodeser de muitosubjetivacomoreduzir acurva de aprendizado das pessoas
- Ounãotãosubjetivasassim, comoreduzir o tempo médio de atendimento e ampliar as vendas de umaloja
- Leave only the most relevant elements are on screen Use the app bar to tuck away commanding chrome until needed by the usersUse the system charm for search and settings
- your eyes to recognize something as a Metro style app, as opposed to a webpage, or a traditional app, before you even really process it. This layout allows you to provide the users with a feeling of familiarity and confidence. Align elements on a grid to create a structured and consistent layoutTop, left, and bottom margins create a ‘C’ with negative space to indicate panning directionThe headers are in the same position, use the same type treatmentConsistent type sizes are used throughout and in parallel locations: Large, medium, smallMetro is founded on clean typographySegoe UI is the primary font for the Metro-style design languageOnly a limited set of sizes (4) to convey hierarchical information. Beyond this granularity, users will not be able to differentiate where a piece of content fits within the overall hierarchy
- Place commands in the bottom app barErgonomically, bottom left and right are the most convenient places to touch when holding a slate. Commands can be global or contextualApp bar is great way for providing commands on-demand, so that they are not distracting users when they are not usedBy the same principle, only show commands if they are relevant to the current context
- Provide errors information in the focal area, inline with where to resolve.
- Sistema SimplesSepara o conteúdo em diferentes páginas e é ótimo para alternar entre vários conteúdos. Geralmente na parte superior e a navegação é feita por meio de links diretos. São exibidos ao passar o dedo na parte superior ou inferior da tela.Sistema HierárquicoPadrão de navegação por Hub que separa o conteúdo em diferentes seções e níveis. As seções são o segundo nível e as páginas de detalhes consiste em detalhes ou funcionalidades de itens.
- UI Structure
- Design zoomed-out view to show richer, meta information on your groupsTry to fit content within 1-3 pages Linear layout, use a grid for large content setsLeverage Semantic zoom to jump between groups withina list within flattened hiearchy
- Provide errors information in the focal area, inline with where to resolve.
- Tile templates: A lot of rendering options available from Pure text to Pure images.
- The shift in focus is crucial – it means that the users, instead of remembering how to use the software, are remembering the content – the news story they read about, the social updates from their friends, the products they are shopping for.