De tre orden beskriver olika detaljnivåer och olika frågor. En wireframe frågar "vad går vart?" En mockup frågar "hur ser det ut?" En prototyp frågar "fungerar det för människor?"
Wireframes använder enkla former och platshållartext för att visa layout, hierarki och innehåll. De är snabba att göra och snabba att slänga, vilket är precis därför de är användbara: du kan utforska många strukturer innan du bestämmer dig för en.
Mockups lägger till den verkliga visuella designen: färg, typografi, bilder och komponenter. De är bra för att komma överens om utseendet med intressenter och för handoff, men de kan inte visa hur någonting beter sig.
Prototyper lägger till interaktion. En low-fidelity-prototyp kan länka samman wireframes för att testa ett flöde. En högfientlig prototyp ser ut och beter sig nära den slutliga produkten, med tillstånd, övergångar och ibland riktiga data, så att du kan köra användbarhetstester som avslöjar verkliga problem.
Gapet efter prototypen är handoff: utvecklare bygger vanligtvis om det som prototypen visar. För interaktiva komponenter stänger ExodeUI, som vi gör, det gapet genom att göra själva den interaktiva filen till det som skickas i appen.