Kjennetegn ved et moderne porteføljeside
Av alle typer nettsteder må porteføljesiden overvinne hva som kan være noen av de vanskeligste hindringene. Snakk med nesten hvilken som helst designer og de vil være enige om at lansering av din egen porteføljeside er en smertefull prosess. Denne prosessen inkluderer oftest en rekke versjoner, og ofte, en lansering ut av ren frustrasjon.
Oppfarten til dette etter min mening er at porteføljesiden kan være et vindu inn i fremtiden for webdesign. Jeg foreslår dette fordi når en person designer sin egen side, er de bare under selvpålagte begrensninger. Det er ingen klient å diktere ting, ingen komité for å ødelegge designet, og ingen godkjenningsprosess for å trekke ut ting og ødelegge momentum.
Men ikke alle porteføljesider er skapt like. Til tross for den vanvittige mengden av utvalgsporteføljesider er det overraskende få som føler seg tydelig og interessant nok til å snakke om. Det er imidlertid disse nettstedene som øker linjen og avslører hva fremtiden kan ha for webdesign.
La oss dykke inn i et stort sett med flotte porteføljer og se etter noen vanlige elementer som får dem til å fungere. Noen av disse elementene avslører bransjens brede trender, mens andre viser enkle og felles designblomstrer. Ikke alle har stor betydning, men de legger alle sammen til fantastiske design som vil utfordre deg til å skape en virkelig ekstraordinær porteføljeside.
Fortell en historie
En av de mest interessante aspektene ved et moderne porteføljeside er innsatsen for å skape et historiefortellende miljø. Tanken er å skape en strøm av innhold som i hovedsak styrer opplevelsen og meldingen til brukeren. Denne kontrollen skaper en strøm av innhold i ønsket rekkefølge.
Mange steder forsøker å gjøre denne typen ting ved å plassere hovednavigasjonen i en ønskelig rekkefølge. Men disse nettstedene tar tilnærmingen til et helt visst nivå og gjør det til en uunngåelig del av opplevelsen.
Jan Ploch
Bruken av et enkelt nettsted er ikke noe nytt, og ved sin definisjon tvinger en bruker til å bla nedover siden. Dette skaper en naturlig flyt av innhold som har blitt brukt utallige ganger. På dette nettstedet finner vi imidlertid en sjelden brukt tilnærming med en animert bakgrunn. Når du ruller nedover siden, er det som om bruset i bakgrunnen blir suget opp halmen.
Dette enkle, dekorative elementet gjør noe veldig kraftig; det oppfordrer deg til å gjøre det helt ned på siden. Dette er fundamentalt et kritisk aspekt av siden for enkeltside: sikre at brukerne gjør det til slutten av historien. Og slutten av historien er mest typisk konverteringspunktet til nettstedet (som det er i dette tilfellet).
Tam Cai
Denne persons nettsted viser også single page, storytelling modell. Det jeg finner interessant om dette nettstedet er at historien er book-ended av to kraftige visuals, med alt kjøttet i midten. Det store settet med illustrasjoner øverst på siden satte et humør, demonstrerer kunstnerens personlighet, og inviterer deg generelt til å dykke inn i sin verden. Siden avsluttes med kontaktalternativer (konverteringspunkter) og et dramatisk bilde av hva vi antar er skaperen.
Absolutt ikke en stil for alle, men når en tematisk tilnærming er produsert på en måte så polert som dette, kan resultatene være fantastisk. Og selv om nettstedet ikke kan appellere til alle besøkende, vil det appellere til de riktige personene og hjelpe skaperen til å gjøre hva slags tilkoblinger han vil verdsette.
MacMillan Lynch
Dette eksemplet tar litt av en annen tilnærming. Historien del av dette nettstedet er kort, og alt er inneholdt på hovedsiden grafisk. I dette tilfellet er historien ganske mye irrelevant, bortsett fra at det skaper en følelse av et mysterium å forstå. Ved landing på stedet fant jeg meg selv og lurte på hva hekken denne personen handlet om. Noen ganger vil du skje feed dine besøkende; På andre tidspunkter kan det fungere veldig bra å suge dem inn med en interessant historie eller et mysterium. Dette har også fordelen av å skape et ganske tydelig og forhåpentligvis minneverdig sted.
Sallee Design
På Sallee Design-siden finner vi en mer typisk tilnærming til nettstedstrukturen. Logo øverst til venstre, hovednavigasjon over toppen og standard startside lysbildefremvisning. På mange måter er dette et veldig normalt nettsted (med et vakkert design anvendt).
Det jeg fant interessant var at deres startside lysbildefremvisning ikke bare var en automatisk roterende serie av Flash-bilder. I stedet blir lysbildefremvisningen startet av brukeren og begynner med en invitasjon til å starte en tur. Når du dykker inn, blir du tatt gjennom en serie lysbilder som oppsummerer hva du vil få hvis du i stedet graver gjennom de ulike sidene på nettstedet. Og det er helt ferdig med nøkkelen som går ut på resten av nettstedet.
Jeg tror denne tilnærmingen er smart. For det første er det forfriskende å se et element som glidebryteren på hjemmesiden har et grundig planlagt formål. Jeg er også glad i at de får fordelen av en enkelt side salgs pitch, og bonusen SEO gitt ved å ha et større antall sider.
Responsiv utforming
Emnet for Responsivt webdesign er minst sagt et ekstremt varmt emne. Så det bør ikke komme som en overraskelse å finne ut at denne tilnærmingen finnes i friske porteføljer som blir produsert nå. Uhindret, disse personene har omfavnet den nye teknikken. Og ikke overraskende er alle tre eksemplene her for porteføljesider for frontend-utviklere, akkurat den typen sted vi bør forvente å finne en slik ting.
Ryan Taylor
Ryans nettsted følger standard 1-sidet formel for en personlig portefølje. Denne tilnærmingen fungerer bra når du integrerer responsive teknikker inn i nettstedet. Med bare en side å regne med kan det være mye lettere å teste og bygge et nettsted som dette. Men ikke tro det er enkelt. Det krever en stor innsats og planlegger å skape et rent og vakkert nettsted som forvandler seg på denne måten.
Aaron Shekey
Neste opp er porteføljen av Aaron Shekey. Denne vakre lille siden omfatter mange prøvde og sanne teknikker for en porteføljeside. Det er semi-minimalistisk, har dempet farger for å tillate bildene å pope, og det har et design i stor grad basert på typografi. På samme måte fungerer dette nettstedet vakkert og er ekstremt effektivt for å vise kunstnerens arbeid. Men med den ekstra bonusen på en responsiv layout, er nettstedet garantert å se bra ut på et bredt spekter av enheter. Dette sikrer at brukeren får en positiv opplevelse, uten frustrasjon av zooming og skanning rundt.
Andrew Cohen
Til slutt finner vi det personlige nettstedet for frontend-utvikler Andrew Cohen i kategorien Responsive. I likhet med de andre har den en enkelt sidestruktur med det jeg ville kalle en bakgrunnsdrevet design. På denne måten kan bakgrunnen skifte og endres uten store behov for strukturelle endringer. Dette gjør nettstedet perfekt til å introdusere responsive teknikker.
Kreative oppsett
Noen ganger er den beste måten å gjøre et inntrykk på å skille seg ut som unikt og annerledes. Og hvilken bedre måte å oppnå dette på enn med en uvanlig layoutstruktur som spretter på normer og forventninger vi alle har. I noen grad demonstrerer nesten alle eksempler i denne samlingen dette bestemte attributtet, men jeg har valgt dette lille undersettet for å demonstrere det.
Og før jeg dykker inn, vil jeg påpeke at disse nettstedene ikke bruker kreative layouter bare for kreativitet. De er fortsatt funksjonelle nettsteder som er svært klare og enkle å bruke. Likevel har de sine egne forskjellige personligheter som gjør at de kan skille seg ut. Dette gjelder nøyaktig hva en porteføljeside skal gjøre: hjelper sin skaperen til å skille seg ut fra mengden.
Krichevtsova Alexandra
Det jeg virkelig elsker om dette eksempelet for temaet kreative layouter er at det ikke er en radikalt annen layout. Ja, siden følger ikke den normale logoen øverst til venstre, navigering over den øverste tilnærmingen. Oppsettet er bare noen få små skritt derfra skjønt. Jeg tror dette viser poenget svært godt.
Målet er ikke å oppfinne en layout for å være kreativ. Men heller, å bli kreativ med å legge ut siden for å kommunisere informasjonen på best mulig måte. I dette tilfellet fungerer strømmen som er opprettet av den litt atypiske utformingen, fantastisk.
David Desandro
I dette tilfellet virker oppsettet helt uvanlig. På et visst nivå føles det ufullstendig, og samtidig føles det helt organisert og brukervennlig. Grav inn i porteføljen og andre sider skjønt, og du vil bli lett imponert over mangfoldet dette nettstedet presenterer. Det har definitivt en appell til den kreative, men likevel teknisk tenkende.
Deidre Bain
Denne siden scrolling området bryter også normer av layout struktur. I denne prøven er nesten hele designet basert på sidespesifikke layouter og illustrasjoner. Vanligvis er dette en tilnærming som ikke fungerer bra og fører til vedlikeholdsproblemer. Men i tilfelle av en personlig porteføljeside er det faktisk en fin måte å demonstrere noen nyttige ferdigheter på. Mest spesielt er det grundighet til nettstedet som lar deg forvente at denne designeren skal være av den typen som følger gjennom på ting. Det er disse slags subtile meldinger som kan være svært kraftige til å kommunisere på ditt eget porteføljeside.
Siddharth Arun
På første gang har dette nettstedet følelsen av en som følger standardprotokollen. Men samhandle med nettstedet litt, og det føles helt unikt. Noen ganger å komme opp med din egen kreative vri, betyr ikke at du må gjenoppfinne alt. Bare endre nok slik at resultatene er overraskende (og funksjonelle).
Fet tekst
Som jeg observerte miniatyrer av nettstedene samlet til å fungere her, stod en ting virkelig ut: bruk av ekstremt stor og fet tekst. Prøvene som er oppført under er alle med stor tekst som skiller seg ut på nettstedet. Hovedårsaken til at jeg kan komme opp med denne tilnærmingen er klarhet.
Denne store fette teksten sikrer at minst en primær melding kommuniseres. I noen tilfeller føles det mer funksjonelt enn andre, men til slutt er resultatet alltid det samme. Brukerens oppmerksomhet er nesten garantert å bli rettet mot denne jumbo-størrelsen. Vær oppmerksom på prøvene og legg merke til de ulike måtene kreativene har satt på dette elementet.
Garth Humphrey
Justin Burns
Amman, Jordan
Ross Angus
Alex Pierce
Trim på toppen
Som nevnt tidligere, er noen av mønstrene langt mindre funksjonelle og meningsfylte enn andre. I dette tilfellet føler jeg meg nesten dårlig å plassere følgende prøver i et slikt frivoløst sett. Nettstedene som er omtalt nedenfor er helt nydelige; Vennligst ikke ta denne klassifiseringen som noen form for fornærmelse i det hele tatt. Faktisk er to av mine favorittsteder fra denne artikkelen funnet her.
I utgangspunktet er mønsteret at en slags dekorativ stripe, en solid linje eller en zigzag mønster vises over toppen. Jeg begrenser dette settet til tre sider, men hvis du skanner gjennom noen av de andre eksemplene, finner du det samme elementet på jobb.
Hvorfor er så liten detalj da dette er så vanlig? Kanskje med den enkle siden tilnærming er det fint å betegne toppen av siden. På denne måten får brukerne en liten visuell indikasjon på hvor siden begynner.
Mathieu White
Trykk på Nerds
Danilo Giagnoli
Tekstur tekstur tekstur
En annen visuell detalj som er svært vanlig på porteføljesider er tekstur. Dette gjelder spesielt når det gjelder bakgrunnselementer. En del av den nåværende visuelle stilen inneholder subtile teksturer i bakgrunnen.
Jeg finner at dette elementet gjør en god jobb med å inkorporere litt av et organisk element på siden som hjelper til med å fjerne den fra sine tekniske underlag. Dette enkle elementet kan legge til en varm berøring som på en eller annen måte puster massevis av liv i et design. Igjen, grave gjennom mange av de tidligere dekkede prøvene, og du vil finne mange eksempler på dette elementet på jobb. Her er noen eksempler som gjør dette veldig bra.
Bjarke Clauson-Kaas
Aaron Lumsden
DS Higdon
Andrew Ckor
Ytterligere bemerkelsesverdige porteføljesider
Det finnes utallige kandidater for denne typen samling. Det er fristende å inkludere nesten for mange prøver i dette tilfellet. I stedet har jeg fokusert på en ekstra samling nettsteder som presenterer et ganske bredt spekter av stiler, strukturer og generelle tilnærminger.
En ting du vil merke seg er at noen av disse nettstedene ikke er for designere. Jeg fant det veldig interessant å se hvordan andre næringer har brukt nettet til å selge et individ. Tross alt er en porteføljeside ment å gjøre akkurat det. Så, for inspirasjon og friske ideers skyld, har jeg tatt med noen få utenfor webdesign fellesskapet.
Collin Henderson
Josh Miller
Nate Croft
Torsten Meb
Joey Rabbitt
Eric Salvail
Bekka Reese
Felix Menard
Marija Zaric
Tobias Persson
Jake Dahn
Konklusjon
Å lage et nettsted for å representere deg på nettet er ikke et lite foretak. Forhåpentligvis vil nettstedene som samles her inspirere og utfordre deg.
Noen av elementene som presenteres her representerer svært forsettlige mekanismer for å kontrollere brukeropplevelsen og selge personen. Andre demonstrerer mer eller mindre visuelle designtrender. Jeg tror at det heller ikke bør overses, og det bør heller ikke kontrolleres enkeltvis. Det er ved å utfordre normer, omfavne funksjonelle mønstre og vurdere bildet ditt på nettet i et nytt lys som kan føre til revolusjonerende ideer som hjelper deg med å skille seg ut.
Og når det gjelder å stå ut, føler jeg meg tvunget til å minne folk om at målet her ikke er å oppfinne det mest originale grensesnittet. I stedet er målet å tenke kreativt innenfor begrensningene vi har.
Ut av dette håper jeg alltid at vi vil finne de kreative løsningene som hjelper oss med å skille seg ut med utrolig funksjonelle resultater. Hvis du ser på prøvene som er samlet her, er de ikke bare vakre, men de fungerer utrolig bra.
Hva er noen av de beste porteføljesider du har sett? Noen andre trender du har lagt merke til i designerporteføljer nylig? Gi oss beskjed i kommentarene!