25 Przykłady Web 2.0 i Tradycyjne zasady projektowania

W szerokim zakresie świata projektowania pojęcie "Web 2.0" jest stosunkowo nowe.

Wraz z nim pojawia się własny zestaw standardów, niektóre silne, inne nie tak silne, ponieważ Web 2.0 sama w sobie jest bardzo zmienną, ciągle zmieniającą się definicją standardów projektowych .

Niezliczone przykłady witryn Web 2.0 złamały zasady tego, co kiedyś uważano za silny projekt.

Z drugiej strony, w wielu przypadkach Web 2.0 wzmocnił wspólne mylące wzorce; kładzie nacisk na użyteczność, interfejs i czytelność .

W najlepszym przypadku Web 2.0 jest równorzędny z tradycyjnymi zasadami projektowania praktykowanymi od stuleci, choć bez wątpienia jest odbiciem naszego społeczeństwa w obecnym stanie zgiełku.

Oto zbiór 25 witryn pokazujących, jak Web 2.0 i tradycyjne praktyki projektowe mogą łączyć się w naprawdę wspaniałe strony internetowe.

1. Projektowanie matrycy pikseli

Josh Pyles jest miłym facetem, a także fantastycznym, zdyscyplinowanym projektantem. Jego najnowsza iteracja Pixel Matrix jest ogłuszaczem i szczególnie dobrze wykorzystuje kolor i mocny system siatki. Przejrzyj jego portfolio, a zobaczysz, że wykonuje tę praktykę w swojej pracy z klientem.

Jeśli przejrzysz stronę "O stronie" (notując dobry system zakładki w grze), zobaczysz, że Josh zamieścił ładne zdjęcie swojego obszaru roboczego.

Poniżej tego ujęcia znajduje się świetna równowaga czcionek w stylu Web 2.0, które ustanawiają niezwykle silną hierarchię informacji. Utrzymuje swój własny mały i schowany w pasku bocznym i wyrównuje większy tekst obszaru zawartości z mniejszym, wyrafinowanym typem na pasku bocznym.

Tradycyjne aspekty:

Świetny system siatki.
Wspaniała teoria kolorów
Silna hierarchia informacji

Ulepszenia Web 2.0:

Piękne gradienty.
Subtelne szczegóły.
Duże, czytelne czcionki.
Wiele sposobów na pozostanie w kontakcie.
Nawet formularz kontaktowy ma przyjemną implementację zaokrąglonych narożników!

2. MuttInk

Ostatnio tekstura wydaje się być najlepszą rzeczą od czasu zaokrąglonych narożników, i choć strona MuttInk może nie zostać sklasyfikowana jako typowa Web 2.0, wystarczy jeden rzut oka, aby wiedzieć, że Jeremy Holmes (człowiek stojący za dziełem) jest niesamowitym projektantem i grafikiem .

Dbałość o szczegóły, fakturę i silną tożsamość umieszcza to jako osobisty faworyt.

Mimo, że dni przesadnie stonowanych kolorów są nieco za nami (co jest dobre, moim zdaniem), wciąż jestem fanem subtelnych, ziemistych tonów, które są dopełnione jasnymi akcentami, a MuttInk świetnie to ujął .

Turkusowy szczyt beżu naprawdę wyskakuje i utrzymuje "stół kreślarski", który przenika teren. I chociaż typ jest niewielki i nieco trudny do odczytania w miejscach, nadal wygląda świetnie na stronie.

Tradycyjne aspekty:

Niezwykle duża dbałość o szczegóły.
Ładny typ (choć może za mały).
Świetna identyfikacja marki.
Świetne wykorzystanie przestrzeni, szczególnie na stronach portfolio.

Ulepszenia Web 2.0:

Świetne wykorzystanie tekstury.
Duże, profesjonalne obrazy prezentujące pracę.
Szybki dostęp do powiązań społecznościowych.

3. 45 Royale

Portfolio w 45 Royale nie tylko prezentuje niesamowitą gamę prac, ale pokazuje również, że zespół stojący za stroną rozumie dobre wykorzystanie wielu standardów projektowych. Jest to fantastyczna mieszanka niepowodzeń Web 2.0, ale ma solidne podstawy w tradycyjnych standardach projektowych (i popatrz tylko na te kolory!).

W szczególności, 45 Royale ma jeden z najlepszych systemów gridowych, jakie widziałem ostatnio, a obrazy, które wybrały, aby zaprezentować pracę, naprawdę dobrze pasują do kolorowego nagłówka powyżej.

Widzenie teorii koloru i organizacji w tak wielkiej harmonii jest zawsze przyjemnością, a oni uzupełnili ją o wysoce wyrafinowaną mieszankę czcionek, zarówno dużych, jak i małych.

Jasne kolory otaczające wtórną paletę szarości, bieli i czerni? Niesamowite.

Tradycyjne aspekty:

Jeden z lepszych przykładów systemu sieciowego.
Mnóstwo białych i oddychających pomieszczeń.
Doskonały wybór kolorów.
Dobry przepływ informacji.

Ulepszenia Web 2.0:

Kolory po prostu śpiewają ... tak bardzo, że umieściłem je w obu kategoriach.
Typ wielkości Jumbo jest bardzo czytelny, choć gustowny.
Świetne wykorzystanie ilustracji i grafiki.
Mnogość projektów jest dobrze zorganizowana i ładnie wyświetlana.

4. Powiększenie szczyptą

Jestem frajerem wspaniałej ilustracji, zwłaszcza gdy prezentuje się na cudownym przykładzie białej przestrzeni. Uwielbiam tę stronę tak bardzo, że po prostu klikanie w portfel jest świetnym pomysłem. Świetne spacje, świetny system gridowy i wspaniałe wykorzystanie JavaScriptu; te rzeczy mają sposób mówienia do mnie (tak, jestem przed komputerem dość dużo).

Ważną rzeczą, o której należy pamiętać, gdy mamy do czynienia z wieloma dostępnymi obecnie technologiami, szczególnie wymyślnymi zanikami i oszustwami, które są możliwe dzięki JavaScriptowi, jest zwężenie i panowanie nad nimi.

Pamiętasz późne lata dziewięćdziesiąte, kiedy Flash był wściekłością? Pamiętasz, jak źle Flasha dostaliśmy później? Dobre standardy Web 2.0 dotyczą zarówno dyscypliny, jak i designu, a Pinch Zoom ma to pod kontrolą.

Spryskują swoją witrynę fantazyjną dobrocią, ale zachowują ją szczupłą i zabawną, z praktycznie zerowym czasem oczekiwania na obrazy.

Tradycyjne aspekty:

Kolejny świetny system siatki (widzisz tutaj wzór?).
Czarny na białym nigdy nie wydaje się starzeć.
Niezła równowaga czcionek i nagłówków. (Mała czcionka, choć czytelna, może być wielkością punktu lub dwiema większymi).

Ulepszenia Web 2.0:

Suwak portfolio JavaScript jest zabawny i skuteczny.
Interfejs jest minimalistyczny i bezpośredni.
Różnorodne użycie ilustracji to świetny akcent.
Wykorzystuje obecną technologię sieci bez uszczerbku.
Unikalne rozwiązania dotyczące układu strony (sprawdź kliknięcie na zakładkę informacji, gdzie znajduje się mega dropdown) Tam ukrywa się praktycznie cała strona!).

5. Cameron Moll

Zawsze byłem fanem twórczości Camerona i jak można powiedzieć, ma tendencję do pozostawania po tradycyjnej stronie pola projektowania. Choć jego strona na blogu ma tendencję do wchodzenia w tradycyjną stronę wyrafinowanego designu i małych czcionek, nie da się zaprzeczyć elegancji i pięknu jego strony z portfolio, która jest fantastyczną równowagą pomiędzy nowym i tradycyjnym.

Kolory są żywe, a wybory czcionek łączą się z ogólną wrażliwością, ale znowu typ może stać się dość mały w miejscach, co jest Web 2.0 nie-nie. Ale kim jestem, żeby wybrać? Cameron odniósł wielki sukces i jest człowiekiem stojącym za Authenticjobs.com, świetnym źródłem informacji dla projektantów (i takim, który pomógł mi opłacić moje rachunki).

Tradycyjne aspekty:

Dobrze skonstruowane treści.
Subtelne odmiany kolorów są miłym akcentem.
Typ wygląda elegancko, choć zazwyczaj jeździ po małej stronie spektrum. Mimo to jest czytelny i ładnie wygląda.

Ulepszenia Web 2.0:

Bardzo ładne wykorzystanie tekstury.
Portfolio zawiera ładne obrazy z pracy, które są bardzo proste i łatwe w nawigacji.

6. Temat "Płynnego" Tumblra Metalaba

Jedyny motyw Tumblra do stworzenia listy jest zatytułowany "Fluid" według projektu Metalab. Zrobiło to na liście z prostego powodu: jest to piekielnie piękny przykład Web 2.0 w najlepszym wydaniu. Proste, czyste i lśniące kolorem.

Można to uznać za nieco jednostronne w tym porównaniu (jest to chwyt Web 2.0). To dlatego, że Metalab znany jest z wyznaczania standardów na arenie Web 2.0, a ta strona jest tego świadectwem. Metalab Design zachowuje jednak fundamentalne zasady, a struktura jest prosta i dobrze zorganizowana.

Przejrzystość i nakładające się grafiki to jeden z nowszych trendów w Web 2.0. Dają stronie ogromną głębię i nadają nowatorski, niemal futurystyczny wygląd. "Fluid" firmy Metalab objął tę koncepcję, a jeszcze lepiej dostarczył ją masom jako motyw do pobrania.

Tradycyjne aspekty:

Prosta, skuteczna struktura.
Występuje w masach motywów Tumblra.
Współczesny (choć prosty) schemat kolorów.

Ulepszenia Web 2.0:

Duża, żywa fotografia.
Wzmacnia ante dla nowatorskich rozwiązań Web 2.0
Bardzo czytelne czcionki i nagłówki.
Stosowanie zaokrąglonych narożników i gradientów jest ekstremalnie trudne, ale prezentowane są w zabawnym, nowoczesnym rozwiązaniu Web 2.0.
Ikony to świetny, minimalistyczny sposób nawigacji po opcjach każdego postu.
Nie zapominajmy o przezroczystym tle!

7. Viget

O chłopie. Ta strona. Dostaje mnie za każdym razem. Jestem pewien, że jestem miękki dla tekstury, ale ten projektant uchwycił również subtelność dobrej teorii koloru i hierarchii.

Mam na myśli tylko sprawdzenie tych portretów w pobliżu dna! Przyciągają wzrok, ale nie konkurują z tym, co może być bardzo skomplikowanym projektem. Nie zapominajmy o doskonałych fontach i akwareli. Wisienką na torcie jest to, że choć strona jest ciężka, ładuje się błyskawicznie!

Kolejnym fajnym aspektem tej witryny jest to, że projektanci chcą dzielić się dużą ilością informacji ze swoją społecznością i to nie informacje sprzedają je jako projektantów, ale informacje, które uważają za typowe dla użytkowników.

Pozwalają ci kopać głębiej, nie zasypując ich gardłem, co jest zawsze mile widzianą praktyką.

Tradycyjne aspekty:

Dobrze skonstruowane treści.
Piękny kolor i rodzaj.
Chociaż czcionki są niewielkie, główna treść jest nadal łatwa do odczytania.
Świetna grafika idealnie wtapia się w projekt (fajne portrety).

Ulepszenia Web 2.0:

Akwarela jest niezwykle współczesna i choć ma ciężki obraz, została zaprojektowana tak, aby ładować nędzne i średnie.
Treść paska bocznego jest dobrze zorganizowana i oparta na treści.
Unikalne rozwiązanie w polu "Dymek" na pasku bocznym.
Wiele wspólnych, opartych na treści informacji.

8. FeelWire

Kolejnym niesamowitym przykładem wielkich białych znaków jest Feelwire. Czarny typ na białym tle, z wielkimi odcieniami szarości, nigdy nie wydaje się starzeć. Dodaj kilka kolorowych ikon i posiadasz prostą, ale skuteczną stronę. Tu chodzi o prostotę (hek, mają tylko jedną stronę!).

Ikony w stylu Web 2.0 służą jako centralny element tej strony i znacznie ułatwiają trzymanie witryny razem. Zapobiegają one również przekroczeniu strony z tekstem i dają użytkownikowi coś ciekawego.

Po przewinięciu tych ikon byłem naprawdę zadowolony z tego, co znalazłem: bardzo prosty stan wskaźnika, który dostarczył mi informacje, których szukałem, robiąc to przy użyciu popularnego "Speech Bubble" Web 2.0. Świetny akcent.

Ostatnia rzecz: Chociaż podoba mi się czerwony link, który również wyskakuje ze strony i dobrze współdziała z ikonami, myślę, że powinny one uczynić link kontaktowy bardziej zauważalnym. W tej chwili jest trochę za bardzo wciągnięty w treść i naprawdę musiałem szukać sposobu na nawiązanie kontaktu z tymi utalentowanymi programistami. Tylko mówię'.

Tradycyjne aspekty:

Krótkie, słodkie i na temat: jedna strona strony.
Biała przestrzeń!
Subtelne, gustowne czcionki.
Ładny, podstawowy układ.

Ulepszenia Web 2.0:

Błyszczące ikony wyskakują z kartki w dobry sposób.
Naprawdę fajne najazdy na ikonach sprawiają, że strona jest niezagospodarowana, a jednocześnie dostarcza potrzebnych informacji w zabawny sposób.
Ładne awatary dodają elementu ludzkiego.

9. Agami Creative

Okay, może to tylko osobista sprawa z tymi wysoce teksturowanymi witrynami, ale to, co robi Agami Creative, robi to bardzo dobrze. Jest to kolejny współczesny przykład tego, jak witryny o wysokiej rozdzielczości mogą stać się całkowicie akceptowalnym rozwiązaniem w dzień szybkich połączeń.

Najważniejszym elementem tej strony jest zdecydowanie nagłówek akwarelowy, który stanowi idealne tło dla przemyślanego projektu logo. Zawiera także nawigację, kładąc akcent na jej lokalizację, bez obrażania użytkownika (ponieważ większość ludzi wie, gdzie obecnie można znaleźć nawigację).

Klikając na stronę portfolio, zauważysz układ z idealną ilością przestrzeni oddechowej i mocnym układem siatki.

Proste obrazy przyczyniają się do pracy i przyciągają wzrok do poszczególnych projektów, takich jak przeglądanie dziurki od klucza do końcowego efektu. Wszystko to jest opakowane w wyrafinowaną czcionkę serif dla nagłówków i wysoce czytelną czcionkę bezszeryfową dla tekstu głównego.

Tradycyjne aspekty:

Bardziej piękne wykorzystanie teorii kolorów.
Wspaniała grafika.
Interesujące połączenie typu / czcionek.
Artystyczne, ręcznie rysowane logo jest wyczuwalne w całej witrynie.

Ulepszenia Web 2.0:

Przewymiarowana nawigacja ułatwia poruszanie się po witrynie.
Sprawiają, że naprawdę łatwo jest się z nimi skontaktować.
Używanie awatarów jest dobrym pomysłem (choć szczerze sądzę, że mogliby lepiej z nimi zrobić.) Nie wiesz, jak wygląda anime w tej witrynie, poza wpływem Azji?).
Uwielbiam fakturę!

10. Adit Shukla

Inna strona z doskonałym podejściem do ilustracji, Designer Adit Shukla również wie, jak stworzyć świetną kolorystykę, a nawet grać z dobrym rozwiązaniem na pasku bocznym.

Z jakiegoś dziwnego powodu wiele pasków bocznych jest zaniedbanych i przeoczonych, tak jakby projektanci mieli pozwolenie na zignorowanie zasad dobrego projektowania podczas zrzucania paska bocznego strony. Nie w tej witrynie.

Choć zawartość jest minimalna (nawet odrobinę rzadka), nie można nie wspomnieć o zaangażowanej kreatywności, zwłaszcza w ilustracyjnym nagłówku, który dodaje potrzebną ilość głębi. Zakładki nawigacyjne powyżej są również miłym akcentem.

Tradycyjne aspekty:

Żywe kolory.
Kreatywne rozwiązania wspólnych elementów, takich jak pasek boczny i nagłówek.
Ilustracja dodaje dużo głębi.

Ulepszenia Web 2.0:

Prosty układ z dobrze rozwiniętą ilustracją nagłówka, w której znajduje się również nawigacja.
Duży typ jest skuteczny.
Wiele sposobów poruszania się po stronie (choć szczerze mówiąc, nie jestem przekonany, że to jest dobra rzecz).
Przezroczyste zakładki są miłym akcentem.

12. Scoop Cream

Pierwszą rzeczą, którą zauważysz w Cream Scoop, jest odważny wybór kolorów używanych na stronie. Nie boją się podnieść kolorów w stosunku do normy, a rezultat jest równie odświeżający, jak i inny.

Choć kolory są odważne, istnieją również subtelne mieszanki silnego typu i gradienty, które są usiane w całym miejscu. Zwróć uwagę, jak gradient tła rozjaśnia się u góry, podobnie jak krawędź reflektora, aby podświetlić inaczej minimalną nawigację. Typ jest dobrze zorganizowany i zrównoważony, z wyraźnym wyczuciem Web 2.0.

Tradycyjne aspekty:

Odważny dobór kolorów, ale wybór działa zaskakująco efektywnie.
Minimalistyczna nawigacja, która wykona zadanie.
Świetne wykorzystanie zabawy ilustracji.
Układ jest ustrukturyzowany, ale zabawny.

Ulepszenia Web 2.0:

Fantastyczne wykorzystanie gradientu w tle.
Jasny niebieski naprawdę przyciąga twoją uwagę i kieruje ją do ważnych rzeczy.
Fajne użycie awatarów na stronie (ile lat mają ci faceci?).
Świetne czcionki używane w całym tekście.

13. Carbonica

Carbonica rezygnuje z gradientów i lśniącej dobroci Web 2.0 i wygląda jak "scrapbook" przypominający notatniku. Świetne wykorzystanie tekstury i animacji, ale także naprawdę zabawne podejście do ręcznie rysowane.

Pamiętaj, aby przewinąć nieco i sprawdzić ikony, które idealnie pasują do motywu!

Tradycyjne aspekty:

Podstawowa struktura jest w grze.
Ręcznie napisany napis pasuje do tematyki witryny.
Animacja jest miłym akcentem (ale przykro mi, użycie Flasha utrzymuje ten punkt z kategorii Web 2.0).

Ulepszenia Web 2.0:

Tekstura jest świetna.
Cienie rzucane dodają realistyczną głębię.
Ładne ikony, zdjęcia i ilustracje.

14. DSGN + DVLP

Ponownie ogólny czarno-biały schemat kolorów działa na tę stronę, i podkreślają ten kierunek z czystymi ikonami wyciągniętymi wprost z torebki Web 2.0.

Strona główna sama w sobie jest rodzajem strony startowej i ma dobrą mieszankę ikon, silny układ, a nawet odrobinę fotografii. Wszystkie te elementy łączą się w wyrafinowany sposób i emitują sporo energii.

Zauważ, że strony dodatkowe używają oddzielnego, 3-kolumnowego szablonu do wyświetlenia informacji. To bardzo minimalistyczny design, ale nie jest to złe.

Tradycyjne aspekty:

Czarny, biały i szary zapewniają wyraźne wyczucie.
Dobra równowaga typu na stronie głównej.
3-kolumnowy szablon strony dodatkowej umożliwia spójny przepływ informacji po opuszczeniu strony głównej.

Ulepszenia Web 2.0:

Świadomość mediów społecznościowych jest zdecydowanie w grze.
Błyszczące ikony rozrzucone w całym dodają potrzebny kolor.
Dobra mieszanka fotografii i ikon.
Ikony Jumbo są widoczne na stronach dodatkowych.

15. Marchand de Trucs

Więc może nie umiem mówić w tym języku, ale to nie znaczy, że strona wciąż mi nie mówi ... Dobra, ta linia była kiepska, ale wciąż ta strona jest całkiem słodka. Zawiera wspaniałe dzieła sztuki, a za tym wszystkim wspaniałą podstawę i uporządkowane treści. Nie jest tak źle, bo wydaje mi się, że jest to magiczny sklep internetowy!

Tradycyjne aspekty:

Intensywna dbałość o szczegóły.
Teoria kolorów jest w grze i jest to bardzo wciągająca paleta.
Dobre wykorzystanie czcionek zgodnych z ogólnym tematem witryny.

Ulepszenia Web 2.0:

Niezwykle przyjemne wykorzystanie ilustracji jako nagłówka
Stosunkowo duże ikony.

16. Paiko

Paiko, choć proste, jest jedną z moich ulubionych stron na liście. Jest to mieszanka tradycyjnych zszywek i ulepszeń Web 2.0: dobry rodzaj wszystkich rozmiarów (w tym bardzo mega-nagłówki Web 2.0), świetne spacje i oczywiście zawsze ważna siatka, która utrzymuje wszystko razem.

Wybór dodawania tekstury w tle naprawdę ustawia witrynę osobno i dodaje kolejną warstwę do już silnego projektu; jest traktowany z ostrożnością i nie jest nadmiernie wykorzystywany, jak to jest w niektórych witrynach. Ta faktura, w połączeniu z bardziej wyrafinowanym wyglądem strony, ma duży wpływ na wzmocnienie tożsamości Paiko.

Przejrzyj stronę portfolio, aby zobaczyć przykład świetnych odstępów i struktury siatki, nie wspominając o zabawnych przykładach dobrze przyciętych obrazów.

Tradycyjne aspekty:

Prosta, dwukolumnowa struktura kratowa z przestrzenią rynnową, która nadaje mu przyjemne wrażenie. Ta struktura jest przenoszona na całej stronie, co zapewnia jej bardzo stały przepływ.
Crafty feel dodaje miłego akcentu, nie będąc apodyktyczny.
Różnice i kolory czcionek są bardzo wyrafinowane.

Ulepszenia Web 2.0:

Jumbo-tekst!
Nagłówek jest olbrzymi i czytelny, a ładnie gra przeciwko mniejszym typom poniżej.
Świetne zdjęcia i układ na stronie portfolio.
Konserwatywne wykorzystanie tekstury zwiększa ogólną tożsamość.

17. Matt Dempsey

Na drugiej skrajności spektrum tekstur mamy stronę autorstwa Matta Dempseya. Teraz zdecydowanie istnieje coś, co stanowi zbyt dużą ilość tekstury, a niektóre z nich mogą mieć ważny punkt, jeśli twierdzą, że ta strona sięga daleko.

Jednak nadal mi się to podoba, a szczegóły podbiły mnie, gdy zacząłem przeglądać informacje. Matt nie boi się złamać kilku zasad, które zawsze mnie podsłuchiwały (jak trzymanie informacji na górze strony, pomysł, który, jak sądzę, został wymyślony podczas dyskusji przy okrągłym stole nad przemądrzałym marketingowcem.) Mówię to, ponieważ kiedyś byłem jednym tych marketingowców.).

Kiedy się to sprowadza, Matt Dempsey prezentuje swoją pracę i swoją stronę w odważny i "na swój sposób" sposób. I łamanie kilku zasad jest tym, czym jest projektant, niezależnie od tego, czy reguły są stare, czy nowe.

Tradycyjne aspekty:

Wierzcie lub nie, istnieje prosty system siatki leżący u podstaw tekstury.
Wyraźny i niepowtarzalny
Nie boi się złamać kilku zasad

Ulepszenia Web 2.0:

Matt używa oczywiście czcionki Web 2.0 do swoich czcionek i logo
Dobre wykorzystanie technologii na stronach wewnętrznych (suwak JavaScript jest fajnym akcentem).
Każda ważna informacja jest ogromna i łatwa do odczytania.
Portfolio prezentuje pracę w zabawny, zaawansowany technologicznie sposób.

18. Digital Mash

Dzięki Digital Mash możesz zauważyć, że wiele myśli znalazło się w elementach, które chciały zamieścić na stronie, lub jeszcze lepiej, elementach, które zdecydowały się pomijać.

Możliwość przycinania tłuszczu jest ważną praktyką dla każdego projektanta, a Digital Mash określa podstawy i tylko podstawy. Otwórz stronę, a dowiesz się w ciągu kilku sekund, o co chodzi autorowi strony.

Gładki gradient tła świetnie przedstawia prezentację treści w wyrafinowany sposób. Począwszy od czystego tekstu, aż po efektowną grafikę ilustracji, strona jest prosta.

Najlepiej jest, gdy zagłębisz się w stronę. Wejdź na stronę pracy, a znajdziesz portfolio przedstawione w niemal staromodny sposób; poszczególne kawałki wyglądają tak, jakby były gotowe do wydrukowania i oprawione w skórzane etui.

Jednak elegancka prezentacja, cienie i drobne szczegóły (takie jak lekko wygięte rogi każdego elementu) nadają mu współczesny charakter. Łącząc nowe i stare. Muszę to pokochać.

Tradycyjne aspekty:

Przycięte niepotrzebne elementy.
Żywe kolory na stronie głównej i w nagłówku stron dodatkowych dodają żywe akcenty do szarego tła.
Hierarchia informacji jest silna, podobnie jak ogólny przepływ witryny.

Ulepszenia Web 2.0:

Niesamowita prezentacja obrazów portfolio; cienie, obrócone krawędzie i drobne szczegóły naprawdę podnoszą tę stronę do wyższego standardu.
Niezły gradient w tle naprawdę dobrze przedstawia informacje.
Duże i ponadwymiarowe obrazy są przyjazne dla oczu.
Bardzo fajne rozwiązanie nawigacyjne.

19. Kyan Media

Kyan Media to kolejna witryna, która mocno opiera się na stronie Web 2.0 spektrum. Projekt chmury i żywa niebieska paleta kolorów są wprost z książki, ale jest to wyjątkowo silny przykład standardu.

Witryna odtwarza ją prosto, a dużymi literami dokładnie opisuje, co robią, a następnie przykłady pracy. Jest to prosta strategia projektowania znaleziona w niezliczonych witrynach i nie bez powodu. Jest szybki i nie zagraża krótkiemu skupieniu uwagi.

I, podobnie jak wszystkie dobre przykłady, obejmuje technologię, jak również tradycyjne zasady projektowania. Poświęć trochę czasu i zatrzymaj się nad przykładami pracy. Jest to zabawny i informacyjny sposób prezentowania polecanych elementów portfolio i pozwala nam, użytkownikowi, kopać głębiej lub uzyskać podstawowe informacje za jednym rzutem oka.

Tradycyjne aspekty:

Wszystko ma niezwykle solidną atmosferę.
Ogólny układ każdej strony jest silny
Hierarchia informacyjna jest świetna.
Czcionki, nagłówki i kolory czcionek są spójne w całym tekście.

Ulepszenia Web 2.0:

Jasna niebieska paleta kolorów.
Zabawne wykorzystanie ilustracji (która nie lubi chmur?).
Wytworna fotografia.
Dobra implementacja technologii.
Subtelne cienie dodają głębi.
Bardzo czytelne czcionki i przewymiarowane nagłówki.

20. Rockatee

Cóż, w nagłówku jest napisane "Funkcjonalny projekt", więc ma lepszą pracę, prawda? Na szczęście ta strona ma. To kolejny przykład tego, jak tekstury wkraczają na rynek projektowania stron internetowych i potwierdzają, że jesteśmy w erze szybkiej surfowania w Internecie.

Coś, co możesz zauważyć, to to, że Rockatee ma kilka projektów wyświetlanych w sekcji portfolio, więc usprawnione rozwiązanie było zdecydowanie w porządku. Zrobili to dzięki serii migawek, które pokazują głębię ich bogatego portfolio. Zrób sobie przysługę i sprawdź to.

Kolejną cechą charakterystyczną jest dobra nawigacja. Jest dobrze rozmieszczony i sprawia, że witryna jest bardzo szybka. Pomagają Ci nawet na stronie głównej z ładnym dużym przyciskiem, który prowadzi do portfolio.

Tradycyjne aspekty:

Wszystko ma niezwykle solidną atmosferę.
Ogólny układ każdej strony jest silny.
Teoria koloru jest dobrze zbadana i wdrożona.
Silna dbałość o szczegóły.

Ulepszenia Web 2.0:

Fantastyczna nawigacja.
Duże przyciski prowadzą do ważnych bitów.
Fajne portfolio "migawek" z doskonałymi plonami poszczególnych prac.
Strona prezentuje projektantom wiele projektów pobocznych, ale nie pozwala im stanąć na drodze do głównych elementów.
Świetny pomysł z osią czasu na stronie "Informacje".

21. Rzeczy, które są brązowe

Innym moim osobistym faworytem jest Things That Are Brown. Wytwarzają one niezwykle dopracowaną stronę, która jest równa (lub lepsza niż) strona stworzona przez duże agencje, a jednocześnie dają wgląd w ludzi za kulisami.

Strona o stronie zawiera świetne zdjęcia, które choć są wystarczająco profesjonalne, mają również bardzo domowy wygląd. Możesz powiedzieć, że zespół wyruszył na wycieczkę, zbadał przyzwoite miejsce i zrobił kilka migawek z własnymi aparatami cyfrowymi.

Profesjonalny, ale dostępny i przyjazny zespół to dokładnie ten rodzaj zespołu, z którym chcę pracować. Ci ludzie są prawdziwi.

Jest to jedna z tych rzadkich witryn, które bezproblemowo łączą silne zasady projektowania z nowoczesnymi usprawnieniami. Ich slogan "Humbly Awesome" jest martwy.

Tradycyjne aspekty:

Ładny kolor ze świetnymi akcentami.
Dobre wykorzystanie grafiki, która dobrze się integruje.
Solidne i spójne w całym tekście.

Ulepszenia Web 2.0:

Nawigacja jest czysta i łatwa do odczytania.
Ładne guziki, które nie przesadzają z połyskiem.
Fotografia jest osobista i dodaje ludzki charakter stronie.
Portfolio jest przejrzyste i łatwe w nawigacji, z doskonałą prezentacją pracy.
Nagłówki są duże, a jednocześnie wyrafinowane.

22. Andrew Bradshaw

Jest to prawdopodobnie jedna z najbardziej wyrafinowanych witryn na liście. Andrew ma świetny sposób łączenia siatki tekstur, typów, przycisków i fotografii w złożony pakiet. On także ma na uwadze hierarchię, akcentując ważne aspekty i minimalizując sekcje, które mogą nie być interesujące dla wszystkich użytkowników.

Nawigacja jest najjaśniejsza, a po najechaniu kursorem na karty pojawiają się różne kolory; bardzo elegancki dotyk.

Na uwagę zasługuje również teksturowany nagłówek i mocny wybór czcionki w jego logo. I znowu, Andrew łączy w sobie subtelność i akcenty, aby stworzyć piękną i wszechstronną witrynę.

Tradycyjne aspekty:

Całkowity urok czystego wyrafinowania.
Dobre wykorzystanie elementów akcentujących, zarówno w kolorze, jak i typie.
Jak zwykle silny system siatki utrzymuje go razem.
Hierarchia jest dobrze wdrażana.

Ulepszenia Web 2.0:

Inne podejście do przycisków.
Doskonałe wykorzystanie fotografii i prezentacji obrazu.
Niesamowite szczegóły w nawigacji.

23. James Lai

Ostatnio mam coś na potrzeby stron z jedną stroną, a jak się pewnie domyślasz, jestem też frajerem tekstur. Dołącz do Jamesa Lai, projektanta, który wie, jak zaprezentować się poprzez fantazyjne użycie typu, tekstury i animacji.

Najbardziej go pochwalam za to, że potrafi przechowywać swoją stronę na jednej stronie i wybaczyć nam stronę "Wszystko o mnie", którą można znaleźć na praktycznie każdej stronie. Chociaż przykładam dużą wagę do elementu ludzkiego, czasami praca mówi sama za siebie i nie mogę winić faceta za wiarę we własny zestaw umiejętności.

Tradycyjne aspekty:

Proste, jednostronicowe rozwiązanie.
Animacja zwiększa zainteresowanie prezentacją (choć nieco spowalniała witrynę po mojej stronie).
Dobra dbałość o szczegóły.

Ulepszenia Web 2.0:

Ogromny typ na stronie głównej określa dokładny cel witryny.
Dane kontaktowe są łatwe do znalezienia.
Fajne miniatury pomagają użytkownikom poruszać się po portfelu.
Interesujące wykorzystanie tekstury.

24. Subvert

Subvert został uwzględniony nie tylko ze względu na wyraźnie funkcjonalny układ, ale także z powodu zanikającego pokazu slajdów na stronie głównej. Prezentacja jest fajna, ale ma także charakter informacyjny i jest cenna dla potencjalnych klientów.

Teksturę tła uzupełniają przezroczyste detale, w tym świetny system nawigacji z przezroczystymi zakładkami! Status nawigacji tej nawigacji jest subtelny i zachowuje przezroczystość.

Mam tendencję do nawigacji bezpośrednio na stronach roboczych na tych stronach, a Subvert nie zawodzi w swojej prezentacji. Struktura siatki jest silna i łatwa w nawigacji, a po kliknięciu użytkownik przechodzi do rozszerzonego widoku pracy.

Tradycyjne aspekty:

Świetny ogólny przepływ.
Silna prezentacja portfolio na stronie "Praca".

Ulepszenia Web 2.0:

Ogromny typ prezentowany na zanikającym pokazie slajdów.
Przejrzyste karty nawigacyjne!
Przyciski są ładne i dodają dobrego kontrastu do tła.
Pokaz slajdów z biura na stronie "Firma" to miły akcent.
Obejmuje technologię.

25. Projekt Yellow Bird

Na pierwszy rzut oka ta strona może wyglądać na nieco rozczochraną lub rozproszoną, ale im bardziej na nią patrzę i im więcej przeglądam jej stron, tym bardziej dostrzegam siłę jej organizacji. Co więcej, inspirowany muzyką indie projekt naprawdę zaczyna przemawiać do dłużej, a rozproszony wygląd witryny rzeczywiście pasuje do tematu.

Jeśli przejdziesz do Galerii zdjęć, zobaczysz mnóstwo amatorskich zdjęć, które po raz kolejny dodadzą uroku do wyglądu Indie, jednocześnie prezentując produkt.

Takie podejście do podziemia, które zostało upowszechnione przez strony takie jak threadless.com, natychmiast dołącza widza do produktu.

Chcą być częścią tłumu i nie mają wrażenia, że ktoś próbuje im coś sprzedać. Jeśli to nie jest filozofia Web 2.0, nie jestem pewien, co to jest.

Tradycyjne aspekty:

Crafty logo naprawdę ustanawia atmosferę, która jest realizowana w całej witrynie.
Choć początkowo wydaje się być rozproszone lub luźne, zdajemy sobie sprawę, że ten "złożony" wygląd jest dokładnie tym, czego szukali projektanci. Przyciągają wygląd, a jednocześnie ułatwiają nawigację.
Konsekwentne, nietradycyjne podejście.

Ulepszenia Web 2.0:

Chodzi bardziej o filozofię z tym. Podczas gdy aspekt społeczny Web 2.0 jest w pełni skuteczny, ta strona jest również silna ze względu na jej marketing wirusowy i wielką filantropię leżącą u podstaw.
Buduje społeczność!
Świetne zdjęcia i łatwa nawigacja też nie zaszkodzą.

W zamknięciu…

Web 2.0 jest trudnym standardem do zdefiniowania , ponieważ tradycyjne standardy projektowania są sztywnym zbiorem reguł i wytycznych (struktura siatki, teoria kolorów, odstępy między literami, kerning, śledzenie itd.), Web 2.0, chociaż zawiera podobne standardy, jest prawie więcej, więc sposób na życie.

Łączy w sobie filozofię, marketing, technologię, łatwość użycia i niezliczone inne aspekty naszego intensywnego wszechświata, a ostatecznym celem jest ułatwienie pracy masom.

W związku z tym Web 2.0 i tradycyjne reguły ustanowione przed wiekami ostatecznie podzielają ten sam cel: uporządkować chaos i uprościć kompleks .

W dzisiejszych czasach może to być trudny koncert, więc potrzebujemy wszystkich narzędzi do naszej dyspozycji, bez względu na to, czy są nowatorskie, czy sprawdzone przez wieki.

Napisany specjalnie dla WDD przez Josha Searsa. Jest pisarzem, ilustratorem i projektantem dla wielu projektów internetowych. Zarabia na życie jako główny projektant stron internetowych, dyrektor kreatywny i współwłaściciel Littlelines.com . Możesz sprawdź swoją pracę tutaj , lub śledź jego aktualizacje na Twitterze .

Jak korzystać z elementów Web 2.0 z tradycyjnym wzornictwem? Udostępnij przykłady z własnego portfolio lub innych dobrych przykładów, z którymi mógłbyś się spotkać.

zasady projektowania kompilacja projektów tradycyjny Web 2.0