web app prototype

Web App Prototype

Voordat de bouw van een mobiele app begint kan je eerst een klikbaar prototype maken. Het visuele ontwerp wordt dan al zichtbaar, en je kan er al doorheen klikken. Zo kan je de werking en het gebruik van de app (de usability) uitleggen, pitchen en zelfs alvast testen met proefpersonen.

In deze opdracht  ontwerp en maak je een Web App: dat is een mobiele website die er als een App uitziet. Net als in echte apps kun je in een website ook de hardware van je telefoon gebruiken, zoals de camera, de microfoon, de GPS en andere sensoren (zie hieronder). Een web app heet tegenwoordig ook wel een Progressive Web App. Voorbeelden zijn tones.fm of noisli.com. Zie ook dit artikel op OMT over Progressive web apps.

Sensoren

Er zitten veel sensoren in een telefoon. Die kun je allemaal gebruiken. Zie deze lijst met uitleg. Maar je mag ook dingen verzinnen die nog helemaal niet kunnen. Zoals een hartslag- of bloeddrukmeter. In de toekomst kan dat misschien allemaal wel!

Visueel ontwerp

De ontwerpschetsen kan je beginnen op papier, zodat je makkelijk en snel kan testen en aanpassen. Maar het kan ook meteen in Photoshop, Illustrator, Indesign of in wat voor andere software dan ook. Je kan zelfs de papieren tekeningen fotograferen en die plaatjes gebruiken. Interface-elementen zoals knoppen en toetsenbord kun je Googlen (“IOS gui psd” of “IOS UI Kit”) en gebruiken in je schetsen. GUI staat voor Graphical User Interface.

dribbble_1x resources_iOS9_right

Je kan ook speciale software gebruiken zoals Sketch (99,- in de App Store, kan ook met 50% onderwijskorting). Dat programma combineert vector met pixel en je kan het project direct op je smartphone zien. Je kan exporteren naar prototyping tools zoals Marvel (via Dropbox of via een plugin) of Invision (via Dropbox). Met Photoshop CC 2015 kun je ook je ontwerp live op je mobiel / tablet bekijken, met Adobe Preview CC, een gratis download in de App Store. Zie dit artikel.

In de nieuwste Adobe CC zit Adobe XD oftewel Xperience Design. Dat is een compleet programma voor het maken van web app prototypes.

Het gaat erom dat het visuele ontwerp duidelijk wordt, in minstens vijf schermen, en dat je zo het doorklikken, de usibility en het ontwerp kan testen. Logo, kleur, typografie, vormgeving van het menu, beeldgebruik. Waar moet je klikken, wat kun je doen, hoe kan je terug. Eventueel ook al de animaties, in de interface bijvoorbeeld. Animaties zijn niet alleen versierend maar vaak ook functioneel: denk aan de subtiele bewegingen op IOS, zoals bij swipe naar beneden voor een update.

De losse schermen kun je klikbaar maken met HTML of met andere software. Je kan ook pdf’s uit Indesign gebruiken. Presenteren kan op een telefoon of in een browser. Pdf’s kan je ook presenteren op mobiel, via Dropbox. Op een desktop kan dat met Adobe Reader, die je fullscreen kan zetten met Cmd-L. HTML kan fullscreen op mobiel via onderstaande tips.

STAP 1: Idee en onderzoek

Beschrijf je idee in een korte tekst, twee a drie alinea’s, oftewel een elevator pitch. Zet dit in een nieuwe Pagina in WordPress. Een pagina blijft verborgen voor bezoekers, totdat je hem in het menu zet. Het idee mag van alles zijn. Verzin een naam, een logo en de functionaliteit. Het hoeft niet echt te werken, het gaat om een Visueel Prototype. Denk aan Notificaties, GPS, Maps, Camera, 3D, de sensoren voor beweging, licht, geluid. Die kan je allemaal gebruiken, ook in een website. Maar je mag ook dingen verzinnen die nog helemaal niet bestaan.

  • Verzin een goede naam voor de app
  • Ontwerp een logo, en een favicon van 500×500 pixels.
  • Zoek 3 apps die een goed design hebben waar je wat van kan gebruiken, maak van elke app 3 screenshots. Dus 9 schermen in totaal. Zet bij lek plaatje een korte tekst waarom je deze koos.
  • Maak van die 9 plaatjes een galerie, in WordPress, met bij elk plaatje de tekst in zowel de Alternatieve omschrijving als in Onderschrift.
  • Zet de plugin Easy Fancybox aan voor de popups van de plaatjes

STAP 2: Schetsen

Schets de Web App. Dat ziet er uit als een App, maar het is gewoon een website. Formaat: jouw telefoon, dus maak een screenshot, en open dat in Photoshop. De batterijbalk kun je ook in de schets zetten, maar die moet later wel weg. Het bovenste stukje batterijbalk hoeft dus ook niet in de schets.

Schets de App eventueel eerst op papier of direct in Photoshop, Indesign of Illustrator en werk minstens 5 schermen  van de App verder uit. Met vormgeving, kleuren, logo, typografie, knoppen, menu. Maak ook een App icon, 500 x 500 pixels, noem het favicon.png (via Save for Web, Cmd-alt-shift-S > png 24).

Maak desnoods een flow chart om te laten zien waar de gebruiker allemaal op kan klikken en wat er dan gebeurt. Maakt niet uit hoe, mag zelfs in tekst editor. Een flow chart beschrijft elke knop en laat zien wat die knop doet.

Als je denkt aan magazines op IOS, kijk dan naar blendle.nl en topics.nl

STAP 2:
Web App Prototype in HTML/CSS

Maak de App werkend door de schermen in Dreamweaver als losse jpg’s in HTML te zetten. De plaatjes moet je croppen zonder de batterijbalk, bijvoorbeeld in Photoshop, en bewaren via Save for Web, Cmd-alt-shift-S > jpg High. Elk scherm krijgt zijn eigen pagina (index.html, 2.html, 3.html). De plaatjes linken telkens naar de volgende pagina.

Maak eerst de home-pagina: die heet index.html. Als die klaar is kun je de andere pagina’s maken met Bewaar-Als. Zie hieronder de stap-voor-stap handleiding.

Maak in je website op rocstudent.nl/ftp/jenaam een nieuwe map “app” en zet daar de jpg’s en je favicon.png in.

Start Dreamweaver > Sites > Manage > Import > kies jouw .ste file. Maak een nieuwe HTML-pagina, bewaar als index.html in die nieuwe map “app”.

  • Zet het eerste plaatje in de <body>, via Insert Image
  • Zet bij het plaatje via de Properties de width 100%, height moet weg. Een hele lange pagina kan met losse schermen onderelkaar, of als 1 heel hoog plaatje.
  • Maak het plaatje klikbaar via de het venster Eigenschappen > Koppeling naar de vogende pagina 2.html.
  • Verander de <title> naar de naam van je app
  • Plak in de <head> dit stukje css:
    <style>
    body {margin: 0; padding:0; background:black;}
    a img {border:none}
    </style>
  • Maak de pagina responsive en fullscreen op je mobiel, zie hieronder
  • Zorg dat de app fullscreen blijft met het script hieronder
  • Zet de map “app” online (uploaden)
  • Bekijk het op je mobiel: rocstudent.nl/ftp/jenaam/app
  • Voeg die toe aan je Homescreen (op IOS via de knop onderaan je scherm, op Android via de 3 puntjes). Start de App nu vanaf je homescreen.
  • Eventueel een image preloader erbij, zie hieronder.

Responsive code

Zet onderstaand in de <head> om de pagina responsive te maken en de App fullscreen te openen na Toevoegen aan Homescreen. Verander Naam. Dat is de naam van de App die onder de knop (jouw favicon) komt te staan.

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Naam">

<link rel="apple-touch-icon" href="favicon.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="shortcut icon" href="favicon.png">

Web App prototype fullscreen houden

Onderstaand script zorgt ervoor dat je de Web App fullscreen blijft, ook na het klikken op een interne link. Zet het script in de <head>.

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

Optioneel: CSS Image Preloader

Je kan een CSS-preloader aan de <style> van index.html toevoegen, zodat het tweede plaatje (en evt derde) van tevoren ingeladen wordt en de gebruiker niet hoeft te wachten:

body:after{
 position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
 content: url(2.jpg) url(3.jpg);
}

Zet dat op elke pagina en verander 2.jpg (en/of 3.jpg)

Optioneel: Autoplay

Met deze refresh gaat het web app prototype automatisch naar het volgende plaatje. Zet het in de <head>  en pas de url aan. Het getal “4” is de wachttijd in seconden. Zie ook http://aartjan.nl/app:

<meta http-equiv="refresh" content="4;url=2.html" />

Meer Prototyping tools

Er zijn tools – ook vaak gratis – om de schermen van een web app prototype klikbaar te maken. Zo kan je de usability van de interface zien en testen. Je kan dat ook direct in HTML doen, bijvoorbeeld met Dreamweaver. In HTML kan je volledig werkende web apps maken, maar je kan ook de schermen los in pagina’s zetten, zonder functionaliteit, en de plaatjes alleen klikbaar maken. Ditzelfde kan je ook doen met apps als Firefly.

Zie ook dit artikel met een vergelijking of dit artikel. In de nieuwste Adobe CC zit ook Adobe XD oftewel Xperience Design. Hier een lijst met andere tools, waarbij Marvel en Invision de beste en ook nog gratis zijn:
marvelapp.com
appsketcher.com
invisionapp.com

justinmind.com
proto.io
fluidui.com
flinto.com
popapp.in
balsamic

Het prototype kun je toevoegen aan je homescreen (op IOS via de knop midden onder, op Android via de drie puntjes). Dan is het net als een echte App, met icoon op het homescreen, die daarna fullscreen start. Er bestaan ook javascripts die de gebruiker vragen om de website toe te voegen aan het homescreen.

Als je alleen een onderdeel van een plaatje klikbaar wil maken, en niet het geheel, dan kan dat met Javascript en hotspots (standaardfunctie in Dreamweaver) of door het plaatje op te delen in stukjes die apart klikbaar moeten zijn. De stukjes beeld kan je naast- en onder elkaar zetten, tegen elkaar aan. Ruimte tussen plaatjes kan je weghalen met inline CSS:

<img src="2.jpg" style="margin-top:-5px; margin-bottom:-5px">

Een echte App moet uiteindelijk in de App Store van Apple (en in de Google Play store) terechtkomen. Voor IOS heb je een developer account nodig. Een HTML-app zou je naar deze systemen kunen porten. Native IOS Apps zijn tegenwoordig meestal in Swift gemaakt.

Je kan een klikbaar web app prototype ook maken in Indesign, met als output een klikbare PDF. Elk element op een pagina kun je klikbaar maken. De PDF kan je full-screen tonen in Adobe Reader, met Ctrl-L. Op IOS kun je een PDF fullscreen tonen door erop te tappen vanuit Dropbox.




  1. Les 1: Uitleg
  2. Les 2: Presenteer je idee voor de klas. De klas geeft feedback.
  3. Les 3:Verzin een naam voor je app, en maak een favicon / logo van 500×500 pixels (dat is het icoon voor op je telefoon)
    Zoek 3 apps die een goed design hebben waar je wat van kan gebruiken, maak van elke app 3 screenshots. Dus 9 schermen in totaal.
    Maak er een pagina van in WordPress met een galerie (+ link to media + Easy Fancybox aanzetten).  Zet bij elk plaatje een tekst (zowel als bijschrift als in de “Alt”).
    Schrijf een tekst van 2 of 3 alinea’s om je app te beschrijven: een elevator pitch.
    Lever de url van je wordpress-pagina hier in (de pagina hoeft niet in je menu te staan, en is dan verborgen voor bezoekers).
    Als ik het heb gezien en heb goedgekeurd mag je gaan!
  4. Les 4: download een UI kit en ga de schermen maken. Minstens 5 schermen. Kan in Photoshop.
  5. Les 5: verwerk de feedback
  6. Les 6: HTML in Dreamweaver, uploaden naar ROCstudent.nl/ftp, testen, feedback verwerken
  7. Les 7: Presenteren.
  8. Les 8: Beoordeling
  9. Les 9: Herkansing.