Caratteristiche di un sito di portafoglio moderno
Di tutti i tipi di siti Web, il sito del portfolio deve superare quelli che potrebbero essere alcuni degli ostacoli più difficili. Parla con quasi tutti i designer e saranno d'accordo, il lancio del tuo sito portfolio è un processo doloroso. Molto spesso, questo processo include numerose versioni e, spesso, un lancio di pura frustrazione.
L'aspetto positivo di questo secondo me è che il sito del portfolio può essere una finestra sul futuro del web design. Suggerisco questo perché quando un individuo progetta il proprio sito sono solo sotto i limiti autoimposti. Non c'è un cliente che dica le cose, nessun comitato per distruggere il progetto e nessun processo di approvazione per trascinare le cose e distruggere lo slancio.
Ma non tutti i siti di portfolio sono creati uguali. Nonostante la folle quantità di siti di portfolio di esempio disponibili, ci sono sorprendentemente pochi che si sentono distinti e abbastanza interessanti da parlare. Sono questi i siti che alzano il livello ed espongono ciò che il futuro potrebbe riservare al web design.
Immergiti in un'ampia serie di straordinari portfolio e cerca alcuni elementi comuni che li fanno funzionare. Alcuni di questi elementi espongono le tendenze del settore, mentre altri dimostrano un design semplice e comune. Non tutti hanno un significato enorme, ma tutti si sommano a fantastici progetti che ti sfideranno a creare un sito portfolio davvero straordinario.
Raccontare una storia
Uno degli aspetti più interessanti di un sito di portfolio moderno è lo sforzo per creare un ambiente narrativo. L'idea è di creare un flusso di contenuti che controlli essenzialmente l'esperienza e il messaggio all'utente. Questo controllo crea un flusso di contenuto in un ordine desiderato.
Molti siti tentano di fare questo genere di cose posizionando la navigazione principale in un ordine desiderabile. Ma questi siti prendono l'approccio a un livello conosciuto e ne fanno una parte inevitabile dell'esperienza.
Jan Ploch
L'uso di un sito a pagina singola non è una novità e, grazie alla sua definizione, costringe un utente a scorrere la pagina verso il basso. Questo crea un flusso naturale di contenuto che è stato usato infinite volte. Su questo sito, però, troviamo un approccio raramente utilizzato con uno sfondo animato. Mentre scorri verso il basso nella pagina, è come se la soda sullo sfondo venisse risucchiata dalla paglia.
Questo semplice elemento decorativo fa qualcosa di veramente potente; ti incoraggia a farlo fino in fondo alla pagina. Questo è fondamentalmente un aspetto critico del sito di una sola pagina: assicurare agli utenti di arrivare alla fine della storia. E la fine della storia è in genere il punto di conversione del sito (come in questo caso).
Tam Cai
Il sito di questa persona dimostra anche la singola pagina, modello di storytelling. Quello che trovo interessante di questo particolare sito è che la storia è terminata da due potenti visuali, con tutta la carne nel mezzo. L'ampia serie di illustrazioni nella parte superiore della pagina crea un'atmosfera, dimostra la personalità dell'artista e in genere ti invita a tuffarti nel suo mondo. La pagina viene quindi completata con opzioni di contatto (punti di conversione) e una fotografia drammatica di ciò che supponiamo sia il creatore.
Sicuramente non è uno stile per tutti, ma quando un approccio tematico viene prodotto in un modo così lucido come questo i risultati possono essere fantastici. E anche se il sito potrebbe non piacere a tutti i visitatori, si rivolge alle persone giuste e aiuta il creatore a fare il tipo di connessioni che apprezzerà.
MacMillan Lynch
Questo esempio richiede un approccio diverso. La parte della storia di questo sito è breve e contenuta all'interno del grafico principale della home page. In questo caso la trama è praticamente irrilevante, tranne che crea un senso di mistero da capire. All'atterraggio sul sito mi sono ritrovato a chiedermi cosa diavolo fosse questa persona. A volte vuoi dare da mangiare ai tuoi visitatori; altre volte può funzionare davvero bene per risucchiarle con una storia o un mistero interessante. Questo ha anche il vantaggio di creare un sito piuttosto distinto e, si spera, memorabile.
Sallee Design
Nel sito di Sallee Design troviamo un approccio più tipico alla struttura del sito. Logo in alto a sinistra, navigazione principale nella parte superiore e la presentazione della pagina iniziale standard. In molti modi questo è un sito molto normale (con un bel design applicato).
Quello che ho trovato interessante è che la loro presentazione in home page non era solo una serie di immagini Flash auto-rotanti. Invece, la presentazione viene avviata dall'utente e inizia con un invito a iniziare un tour. Una volta che vi siete immersi, vieni condotto attraverso una serie di diapositive che riassumono ciò che otterresti se invece scavassi attraverso le varie pagine del sito. Ed è tutto finito con i punti chiave di accesso al resto del sito.
Penso che questo approccio sia intelligente. Per i principianti è rinfrescante vedere un elemento come il cursore della home page avere uno scopo ben pianificato. Mi piace anche che ottengano il vantaggio di una singola pagina di vendita, e del bonus SEO fornito da un numero maggiore di pagine.
Design reattivo
L'argomento di web design reattivo è, a dir poco, un argomento estremamente caldo. Quindi non dovrebbe sorprendere scoprire che questo approccio può essere trovato in nuovi portafogli che vengono prodotti ora. Senza ostacoli, questi individui hanno abbracciato la nuova tecnica. E non sorprendentemente, tutti e tre gli esempi qui sono per i siti di portfolio degli sviluppatori front-end, esattamente il tipo di posto che ci si aspetterebbe di trovare una cosa del genere.
Ryan Taylor
Il sito di Ryan segue la formula standard di una pagina per un portfolio personale. Questo approccio funziona alla grande quando si integrano tecniche reattive nel sito. Con solo una pagina per renderlo conto può essere molto più facile testare e costruire un sito come questo. Ma non pensare che sia facile. Ci vuole un grande sforzo e pianificazione per creare un sito pulito e bello che si trasforma in questo modo.
Aaron Shekey
Il prossimo è il portfolio di Aaron Shekey. Questo bellissimo sito racchiude molte tecniche provate e vere per un sito di portfolio. È semi-minimalista, ha colori attenuati per consentire il pop-up delle immagini e ha un design in gran parte basato sulla tipografia. Come questo sito funziona magnificamente ed è estremamente efficiente nel mostrare il lavoro dell'artista. Ma con il vantaggio aggiuntivo di un layout reattivo, il sito è garantito per apparire bene su una vasta gamma di dispositivi. Ciò garantisce all'utente un'esperienza positiva, senza frustrazione nello zoom e nella scansione.
Andrew Cohen
Infine nella categoria reattiva troviamo il sito personale dello sviluppatore front-end Andrew Cohen. Proprio come gli altri, ha una struttura a pagina singola con quello che definirei un progetto guidato dallo sfondo. In questo modo lo sfondo può cambiare e cambiare senza un grande bisogno di cambiamenti strutturali. Questo rende il sito un candidato perfetto per l'introduzione di tecniche reattive.
Layout creativi
A volte il modo migliore per fare impressione è distinguersi come unico e diverso. E quale modo migliore per farlo se non con una struttura di layout insolita che deride le norme e le aspettative che tutti abbiamo. In una certa misura quasi ogni esempio in questa collezione dimostra questo particolare attributo, ma ho selezionato questo piccolo sottoinsieme per dimostrarlo.
E prima di immergermi voglio sottolineare che questi siti non fanno uso di layout creativi solo per motivi di creatività. Sono ancora siti funzionali che sono estremamente chiari e semplici da usare. Tuttavia hanno le loro personalità distinte che consentono loro di distinguersi. Questo si riferisce esattamente a ciò che un sito portfolio dovrebbe fare: aiutare il suo creatore a distinguersi dalla massa.
Krichevtsova Alexandra
Ciò che amo di questo esempio per il tema dei layout creativi è che non è un layout radicalmente diverso. Sì, il sito non segue il normale logo in alto a sinistra, la navigazione attraverso l'approccio superiore. Tuttavia, il layout è solo a pochi passi da lì. Penso che questo dimostri il punto estremamente bene.
L'obiettivo non è inventare un layout per il gusto di essere creativi. Piuttosto, per essere creativo con la posa della pagina in modo da comunicare le informazioni nel miglior modo possibile. In questo caso, il flusso creato dal layout leggermente atipico funziona meravigliosamente.
David Desandro
In questo caso il layout sembra completamente inusuale. A un certo livello sembra incompleto, ma allo stesso tempo si sente completamente organizzato e facile da usare. Entrate nel portfolio e in altre pagine e sarete facilmente impressionati dalla diversità che questo sito presenta. Sicuramente ha un fascino per la creatività, ma tecnicamente orientata.
Deidre Bain
Questo sito di scorrimento di una pagina infrange anche le norme della struttura del layout. In questo esempio, quasi l'intero disegno si basa su layout e illustrazioni specifici della pagina. Tipicamente questo è un approccio che non funziona bene e porta a problemi di manutenzione. Ma nel caso di un sito portfolio personale è in realtà un ottimo modo per dimostrare alcune abilità utili. In particolare, vi è la completezza del sito che ti lascia che questo designer sia del tipo che segue le cose. Sono questi tipi di messaggi sottili che possono essere estremamente potenti per comunicare nel tuo sito portfolio.
Siddharth Arun
In primo luogo, prendere questo sito ha la sensazione di uno che segue il protocollo standard. Ma interagire con il sito un po 'e si sente totalmente unico. A volte venire con il tuo tocco creativo non significa che devi reinventare tutto. Basta cambiare abbastanza in modo che i risultati siano sorprendenti (e funzionali).
Testo grassetto
Come ho osservato le miniature dei siti raccolti per la visualizzazione qui, una cosa spicca: l'uso di testi estremamente grandi e in grassetto. I campioni elencati di seguito sono tutti dotati di un testo enorme che si distingue sul sito. La ragione principale per cui posso arrivare a questo approccio è la chiarezza.
Questo grande testo in grassetto garantisce che venga comunicato almeno un messaggio principale. In alcuni casi sembra più funzionale di altri, ma alla fine il risultato è sempre lo stesso. L'attenzione dell'utente è quasi garantita per essere diretta a questa copia di dimensioni jumbo. Osserva i campioni e prendi nota dei vari modi in cui le creatività hanno fatto funzionare questo elemento.
Garth Humphrey
Justin Burns
Amman, Giordania
Ross Angus
Alex Pierce
Taglia in alto
Come ho detto prima, alcuni dei modelli sono molto meno funzionali e significativi di altri. In questo caso mi sento quasi male mettendo i seguenti campioni in un set così frivolo. I siti descritti qui sotto sono assolutamente stupendi; per favore non prendere questa classificazione come una sorta di insulto. In effetti, due dei miei siti preferiti di questo articolo si trovano qui.
Fondamentalmente il modello è che una sorta di striscia decorativa, una linea continua o un motivo a zigzag appare nella parte superiore. Ho limitato questo set a tre siti, ma se analizzi alcuni degli altri esempi troverai lo stesso elemento al lavoro.
Perché un così piccolo dettaglio come questo è così comune? Forse con l'approccio di una singola pagina è bello indicare la parte superiore della pagina. In questo modo gli utenti ottengono una piccola indicazione visiva su dove inizia la pagina.
Mathieu White
Tocca Nerd
Danilo Giagnoli
Trama tessitura texture
Un altro dettaglio visivo estremamente comune sui siti di portfolio è la trama. Questo è particolarmente vero quando si tratta di elementi di sfondo. Parte dello stile visivo attuale incorpora trame sottili sullo sfondo.
Trovo che questo elemento faccia un ottimo lavoro nell'incorporare un po 'di un elemento organico nella pagina che aiuta a rimuoverlo dalle sue basi tecniche. Questo semplice elemento può aggiungere un tocco caldo che in qualche modo respira una tonnellata di vita in un design. Ancora una volta, scavare attraverso molti dei campioni precedentemente coperti e troverete numerosi esempi di questo elemento al lavoro. Ecco alcuni esempi che lo fanno molto bene.
Bjarke Clauson-Kaas
Aaron Lumsden
DS Higdon
Andrew Ckor
Ulteriori siti di portfolio degni di nota
Ci sono innumerevoli candidati per questo tipo di collezione. Si è tentati di includere quasi troppi campioni in questo caso. Invece mi sono concentrato su una raccolta aggiuntiva di siti che presentano una gamma piuttosto ampia di stili, strutture e approcci generali.
Una cosa che noterete è che alcuni di questi siti non sono per i designer. Ho trovato molto interessante vedere come altri settori hanno utilizzato il web per vendere un individuo. Dopo tutto, un sito portfolio ha lo scopo di fare esattamente questo. Quindi, per motivi di ispirazione e nuove idee, ne ho inclusi alcuni al di fuori della comunità del web design.
Collin Henderson
Josh Miller
Nate Croft
Torsten Meb
Joey Rabbitt
Eric Salvail
Bekka Reese
Felix Menard
Marija Zaric
Tobias Persson
Jake Dahn
Conclusione
Creare un sito per rappresentarti online non è un'impresa da poco. Speriamo che i siti qui raccolti possano ispirare e sfidare te.
Alcuni degli elementi qui presentati rappresentano meccanismi molto intenzionali per controllare l'esperienza dell'utente e vendere l'individuo. Altri mostrano più o meno tendenze del design visivo. Credo che nessuno dei due debba essere ignorato, e nessuno dei due dovrebbe controllare da solo le cose. È sfidando le norme, abbracciando schemi funzionali e valutando la tua immagine online in una nuova luce che può portare a idee rivoluzionarie che ti aiutano a distinguerti.
E riguardo all'argomento di emergere, mi sento in dovere di ricordare alla gente che l'obiettivo qui non è inventare l'interfaccia più originale. Invece, l'obiettivo è pensare in modo creativo all'interno dei limiti che abbiamo.
Di questo spero sempre che troveremo le soluzioni creative che ci aiutano a distinguerci con risultati sorprendentemente funzionali. Se guardi i campioni raccolti qui non sono solo belli, ma funzionano incredibilmente bene.
Quali sono alcuni dei migliori siti di portfolio che hai visto? Qualche altra tendenza che hai notato nei portafogli designer di recente? Fateci sapere nei commenti!