W pełni zrozumiały kontrast w projektowaniu
Zazwyczaj przedmiot kontrastu jest zarezerwowany dla początkujących. Książki powiedzą "czarny i biały mają kontrast, czerwony i pomarańczowy nie" - ale jest o wiele więcej.
Książki dla początkujących zwykle dotykają tylko kontrastu kolorów, ale co z rozmiarem i kontrastem kształtu? Często najłatwiejszym sposobem odróżnienia amatorskiego projektanta od profesjonalnego jest spojrzenie na ich użycie kontrastu.
Tworzenie struktury ważności przy użyciu rozmiaru, kształtu i koloru jest tym, co daje wpływ strony i czytelność dla czytelnika.
W tym poście przyjrzymy się szczegółom kontrastu, badając dużą typografię, kształty funky, wyraźne podziały, zdjęcia i to, jak dobrze pasują do siebie przy użyciu kontrastu, aby zapewnić wygodę użytkownikom.
Wprowadzenie do kontrastu
Kontrast może być określone jako "różnicę we właściwościach wizualnych, które sprawiają, że obiekt (lub jego reprezentacja w obrazie) daje się odróżnić od innych obiektów i tła." W prostym języku angielskim, który można by określić na najbardziej podstawowym poziomie jako "rzeczy, które wyglądają inaczej od siebie. "
Dla projektantów we wszystkich dziedzinach praktyki, ale przede wszystkim projektantów stron internetowych, kontrast leży u podstaw prawie wszystkiego. Ciągle staramy się ustalić hierarchie ważności, przyciągnąć ludzi do pewnych obszarów strony i przekazać jasny i zwięzły komunikat w samym sercu naszej pracy. Tworzenie związków pomiędzy różnymi elementami projektu jest właśnie najważniejszą rzeczą, którą możesz zrobić. Prawdopodobnie już to robisz, świadomie lub nie.
Oczywistymi przykładami kontrastu są czarno-białe, duże i małe, szybkie i wolne, grube i cienkie. Przeciwieństwa są najłatwiejszym sposobem na uchwycenie tego, jaki jest kontrast, ale przy stosowaniu kontrastu do prac projektowych nigdy nie jest tak czarno-biały. Jeśli się zastanawiasz, stąd bierze się powiedzenie o sytuacji "czarno-białej", co prowadzi również do stwierdzenia, że coś jest "szarą strefą". W projektowaniu często porównujemy rzeczy, które są różne, ale nie przeciwne, na przykład przycisk H1 i h1 lub przycisk "dodaj do koszyka" i przycisk "sprawdź". Tutaj zaczynają działać wyższe poziomy kontrastu.
Przyjrzyjmy się różnym typom kontrastu i kilku przykładom ich zastosowania w projektowaniu stron internetowych.
Kontrast kolorów
Najczęstszym przykładem wszystkiego, jest to, gdzie wszystko się zaczyna. Jeśli dwa kolory różnią się od siebie (powiedzmy: czarny i biały), to mają wysoki kontrast, natomiast jeśli są bardzo podobne (czerwony i pomarańczowy), to mają niski kontrast.
TekRoc wykorzystuje tutaj bardzo wyraźny kontrast kolorów, nakładając jasny i żywy obraz na bardzo ciemne tło. Jasno pomarańczowy i niebieski wyraźnie wyróżniają się, a oko jest natychmiast przyciągane do nich ponad wszystkie inne rzeczy na stronie.
Tim Van Damme znakomicie wykorzystuje kontrast kolorów w projekcie strony GoWalla. Nie tylko wielobarwne obramowanie na górze strony wyróżnia się i tworzy wizualne zainteresowanie, ponieważ różni się od bladego tła, ale dodał także wyjątkowo subtelne cienie 1px do tekstu na przyciskach. Nieco ciemniejszy pomarańczowy naprawdę pomaga stworzyć kontrast między białym tekstem a pomarańczowym tłem.
Envato to mistrzowie subtelnego kontrastu, a tendencja do używania granic 1px może być dla nich prawdopodobnie bardziej niż ktokolwiek inny. Wszystkie ich witryny mają wiele pojedynczych pikseli, tworząc kontrast między sekcjami. Na powyższym zrzucie ekranu dwa obszary zawartości mogły zostać podzielone spacją lub pojedynczą linią, jednak za pomocą dwóch linii (jedna ciemność, jedno światło) tworzą subtelny kontrast pomiędzy tymi dwoma sekcjami, co jest niezwykle skuteczne.
Rozmiar Kontrast
Kolejną najczęściej spotykaną formą kontrastu jest używanie rozmiaru. Coś dużego obok czegoś małego oznacza ogólnie, że większy przedmiot jest o wiele ważniejszy. Zgadza się, mówimy, że rozmiar ma znaczenie!
MadeByWater to portfolio projektowe Jordana Vitanova. Używa kontrastu wielkości z bardzo dużą typografią, aby natychmiast przekazać cytat autorstwa Bruce'a Lee, który określa, dlaczego wybrał markę z nazwą MadeByWater.
28 Thiers jest atrakcyjnym, ekskluzywnym barem we Francji. Ich strona internetowa świetnie wykorzystuje kontrast wielkości, aby zwrócić uwagę bezpośrednio na dużą fotografię Martini z różnorodnymi składnikami otaczającymi ją. Od razu widać, że jest to najważniejszy element na stronie, a projektant chce, abyś spojrzał na ten obraz i sprzedał go na tym, że jest to wyjątkowo elegancki obiekt.
SlideScreen powoduje wielokrotne użycie kontrastu rozmiaru w swojej witrynie. Oprócz tego, że ich produkt jest wyświetlany z dużym zrzutem ekranu, używają one również bardzo dużych przycisków do wywoływania podstawowych działań. Chcą, abyś obejrzał film z jego produktem w akcji, a następnie chcesz go pobrać. Są to najważniejsze elementy strony, więc są znacznie większe niż inne otaczające je elementy.
Kontrast kształtu
Kontrast kształtu oznacza wyróżnianie się dzięki różnicy w kształcie fizycznym w porównaniu do innych elementów na stronie. Na najbardziej podstawowym poziomie można to wykorzystać do dodawania zaokrąglonych narożników do przycisków, ale na bardziej ekstremalnych poziomach może przyciągać o wiele więcej uwagi.
Anebstar wykorzystuje kontrast kształtu, aby zaprezentować trzy ważne obrazy w nagłówku. Ponieważ większość elementów w Internecie ma kształt prostokątny, jednym z najprostszych sposobów osiągnięcia kontrastu kształtu jest użycie okręgu. Oczywiście ten przykład również ma mały kontrast w rozmiarze, ale wyraźnie widać, jak okrągłe elementy wyróżniają się na tle pozostałych elementów strony.
Carbonmade to oszałamiająca strona z prawdziwą mieszanką wspaniałych ilustracji i dobrze zaprezentowanych treści. Prosty przycisk rejestracji działałby, ale rozmiar i kontrast kolorów prawdopodobnie nie oddzieliłyby go wystarczająco od intensywnego tła. Dodanie przyjaznej ośmiornicy za przyciskiem naprawdę daje mu tę różnicę kształtu, aby przyciągnąć wzrok bezpośrednio do niego.
WireframePlus wykorzystuje prosty, ale niezwykle skuteczny kontrast kształtu, aby podkreślić cenę swoich usług. Chcą, żebyś przeczytał ich treść, ale przede wszystkim starają się sprzedać ci po świetnej cenie, umieszczając za sobą duży krąg.
Pozycyjny kontrast
Tworzenie kontrastu w pozycjonowaniu jest bardzo miłym sposobem tworzenia hierarchii elementów wyłącznie przy użyciu różnych dopasowań. W ostatnim czasie technika ta została upowszechniona przez ludzi takich jak Elliot Jay Stocks, który wykorzystał ją do ekstremum na swojej najnowszej stronie portfolio.
Elliot Jay Stocks używa szczegółowej siatki do określenia wyrównania wszystkich elementów na swojej stronie. Uwaga jest wywoływana w określonych obszarach przez wcięcie odpowiednio w lewo lub w prawo. Na tym zrzucie ekranowym wstępny akapit naprawdę wyróżnia się, ponieważ jest ustawiony najdalej w lewo, gdzie oko patrzy najpierw, aby coś przeczytać. Ten rodzaj dopasowania "zainspirował" wielu innych projektantów w ciągu ostatnich dwunastu miesięcy do tworzenia projektów z kontrastem pozycyjnym w tym samym stylu.
SimpleBits to marka, pod którą pracuje Dan Cederholm, możesz znać go z projektów takich jak Dribbble . Przy pierwszych wrażeniach strona SimpleBits nie wydaje się mieć żadnego kontrastu pozycyjnego, jednak po rozpoczęciu przewijania wszystko staje się jasne. Tam, gdzie niektórzy używają ustalonego obrazu tła, aby stworzyć schludny efekt stylistyczny, Dan uczynił swoje logo i nawigację całkowicie ustaloną pozycją, tak że niezależnie od miejsca przewijania, zawsze pozostają one w tym samym miejscu na ekranie. To doskonały przykład niestandardowego kontrastu pozycyjnego.
SquaredEye to sklep projektowy prowadzony przez Matthew Smitha, a strony z case study w jego portfolio świetnie wykorzystują kontrast pozycyjny. Trzeba zobaczyć całą stronę, aby naprawdę uzyskać pomysł, ale zasadniczo Matthew skrupulatnie stworzył określone pozycjonowanie dla każdej sekcji strony. Stwarza to fantastyczny kontrast między sekcjami i tworzy dużo zainteresowania wzrokowego czytelnika, nie rozpraszając go wcale.
Kontrast Wnioski
Jest o wiele więcej do odróżnienia niż tylko "światło i ciemność" - jest to jedna z najważniejszych zasad projektowania i prawie nigdy nie można go nazbyt dużo, pod warunkiem, że użyjesz go właściwie.
Przenieś swoje projekty na wyższy poziom, nie polega na znalezieniu kolejnego wozu, który będzie chciał używać zaokrąglonych naroży i cienia do wszystkiego, chodzi o znalezienie lepszych i bardziej efektywnych sposobów komunikowania przesłania za projektem.
Eksplorowanie kontrastu w szczegółach i pełne wykorzystanie potencjału jest jednym z najlepszych sposobów, aby to zrobić.
Co myślisz? Ile uwagi poświęcasz kontrastowi w swoich projektach? Czy jest to coś, o czym myślisz przez cały czas, czy jest to coś, co przychodzi naturalnie?