Maak een web­si­te­pro­to­ty­pe met Mar­vel

Leer de ba­sics van het ma­ken van web­si­te­pro­to­ty­pes met je eigen ont­wer­pen en Mar­vel

Web Designer Magazine - - Inhoud - Au­teur Neil Pe­ar­ce

Leer de ba­sics van het ma­ken van web­si­te­pro­to­ty­pes met je eigen ont­wer­pen en Mar­vel.

Mar­vel is een uit­ste­ken­de on­li­ne tool voor de­sig­ners die mak­ke­lijk pro­to­ty­pes van mo­bie­le ap­pli­ca­ties en web­pro­jec­ten wil­len ma­ken. Er be­staan een boel ge­wel­di­ge pro­to­ty­ping­tools, zo­als In­vi­si­on, Fra­mer en Flin­to, dus waar­om zou je Mar­vel moe­ten ge­brui­ken?

Mar­vel heeft een aan­tal han­di­ge fea­tu­res, zo­als syn­chro­ni­sa­tie met Drop­box. Als je met Pho­to­shop werkt en op ‘Op­slaan’ klikt, up­da­te het pro­to­ty­pe in re­al ti­me. Je kunt ook schet­sen van een mo­bie­le app toe­voe­gen wan­neer je projecten nor­maal ge­spro­ken be­gint met te­ke­nen op pa­pier. Er zijn ver­schil­len­de soor­ten tran­si­ties en ge­stu­res en je hebt de mo­ge­lijk­heid om on­be­perk­te teams aan te ma­ken die het werk aan je pro­to­ty­pe mo­gen zien. Ten slot­te kun je Mar­vel kop­pe­len aan an­de­re on­li­ne tools en apps zo­als Sketch en Slack.

Dus ook al zijn er ge­noeg an­de­re pro­to­ty­pingapps be­schik­baar, wer­ken met Mar­vel is lek­ker mak­ke­lijk – niet al­leen door de tools en de fea­tu­res, maar ook door de in­ter­fa­ce. In de­ze tu­to­ri­al ga je de head­sec­tie van een website ont­wer­pen met Pho­to­shop en het ontwerp tot le­ven bren­gen met Mar­vel door een ge­a­ni­meer­de drop­down­na­vi­ga­tie en een proi­el-boxele­ment te cre­ë­ren. Op mar­velapp.com/ had­chg zie je hoe dat er­uit komt te zien.

1. De moc­kup

Voor­dat je met Mar­vel aan de slag gaat, moet je een moc­kup van een web­pa­gi­na ma­ken. Daar­voor kun je ie­de­re de­sign­tool ge­brui­ken, zo­als Pho­to­shop of Sketch. We moe­ten al­leen wel de ver­schil­len­de sta­tus­sen van de drop­down­na­vi­ga­tie kun­nen ex­por­te­ren. In de­ze tu­to­ri­al ge­brui­ken we Pho­to­shop om een sim­pe­le head-sec­tie voor een ic­tie­ve website te ont­wer­pen.

2. Aan de slag

In Pho­to­shop maak je een nieuw do­cu­ment van 1920 x 2200 pixels. Stel wat hulp­lij­nen in via View>new Lay­out en stel het aan­tal ko­lom­men in op 12, de breed­te op 70px en de tus­sen­ruim­te op 30px. Con­tro­leer dan de Cen­ter Co­lumns-box on­der­aan om de hulp­lij­nen te cen­tre­ren.

3. De na­vbar

Maak een se­lec­tie met de breed­te van het he­le do­cu­ment en on­ge­veer 100px hoog. Vul de se­lec­tie met de groe­ne kleur die we hier ge­brui­ken (#88d34c) of wel­ke kleur je maar wilt. Plaats een dum­my-lo­go links­bo­ven en voeg een paar na­vi­ga­tie­links toe, waar­bij de eer­ste de Ho­me-link is. Voeg ver­vol­gens aan de rech­ter­kant een link toe naar je pro iel/ac­count. Daar ko­men we la­ter op te­rug.

4. He­a­der-ima­ge en eer­ste drop­down

Pak een leu­ke a beel­ding voor de head-sec­tie. Van­uit de­sig­ners­oog­punt ge­zien moet je een a beel­ding kie­zen met een beet­je groen er­in, zo­als de plant die we hier ge­brui­ken. Cre­ëer met de se­lec­tie­tool dan de eer­ste drop­down­sta­tus van de na­vi­ga­tie met de kleur #95e157 en zet de dek­king op 95%.

5. Twee­de drop­down­sta­tus

De vol­gen­de drop­down moet on­der de eer­ste ver­schij­nen, maar ver­schuif hem een beet­je naar rechts. Hie­rin ko­men al­leen een paar links te staan, dus hij hoeft niet veel gro­ter te zijn dan 420 x 178px. Geef hem een lich­te­re kleur groen (#a 177) en ver­laag de dek­king weer naar 95%.

6. Pro iel-boxele­ment

In de na­vi­ga­tie­bar heb je een link naar je pro iel ge­maakt. Dat was niet meer dan je naam en een klei­ne pijl. Als je het pro­to­ty­pe gaat ma­ken, zou het pret­tig zijn om te zien hoe het er­uit komt te zien als je er­op klikt. Maak dan ook een pro iel­box die naar be­ne­den komt als je op de pijl klikt. Maak een recht­hoek van 330 x 180px met de se­lec­tie­tool en vul hem met de kleur die je ge­bruikt hebt voor de na­vi­ga­tie­bar.

7. Pro iel­box vul­len

Po­si­ti­o­neer de box die je net ge­maakt hebt on­der de na­vi­ga­tie­bar op een af­stand van zo’n 30px en lijn hem met be­hulp van de hulp­lij­nen uit met de tekst ‘Hel­lo…’. Maak een klei­ne groe­ne naar bo­ven wij­zen­de pijl met de Pen-tool. Voeg een wit­te cir­kel toe en vul het met een fo­to van ie­mand. Voeg nog wat ex­tra in­for­ma­tie toe zo­als Sign Out en Edit Pro

ile.

8. Een pro­ject in Mar­vel

Ga nu naar de Mar­vel-website (mar­velapp.com) om een gra­tis ac­count aan te ma­ken. Als je dat hebt ge­daan, kun je een nieuw pro­ject aan­ma­ken door op de groe­ne knop Cre­a­te Pro­ject rechts op het scherm te klik­ken. Ter her­in­ne­ring: je kunt maar één gra­tis pro­ject aan­ma­ken voor­dat je moet up­gra­den naar een be­taald lid­maat­schap.

9. Stel de scherm­groot­te in

Bij het aan­ma­ken van een nieuw pro­ject krijg je een scherm te zien waar­op je voor je pro­to­ty­pe uit ver­schil­len­de scherm­groot­tes kunt kie­zen. De keu­ze hangt na­tuur­lijk af van wat je moc­kups zijn. Hier ge­brui­ken we een desktop-scherm­groot­te. Geef je pro­ject ver­vol­gens een naam.

10. Drag&drop je de­signs

Als het nieu­we pro­ject is aan­ge­maakt, is de vol­gen­de stap het toe­voe­gen van wat con­tent, wat je de­signs zul­len zijn (drie sta­tes). Je kunt con­tent van je com­pu­ter, Drop­box en Goog­le Dri­ve toe­voe­gen, maar ook door ze er ge­woon naar­toe te sle­pen. Zoek je drie JPEG-A beel­din­gen op en sleep ze naar het pro­ject.

11. Pro­ject-op­ties

Je moet nu je drie a beel­din­gen als thumb­nail kun­nen zien. Wat je ook zult zien, zijn een paar an­de­re op­ties aan de rech­ter­kant waar­mee je de thumb­nails gro­ter of klei­ner kunt ma­ken, je pro­to­ty­pe down­lo­a­den en, be­lang­rij­ker, je pro­to­ty­pe af­spe­len. Je zult waar­schijn­lijk ook mer­ken dat er een Sketch plug-in be­schik­baar is. Die ra­den we ze­ker aan wan­neer je Sketch ge­bruikt, maar voor de­ze tu­to­ri­al hoeft dat niet.

12. Hot­s­pots

Be­weeg over de eer­ste thumb­nail (nor­mal-sta­te) en klik op de Edit-knop. Je kunt be­gin­nen met het toe­voe­gen van hot­s­pots aan de­len van het de­sign die lin­ken naar an­de­re sta­tus­sen. Klik en trek een hot­s­pot over de Ho­me-knop op de na­vi­ga­tie­bar. Die hot­s­pot kan lin­ken naar ie­de­re an­der de­sign (sta­te) dat je maar wilt. Dat doe je bij de vol­gen­de stap.

13. Hot­s­pot-doel

Klik op de hot­s­pot die je net over de Ho­me-knop hebt ge­trok­ken om wat ex­tra op­ties te la­ten ver­schij­nen. Daar­mee kun je in­stel­len hoe de hot­s­pots moe­ten re­a­ge­ren. Wat je eerst moet doen, is het eer­ste de­sign aan het vol­gen­de te lin­ken. Daar waar Hot­s­pot Des­ti­na­ti­on staat, se­lec­teer je de twee­de a beel­ding (drop­down-sta­te-01), waar­door hij groen wordt met een vin­kje.

14. Tran­si­tie en ac­tie

Wat je dan moet doen, is een tran­si­tie cre­ë­ren en dan een ac­tie. Voor de tran­si­tie kies je de Fa­deop­tie en voor de ac­tie ver­vol­gens Hover. Zorg er­voor dat de op­tie ‘Stay on tar­get’ ge­se­lec­teerd is zo­als ge­toond. Als je dat ge­daan hebt, sluit de op­ties dan en klik op de blau­we Do­ne-but­ton bo­ven­aan rechts.

15. Meer­de­re hot­s­pots

Open ver­vol­gens de twee­de a beel­ding (drop­down-sta­te-01). Hier moet je hot­s­pots ma­ken die he­le­maal om de Ho­me-knop en het drop­down­me­nu heen gaan. Ie­de­re hot­s­pot moet naar het eer­ste de­sign lin­ken, dus als je van de Ho­me-knop of er-

gens rond­om het drop­down­me­nu weg be­weegt, gaat de a beel­ding naar de eer­ste sta­tus. Daar­door ver­dwijnt de drop­down. Klik op de Do­ne-but­ton en speel de ac­tie af om dit te zien.

16. Link naar vol­gen­de drop­down

Het drop­down­me­nu werkt nu en ziet er­uit als een nor­maal HTML/CSS-ME­NU. Nu moet je een hot­s­pot aan een van de links toe­voe­gen en die hot­s­pot dan lin­ken naar de der­de a beel­ding (drop­down-sta­teo2) met een Fa­de-tran­si­tie en Hover-ac­tie. Als je dat ge­daan hebt, klik dan op de Do­ne-but­tons en speel het pro­to­ty­pe af.

17. Te­rug naar de vo­ri­ge

Het twee­de me­nu zit vast, waar we de cur­sor ook over­heen be­we­gen. Je moet nu dan ook een an­de­re hot­s­pot cre­ë­ren die je te­rug­leidt naar de vo­ri­ge sta­tes. Klik op de Edit-but­ton voor scherm twee (drop­down-sta­te-02) en maakt hot­s­pots he­le­maal rond­om het me­nu met Fa­de-tran­si­tie en Hover-ac­ti­on, en link dat te­rug naar het eer­ste scherm zon­der eni­ge drop­downs.

18. Houd de drop­down open

Het laat­ste wat je met dat me­nu moet doen, is er­voor zor­gen dat je hem open­houdt als je van de link (in dit ge­val de laat­ste tekst­link) af be­weegt. Al­leen als je van een drop­down weg be­weegt, wil je dat ze al­le­bei weer voor­aan be­gin­nen. Maak dan ook twee hot­s­pots, een bo­ven- en een on­der­aan de eer­ste drop­down, die lin­ken naar drop­down-sta­te-01.

19. De pro iel­box

In de laat­ste stap­pen voeg je een ex­tra ge­a­ni­meerd ele­ment aan het pro­to­ty­pe toe zo­dat er wat meer lijkt te ge­beu­ren zo­als bij een ech­te website. Ga te­rug naar Pho­to­shop en ex­por­teer de web­pa­gi­na waar­op al­leen de pro iel­box te zien is, niet de drop­downs. Sleep die a beel­ding in het pro­ject.

20. Pro iel-hot­s­pot

Net als eer­der wil je een hot­s­pot toe­voe­gen aan de pro iel­link. Open de eer­ste a beel­ding en maak een hot­s­pot rond de klei­ne wit­te pijl. Link die dan naar het nieu­we de­sign dat je net ge-in­clu­de hebt, geef het een Fa­de-tran­si­tie en laat het in plaats van een Hover-ac­tie een klik- of tap-ac­tie blij­ven (wat de eer­ste op­tie is).

21. Rea­dy to go

Als de hot­s­pots en a beel­din­gen toe­ge­voegd zijn, kun je op de blau­we Play-but­ton klik­ken en het pro­to­ty­pe in ac­tie zien. Ont­houd dat de pro iel-box al­leen van­uit de eer­ste a beel­ding werkt. Maar zo­als je ziet, kun je re­de­lijk sim­pel in wei­nig tijd een pro­to­ty­pe klaar heb­ben voor je klan­ten, wat een dui­de­lijk voordeel is van het wer­ken met Mar­vel.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.