Goeiemiddag,- Voorstelling – Wim. Koop geen smartphones meer, maar koop Windows 8 devices Na introductiebij Microsoft heel geïntresseerdgeraaktGoedevriendmeegebracht met uniekeuitspraak en die wouikjullienietonthouden. Jan....
Bedankt Jan.- Zoals Jan al zeifocust Windows 8 zichdus op touch first en is het dus in de eersteplaatsgemaaktom “aanteraken”.Dat is al eeneersterichtlijn die Microsoft dusmeegeeftbij het maken van Windows 8 store applications.Wildatzeggenspecialedingenvoor mouse en keyboard?
Neen, het wordtookgewoonondersteund door het OS. Welkan je bijdesignennadenken over gebruik en eventueeldenkenaan:HOVERSBEPAALDE targetsKijkjenemennaarwaterdusnieuw is:
Het nieuwestartscherm.Wat is ernieuw?LIVE tiles trekkengebruikernaarbinnenFormaataantepassen, wel design verzorgenGroeperen van tilesHorizontal panning, alles op 1 schermKanwelveelworden?
Semantic zoomHelikopter view op contentWerktook “in” applicatieals je het inzet
Nieuwe windows apps zijn edge-to-edge, door verwijderen van chrome, maken we meergebruik van de randen.Fitts-law wijzennaarergens, met muiskan je nietmissen, hoeftnietpreciestezijn.
CharmsOverkoepelend en context afhankelijk in tezettenSwipe van rechts of mouse rechtsbewegenOnder share zitten “contracts”, hierover later nog even meer
Top van het schermnavigatiebalkGebruikvoorvlakkenavigatiestructurenFor example IE: new tabpagesCan give the user a structure for navigating between screens in the app
Van onderkanttoont de app-barAlgemene commando’s rechtsSpecifieke commando’s linksVooralvoorhorzintaalgebruik, duimen.
Beetjeachtergrondbijwaaromikzoenthousiast was toenikbijmicrosoft ben geweest.
BLIJ! Eerstegevoeltoenikuitleghoordeivm Modern UI style...Fan van windowsEindelijkadoptie van designFan van de stijl, daarover later meer
Welkeprincipesheeft Microsoft gehanteerdom de nieuwestijltegaanbepalen? De mosterdhebbenzeduidelijkgehaaldbijwat we de Metro stijlnoemen (ietswatzoalssommigenmisschienwetenofficiëelnietmeer mag ). Het komtervooral op neerdatwerken met fonts en duidelijkiconografie heel snelduidelijkkanmakenwat je zoumoetendoen. WayfindingInternationale typographic styleGoedvoorinternationaalpubliek
Bauhaus – 1920 – 1930Decoratieweghalen, dingenreducerennaaressentie.Functionaliteitstaatvoorop, weghalen van overbodigedecoratieAantalaanhangers, “internationalestijl” die door iedereenkanbegrepenworden
PrincipesGaanzenietallemaal even gedetailleerdbespreken, maar tochaanraken.
Bijeen test vroegenzeaangebruikersom windows tetekenen, zekomendan met volgendeschets.Een van de belangrijksteprincipes is het content before chrome. Met chromebedoelenzebijmicrosoftalleswat je toevoegtvoor:NavigatieLayout Watgebruikershierduseigenlijkhebbengetekend is al die Chrome. Ditzoueenderwelkeapplicatiekunnenzijn. Na gebruikerseentijd met Windows 8 telatenwerkenvroegenzeditopnieuw en krijg je ditalsresultaat: uiteraardstaathier al content.
Beetjegemakkelijkuiteraard, maar welgecharmeerd door de onderbouw.
Dit is de versiezoals we die allemaalkennen.
Als je al een eerste stap neemt door wegnemen van lijnen herken je nog steeds structuur en layout
Ga je een stap verder breng je de content al meer naar voor. 5 items ipv. 1
Om tot slot de Metro guidelines volledig toe te passen en te eindigen met iets dergelijks. Gebruik makend van negative spacing. - Content als hart vd applicatieGebruik HUB om de inhoud van je app duidelijktemakenIntentional/negative spacevooronderscheid
Begint links
En als we ze nu eensvanbovenplaatsen? Still chrome
Enals we ze nu eens in de content verwerken?
Semantic zoom reeds vermeld,kan je hiertoepassen. Zeerkrachtig instrument
Wat is ietsdatikmomenteeleigenlijk al redelijkmisbijveel apps en waarwijveelkunnenbetekenen... Sweat the detailsTrots op wat je maakt
Grid1 unit = 20x20 pxSubunit= 5x5 pxAll aligned to grid makes things clear and structured
Grid example of padding, look at blocks. Screen is divided but still structure and clarity
Font – typerampSegoe UI been refined for use by MicrosoftUse of weights and sizes to create distinction
Font – typerampSegoe UI been refined for use by MicrosoftUse of weights and sizes to create distinction
Zijn het danechtalleen maar blokken?
Mooivoorbeeld van hoe ditwerkt over voorbeeldenheen. Zelfde grid, andereervaring. Nietaltiddblokken.
Vloeiendeanimaties, vlooteovergangen.
Ask who likes this kind of metaphors?
Demo:Sport app, semantic zoomPersonen app, andere semantic zoomFinanciën appMetrotwit, werkt met kolommenGoogleEbayCocktail flow
Now we have seen the possibilities for designing apps, but there is one more Windows 8 feature I want to talk to you about. In my opinion, it is a great implementation in Windows 8 which gives the user a rich user experience across devices.
Zelfde interface overheen Microsoft productenvooreengehele experience.
Now we have seen the possibilities for designing apps, but there is one more Windows 8 feature I want to talk to you about. In my opinion, it is a great implementation in Windows 8 which gives the user a rich user experience across devices.
