Je eigen portfolio website maken from scratch

Ben jij een webdesigner, grafisch ontwerper, fotograaf of kunstenaar? En wil je een eigen portfolio website maken? In dit artikel gaan we uitgebreid in op de verschillende stappen die je doorloopt bij het maken van een portfolio website.

Doen van voorwerk

Voordat je begint aan het ontwerpen van je portfolio website, doe je er goed aan om eerst wat voorwerk te doen. Tijdens het voorwerk bereid je je voor op het ontwerpen, zodat dit zo snel mogelijk kan gaan. Denk bijvoorbeeld aan het bekijken van voorbeelden of het doen van een klein concurrentieonderzoek.

Inspiratie opdoen

Bekijk eerst andere portfolio websites om inspiratie op te doen. Doe inspiratie op door een heleboel portfolio websites van anderen te bekijken. Hierdoor kom je erachter wat werkt of wat je liever niet op je eigen portfolio wilt zetten.

Ook is het inspiratie opdoen handig om patronen te herkennen. Zo zul je zien dat het logo van een website vaak linksboven staat en dat als je op het logo klikt, je weer teruggaat naar de homepage. Door dit soort patronen op je eigen website te verwerken is het gemakkelijker voor je bezoekers om van jouw website gebruik te maken.

Sla schermafdrukken van de portfolio websites op in een speciale map op je computer, zodat je ze bij het ontwerpen gemakkelijk terug kan vinden.

Telepathy 70128 — Bekijk hier voorbeelden van de mooiste portfolio websites

Portfolio websites van vrouwelijke designers — 7 persoonlijke portfolio websites van vrouwelijke designers

Marc kuiper 37764 — De mooiste Nederlandse portfolio websites met een minimalistische look

Content verzamelen

Als je weet wat je mooi vindt aan een website kan je de inhoud verzamelen. Je kunt hiermee beginnen vóór het ontwerpen, maar er zijn ook webdesigners die eerst beginnen met het ontwerp en deze later vullen met echte inhoud.

Je zou bijvoorbeeld al teksten kunnen schrijven en deze in een Word-document kunnen opslaan, of afbeeldingen van je werk in een mapje kunnen zetten, zodat je deze bij de hand hebt tijdens het ontwerpen.

Typografie portfolio website 51066 — Bekijk onze tips waarmee je direct mee aan de slag kunt

Layout bepalen

De layout is de indeling van je website. Deze indeling kun je verder uitwerken door middel van wireframes. Wireframes zijn als het ware bouwtekeningen voor je website. Hier leg je de globale vlakverdeling van de website vast. Het gaat nog niet om de de kleuren of afbeeldingen die je gebruikt, maar meer om de navigatie, indeling en inhoud. Omdat wireframes redelijk gemakkelijk te maken zijn, is het eenvoudig om snel verschillende schermen te ontwerpen.

Wat er op de portfolio website komt, is het belangrijkste aan de wireframes. Wat zie je op de homepage? Hoe is de over-ons pagina ingedeeld? Deze vragen beantwoord je met de wireframes.

Website layouts 9883 — De layout is misschien wel het belangrijkste onderdeel van je portfolio website. Maar welke website layouts zijn er en wanneer gebruik je welke?

Wireframes maken — Wireframes zijn vaak onmisbaar bij het maken van een website of webapplicatie. Maar hoe doe je dit nu effectief? In dit artikel lees je praktische tips.

Ontwerpen van je portfolio website

Nu begint het echte werk. Nu ga je werken aan het daadwerkelijke ontwerp van je website.

Tutorial portfolio website photoshop — In deze tutorial leer je hoe je een portfolio website ontwerpt in Photoshop

Kleurenpalet samenstellen

Kies kleuren en combineer deze tot een kleurenpalet. Om ervoor te zorgen dat je portfolio website er niet uitziet als een kermisattractie kies je een kleurenpalet. Op je website gebruik je vervolgens alleen maar kleuren uit dit palet. Zo zorg je voor een uniforme uitstraling.

Over het samenstellen van je kleurenpalet moet je even goed nadenken. Welke kleuren passen goed bij elkaar? En welk gevoel wil je uitstralen met je website?

Kleurenpalet maken 91864 — Hoe kies je kleuren die bij elkaar passen? Of hoe pas je een kleurenschema toe op je ontwerp? De 60/30/10 regel helpt je hierbij.

Kleurentheorie — In dit artikel gaan we aan de slag met kleurenleer: wat kleurensystemen zijn, hoe kleuren in elkaar zitten en hoe je deze het beste kunt opslaan.

Betekenis van kleuren 25513 — In dit artikel gaan we in op de betekenis van verschillende kleuren en hoe je deze effectief toepast in je design

Kleuren kiezen website — Hoe je kleuren kiest voor op je website

Kleurenpalet website — Bekijk hier voorbeelden van websites met zorgvuldig gekozen kleurenpaletten, voor jouw inspiratie

Typografie

Typografie gaat om het vormgeven van tekst, het leesbaar en mooi maken hiervan. Het is natuurlijk superbelangrijk dat je tekst in een leesbare grootte neerzet maar er komt veel meer bij kijken. Denk aan hiërarchie, regelafstand, welke lettertypes je gebruikt en nog veel meer.

Google font combinaties — Met Google Fonts is het heel makkelijk om lettertypes op je website te gebruiken. Maar hoe doe je dat en welke fonts moet je kiezen?

Typografie tips webdesign — Ben je een website aan het maken, maar worstel je met de typografie? In dit artikel concrete tips om je typografie skills naar een hoger niveau te tillen.

Websites typography header 15837 — Mooie voorbeelden van het effectief toepassen van typografie

Afbeeldingen

Op welke manier laat je je werk zien? Kies je voor een minimalistische aanpak en laat je alleen je ontwerpen zien of maak je gebruik van mock-ups die het werk in een realistische omgeving laten zien? Je kunt natuurlijk nog verder gaan en illustraties gebruiken als decoratie. Kies uit talloze stijlen en gebruik unieke illustraties voor een indrukwekkend resultaat.

3d illustrations design 44541 — Geanimeerde of stilstaande 3D-illustraties, we zien ze steeds vaker langskomen op websites en mobiele apps. Vandaag bekijken we verschillende stijlen, van isometrisch tot hyperrealistische modellen.

Websites illustraties 54144 — In dit artikel een aantal voorbeelden van websites die illustraties naadloos geïntegreerd hebben in het ontwerp

Bouwen van je portfolio website

Na het ontwerpen van je portfolio website is het tijd om het ontwerp om te zetten naar een werkende, responsive website. Hier zijn verschillende tools voor, maar je kunt dit natuurlijk ook zelf door middel van HTML en CSS.

Portfolio website maken wordpress 42148 — In dit artikel bespreken we een aantal online tools waarmee je een eigen portfolio website bouwt

No code platform webflow — Zelf een no code website maken: zonder te programmeren

Lanceren van je portfolio website

Gefeliciteerd, je website kan online! Maar daar stopt het niet. Je website heeft natuurlijk wel bezoekers nodig. Promoot je website op je social media en voeg het linkje toe aan al je social media accounts. Vergeet ook websites als Dribbble en Behance niet, hier kan je gratis je website toevoegen aan je eigen account.

Hiernaast kun je ook proberen om aan bezoekers vanuit Google of andere zoekmachines te komen. De werkzaamheden die je hiervoor doet heet SEO (search engine optimization), of in gewoon Nederlands zoekmachineoptimalisatie. Dit is een vak apart, maar je kunt zelf al de basis toepassen, zodat je website in ieder geval gevonden wordt in Google.