Egenskaper hos en modern portföljplats
Av alla typer av webbplatser måste portföljplatsen övervinna vad som kan vara några av de svåraste hindren. Prata med nästan vilken designer som helst och de kommer överens om att starta din egen portföljwebbplats är en smärtsam process. Oftast innehåller denna process många versioner och ofta, en lansering av ren frustration.
Det är enligt min uppfattning att portföljen kan bli ett fönster i framtiden för webbdesign. Jag föreslår det här för att när en individ utformar sin egen webbplats är de bara under självbegränsade begränsningar. Det finns ingen klient att diktera saker, ingen kommitté för att förstöra designen, och ingen godkännande för att dra ut saker och förstöra momentum.
Men inte alla portföljwebbplatser skapas lika. Trots det vansinniga antalet provportföljplatser finns det överraskande få som känner sig tydliga och intressanta nog att prata om. Det är dock dessa platser som lyfter baren och avslöjar vad framtiden kan hålla för webbdesign.
Låt oss dyka in i en stor uppsättning fantastiska portföljer och leta efter några vanliga element som får dem att fungera. Några av dessa delar exponerar branschövergripande trender, medan andra visar enkla och gemensamma designblomningar. Inte alla har stor betydelse, men alla lägger till fantastiska mönster som kommer att utmana dig för att skapa en riktigt extraordinär portföljplats.
Berätta en historia
En av de mest intressanta aspekterna av en modern portföljplats är ansträngningarna att skapa en historia som berättar om miljön. Tanken är att skapa ett flöde av innehåll som i huvudsak styr upplevelsen och meddelandet till användaren. Denna kontroll skapar ett flöde av innehåll i önskad ordning.
Många webbplatser försöker göra den här typen av saker genom att placera huvudnavigering i önskad ordning. Men dessa webbplatser tar tillvägagångssättet till en helt visst nivå och gör den till en oundviklig del av upplevelsen.
Jan Ploch
Användningen av en enda sidsajt är inget nytt, och med sin definition tvingar en användare att rulla ner på sidan. Detta skapar ett naturligt flöde av innehåll som har använts otaliga gånger. På denna sida finner vi dock ett sällan använt tillvägagångssätt med en animerad bakgrund. När du rullar ner på sidan, är det som om läsken i bakgrunden sugs upp halmen.
Detta enkla dekorativa element gör någonting riktigt kraftfullt; det uppmuntrar dig att göra det hela vägen ner på sidan. Det här är i grunden en kritisk aspekt på webbplatsen för enskild sida: att se till att användarna gör det till slutet av berättelsen. Och slutet på berättelsen är oftast webbplatsens omvandlingspunkt (som det är i det här fallet).
Tam Cai
Denna persons webbplats visar också den enda sidan, berättande modellen. Vad jag tycker intressant om den här webbplatsen är att historien är bokad med två kraftfulla visuella, med allt kött i mitten. Den stora uppsättningen illustrationer högst upp på sidan ställer upp humör, visar konstnärens personlighet och inbjuder generellt att dyka in i sin värld. Sidan avslutas sedan med kontaktalternativ (konverteringspunkter) och ett dramatiskt fotografi av vad vi skulle anta är skaparen.
Visst inte en stil för alla, men när ett tematiskt tillvägagångssätt produceras på ett sätt så polerat som detta kan resultaten bli fantastiska. Och även om webbplatsen kanske inte vädjar till alla besökare, kommer det att vädja till rätt personer och hjälpa upphovsmannen att göra de slags anslutningar han kommer att värdera.
MacMillan Lynch
Detta exempel tar lite annorlunda. Historia delen av den här webbplatsen är kort, och alla finns inuti den huvudsakliga hemsidan grafisk. I det här fallet är historien ganska irrelevant, förutom att det skapar en känsla av ett mysterium att förstå. Vid landning på platsen befann mig mig själv och undrade vad det var för den här personen. Ibland vill du att sked matar dina besökare; vid andra tillfällen kan det fungera riktigt bra för att suga in dem med en intressant historia eller ett mysterium. Detta har också fördelen att skapa en ganska distinkt och förhoppningsvis minnesvärd plats.
Sallee Design
På Sallee Design-webbplatsen hittar vi en mer typisk inställning till webbplatsstrukturen. Logo högst upp till vänster, huvudnavigering överst och standardhemsidans bildspel. På många sätt är det här en mycket vanlig webbplats (med en vacker design applicerad).
Vad jag tyckte var intressant var att deras hemsida bildspel inte bara var en automatisk roterande serie av Flash-bilder. I stället startar bildspelet av användaren och börjar med en inbjudan att starta en turné. När du dyker in tas du igenom en serie bilder som sammanfattar vad du skulle få om du istället grävde igenom sidans olika sidor. Och det är helt klart med viktiga steg till resten av webbplatsen.
Jag tycker att detta tillvägagångssätt är smart. Till att börja med är det uppfriskande att se ett element som startsidan har ett noggrant planerat syfte. Jag älskar också att de kommer att dra nytta av en enda säljkonsol och bonusen SEO tillhandahålls genom att ha ett större antal sidor.
Responsiv design
Ämnet av responsiv webbdesign är minst sagt ett extremt hett ämne. Så det borde inte bli någon överraskning att finna att denna inställning kan hittas i nya portföljer som produceras nu. Obehindrat har dessa individer anammat den nya tekniken. Och inte överraskande är alla tre av exemplen här för portföljplatser för frontend utvecklare, exakt vilken typ av plats vi borde förvänta oss att hitta en sådan sak.
Ryan Taylor
Ryan s webbplats följer standard en sidformel för en personlig portfölj. Detta tillvägagångssätt fungerar bra när man integrerar responsiva tekniker på webbplatsen. Med bara en sida som konto kan det vara mycket lättare att testa och bygga en webbplats så här. Men tro det är inte lätt. Det tar stor ansträngning och planerar att skapa en ren och vacker plats som förvandlas på detta sätt.
Aaron Shekey
Nästa upp är portföljen av Aaron Shekey. Denna vackra lilla webbplats omfattar många provade och sanna tekniker för en portföljplats. Den är semi-minimalistisk, har dämpade färger för att tillåta bilderna att dyka upp, och den har en design som i stor utsträckning bygger på typografi. Liksom den här webbplatsen fungerar vackert och är extremt effektiv för att visa upp konstnärens arbete. Men med den extra bonusen av en responsiv layout är webbplatsen garanterad att se bra ut på ett brett utbud av enheter. Detta säkerställer att användaren får en positiv upplevelse, utan frustration att zooma och skanna runt.
Andrew Cohen
Till sist hittar vi den personliga webbplatsen för frontend utvecklaren Andrew Cohen. Liksom de andra har den en enda sidestruktur med vad jag skulle kalla en bakgrundsdriven design. På så sätt kan bakgrunden skiftas och förändras utan stort behov av strukturella förändringar. Detta gör webbplatsen till en perfekt kandidat för att införa responsiva tekniker.
Kreativa layouter
Ibland är det bästa sättet att göra ett intryck att sticka ut som unikt och annorlunda. Och vilket bättre sätt att åstadkomma detta än med en ovanlig layoutstruktur som dämpar de normer och förväntningar vi alla har. Till viss del visar nästan varje exempel i denna samling det här attributet, men jag har valt denna lilla underuppsättning för att visa den.
Och innan jag dyker in vill jag påpeka att dessa webbplatser inte använder sig av kreativa layouter bara för kreativitets skull. De är fortfarande funktionella platser som är extremt tydliga och enkla att använda. Ändå har de sina egna distinkta personligheter som gör att de kan sticka ut. Detta gäller exakt vad en portföljplats ska göra: hjälpa sin skapare att sticka ut från mängden.
Krichevtsova Alexandra
Vad jag verkligen älskar om detta exempel för ämnet kreativa layouter är att det inte är en radikalt annorlunda layout. Ja, webbplatsen följer inte den vanliga logotypen längst upp till vänster, navigering över det övre tillvägagångssättet. Layouten är dock bara några få steg därifrån. Jag tycker att det här visar punkten väldigt bra.
Målet är inte att uppfinna en layout för att vara kreativ. Men snarare att bli kreativ med att lägga ut sidan för att kunna kommunicera informationen på bästa möjliga sätt. I detta fall fungerar flödet som skapas av den lite atypiska layouten fantastiskt.
David Desandro
I detta fall känns layouten helt ovanlig. På en viss nivå känns det ofullständigt, men samtidigt känns det helt organiserat och lätt att använda. Grava in i portföljen och andra sidor men och du kommer bli lätt imponerad av mångfalden som denna sida presenterar. Det har definitivt en överklagande till den kreativa, men tekniskt inriktade.
Deidre Bain
Den här sidbladningsplatsen bryter också normerna för layoutstrukturen. I det här provet är nästan hela designen baserad på sidspecifika layouter och illustrationer. Vanligtvis är detta ett tillvägagångssätt som inte fungerar bra och leder till underhållsproblem. Men när det gäller en personlig portfölj är det faktiskt ett bra sätt att visa några användbara färdigheter. Mest speciellt finns det noggrannhet på webbplatsen som låter dig förvänta sig att denna designer ska vara av den sort som följer igenom på saker. Det är sådana slags subtila meddelanden som kan vara extremt kraftfulla att kommunicera på din egen portföljplats.
Siddharth Arun
På första gången har denna webbplats känslan av en som följer standardprotokollet. Men interagera lite med webbplatsen och det känns helt unik. Ibland kommer din egen kreativa vridning inte att innebära att du måste uppfinna allt. Ändra bara nog så att resultaten är överraskande (och funktionella).
Fettext
När jag observerade miniatyrer av de samlade platserna för att presentera här stod en sak verkligen ut: användningen av extremt stor och djärv text. De prover som listas nedan har alla stor text som står ut på webbplatsen. Den främsta anledningen till att jag kan komma med detta tillvägagångssätt är klarhet.
Den här stora fetstilen säkerställer att minst ett primärt meddelande kommuniceras. I vissa fall känns det mer funktionellt än andra, men i slutändan är resultatet alltid detsamma. Användarens uppmärksamhet är nästan garanterad att riktas till den här jumbo-storleken. Observera proverna och notera de olika sätten kreativerna har satt till att detta element fungerar.
Garth Humphrey
Justin Burns
Amman, Jordanien
Ross Angus
Alex Pierce
Trim på toppen
Som jag nämnde tidigare är några av mönstren betydligt mindre funktionella och meningsfulla än andra. I det här fallet känner jag mig nästan dåligt att placera följande prover i en sådan frivolös uppsättning. De platser som anges nedan är helt underbara; snälla ta inte denna klassificering som någon form av förolämpning alls. Faktum är att två av mina favoritwebbplatser från den här artikeln finns här.
I grunden är mönstret att någon form av dekorativ rand, en solid linje eller ett zigzagmönster visas överst. Jag begränsade denna uppsättning till tre platser, men om du söker igenom några av de andra exemplen hittar du samma element på jobbet.
Varför är så liten detalj eftersom det är så vanligt? Kanske med den enkla sidanvändningen är det trevligt att beteckna toppen av sidan. På så sätt får användarna en liten visuell koll på hur sidan börjar.
Mathieu White
Tryck på Nördar
Danilo Giagnoli
Textur konsistens konsistens
En annan visuell detalj som är extremt vanlig på portföljsidor är textur. Detta gäller särskilt när det gäller bakgrundsdelar. En del av den nuvarande visuella stilen innehåller subtila texturer i bakgrunden.
Jag tycker att det här elementet gör ett bra jobb att integrera lite organiskt element i sidan som hjälper till att ta bort det från dess tekniska underlag. Det här enkla elementet kan ge en varm touch som på något sätt andas ett ton liv i en design. Återigen gräva igenom många av de tidigare täckta proverna och du hittar många exempel på detta element på jobbet. Här är några exempel som gör det väldigt bra.
Bjarke Clauson-Kaas
Aaron Lumsden
DS Higdon
Andrew Ckor
Ytterligare anmärkningsvärda portföljplatser
Det finns otaliga kandidater för denna typ av samling. Det är frestande att inkludera nästan för många prover i det här fallet. Istället har jag fokuserat på en extra samling webbplatser som presenterar ett ganska brett spektrum av stilar, strukturer och övergripande tillvägagångssätt.
En sak du noterar är att några av dessa webbplatser inte är för designers. Jag tyckte att det var väldigt intressant att se hur andra branscher har använt nätet för att sälja en individ. När allt kommer omkring är en portföljplats avsedd att göra exakt det. Så, för inspiration och friska idéers skull, har jag inkluderat några utanför webbdesignsgemenskapen.
Collin Henderson
Josh Miller
Nate Croft
Torsten Meb
Joey Rabbitt
Eric Salvail
Bekka Reese
Felix Menard
Marija Zaric
Tobias Persson
Jake Dahn
Slutsats
Att skapa en webbplats för att representera dig online är inget litet företag. Förhoppningsvis kommer de sajter som samlas här att inspirera och utmana dig.
Några av de element som presenteras här representerar mycket avsiktliga mekanismer för att styra användarupplevelsen och sälja individen. Andra visar mer eller mindre visuella designtrender. Jag tror att det inte heller bör ignoreras, och inte heller bör man självkontrollera saker. Det är genom att utmana normerna, omfamna funktionella mönster och bedöma din bild online i ett nytt ljus som kan leda till revolutionerande idéer som hjälper dig att sticka ut.
Och när det gäller frågan om att stå ut, känner jag mig tvungen att påminna människor om att målet här inte är att uppfinna det mest ursprungliga gränssnittet. Istället är målet att tänka kreativt inom de begränsningar vi har.
Utan detta hoppas jag alltid att vi ska hitta de kreativa lösningarna som hjälper oss att sticka ut med otroligt funktionella resultat. Om du tittar på de samlingar som samlas här är de inte bara vackra, men de fungerar fantastiskt bra.
Vad är några av de bästa portföljwebbplatser du har sett? Några andra trender du har märkt i designerportföljer nyligen? Låt oss veta i kommentarerna!