Charakterystyka nowoczesnej witryny portfolio
Ze wszystkich typów stron internetowych strona z portfolio musi pokonać niektóre z najtrudniejszych przeszkód. Porozmawiaj z prawie każdym projektantem i zgodzą się, uruchomienie własnej strony z portfolio to bolesny proces. Najczęściej proces ten obejmuje liczne wersje i często uruchamia się z czystej frustracji.
Moim zdaniem, moim zdaniem, strona portfolio może być oknem na przyszłość projektowania stron internetowych. Proponuję to, ponieważ gdy dana osoba projektuje swoją własną witrynę, są one tylko narzucone sobie narzucone ograniczenia. Nie ma klienta, który dyktowałby rzeczy, żadnego komitetu, który by zniszczył projekt, i żadnego procesu zatwierdzania, by wyciągnąć rzeczy i zniszczyć rozpęd.
Ale nie wszystkie witryny portfolio są sobie równe. Pomimo obłędnej ilości dostępnych stron z przykładowymi portfolio, zaskakująco mało jest tych, którzy czują się na tyle odrębni i interesujący, aby o nich mówić. To właśnie te witryny podnoszą poprzeczkę i pokazują, co może przydać przyszłość projektowaniu stron internetowych.
Zanurzmy się w duży zestaw oszałamiających portfeli i poszukujmy wspólnych elementów, które sprawią, że będą działać. Niektóre z tych elementów ujawniają trendy branżowe, podczas gdy inne wykazują prosty i powszechny design. Nie wszystkie mają ogromne znaczenie, ale wszystkie łączą się z fantastycznymi projektami, które będą wymagać od ciebie stworzenia naprawdę wyjątkowej witryny z portfolio.
Opowiedzieć historię
Jednym z najciekawszych aspektów nowoczesnej witryny portfolio jest staranie się stworzyć środowisko opowiadające historię. Chodzi o to, aby stworzyć przepływ treści, który w zasadzie kontroluje doświadczenie i wiadomość dla użytkownika. Ta kontrola tworzy przepływ treści w pożądanej kolejności.
Wiele witryn próbuje tego dokonać, umieszczając główną nawigację w pożądanej kolejności. Ale te strony podchodzą do poziomu wiedzy i sprawiają, że jest to nieunikniona część doświadczenia.
Jan Ploch
Korzystanie z pojedynczej strony nie jest niczym nowym, a dzięki jej definicji zmusza użytkownika do przewijania strony. Tworzy to naturalny przepływ treści, który był używany niezliczoną ilość razy. Na tej stronie znajduje się rzadko używane podejście z animowanym tłem. Podczas przewijania strony jest tak, jakby soda w tle była zasysana przez słomkę.
Ten prosty, dekoracyjny element robi coś naprawdę potężnego; zachęca cię do przejścia przez całą stronę. Zasadniczo jest to krytyczny aspekt witryny pojedynczej strony: zapewnienie użytkownikom dotarcia do końca historii. Koniec historii jest najczęściej punktem konwersji witryny (tak jak w tym przypadku).
Tam Cai
Strona tego użytkownika również demonstruje pojedynczą stronę, model opowiadania historii. To, co mnie interesuje w tej konkretnej witrynie, to historia oparta na dwóch potężnych grafikach, z całym mięsem pośrodku. Duży zestaw ilustracji u góry strony ustawia nastrój, ukazuje osobowość artysty i ogólnie zachęca do zanurzenia się w jego świecie. Strona kończy się opcjami kontaktu (punktami konwersji) i dramatyczną fotografią tego, co moglibyśmy założyć, jest twórcą.
Z pewnością nie jest to styl dla każdego, ale gdy podejście tematyczne jest produkowane w sposób tak dopracowany, wyniki mogą być niesamowite. I chociaż strona może nie spodobać się wszystkim odwiedzającym, spodoba się ona odpowiednim osobom i pomoże twórcy w dokonaniu tego rodzaju połączeń, które ceni.
MacMillan Lynch
Ten przykład wymaga nieco innego podejścia. Część fabularna tej strony jest krótka i zawiera się w głównej grafice strony głównej. W tym przypadku historia jest prawie nieistotna, z wyjątkiem tego, że tworzy poczucie tajemnicy do zrozumienia. Po wylądowaniu na stronie zacząłem się zastanawiać, o co w tym wszystkim chodzi. Czasami chcesz nakarmić swoich gości; innym razem może naprawdę dobrze pracować, aby wciągnąć je ciekawą historią lub tajemnicą. Ma to także tę zaletę, że tworzy dość odrębną i miejmy nadzieję, niezapomnianą stronę.
Projekt Sallee
W witrynie Sallee Design znajdujemy bardziej typowe podejście do struktury witryny. Logo w lewym górnym rogu, główna nawigacja u góry i standardowy pokaz slajdów na stronie głównej. Pod wieloma względami jest to bardzo normalna strona (z pięknym zastosowaniem).
Ciekawe było jednak to, że ich pokaz slajdów na stronie głównej nie był tylko automatyczną serią obrazów Flash. Zamiast tego pokaz slajdów jest uruchamiany przez użytkownika i rozpoczyna się od zaproszenia do rozpoczęcia wycieczki. Po zanurkowaniu przechodzisz serię slajdów, które podsumowują, co byś zyskał, gdybyś przeszukał różne strony witryny. A wszystko to kończy się kluczowymi punktami do dalszej części strony.
Myślę, że to podejście jest inteligentne. Na początek jest odświeżenie, gdy element taki jak suwak strony głównej ma dokładnie zaplanowany cel. Podoba mi się też, że zyskują przewagę w postaci pojedynczej strony, a premia SEO zapewniona przez większą liczbę stron.
Elastyczny projekt
Temat responsywny projekt strony jest, co najmniej, niezwykle gorącym tematem. Dlatego nie powinno dziwić, że takie podejście można znaleźć w świeżych portfelach, które są obecnie produkowane. Bez przeszkód te osoby przyjęły nową technikę. I nic dziwnego, że wszystkie trzy przykłady są tutaj dla stron z portfolio front-deweloperów, dokładnie takiego miejsca, w którym powinniśmy się spodziewać.
Ryan Taylor
Strona Ryana jest zgodna ze standardową, jednostronicową formułą do osobistego portfolio. To podejście sprawdza się doskonale, gdy integruje się techniki responsywne z witryną. Mając tylko jedną stronę do rozliczenia, znacznie łatwiej jest przetestować i zbudować taką stronę. Ale nie myśl, że to łatwe. Dużo wysiłku i planowania wymaga stworzenia czystej i pięknej witryny, która w ten sposób się zmienia.
Aaron Shekey
Następna jest portfolio Aarona Shekeya. Ta piękna, niewielka witryna zawiera wiele wypróbowanych i prawdziwych technik dla witryny z portfolio. Jest pół-minimalistyczny, ma stonowane kolory, aby obrazy mogły się zrywać, a jego konstrukcja w dużej mierze opiera się na typografii. Ta strona funkcjonuje pięknie i jest niezwykle skuteczna w popisywaniu pracy artysty. Ale dzięki dodatkowemu responsywnemu układowi witryna ma gwarancję dobrego wyglądu na szerokiej gamie urządzeń. Zapewnia to użytkownikowi pozytywne wrażenia, bez frustracji w powiększaniu i skanowaniu.
Andrew Cohen
Nareszcie w kategorii responsywnej znajdujemy osobistą stronę programisty z przodu Andrew Cohena. Podobnie jak pozostałe, ma jedną strukturę strony z tym, co nazwałbym projektem opartym na tle. W ten sposób tło może się zmieniać i zmieniać bez wielkiej potrzeby zmian strukturalnych. To sprawia, że strona jest idealnym kandydatem do wprowadzania technik reagowania.
Kreatywne układy
Czasami najlepszym sposobem zrobienia wrażenia jest wyróżnienie się jako wyjątkowe i inne. I co jest lepszym sposobem na osiągnięcie tego niż niezwykła struktura układu, która szydzi z norm i oczekiwań, które wszyscy mamy. W pewnym stopniu prawie każdy przykład z tej kolekcji demonstruje ten konkretny atrybut, ale wybrałem ten mały podzestaw, aby to pokazać.
I zanim zanurknę, chcę zaznaczyć, że te witryny nie wykorzystują kreatywnych układów tylko ze względu na kreatywność. Są to nadal funkcjonalne witryny, które są niezwykle przejrzyste i proste w użyciu. Mają jednak swoją odrębną osobowość, która pozwala im się wyróżnić. To dokładnie odnosi się do tego, co powinna zrobić witryna z portfolio: pomóż jej twórcy wyróżnić się z tłumu.
Krichevtsova Alexandra
To, co naprawdę podoba mi się w tym przykładzie na temat kreatywnych układów, to to, że nie jest to zupełnie inny układ. Tak, strona nie jest zgodna z normalnym logo w lewym górnym rogu, nawigacja w górę. Układ jest jednak tylko kilka kroków. Myślę, że to bardzo dobrze pokazuje ten punkt.
Celem nie jest wymyślenie układu, aby być kreatywnym. Ale raczej, aby stać się kreatywnym przy układaniu strony tak, aby przekazywać informacje w najlepszy możliwy sposób. W tym przypadku przepływ stworzony przez nieco nietypowy układ działa cudownie.
David Desandro
W tym przypadku układ wygląda zupełnie nietypowo. Na pewnym poziomie czuje się niekompletna, a jednocześnie czuje się całkowicie zorganizowana i łatwa w użyciu. Zajrzyj do portfolio i innych stron, a będziesz pod wrażeniem różnorodności na tej stronie. Zdecydowanie ma to odwołanie do twórczości, ale technicznie myślących.
Deidre Bain
Ta strona przewijająca jedną stronę również łamie normy dotyczące struktury układu. W tym przykładzie prawie cały projekt oparty jest na układach i ilustracjach specyficznych dla strony. Zazwyczaj jest to podejście, które nie działa dobrze i prowadzi do problemów konserwacyjnych. Ale w przypadku witryny z osobistymi portfelami jest to świetny sposób na wykazanie pewnych przydatnych umiejętności. Przede wszystkim jest dokładność na stronie, która pozostawia ci nadzieję, że ten projektant będzie taki, jaki wynika z rzeczy. Jest to rodzaj subtelnych wiadomości, które mogą być niezwykle skuteczne w komunikowaniu się na własnej stronie z portfolio.
Siddharth Arun
Przy pierwszym podejściu ta strona ma styl zgodny ze standardowym protokołem. Ale wejdź trochę w interakcję z witryną i poczuj się zupełnie wyjątkowo. Czasami wymyślanie własnego twórczego twistu nie oznacza, że musisz wszystko wymyślić na nowo. Wystarczy zmienić na tyle, aby wyniki były zaskakujące (i funkcjonalne).
Pogrubiony tekst
Jak zaobserwowałem miniaturki witryn zebranych w tym miejscu, jedna rzecz naprawdę się wyróżniała: użycie bardzo dużego i odważnego tekstu. Wszystkie wymienione poniżej próbki zawierają ogromny tekst, który wyróżnia się na stronie. Głównym powodem, dla którego mogę wymyślić takie podejście, jest jasność.
Ten duży, pogrubiony tekst zapewnia komunikację co najmniej jednej wiadomości podstawowej. W niektórych przypadkach jest bardziej funkcjonalny niż inne, ale ostatecznie wynik jest zawsze taki sam. Uwaga użytkownika jest prawie gwarantowana, że zostanie skierowana do tej wielkoformatowej kopii. Obserwuj próbki i zwróć uwagę na różne sposoby, w jakie kreacje wprowadziły ten element do działania.
Garth Humphrey
Justin Burns
Amman, Jordania
Ross Angus
Alex Pierce
Przytnij na górze
Jak wspomniałem wcześniej, niektóre wzorce są znacznie mniej funkcjonalne i znaczące niż inne. W tym przypadku prawie czuję się źle umieszczając następujące próbki w tak niepoważnym zestawie. Strony przedstawione poniżej są absolutnie wspaniałe; proszę, nie traktujcie tej klasyfikacji jako żadnej zniewagi. W rzeczywistości znajdują się tutaj dwie moje ulubione strony z tego artykułu.
Zasadniczo wzór jest taki, że jakiś rodzaj paska dekoracyjnego, linii ciągłej lub wzoru zygzakowego pojawia się u góry. Ograniczyłem ten zestaw do trzech stron, ale jeśli przejrzysz kilka innych przykładów, znajdziesz ten sam element w pracy.
Dlaczego taki drobny szczegół jest tak powszechny? Być może z podejściem opartym na jednej stronie dobrze jest wskazać górną część strony. W ten sposób użytkownicy otrzymują małą wizualną wskazówkę, gdzie zaczyna się strona.
Mathieu White
Dotknij frajerów
Danilo Giagnoli
Tekstura tekstury
Kolejnym wizualnym szczegółem, który jest niezwykle powszechny na stronach portfolio, jest faktura. Jest to szczególnie prawdziwe, jeśli chodzi o elementy tła. Część obecnego stylu wizualnego zawiera subtelne tekstury w tle.
Uważam, że ten element świetnie nadaje się do umieszczenia na stronie elementu ekologicznego, który pomaga usunąć go z jego technicznych podstaw. Ten prosty element może dodać ciepłego dotyku, który w jakiś sposób tchnie życie w projekt. Ponownie przeszukuj wiele wcześniej pokrytych próbek, a znajdziesz wiele przykładów tego elementu w pracy. Oto kilka przykładów, które robią to wyjątkowo dobrze.
Bjarke Clauson-Kaas
Aaron Lumsden
DS Higdon
Andrew Ckor
Dodatkowe warte uwagi witryny z portfolio
Istnieje niezliczona liczba kandydatów do tego typu kolekcji. Kuszące jest umieszczanie w tym przypadku prawie zbyt wielu próbek. Zamiast tego skupiłem się na dodatkowym zbiorze witryn, które prezentują dość szeroki zakres stylów, struktur i ogólnych podejść.
Należy zauważyć, że niektóre z tych witryn nie są przeznaczone dla projektantów. Zauważyłem, że bardzo interesujące jest zobaczenie, w jaki sposób inne branże używały sieci do sprzedaży osoby. W końcu strona portfela ma właśnie to zrobić. Tak więc, ze względu na inspirację i świeże pomysły, dodałem kilka osób spoza społeczności zajmującej się projektowaniem stron internetowych.
Collin Henderson
Josh Miller
Nate Croft
Torsten Meb
Joey Rabbitt
Eric Salvail
Bekka Reese
Felix Menard
Marija Zaric
Tobias Persson
Jake Dahn
Wniosek
Stworzenie witryny, która będzie reprezentować użytkownika online, nie jest małym przedsięwzięciem. Mam nadzieję, że zebrane tutaj strony zainspirują i rzuciją wyzwanie tobie.
Niektóre z przedstawionych tu elementów przedstawiają bardzo celowe mechanizmy kontrolowania doświadczenia użytkownika i sprzedaży osoby. Inni wykazują mniej lub bardziej wizualne trendy w projektowaniu. Uważam, że nikt nie powinien być lekceważony, ani też nie powinien samodzielnie kontrolować rzeczy. Jest to rzucenie wyzwania normom, uwzględnienie wzorców funkcjonalnych i ocena wizerunku online w nowym świetle, które może prowadzić do rewolucyjnych pomysłów, które pomogą Ci się wyróżnić.
A jeśli chodzi o wyróżnianie się, czuję się zmuszony przypomnieć, że celem nie jest wymyślenie najbardziej oryginalnego interfejsu. Zamiast tego celem jest twórcze myślenie o ograniczeniach, które mamy.
Poza tym zawsze mam nadzieję, że znajdziemy kreatywne rozwiązania, które pomogą nam wyróżnić się z niesamowicie funkcjonalnymi wynikami. Jeśli spojrzeć na próbki zebrane tutaj, są one nie tylko piękne, ale funkcjonują zadziwiająco dobrze.
Jakie są najlepsze witryny z portfolio, które widziałeś? Jakieś inne trendy, które ostatnio zauważyłeś w portfelach projektantów? Daj nam znać w komentarzach!