Ontwerp een dash­board-ui met Sketch

Maak een mi­ni-dash­board-in­ter­fa­ce met de de­sign-app Sketch

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

Maak een mi­ni-dash­board-in­ter­fa­ce met de de­sign-app Sketch.

Je moet de af­ge­lo­pen ja­ren wel heel erg in af­zon­de­ring van de rest van de (web­de­sign)we­reld heb­ben ge­leefd als je nog nooit van Sketch hebt ge­hoord. De kans is zelfs groot dat je het zo nu en dan ge­bruikt. Ben jij een van die webdesigners die uit­slui­tend Pho­to­shop ge­bruikt? Of heb je nog geen kans ge­zien je in Sketch te ver­die­pen? Dan is de­ze work­shop perfect voor jou.

Sketch heeft bij web- en Ui-de­sig­ners de af­ge­lo­pen ja­ren link aan po­pu­la­ri­teit ge­won­nen. Het kan zo lang­za­mer­hand wel als de stan­daard de­sig­napp be­schouwd wor­den. He­laas is de app al­leen be­schik­baar voor Macs en daar lijkt niet snel ver­an­de­ring in te ko­men. Wat maakt Sketch zo ge­wel­dig dat de­sig­ners zelfs Pho­to­shop links la­ten lig­gen? Als je Sketch start, zie je een op­ge­ruim­de en over­zich­te­lij­ke in­ter­fa­ce die maar de helft van de tools heeft ver­ge­le­ken met de mees­te an­de­re de­sign­pro­gram­ma’s. Dat komt om­dat de app al­leen voor­ziet in wat je daad­wer­ke­lijk no­dig hebt voor web- en Ui-de­sign. Bo­ven­dien is het geen bit­map­maar een vec­tor-ap­pli­ca­tie.

Wat Sketch even­tu­eel mist, vul je aan met plu­gins. Sketch plug-ins zijn een ge­wel­di­ge ma­nier om de ap­pli­ca­tie uit te brei­den. Dat werkt dus­da­nig goed, dat je je zult af­vra­gen waar­om je al die ja­ren Pho­to­shop ge­bruikt hebt. In de­ze work­shop la­ten we de ba­sis van Sketch zien door een mi­ni-dash­board-ui te ma­ken voor een va­ca­tu­re­si­te. We ge­brui­ken en­ke­le plug-ins en to­nen zo­veel mo­ge­lijk tools en func­ties om het eind­pro­duct te ma­ken. Down­load de gra­tis tri­al­ver­sie van Sketch, start hem en ga aan de slag!

1. Sketch in­stal­le­ren

Al­ler­eerst installeer je Sketch. Ga naar sket­chapp. com en down­load de tri­al­ver­sie. Als je Sketch na de trial­pe­ri­o­de wilt ko­pen (on­ze gok is dat dat zo zal zijn) dan kost het je maar 99 dol­lar.

2. Con­tent Ge­ne­ra­tor plug-in

Als Sketch al te­kort­ko­min­gen heeft, dan wor­den die ruim ge­com­pen­seerd door de be­schik­ba­re plug-ins en ex­ten­sies. Hoe­wel je zon­der plug-ins al van al­les kunt doen, zijn er en­ke­le die je work low stuk­ken snel­ler ma­ken. Ga naar sket­chapp.com/ex­ten­si­ons/plu­gins en zoek de plug-in die Con­tent Ge­ne­ra­tor heet. Klik er­op om naar Git­hub te gaan. Dan krijg je in­struc­ties voor het in­stal­le­ren.

3. Leer Sketch ken­nen

Sketch is ge­maakt met het oog op Ui-de­sign. Ver­ge­le­ken met te­gen­han­gers als Pho­to­shop biedt het al­leen de tools die je no­dig hebt. Je ziet ech­ter wel over­een­kom­sten met apps als Pho­to­shop, zo­als een la­gen­pa­neel links in beeld en de werk­balk bo­ven­in. Open Sketch en kijk rus­tig rond in de in­ter­fa­ce.

4. Maak een nieuw do­cu­ment

Maak een nieuw be­stand (Cmd+n) en klik op het In­sert-pic­to­gram links­bo­ven. Je krijgt dan en­ke­le op­ties te zien. Se­lec­teer in dit ge­val Art­board. Wan­neer je een art­board ge­maakt hebt, zie je aan de rech­ter­kant en­ke­le voor­ge­de ini­eer­de pa­gi­na­lay-outs. Open het tab­blad Responsive Web De­sign, se­lec­teer Desktop en stel de af­me­tin­gen in op 1000 x 550px.

5. De werk­balk aan­pas­sen

Een van de mooie din­gen aan Sketch is dat je de in­ter­fa­ce aan je wen­sen en ei­sen kunt aan­pas­sen. Klik met rechts op de werk­balk en kies Custo­mi­ze Tool­bar. Je kunt dan ie­de­re ge­wens­te tool pak­ken en naar de werk­balk sle­pen. Dat kan je link wat tijd besparen tij­dens het werk.

6. Maak een na­vi­ga­tie-zij­balk

Als test maak je in de­ze work­shop een mi­ni-dash­board-ui. Maak al­ler­eerst de na­vi­ga­tie-zij­balk voor het dash­board. Se­lec­teer de Rec­tan­g­le-tool en sleep een vorm van 165px breed over de vol­le­di­ge hoog­te van het do­cu­ment (550px). De kleur stel je bij de vol­gen­de stap in.

7. Het in­spec­tor-pa­neel

Zo­dra je een vorm maakt, wordt het in­spec­tor-pa­neel rechts­bo­ven ge­ac­ti­veerd. Daar kun je van al­les mee doen. Wij­zig al­ler­eerst de vul­kleur naar #354153. Ver­wij­der daar­na de lijn door Bor­ders te de­se­lec­te­ren. Bo­ven­in het in­spec­tor-pa­neel kun je de af­me­tin­gen van de vorm nog pre­cies naar wens in­stel­len.

8. Per­so­na-cir­kel

Se­lec­teer de Oval-tool op de werk­balk. Sleep een cir­kel van on­ge­veer 77 x 77px en zet die bo­ven­aan de zij­balk die je net ge­maakt hebt. Cen­treer de cir­kel. De ach­ter­grond maakt niet uit, daar komt een fo­to van ie­mand in.

9. Gebruik de plug-in

Tijd om de Con­tent Ge­ne­ra­tor plug-in te ge­brui­ken. Zorg dat de cir­kel ge­se­lec­teerd is. He­le­maal bo­ven­in het scherm staat dan de op­tie Plu­gins. Ga daar met de muis heen en klik er­op en kies in het drop-down­me­nu Con­tent Ge­ne­ra­tor>per­so­na> Pho­tos>ma­le of Fe­ma­le.

10. Na­men toe­voe­gen

Bij de­ze stap test je de mo­ge­lijk­he­den van de plu­gin Con­tent Ge­ne­ra­tor en hoe die de work low ver­snelt. Se­lec­teer de Text-tool en klik on­der de fo­to die je net toe­ge­voegd hebt. Klik er dan naast, en dan er weer op. Als de fo­to ge­se­lec­teerd is, ga je te­rug naar de Con­tent Ge­ne­ra­tor plug-in en kies je Per­so­na>na­mes>ma­le or Fe­ma­le, a han­ke­lijk van je fo­to.

11. Lijn-se­pa­ra­tor

Se­lec­teer de Li­ne-tool en trek een lijn on­der de naam die je net ge­maakt hebt. Zorg dat de lijn 1px dik is en over de he­le breed­te van de zij­balk loopt. Wij­zig de kleur naar zwart en stel de dek­king in op 25%. Ko­pi­eer en plak de lijn en ver­plaats hem 1px om­laag. Wij­zig de kleur naar #6D6D6D. Daar­mee geef je de se­pa­ra­tor een lich­te highlight.

12. La­gen groe­pe­ren

Net als bij Pho­to­shop en an­de­re de­sign-apps kun je met Sketch la­gen in groe­pen in­de­len. Se­lec­teer bei­de lij­nen en druk op de Cmd+g-toet­sen. Ko­pi­eer en plak de groep dan en ver­plaats een er­van on­ge­veer 330px la­ger. Je kunt nu pic­to­gram­men en links tus­sen die se­pe­ra­tors zet­ten.

13. Edit-knop

Op dash­boards zie je vaak een pic­to­gram om je pro iel bij te wer­ken. Daar heb je een pot­lood­pic­to­gram voor no­dig. Een een­vou­di­ge en goed­ko­pe plek om pic­to­gram­men te vin­den is op la­ti­con. com. Zoek daar een pic­to­gram uit, maak een klei­ne cir­kel naast de pro ielfo­to, geef die een wit­te rand en stel de vul­kleur in op #B8E986.

14. Ho­me-pic­to­gram in­stel­len

Je hebt ook een pic­to­gram met een huis­je no­dig. Dat vind je vast weer bij Fla­ti­con. Stel de kleur in op wit en down­load hem als SVG (Sketch werkt ten­slot­te met vec­to­ra beel­din­gen) of als PNG. Pas de af­me­tin­gen aan en zet hem on­der de bo­ven­ste se­pa­ra­tor. Noem hem ‘Ho­me’ en zet er een ach­ter­grond­kleur ach­ter met de recht­hoek­tool. Die geeft dan aan dat de pa­gi­na ac­tief is.

15. Na­vi­ga­tie zij­balk vol­tooi­en

Als de ho­me-knop en tekst klaar zijn, kun je de rest toe­voe­gen. Om­dat dit een dash­board voor een va­ca­tu­re­web­si­te gaat wor­den, voeg je links voor Cur­ri­cu­lum vi­tae, Mijn va­ca­tu­res en Ka­len­der toe. Gebruik toe­pas­se­lij­ke pic­to­gram­men en maak de pic­to­gram­men en de tekst een beet­je trans­pa­rant.

16. Maak de balk bo­ven­in

Trek met de Rec­tan­g­le-tool een recht­hoek bo­ven­in het scherm van 833px breed en stel de hoog­te in op 62px. De­se­lec­teer de vul­kleur in het in­spec­tor­pa­neel en geef het een rand aan de bin­nen­zij­de van 1px met de kleur­in­stel­ling #ECECEC. Trek dan twee ver­ti­ca­le lijn­tjes, zo­dat het lijkt als­of de vak­jes knop­pen zijn.

17. Vol­tooi de balk bo­ven­in

De balk bo­ven­in krijgt een zoek­func­tie. Zoek bij

naar een zoek­pic­to­gram. Zet die links­bo­ven en maak een blauw vier­kant aan de rech­ter­kant met daar­in een ge­brui­ker­spic­to­gram. Voeg ten slot­te een tand­wiel­pic­to­gram toe voor het wij­zi­gen van de ge­brui­kers­in­stel­lin­gen. Maak dan nog een klei­ne, groe­ne cir­kel waar­aan de ge­brui­ker kan a lei­den dat hij ac­tief/in­ge­logd is.

18. Cv-knop­pen en func­tie

Bij de­ze stap voeg je en­ke­le knop­pen en een func­tie­ti­tel toe. Met die knop­pen kan een ge­brui­ker zijn CV be­wer­ken. Maak een recht­hoek van on­ge­veer 105 x 35px. Voor af­ge­ron­de hoe­ken kun je de Ra­di­us-schuif ge­brui­ken met een in­stel­ling van 8px. Maak dan twee klei­ne cir­kels van 35 x 35px en zet in een daar­van het pot­lood­pic­to­gram. In de an­de­re zet je een prul­len­bak­pic­to­gram.

19. Per­cen­ta­ge­cir­kels

Voeg dan een in­di­ca­tor aan het dash­board toe. Die dient bij­voor­beeld om aan te ge­ven op hoe­veel va­ca­tu­res er ge­re­a­geerd is. Maak een cir­kel van 200px en ver­wij­der de rand. Stel de vul­kleur in op #D8DEE4. Druk op Cmd+d om er een cir­kel bo­ven­op te du­pli­ce­ren. Druk daar­na op Alt + Shift, hou die in­ge­drukt en sleep hem on­ge­veer 180px om­laag. Se­lec­teer bei­de cir­kels en klik op de Sub­tract-func­tie in de werk­balk.

20. Per­cen­ta­ge­cir­kels vol­tooi­en

Ko­pi­eer en plak de cir­kel en ver­plaats de nieu­we naar rechts. Druk op Cmd+d en du­pli­ceer hem bo­ven­op. Se­lec­teer de Rec­tan­g­le-tool en sleep een recht­hoek die de helft van de cir­kel be­dekt. Se­lec­teer dan zo­wel de cir­kel als de recht­hoek en klik weer op Sub­tract. Daar­mee veran­der je de vul­kleur van één helft. Voeg con­tent toe in het mid­den van de cir­kels.

21. Chat­sec­tie

la­ti­con.com

Ten slot­te maak je nog een chat­room. Maak een recht­hoek van rond de 300 x 345px met een grij­ze ach­ter­grond en zet die rechts on­der­in. Je kunt dan nog een klein vak bin­nen­in plaat­sen en daar con­tent aan toe­voe­gen. Je kunt bij­voor­beeld drie cir­kels ma­ken van 47 x 47px en met de Con­tent Ge­ne­ra­tor plu­gin wil­le­keu­ri­ge per­so­na’s toe­voe­gen. Dan hoef je er al­leen nog wat spraak­bal­lon­nen bij te plaat­sen.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.