iKlikker

(i)Klikker, app & web design prototype tool

,

Wij moeten natuurlijk als designers vaak ons werk presenteren aan de klant, of designs testen op gebruiksvriendelijkheid. Hier zijn allerlei tools voor, maar eigenlijk de eenvoudigste manier is voor ons een ‘klikker’. Een reeks plaatjes achter elkaar in een browser, waar je doorheen kunt ‘klikken’, vandaar de naam.

Deze klikker gebruiken we voor (mobiele) websites, maar ook gewoon voor app-designs. Het is een zeer eenvoudig tooltje en dat is ook de kracht ervan. Dit tooltje kun jij ook gebruiken (!) No strings attached.

De voordelen van de (i)Klikker:

  • zeer eenvoudig en snel
  • sticky elementen mogelijk
  • browserbalken te verbergen voor app-feeling (iOS)

Download de (i)Klikker
Of bekijk de online demo van onze mobiele website, of desktop website.

Hoe werkt het?

Exporteer je designs naar plaatjes. De (i)Klikker maakt op het web een slideshow van de afbeeldingen van het ontwerp. Vervolgens kun je in een browser of op een touch device door de schermen klikken of tappen. Add to homescreen op iOS voor de echte app-feeling zonder browserbalken in beeld.

Add to homescreen voor de echte app-feeling

Gebruiksaanwijzing

Er zijn twee manieren om de (i)Klikker te gebruiken; 1) simpel, en 2) uitgebreid. De simpele wijze maakt van de klikker een snelle presentatietool. De uitgebreide wijze geeft de mogelijkheid om je schermen dynamischer te presenteren, door sticky elementen aan bijvoorbeeld de boven-, onder- of zijkanten van het scherm toe te voegen.

Simpel

Een snelle presentatietool in 5 stappen:

  1. Download de (i)Klikker en pak het .zip bestand uit
  2. Hernoem de uitgepakte map naar je projectnaam, of een naam naar keuze
  3. Plaats de afbeeldingen van je ontworpen schermen in het mapje ‘screens’; als je de klikker voor iPhone of iPad maakt kun je zowel retina- als niet-retina afbeeldingen gebruiken. Zorg er alleen wel voor dat alle afbeeldingen of wel, of niet retina zijn.
  4. Upload de map naar je webhost
  5. Je bent nu in principe klaar om het resultaat te presenteren; surf in je desktop, mobiele, of tablet browser naar het adres waar je de klikker gehost hebt

Heb je retina-afbeeldingen gebruikt, wil je de naam van de (i)Klikker aanpassen, of wil je een wachtwoord toevoegen?

  1. Ga naar het adres waar je de klikker hebt gehost, en type “/setup” achter het adres
  2. Op deze pagina kun je de titel, het wachtwoord en eventueel het gebruik van retina afbeeldingen instellen.
  3. Door te klikken op ‘opslaan’ worden de instellingen toegepast.
iKlikker instellen

De (i)Klikker instellen

Uitgebreid

Dynamisch presenteren of testen met de (i)Klikker:

  1. Download de (i)Klikker en pak het .zip bestand uit
  2. Hernoem de uitgepakte map naar je projectnaam, of een naam naar keuze
  3. Plaats de afbeeldingen van je ontworpen schermen in de map ‘screens’; als je de klikker voor iPhone of iPad maakt kun je zowel retina- als niet-retina afbeeldingen gebruiken. Zorg er alleen wel voor dat alle afbeeldingen of wel, of niet retina zijn.
  4. Plaats de afbeeldingen van eventuele plakkende elementen die je wilt gebruiken in de map ‘sticky’. Zorg ervoor dat de afbeeldingen niet groter zijn dan voor het sticky element noodzakelijk. Maak afbeeldingen eventueel deels transparant om het sticky element op de gewenste plek te plaatsen:
iKlikker

Sticky elementen in het ontwerp

  1. Upload de map naar je webhost
  2. Ga naar het adres waar je de klikker hebt gehost, en type “/setup” achter het adres
  3. Op deze pagina kun je de titel, het wachtwoord, eventueel gebruik van retina afbeeldingen instellen. Daarnaast kun je de verschillende sticky elementen instellen en eventueel buttons aan de elementen toevoegen. Een sticky element op één van je schermen uitschakelen? De informatie op de instellingen pagina vertelt er meer over.
  4. Door te klikken op ‘opslaan’ worden de instellingen toegepast
sticky elementen instellen

Sticky elementen aan de (i)Klikker toevoegen

  1. Je bent nu klaar om het resultaat te presenteren of te testen; surf in je desktop, mobiele, of tablet browser naar het adres waar je de klikker gehost hebt

Als benadering van een iOS app

Met de (i)Klikker is het mogelijk om de ervaring van een native app op een iPhone of iPad te benaderen:

  1. Open in Safari op de iPhone of iPad het adres waar je de klikker hebt gehost
  2. Vul eventueel het ingestelde wachtwoord in
  3. Tap de instructie weg
  4. Kies in Safari ‘zet in beginscherm’ of ‘add to home screen’
  5. Sluit Safari en open je (i)Klikker vanaf het beginscherm van de iPhone of iPad
iKlikker

Meer eigen maken

Hoewel we het natuurlijk erg kunnen waarderen als je de (i)Klikker gebruikt met de Soda studio logo’s erin, kunnen we het ons goed voorstellen dat je de (i)Klikker van eigen logo’s wilt voorzien. De iconen, logo’s en de ‘branded’ instructiepagina zijn in de map ‘data/icons’ geplaatst. Deze iconen kun je vervangen door eigen exemplaren.

De (i)Klikker in aktie

Bekijk de (i)Klikker in aktie op de online demo van onze mobiele website, of desktop website. Bekijk de demo’s ook eens op je iPhone of iPad.

Download de (i)Klikker
En ga ermee aan de slag zoals jij dat wilt.

Zie je mogelijkheden tot verbetering, of heb je zelf een verbetering aangebracht?

  • Prototyping
  • Demo
  • Tool

Volg ons voor een Soda refill: