Laatste Berichten

Ideeën toegankelijk maken met een mindmap

Geplaatst op: 27 februari 2015 10:08 ; Laat uw reactie achter februari 28, 2015 at 10:59 am Qdraw

Het toegankelijk maken van informatie is iets anders dan het publiceren. Informatie die toegankelijk is kan makkelijk worden gescand. Scannen is het snel doorkijken van bijvoorbeeld een tekst. Informatie is toegankelijk wanneer het voor de gebruiker scanbaar is.

De basis van de mindmap is een boomstructuur. Een boom heeft een stam aan die stam zitten takken en zitten weer zijtakken. Aan deze zijtakken zitten dan de bladeren en deze bladeren bestaan weer uit kleinere onderdelen.

Een mindmap begint met een centraal onderwerp zeg maar de stam. Het centrale onderwerp is in onderdelen te verdelen, de zijtakken. Op deze manier wordt de informatie binnen een ander item toegevoegd.

Mindmap is een middel om ideeën en creatieve processen te ordenen. Het ordenen zorgt er voor dat de informatie toegankelijker wordt. Zo kun je een mindmap gebruiken om in een kleine groep de ideeën op te schrijven zodat er verder op kan worden geassocieerd. De informatie is zo makkelijker te lezen.

Gebruik een mindmap om een structuur te analyseren. Door een mindmap te gebruiken in een boomstructuur orden je de informatie hiërarchisch. Het hiërarchisch opschrijven van informatie kan worden gebruikt om een website te analyseren. Een website is te analyseren door elke klik als niveau uit te schrijven, denk aan de takken en zijtakken van de boom. Door deze non-lineaire manier van ordenen is de structuur zichtbaar.

Hieronder staat een voorbeeld waar een overzicht van de inhoud zichtbaar is. De nadruk ligt in de voorbeeld op de structuur en niet op de tekst.

Ideeën toegankelijk maken met een mindmap ; mindmap | foto 1

Tags: ,

Gecategoriseerd in:

Gebruikers-scenario’s

Geplaatst op: 20 februari 2015 15:43 ; Laat uw reactie achter februari 21, 2015 at 1:37 pm Qdraw

Gebruikers-scenario zijn taken die een gebruiker kan uitvoeren. Een taak die uitgevoerd kan worden is het kopen van een treinkaartje van Amsterdam naar Apeldoorn. Voor een product of diensten zijn er meerdere taken mogelijk. Zo is in het voorbeeld van het kopen van een treinkaartje ook een optie om een treinkaartje van Apeldoorn naar Deventer een kaartje te halen. Van elk product kun je gebruikers-scenario’s maken.

Een storyboard is een stripverhaal dat snel geschetst wordt. Een storyboard wordt vaak gebruikt om iets snel visueel weer te geven. Bij het maken van een film worden ook storyboards gebruikt. Door het snel te schetsen richt je niet op details maar op de grote lijnen.

Door de gebruikers-scenario’s te visualiseren overzicht. Dus door te focussen op de taak, maak je het product eenvoudiger. Door te kijken of er stappen missen denk je aan taken aanvullen. Door op deze manier kom je op stappen die je anders wanneer je een compleet ontwerp maakt vergeet.

Uitgewerkte storyboard gebruikers-scenarios zijn optel sommen. Door deze storyboards uit te werken en samen te voegen zorg je voor een interaction design dat de nadruk legt op de basisfuncties

De uitwerkingen van het storyboard is het handig om de buitenlijnen op 1px te houden en de overige lijnen de breedte van 0,25px te gebruiken. Het is niet verplicht maar in Illustrator kun je ook de wireframes op ware grote uitwerken.

Om onnodig design werk te voorkomen is het handig om een assest canvas te maken. Een assest is een onderdeel met waarde. Onderdelen met waarde kunnen ornamenten zijn. Een ander voorbeeld is een logo.

Wanneer de eerste basisversie is uitgewerkt met de belangrijkste functies. Nu kun je deze uitbouwen door nieuwe minder gebruikelijke scenarios te bedenken en hier opnieuw storyboards van te maken. Zo bouw je de interface uit van de belangrijkste functies naar functies die minder gebruikt worden.

Een afbeelding uit het treinkaartje-scenario:

Gebruikers-scenario's ; Kaartautomaat, ticket machine, NS, Amsterdam Centraal, Nederlandse spoorwegen | foto 1

Tags: , ,

Gecategoriseerd in:

Carnaval Klarenbeek 2015

Geplaatst op: 14 februari 2015 17:35 ; Laat uw reactie achter februari 14, 2015 at 6:19 pm Qdraw

Het carnavalsweekend is aangebroken en er zijn vandaag carnavalsoptochten geweest. Ik ben bij de carnavalsoptocht van Klarenbeek geweest. Klarenbeek heet tijdens carnaval ook wel Neutendarp. Er zijn 71 startnummers uitgedeeld aan loopgroepen, kleine en grote wagens door c.v. de Neutenkrakers.


Carnaval Klarenbeek 2015 ; c.v. de neutenkrakers, wij hebben de slag te pakken, Klarenbeek, Carnaval | foto 1


Carnaval Klarenbeek 2015 ; wij leggen de lat niet te hoog, cv klabatse, dagobert duck, Klarenbeek, Carnaval | foto 2


Carnaval Klarenbeek 2015 ; wij leggen de lat niet te hoog, cv klabatse, dagobert duck, Klarenbeek, Carnaval | foto 3


Carnaval Klarenbeek 2015 ; c.v. de buurtzuupers, carnaval express, Klarenbeek, Carnaval | foto 4


Carnaval Klarenbeek 2015 ; spektakel, c.v. deurdonders, carnaval houd ons zoet, met dit zoet gaan wij carnaval tegemoet, Klarenbeek, Carnaval | foto 5


Carnaval Klarenbeek 2015 ; c.v. de stamgasten, handjes omhoog voor de hulpverleners, Klarenbeek, Carnaval | foto 6


Carnaval Klarenbeek 2015 ; de flauwe grap, het kan altijd trekker, Klarenbeek, Carnaval | foto 7


Carnaval Klarenbeek 2015 ; japan, c.v. de slaapfluiters, Klarenbeek, Carnaval | foto 8

Tags: ,

Gecategoriseerd in:

Responsive design vs. Adaptive Web Design

Geplaatst op: 13 februari 2015 19:24 ; Laat uw reactie achter februari 7, 2015 at 6:12 pm Qdraw

In dit artikel ga ik het hebben over hoe je Het design principe Mobile First het beste kunt toepassen en over het verschil tussen Responsive webdesign en Adaptive webdesign. Bij Responsive Web Design wordt het ontwerp traploos geschaald en bij Adaptive Web Design wordt er stapsgewijs geschaald.

Adaptive Web Design (AWD)

Adaptive Web Design herken je aan het feit dat er breekpunten gedefinieerd zijn. Wanneer de website gebouwd wordt dan worden de schermbreedtes door middel van media queries aangegeven.

Responsive webdesign (RWD)

Het grote verschil tussen AWD/RWD is de manier waarop de inhoud geschaald wordt. Bij een AWD worden de maten afgekapt en bij RWD loopt het grid soepeler over. Er wordt niet op een bepaalde maat overgeschakeld naar een andere variatie op het ontwerp. In het ontwerp wordt al bepaald hoe het grid gaat verschalen.

Desktop/Laptop

Op een groot scherm past meer informatie dan op een klein scherm. Dit is bijzonder obvious maar met dit punt moet tijdens het ontwerpen rekening mee gehouden worden. Op een desktopscherm past het meeste informatie. De meest voorkomende schermresolutie anno 2015 is voor de desktop: 1366 x 768 px. De meeste desktopschermen zitten tussen 1920×1080 px (HD 1080p) en 1024×768 px (15”, oude monitor). Door veel ontwerpers wordt gebruik gemaakt van het 960.gs grid-system.

Tablet

Een tablet heeft twee eigenschappen die de meeste desktops niet hebben, namelijk een hogere pixeldichtheid en een kleiner scherm dan een desktop. De nieuwste iPad Air heeft bijvoorbeeld een pixeldichtheid van 264 PPI (Pixels per inch) terwijl er voor een desktop altijd met 72 PPI gerekend wordt. Het gevolg is dat als er geen rekening wordt gehouden met de schermresoluties de beelden er pixelig uit zien. In de technische realisatie zijn hier meerdere manieren voor om dit op te lossen, zoals svg en @2. Als je werkt op basis van pixels dan is het nodig om verschilllende formaten te kunnen exporteren.

Een tablet kan ook verticaal gebruikt worden. De maat die door de iPad naar buiten wordt gedragen, wanneer deze verticaal wordt gehouden, 768×1024 px (teruggerekend naar 72ppi).

Mobiel

Een mobiel heeft als belangrijke eigenschap dat je er weinig informatie op kan laten zien. In het artikel Het design principe Mobile First leg ik uit waarom het handigste is om hiermee te beginnen. De meeste mobile schermformaten liggen tussen 300px en 500px breed. (teruggerekend naar 72ppi).

Een voorbeeld van een scenario waar mobiel gebruikt wordt:

Responsive design ; mobiel, utrecht centraal, station, i am | foto 1

Tags: , , ,

Gecategoriseerd in:

Het design principe Mobile First

Geplaatst op: 6 februari 2015 18:35 ; Laat uw reactie achter februari 7, 2015 at 4:41 pm Qdraw

Mobiel is onderweg. Onderweg wordt er gebruik gemaakt van een smartphone, tablet of een laptop. Met mobiel wordt dus niet de telefoon of een tablet bedoeld maar de onderweg situatie.

Mobiel is de huidige realiteit. Mobiel is van nu en de toekomst en daar hoort een ander denkpatroon bij dan in het tijdperk van het desktop internet.

Smartphones zijn persoonlijk en altijd in de buurt. Met de telefoon zijn korte interacties mogelijk. Als je op de bus staat te wachten dan kijk je even op je telefoon. Wanneer je iets wilt opzoeken dan kijk je even snel op je telefoon. Deze opzoek-actie is een succes omdat je telefoon altijd in de buurt is.

Op een tablet kun je thuis en onderweg bladeren op het net. Met de tablet kun je onderweg entertainen en meestal bladeren door middel van een wifi-verbinding. In veel huishoudens ligt er een tablet die door de hele familie gebruikt wordt.

Zelfs een laptop kan mobiel zijn. Meestal worden laptops thuis en in een kantoor omgeving gebruikt om te werken. Het grote verschil is natuurlijk het feit dat er hier met een muis gewerkt wordt en niet met een aanraakscherm.

Op een telefoon is minder schermruimte dan op een laptop. Dit heeft als gevolg dat je op een telefoon minder content kan laten zien. Het laten zien van de belangrijkste informatie is door dat er minder ruimte is extra belangrijk geworden. Deze informatie wordt op basis van de informatie architectuur geselecteerd.

Responsive-webdesign is de techniek om een Mobile First-website te realiseren. Bij een responsive-webdesign is het mogelijk om de zelfde pagina op verschillende schermgrotes optimaal te laten zien. De manier om te zien of een website responsive is, kun je testen door het browser-venster op je desktop-computer te verkleinen.

Een realistisch scenario van het gebruik een website, de stationshal van Utrecht Centraal op 29 september 2014
Het design principe Mobile First ; mobiel, utrecht centraal, station | foto 1

Tags: , , , , ,

Gecategoriseerd in: