Przegląd spójnych projektów w sieci
Wizualny język strony internetowej robi wrażenie na gościach daleko poza pierwszym spojrzeniem.
W rzeczywistości, obserwując najlepsze strony internetowe, zauważysz, że małe szczegóły mówią do ciebie podświadomie i że spójność poprawia twoje wrażenia z korzystania z witryny, co w rezultacie zwiększa prawdopodobieństwo powrotu.
W tym artykule omówimy, co sprawia, że projekt jest spójny , a my zaprezentujemy jedne z najbardziej spójnych projektów witryn internetowych.
Prosimy o komentarz na końcu artykułu na temat spójności tych stron internetowych i zachęcamy do dodawania linków do innych osób kierujących się tą zasadą.
Co rozumiemy przez spójność w designie? Według ta definicja spójność można zdefiniować jako: "harmonijną jednolitość lub zgodność między rzeczami lub częściami".
Twoim celem jako projektanta jest stworzenie porządku, aby ułatwić użytkownikom znalezienie informacji, których szukają. Spójność może pomóc w osiągnięciu tego celu.
Lista kontrolna szczegółów
Najpierw określmy kryteria, według których określimy, czy przeglądane przez nas witryny są spójne. Ustalanie kryteriów dla siebie przyniosłoby także korzyści w codziennych pracach projektowych. Jak chciałbym powiedzieć, dobry projekt jest najpierw tworzony z dobrą obserwacją . Oto nasze kryteria:
Typograficzna spójność:
- Czy istnieje spójny pionowy rytm?
- Czy wyrównanie typograficzne jest spójne?
- Czy wybór kroju pisma jest stały?
- Czy nawigacja typograficzna jest przewidywalna na różnych stronach?
Graficzna konsystencja:
- Czy obrazy na stronie przekazują spójny nastrój?
- Czy kolory na obrazach są zgodne?
- Czy tekstury obrazów są spójne?
- Czy rozmiary obrazów są zgodne z ogólną strukturą witryny i siebie nawzajem?
Konsystencja koloru:
- Czy kolory są konsekwentnie używane na różnych stronach?
Konsystencja ikon i przycisków:
- Czy ikony witryny należą do tej samej rodziny?
- Czy ikony pasują do siebie?
Strona internetowa nie musi spełniać tych kryteriów, ale lista jest dobrym punktem wyjścia do tego, aby twoje projekty były spójne i harmonijne.
Okay, mamy teraz fajną małą listę kontrolną do zabawy. Przyjrzyjmy się naszym stronom internetowym, ucz się od nich i zainspiruj się!
52 tygodnie UX
Jakie są najważniejsze strony tej witryny:
- Biała przestrzeń w nagłówku jest równo podzielona.
- Typografia jest konsekwentnie wyrównana, a lewa z nierównym prawym.
- Trwała paginowana nawigacja na górze jest zarówno sprytna, jak i znajoma.
- Obrazy do wpisów są zawsze czarno-białe.
Teraz, ponieważ ten artykuł dotyczy szczegółów, chciałbym wskazać dwa drobne problemy z tą witryną, zarówno w stopce: Po pierwsze zauważ, jak przycisk wyszukiwania "Go" ma odbicie, podczas gdy pozostałe elementy na stronie nie (porównaj na przykład przycisk RSS u góry).
Po drugie, zauważ, że odstęp między nagłówkami i tekstem jest znacznie ostrzejszy w stopce niż reszta strony.
Wstążki Red
- Po pierwsze, najważniejszy element strony internetowej: czerwony! Pięknie i konsekwentnie używane od logo do nagłówków do linków do przycisków.
- Następnie tekstura grafiki przycisku jest taka sama jak w przypadku logo.
- Zwróć też uwagę, że przyciski są wizualnie wszystkie z tej samej rodziny, nawet ikony społecznościowe na dole.
- Typ wyświetlacza to niezły szeryf - ponownie używany konsekwentnie od logo do nagłówków po przyciski.
- Wreszcie, elementy tekstowe na stronie internetowej są spójnie wyrównane, wyrównane do lewej i poszarpane w prawo.
Yaron Schoen
- Pierwszą rzeczą, która rzuca się w oczy jest to, jak ilustracja w nagłówku gra z głębokością. Nawet cztery elementy graficzne poniżej wyskakują z pojemników i grają z taką samą głębią.
- Typografia jest idealnie wyrównana w siatce.
- Krój pisma jest dobrze dobrany i wykonany. Strona główna i inne strony również wykazują ciągłość.
- Kolory są również bardzo spójne, gra ładnie z ciemnoniebieskim do niebieskawo-zielonej, aż po nagłówek do stopki.
Fuzzco
- Spójrz na teksturę w górnej nawigacji; jest również używany do obrazów w dolnej części.
- Sprawdź typ w nagłówku na różnych stronach; ładnie wykonane przy użyciu niestandardowego Flasha, co nadaje mu kreatywnego charakteru.
- Szeryf jest spójny na całej stronie głównej, ale dzieli się trochę na stronach wewnętrznych.
- Kolory w górnej nawigacji pasują do stopki, ujednolicają i dopasowują treść.
Styleboost
- Rozmiar zdecydowanie czyni tę stronę spójną: dużą . Duże przyciski, duże obrazy (wszystkie zgodne wielkością), duży typ, duża biała przestrzeń.
- Kolor jest ograniczony do minimum i dobrze używany. Jasnoniebieska utrzymuje harmonię, a drugorzędny szary gra z głębokością i hierarchią.
- Przyciski są duże i jednolite. Są również lekko zaokrąglone, pasujące do pola wyszukiwania.
- Struktura siatki jest prosta i mówi, co będzie dalej. Nawet stopka jest proporcjonalna, co wydaje się być zbliżone do złotego wskaźnika.
Delicious Monster
Ta strona internetowa nie jest nowa, ale jest piękna pod względem tego, jak stała się spójna przez lata i nie uległa starzeniu. Dbałość o szczegóły pomogła.
- Zwróć uwagę na tekstury. Strona jest otoczona drewnianą półką, która łączy się z tematem oprogramowania oferowanego przez firmę.
- Elementy graficzne, takie jak trawa i rośliny, zachowują harmonię.
- Każda sekcja ma zaokrąglone rogi, nawet przyciski pokazu slajdów.
- Zielonkawo-żółta dominuje na stronie, zachęcając do wejścia w ten wymyślny i niezapomniany świat.
Richard Meier & Partners Architekci.
Został zaprojektowany przez Massimo Vignelli , który znany jest z tego, że opanował sieć i tworzy nowoczesne, spójne i logiczne projekty.
- Zwróć uwagę na wyrównanie elementów graficznych. Typ wyrównany do lewej strony w menu wyrównuje się z obrazami poniżej.
- Horyzontalna reguła poniżej pod-nawigacji jest trwała, pomagając użytkownikom zorientować się w witrynie.
- Przestrzeń między treścią nawigacyjną a treścią ciała jest spójna, dając czytelnikowi jasną ścieżkę do naśladowania.
- A typografia jest prosta, kolor lewy i bezszeryfowy, konsekwentnie spadający do siatki.
Drużyna z tyłu Informacje Architekci opanował także prostotę, projekt sieci i spójność.
- Zwróć uwagę, w jaki sposób nawigacja u góry jest dopasowana do zawartości treści poniżej.
- Paleta kolorów jest prosta i spójna: czerwona, biała i czarna.
- Elementy tekstowe są równomiernie wyrównane. Zwróć uwagę, że odstępy między poziomymi regułami są spójne w dół strony.
Wilson Miner
- Daty i meta zawartość są wyrównane w pierwszej kolumnie, a następnie treść treści.
- Zwróć uwagę, w jaki sposób nawigacja u góry wchodzi w siatkę, dopasowując się do zawartości poniżej.
- Typografia to prosty biały i czarny: biały dla tytułów sekcji, czarny dla kopii ciała.
Tapbots
- Pierwszą rzeczą, która rzuca mi się w oczy, jest doskonałe wykorzystanie białej przestrzeni, w szczególności równomiernego odstępu między logo i nawigacją, zarówno powyżej, jak i poniżej.
- Wszystkie ikony wydają się pochodzić z tej samej rodziny, tworząc harmonię.
- Użycie głębi od górnych ilustracji do stopek jest również spójne.
- Kolory pasują do całej strony: czarny na górze pasuje do stopki; czerwony przycisk u góry pasuje do przycisku wyszukiwania znajdującego się poniżej; a szara nawigacja pasuje do szarego paska w stopce.
Zawijanie
Konsekwentna konstrukcja wymaga wielu narzędzi i może być trudna do osiągnięcia.
Jedna wskazówka, którą mogę zaoferować, to zacząć od ładnej siatki, a następnie zbudować na niej szkielet. Umożliwi to widok elementów graficznych w widoku z lotu ptaka i ich wzajemne relacje.
Powyższe przykłady powinny dać ci do myślenia w kwestii wykonania twojego projektu. Spójność składa się z wielu części, z których wszystkie są niezbędnymi składnikami tego procesu.
Napisany specjalnie dla Webdesigner Depot przez Noama Almosnino, projektanta stron internetowych na Brooklynie w Nowym Jorku. Obserwuj Noam na Twitterze lub odwiedź jego stronę internetową hellonoam.com .
Znasz inne spójne strony internetowe, które możesz nam udostępnić? Proszę je opublikować w komentarzach!