web app prototype

Web App Prototype

Voordat de bouw van een website, een web app, mobiele app of andere software begint kan je eerst een klikbaar prototype maken. Daar hoeft niet alle functionaliteit al werkend in, maar het visuele ontwerp is al wel zichtbaar, en je kan er doorheen klikken, om zo de usability te testen, bijvoorbeeld met testpersonen uit je doelgroep.

In deze opdracht  ontwerp en maak je een Web App: dat is een gewone mobiele website die er verder als een App uitziet. Veel Apps zijn ooit begonnen als Web App,  of zouden dat kunnen zijn. Dingen zoals GPS en de camera zou je ook echt kunnen bedienen via een website.

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 9 gui psd” of “IOS9 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 een aantal 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: Schetsen

Schets de Web App. Dat ziet er uit als een App, maar het is gewoon een website. Het 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.

Het formaat is een mobiel scherm. De batterijbalk kun je ook in de schets zetten, maar dan moet je ‘m later wel weghalen, want die balk komt er automatisch bij.

Schets de App eerst op papier en daarna in Photoshop, Indesign of Illustrator en werk minstens 3 mobiele schermen  van de App verder uit. Met vormgeving, kleuren, logo, typografie, knoppen, menu. En niet te vergeten een goede naam. Maak ook een App icon, 250 x 250 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 blende.nl en topics.nl

Het moet na 3 weken af zijn, voor de volgende stap:

STAP 2:
Web App Prototype in HTML/CSS

Maak de App werkend door de schermen in Dreamweaver als losse jpg’s (via Save for Web, Cmd-alt-shift-S > jpg High) in HTML te zetten. 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.

Een scherm kun je ook opdelen in meerdere stukken, waarbij elk stuk naar een andere pagina kan linken. Opdelen kan in Photoshop door hulplijnen te trekken (Cmd-R) en dan telkens selecteren, knippen en plakken in een nieuw document.

Maak in je oude website op gameschool.nl/jenaam een nieuwe map “app” en zet daar de jpg’s en je favicon in. Hier komen ook de HTML-pagina’s.

Start Dreamweaver > Sites > Manage > Import > kies jouw .ste file. Maak een nieuwe HTML-pagina, bewaar als index.html in de 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 de plaatjes klikbaar via de Properties naar de andere pagina’s.
  • Verander de <title>
  • 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, in je oude website op gameschool.nl
  • Bekijk het op je mobiel: gameschool.nl/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.
  • Eventueel een autoplay 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.