Kenmerken van een moderne portfoliosite
Van alle soorten websites moet de portfoliosite de moeilijkste hindernissen overwinnen. Praat met bijna elke ontwerper en zij zullen het ermee eens zijn, het opstarten van een eigen portfoliosite is een pijnlijk proces. Meestal omvat dit proces talloze versies en vaak zelfs een lancering uit pure frustratie.
Het voordeel hiervan is naar mijn mening dat de portfoliosite een venster kan zijn naar de toekomst van webdesign. Ik stel dit voor omdat wanneer een individu zijn eigen site ontwerpt, ze alleen onder zelfopgelegde beperkingen staan. Er is geen klant die dingen dicteert, geen commissie om het ontwerp te vernietigen, en geen goedkeuringsproces om dingen naar buiten te slepen en het momentum te vernietigen.
Maar niet alle portfoliosites zijn gelijk gemaakt. Ondanks de waanzinnige hoeveelheid voorbeelden van monsterportfolio's die beschikbaar zijn, zijn er verrassend weinig mensen die zich anders en interessant genoeg voelen om over te praten. Het zijn echter deze sites die de lat hoger leggen en blootleggen wat de toekomst zou kunnen betekenen voor webdesign.
Laten we een duik nemen in een grote reeks prachtige portfolio's en op zoek gaan naar enkele veelvoorkomende elementen waarmee ze werken. Sommige van deze elementen brengen trends in de hele sector aan het licht, terwijl andere eenvoudige en gemeenschappelijke ontwerpontwerpen laten zien. Niet alle hebben een grote betekenis, maar ze dragen allemaal bij aan fantastische ontwerpen die u uitdagen om een werkelijk buitengewone portfoliosite te maken.
Vertel een verhaal
Een van de meest interessante aspecten van een moderne portfoliosite is de poging om een omgeving voor het vertellen van verhalen te creëren. Het idee is om een stroom van inhoud te creëren die in wezen de ervaring en bericht naar de gebruiker stuurt. Deze besturing maakt een stroom van content in een gewenste volgorde.
Veel sites proberen dit soort dingen te doen door de hoofdnavigatie in een gewenste volgorde te plaatsen. Maar deze sites benaderen een heel bekend niveau en maken er een onvermijdelijk deel van uit.
Jan Ploch
Het gebruik van een pagina met één pagina is niets nieuws en dwingt de gebruiker door de definitie om naar beneden te scrollen op de pagina. Dit creëert een natuurlijke stroom van inhoud die talloze keren is gebruikt. Op deze site vinden we echter een zelden gebruikte benadering met een geanimeerde achtergrond. Terwijl je door de pagina bladert, is het alsof de frisdrank op de achtergrond door het stro wordt opgezogen.
Dit eenvoudige, decoratieve element doet iets echt krachtig; het moedigt je aan om het helemaal onderaan de pagina te maken. Dit is fundamenteel een cruciaal aspect van de site met één pagina: ervoor zorgen dat gebruikers het einde van het verhaal halen. En het einde van het verhaal is meestal het conversiepunt van de site (zoals in dit geval).
Tam Cai
De site van deze persoon toont ook het model voor het vertellen van een enkele pagina. Wat ik interessant vind aan deze specifieke site, is dat het verhaal wordt afgesloten door twee krachtige beelden, met al het vlees in het midden. De grote reeks illustraties bovenin de pagina geeft een stemming weer, toont de persoonlijkheid van de artiest en nodigt u over het algemeen uit om zijn wereld in te duiken. De pagina wordt vervolgens afgewerkt met een contactoptie (conversiepunten) en een dramatische foto van wat we zouden aannemen is de maker.
Zeker niet een stijl voor iedereen, maar wanneer een thematische aanpak wordt geproduceerd op een manier die zo gepolijst is, kunnen de resultaten geweldig zijn. En hoewel de site mogelijk niet alle bezoekers aanspreekt, zal deze de juiste mensen aanspreken en de maker helpen om de verbindingen te maken die hij zal waarderen.
MacMillan Lynch
Dit voorbeeld neemt een beetje een andere aanpak. Het verhaalgedeelte van deze site is kort en staat allemaal in de grafische hoofdpagina. In dit geval is het verhaal vrijwel irrelevant, behalve dat het een gevoel van een mysterie creëert om te begrijpen. Bij het landen op de site vroeg ik me af waar het in hemelsnaam over ging. Soms wilt u uw bezoekers lepelen; op andere momenten kan het heel goed werken om ze in te zuigen met een interessant verhaal of mysterie. Dit heeft ook het voordeel van het creëren van een nogal aparte en hopelijk gedenkwaardige site.
Sallee Design
Op de Sallee Design-site vinden we een meer typische benadering van de sitestructuur. Logo linksboven, hoofdnavigatie bovenaan en de standaard diavoorstelling van de homepage. In veel opzichten is dit een heel normale site (met een mooi ontwerp toegepast).
Wat ik echter interessant vond, was dat hun diavoorstelling op de homepage niet alleen een automatisch draaiende reeks Flash-afbeeldingen was. In plaats daarvan wordt de diavoorstelling gestart door de gebruiker en begint met een uitnodiging om een rondleiding te starten. Zodra je erin duikt, krijg je een reeks dia's die samenvatten wat je zou krijgen als je in plaats daarvan de verschillende pagina's van de site zou doorbladeren. En het is allemaal afgewerkt met belangrijke uittredepunten naar de rest van de site.
Ik denk dat deze aanpak slim is. Om te beginnen is het verfrissend om te zien dat een element zoals de startpagina-schuifregelaar een grondig gepland doel heeft. Ik vind het ook geweldig dat ze het voordeel krijgen van een verkooppitch van één pagina en de bonus-SEO die wordt geboden door een groter aantal pagina's te hebben.
Reagerend ontwerp
Het onderwerp van responsief webontwerp is, op zijn zachtst gezegd, een extreem hot topic. Het zou dus geen verrassing moeten zijn om vast te stellen dat deze aanpak kan worden gevonden in nieuwe portefeuilles die nu worden geproduceerd. Deze mensen hebben ongehinderd de nieuwe techniek omarmd. En het is niet verrassend dat alle drie de voorbeelden hier voor portfolio-sites van front-end ontwikkelaars zijn, precies het soort plaats dat we zoiets zouden kunnen verwachten te vinden.
Ryan Taylor
De site van Ryan volgt de standaard formule met één pagina voor een persoonlijke portfolio. Deze aanpak werkt prima bij het integreren van responsieve technieken in de site. Met slechts één pagina om te verantwoorden kan het een stuk eenvoudiger zijn om een site als deze te testen en te bouwen. Maar denk niet dat het gemakkelijk is. Het kost veel moeite en planning om een schone en mooie site te maken die op deze manier transformeert.
Aaron Shekey
De volgende is de portfolio van Aaron Shekey. Deze prachtige kleine site omvat vele beproefde technieken voor een portfoliosite. Het is semi-minimalistisch, heeft ingetogen kleuren om de afbeeldingen te laten knallen, en het ontwerp is grotendeels gebaseerd op typografie. Zoals deze site functioneert prachtig en is uiterst efficiënt bij het tonen van het werk van de kunstenaar. Maar met de toegevoegde bonus van een responsieve lay-out ziet de site er gegarandeerd goed uit op een breed scala aan apparaten. Dit zorgt ervoor dat de gebruiker een positieve ervaring krijgt, zonder frustratie over zoomen en scannen.
Andrew Cohen
Eindelijk vinden we in de categorie responsive de persoonlijke site van ontwikkelaar Andrew Cohen. Net als de anderen heeft het een enkele paginastructuur met wat ik een achtergrondgestuurd ontwerp zou noemen. Op deze manier kan de achtergrond verschuiven en veranderen zonder een grote behoefte aan structurele veranderingen. Dit maakt de site een perfecte kandidaat voor het introduceren van responsieve technieken.
Creatieve lay-outs
Soms is de beste manier om indruk te maken, om op te vallen als uniek en anders. En wat is een betere manier om dit te bereiken dan met een ongewone lay-outstructuur die spot met de normen en verwachtingen die we allemaal hebben. Tot op zekere hoogte laat bijna elk voorbeeld in deze verzameling dit specifieke kenmerk zien, maar ik heb deze kleine subset geselecteerd om het te demonstreren.
En voordat ik erin duik, wil ik erop wijzen dat deze sites geen creatieve lay-outs gebruiken alleen ter wille van de creativiteit. Het zijn nog steeds functionele sites die extreem duidelijk en eenvoudig te gebruiken zijn. Toch hebben ze hun eigen persoonlijkheden die hen in staat stellen om op te vallen. Dit heeft precies te maken met wat een portalsite zou moeten doen: zijn maker helpen zich te onderscheiden van de rest.
Krichevtsova Alexandra
Wat ik erg leuk vind aan dit voorbeeld voor het onderwerp creatieve lay-outs, is dat het geen radicaal andere lay-out is. Ja, de site volgt niet het normale logo linksboven, maar navigeert over de topbenadering. De lay-out is echter slechts een paar kleine stappen vanaf daar. Ik denk dat dit het punt buitengewoon goed laat zien.
Het doel is niet om een lay-out uit te vinden omwille van creatief zijn. Maar eerder, om creatief te worden met het neerleggen van de pagina om de informatie op de best mogelijke manier te communiceren. In dit geval werkt de stroom die door de enigszins atypische lay-out wordt gecreëerd, wonderwel.
David Desandro
In dit geval voelt de lay-out volledig ongebruikelijk aan. Op een bepaald niveau voelt het incompleet aan en voelt tegelijkertijd zich volledig georganiseerd en gemakkelijk in gebruik. Betreed de portfolio en andere pagina's en je zult snel onder de indruk zijn van de diversiteit op deze site. Het heeft zeker een aantrekkingskracht op de creatieve, maar technisch ingestelde.
Deidre Bain
Deze scrollen-site met één pagina breekt ook de normen van de lay-outstructuur. In dit voorbeeld is bijna het gehele ontwerp gebaseerd op paginaspecifieke lay-outs en illustraties. Dit is meestal een aanpak die niet goed werkt en leidt tot onderhoudsproblemen. Maar in het geval van een persoonlijke portfolio-site is het eigenlijk een geweldige manier om een aantal nuttige vaardigheden te demonstreren. Het meest in het bijzonder is de grondigheid van de site waardoor u verwacht dat deze ontwerper van het type is dat doorwerkt op de dingen. Het zijn dit soort subtiele berichten die extreem krachtig kunnen zijn om op uw eigen portfoliosite te communiceren.
Siddharth Arun
Bij het eerste gebruik heeft deze site het gevoel dat er een standaard protocol volgt. Maar interactie met de site een beetje en het voelt volkomen uniek. Soms bedenk je met je eigen creatieve draai niet dat je alles opnieuw moet uitvinden. Verander zo genoeg dat de resultaten verrassend (en functioneel) zijn.
Vetgedrukte tekst
Toen ik miniaturen zag van de verzamelde sites om hier te laten zien, viel één ding echt op: het gebruik van extreem grote en vetgedrukte tekst. De onderstaande voorbeelden hebben allemaal een enorme tekst die opvalt op de site. De belangrijkste reden die ik kan bedenken voor deze benadering is duidelijkheid.
Deze grote vetgedrukte tekst zorgt ervoor dat minimaal één primair bericht wordt gecommuniceerd. In sommige gevallen voelt het meer functioneel aan dan andere, maar uiteindelijk is het resultaat altijd hetzelfde. De aandacht van de gebruiker is vrijwel zeker gericht op dit jumbo-formaat exemplaar. Neem de voorbeelden in acht en noteer de verschillende manieren waarop advertenties dit element aan het werk hebben gebracht.
Garth Humphrey
Justin Burns
Amman, Jordanië
Ross Angus
Alex Pierce
Trim op de top
Zoals ik eerder al zei, sommige patronen zijn veel minder functioneel en zinvoller dan andere. In dit geval voel ik me bijna niet goed als ik de volgende samples in zo'n frivole set plaats. De onderstaande sites zijn absoluut schitterend; neem deze classificatie alstublieft niet als een soort van belediging. In feite zijn twee van mijn favoriete sites uit dit artikel hier te vinden.
Eigenlijk is het patroon dat er een soort decoratieve streep, een ononderbroken lijn of een zigzagpatroon aan de bovenkant verschijnt. Ik heb deze set beperkt tot drie sites, maar als je door een aantal andere voorbeelden scant, vind je hetzelfde element aan het werk.
Waarom is zo'n klein detail zo gewoon? Misschien is het met de enkele pagina-aanpak leuk om de bovenkant van de pagina aan te duiden. Op deze manier krijgen gebruikers een kleine visuele indicatie over waar de pagina begint.
Mathieu White
Raak Nerds aan
Danilo Giagnoli
Textuur textuur textuur
Een ander visueel detail dat zeer vaak voorkomt op portfoliosites is textuur. Dit geldt vooral als het gaat om achtergrondelementen. Een deel van de huidige visuele stijl integreert subtiele texturen in de achtergrond.
Ik vind dat dit element uitstekend werk verricht door een beetje een organisch element in de pagina op te nemen dat helpt om het van zijn technische onderbouwing te verwijderen. Dit eenvoudige element kan een warme toets toevoegen die op de een of andere manier een hoop leven in een ontwerp ademt. Nogmaals, doorzoek veel van de eerder behandelde voorbeelden en je zult talloze voorbeelden van dit element op het werk vinden. Hier zijn een paar voorbeelden die dit buitengewoon goed doen.
Bjarke Clauson-Kaas
Aaron Lumsden
DS Higdon
Andrew Ckor
Extra opmerkelijke portfoliosites
Er zijn ontelbare kandidaten voor dit type collectie. Het is verleidelijk om in dit geval bijna te veel monsters op te nemen. In plaats daarvan heb ik me gericht op een extra verzameling sites die een vrij breed scala aan stijlen, structuren en algemene benaderingen bieden.
Een ding dat je zal opmerken is dat een paar van deze sites niet voor ontwerpers zijn. Ik vond het erg interessant om te zien hoe andere industrieën het web hebben gebruikt om een individu te verkopen. Een portfoliosite is immers bedoeld om precies dat te doen. Dus, terwille van inspiratie en frisse ideeën, heb ik een paar externe webdesign-community's opgenomen.
Collin Henderson
Josh Miller
Nate Croft
Torsten Meb
Joey Rabbitt
Eric Salvail
Bekka Reese
Felix Menard
Marija Zaric
Tobias Persson
Jake Dahn
Conclusie
Het creëren van een site om u online te vertegenwoordigen is geen kleine onderneming. Hopelijk zullen de hier verzamelde sites u inspireren en uitdagen.
Sommige van de hier gepresenteerde elementen vertegenwoordigen zeer opzettelijke mechanismen om de gebruikerservaring te beheersen en het individu te verkopen. Anderen demonstreren meer of minder visuele ontwerptrends. Ik ben van mening dat geen van beide moet worden genegeerd, en geen van beide moet in zijn eentje dingen controleren. Het is door de normen uit te dagen, functionele patronen te omarmen en uw imago online te beoordelen in een nieuw licht dat kan leiden tot revolutionaire ideeën die u helpen op te vallen.
En met betrekking tot het onderwerp van opvallen, voel ik me gedwongen om mensen eraan te herinneren dat het doel hier niet is om de meest originele interface uit te vinden. In plaats daarvan is het doel creatief te denken binnen de beperkingen die we hebben.
Hiervan hoop ik altijd dat we de creatieve oplossingen zullen vinden die ons helpen opvallen met verbazingwekkend functionele resultaten. Als je de hier verzamelde monsters bekijkt, zijn ze niet alleen mooi, maar ze functioneren verbazingwekkend goed.
Wat zijn enkele van de beste portfoliosites die je hebt gezien? Zijn er nog andere trends die u onlangs hebt opgemerkt in designerportfolio's? Laat het ons weten in de reacties!