The Dos and Don'Ts of Dark Web Design
Ciemne projekty internetowe są bardzo popularne i mogą mieć elegancki i kreatywny wygląd.
Są również idealne do wielu rodzajów pracy z klientami, jednak nie są odpowiednie dla każdej witryny i powinny być używane tylko w razie potrzeby.
Pomimo uderzającego efektu wizualnego, jaki mogą mieć te ciemne wzory, wielu projektantów nie wie, jak skutecznie je odciągnąć, nie wyłączając gościa.
Ciemna konstrukcja zapewnia mniej czytelności , mniej atrakcyjności dla większości czytelników i mniejsze szanse na konwencjonalne elementy.
W tym poście omówimy kilka wskazówek, które sprawią, że Twój kolejny ciemny projekt strony odwoła się do szerszej publiczności , a Ty, projektant, możesz wyrazić swoją kreatywność.
ZA ostatnia ankieta sugeruje, że projekty oświetleniowe są preferowane przez ogólną publiczność w Internecie, bo aż o 47%. Głównym powodem jest czytelność . Większość ludzi nie lubi oglądania lekkich tekstów na ciemnym tle na stronach internetowych, ponieważ powoduje zmęczenie oczu, sprawiając, że jest to znacznie mniej przyjemne.
Natomiast 10% ankietowanych stwierdziło, że zawsze preferują ciemne tło dla stron internetowych, a kolejne 36% stwierdziło, że najlepszy wybór zależy od rodzaju strony internetowej.
Jaka jest właściwa odpowiedź? Kiedy się to wszystko sprowadza, każdy ma własną opinię i to wszystko.
Ale przy tak dużym odsetku użytkowników, którzy twierdzą, że ciemne projekty stron internetowych są tolerowane, a czasem nawet preferowane, my, jako projektanci stron internetowych, musimy nauczyć się tworzyć skuteczne ciemne wzory dla siebie i naszych klientów.
Oznacza to przekonanie wszystkich prawdziwych wyznawców jasnego środowiska, że ciemne wzornictwo może być bardziej czytelne i przyjazne dla użytkownika.
Użyj więcej białej przestrzeni
A może powinna być nazywana "czarną przestrzenią"? Efektywne wykorzystanie białej przestrzeni jest ważne dla każdego rodzaju projektu, ale jest istotne dla witryn o ciemnym tle.
Ciemne wzory mają tendencję do odczuwania "ciężkości" , a zagracanie ich może wzmocnić to uczucie. Rzuć okiem na kilka popularnych, ciemnych projektów internetowych poniżej i zauważ, że ich liberalne wykorzystanie białej przestrzeni daje świetny efekt.
Czarna posiadłość jest widoczny w całym Internecie w ciemnych witrynach internetowych. To rzeczywiście piękny projekt i zasługujący na uwagę wszystkich. Duża część białej przestrzeni jest wykorzystywana w całym projekcie, a tym, co wyróżnia ten konkretny projekt, jest to, w jaki sposób biała przestrzeń jest wykorzystywana do efektywnego zarysowania pewnych elementów.
Logo ma dużo białej przestrzeni i jest pierwszą rzeczą, którą widzimy jako odwiedzający. Widzimy główną treść i butelkę po prawej stronie. Jak widać, biała przestrzeń jest idealnie używana do zaznaczania tekstu na butelce i nagłówka głównej treści.
Polecane materiały w TIK Tak i towarzyszący mu obraz w tym projekcie są oprawione w najbardziej białą przestrzeń. Gdy schodzimy w dół, widzimy mniejszą białą przestrzeń, co powoduje, że zwracamy uwagę na pokazywane treści.
Chodzi o to, że biała przestrzeń stopniowo prowadzi użytkownika do końca strony .
Ciemne tło dodaje głębi do projektu. Ponieważ strona tak mocno opiera się na białej przestrzeni, byłoby mniej interesujące bez kreatywnego efektu ciemnego tła.
The Mark Dearman witryna ma liberalną i równomiernie rozmieszczoną białą przestrzeń w całym jej układzie.
Biała przestrzeń kadru każdego kawałka portfolio zapewnia dużo miejsca do oddychania dla zawartości, którą posiada, i jest to miły punkt odpoczynku przed przejściem do następnego utworu.
Mnóstwo białych przestrzeni jest niezbędne w przypadku ciemnych projektów, ponieważ pomaga nie tylko w zaśmiecaniu układu, ale także w oprawianiu ważnych elementów i dodawaniu elegancji do ogólnego wyglądu.
Biała przestrzeń tekstowa
Ponieważ czytelność jest najważniejszą kwestią dla tych, którzy nie lubią ciemnego tła, projektanci muszą zwrócić szczególną uwagę na sam tekst.
Podobnie jak w ogólnym projekcie, jednym ze sposobów poprawy czytelności na ciemnych stronach internetowych jest zwiększenie białej przestrzeni poprzez dostosowanie rozmiaru akapitu, kerningu i prowadzenia .
Poniższy przykład pokazuje różnicę między odstępami między i wokół znaków w porównaniu ciemnych i jasnych układów.
Innym sposobem na poprawę czytelności w ciemnych projektach internetowych jest zwiększenie rozmiaru czcionki . Podobnie jak większość innych zasad w tym poście, większe rozmiary czcionek oznaczają więcej białych znaków. Im większe litery, tym bardziej biała przestrzeń pojawi się wokół i wewnątrz każdej litery.
Na przykład, litera "a" poniżej dostaje więcej białej przestrzeni, gdy staje się ona większa, zarówno w obszarze wokół niej, jak iw przestrzeni wewnątrz obudowy a i pod nawisem.
Zauważ, że czytanie małego tekstu jest o wiele łatwiejsze na jasnym tle niż na ciemnym. Podczas ustawiania typografii dla nowej strony internetowej, spójrz na jakiś fałszywy tekst, aby upewnić się, że jest czytelny . Jeśli nie, sprawdź, czy zwiększenie rozmiaru tekstu pomaga.
Kontrast tekstu
Wiele osób zgodziłoby się, że najgorsze strony ciemnych stron wywołują zmęczenie oczu. Zbyt duży lub zbyt mały kontrast jest zwykle sprawcą. Jak znaleźć idealną równowagę?
Jeśli znajdujesz się w pokoju o ciemnej barwie, nagle patrzenie bezpośrednio w światło nie jest przyjemne. Ale patrzenie na mniej jasne światło w mniej ciemnym pokoju jest w porządku. Ta sama zasada dotyczy projektowania stron internetowych.
Znalezienie idealnego kontrastu oznacza zrównoważenie ciemności tła z lekkością tekstu .
Poniżej znajduje się (bardzo) przybliżony przewodnik pokazujący, jak działa kontrast tekstu z tłem. Zauważa się, że gdy tło staje się jaśniejsze, tak samo dzieje się z tekstem.
Znalezienie przyjemnego kontrastu dla tekstu jest o wiele trudniejsze z czystym czarnym tłem.
Aby znaleźć idealną równowagę, eksperymentuj z różnymi odcieniami. Najlepszym wynikiem jest zazwyczaj tło, które nie jest czystą czernią, a tekst nie jest czysto biały.
Radzenie sobie z czcionkami
Czcionki odgrywają dużą rolę w designie i zdecydowanie powinny być brane pod uwagę przy ciemnych układach. Poniższy obrazek pokazuje 14-punktową czcionkę na ciemnym tle w czcionkach serif i sans-serif.
Czcionka bezszeryfowa jest oczywiście bardziej czytelna . Jednak wielu projektantów nadal wybiera czcionki szeryfowe ze względu na ich elegancję.
Sztuczka polega jednak na umieszczaniu tylko większego tekstu w czcionkach szeryfowych, aby dodatkowa biała przestrzeń zalewała każdą postać i czyniła tekst czytelnym.
Poniższy zrzut ekranu jest witryną omówioną wcześniej w tym artykule. Zawiera zarówno czcionki szeryfowe, jak i bezszeryfowe, ale wykorzystuje je w inteligentny sposób.
Większy tekst, taki jak nagłówki, nawigacja i nagłówki, jest czcionką szeryfową, co dodaje jej elegancji. Dla lepszego kontrastu i poprawionej czytelności tekst bryły jest w czystej czcionce bezszeryfowej.
Użyj minimalnych schematów kolorów
Aby ich ciemne wzory były czyste i przejrzyste, projektanci powinni zawsze wybierać minimalne schematy kolorów .
Z kilku przykładów poniżej widać, że intensywne schematy kolorów naprawdę utrudniają ciemne tło, ponieważ kontrast jest zbyt ostry.
Przyklejają się do jednego lub dwóch kolorów . Aby dodać więcej kolorów, spróbuj ciemnego tła.
To oczywiste, że wiele ciemnych projektów internetowych ma bardziej ekscytujące schematy kolorów. Ta zasada jest często zepsuta, ale tylko z odpowiednimi technikami.
Ogólnie jednak kolor często sprawia, że witryna wygląda na zbyt zajętą . Ponieważ ciemniejsze strony internetowe mają już głębię, należy używać kolorów z rozwagą.
Oferta Switcher stylu
Chociaż mamy do dyspozycji wiele dobrych praktyk, aby uatrakcyjnić wygląd ciemnych stron internetowych, żaden wysiłek nie zadowoli każdego użytkownika.
Pamiętaj o włączeniu przełącznika stylów , aby użytkownicy mieli ostatecznie możliwość wyświetlania ciemnego tekstu na jasnym tle.
Wymagane są dwa arkusze stylów, jeden dla domyślnego ciemnego układu i jeden dla alternatywnego układu światła.
SitePoint ma doskonały tutorial na ten temat: Zbuduj prosty przełącznik stylu w CSS . Zamiast korzystać z wersji "pomarańczowej", "niebieskiej" i "białej" w samouczku, po prostu użyj "jasnych" i "ciemnych" arkuszy stylów.
Kiedy Dark Web Design działa najlepiej
Jak stwierdzono, duża część użytkowników internetu uważa, że ciemny projekt strony może działać w przypadku niektórych typów stron internetowych. Ale badania są niejasne na temat tego, czym dokładnie są te typy.
Ogólnie rzecz biorąc, ciemne działa najlepiej w przypadku kreatywnych lub eleganckich projektów . W przypadku nowoczesnych eleganckich witryn internetowych ciemne tła dodają elegancji. W przypadku stylów nieczytelnych lub rysowane ręcznie, ciemne tło zwiększa kreatywność układu.
Elegancki ciemny design
Ciemność może być głęboka, autorytatywna i silna i często wygląda elegancko, gdy jest odpowiednio używana. Oto kilka przykładów i kilka technik pozwalających wydobyć elegancję w ciemnym stylu.
Strona internetowa dla Larissa Meek ma prosty wzór w stylu vintage w tle, nadając elegancki ton. Inne dziwaczne funkcje dodają indywidualnego charakteru projektowi.
Technika ta może być stosowana do wielu rodzajów stron internetowych. Vintage lub klasyczne wzory i tekstury mogą nadać wygląd, który jest elegancki i odpowiedni do wieku .
Większość z nas kojarzy wzory vintage z wysokiej klasy, więc tworzenie wysokiej klasy strony internetowej w ten sposób jest łatwe.
Głębokość Core ma bardzo czysty design, z ciemnym tłem, które dodaje stylu i klasy. Poczucie autorytetu widać także w projekcie. Ta elegancja może także sprawić, że praca projektanta staje się bardziej wartościowa.
Zwróć uwagę, że ten projekt nie ma tekstury ani obrazów innych niż elementy portfolio i logo. W przeciwnym razie projekt byłby zbyt zajęty; tak jak to jest, treść jest dobrze połączona ze sobą.
Dobrym procesem do naśladowania jest najpierw dodanie istotnych treści, a następnie wprowadzenie elementów projektu w razie potrzeby . Projektant może następnie wstrzymać i zastanowić się po dodaniu każdego nowego elementu, upewniając się, że układ nie jest nadmiernie zasilany.
Podobnie jak grafika może wydawać się bardziej wartościowa w eleganckim designie, podobnie jak produkty. Ciemny i elegancki wygląd, jak Tapbots i tak wiele innych, pomaga zaprezentować sprzedawany produkt.
Projekt odzwierciedla samo urządzenie , z jego pochyłościami i efektami świetlnymi; niektóre projekty nawet naśladują fakturę swoich zaawansowanych technologicznie produktów.
Twórczy ciemny projekt
Poza wyglądającymi na eleganckie, ciemne projekty stron internetowych mogą również wywoływać więcej reakcji emocjonalnych niż standardowe projekty lekkich, co czyni je idealnymi do twórczych projektów. Spójrzmy na kilka przykładów rodzajów kreatywnych projektów, które są możliwe.
The teren poniżej ma bardzo małą zawartość, ale ma unikalny układ i ciemne kolory dla głębi. Ciemne tła są idealne dla witryn z bardzo małą ilością treści .
A ponieważ wymagają więcej białej przestrzeni, projektant ma więcej miejsca do pracy.
Projektowanie stron internetowych grunge jest w wielu formach, a ponieważ grunge jest "ciemne i brudne", ciemne tła są jedną z tych form.
Ciemne projekty grunge jak Trozo wydają się łamać wszystkie zasady: zajęte tekstury, zatłoczony układ i szeroki zakres kolorów. A jednak ta strona wciąż działa. Jak to możliwe?
Przy tak wielu niechlujnych elementach do pracy, projekt grunge może być trudny dla początkujących. To, co sprawia, że to jedno działa, to jego organizacja .
Tło ma wyraźnie rozmieszczone bloki, które kierują wzrokiem użytkownika i pomagają podzielić zawartość na łatwe do zarządzania sekcje.
Po drugie, ma mnóstwo białej przestrzeni . Tło może być teksturowane, ale powtarzający się wzór jest postrzegany przez użytkownika jako biała przestrzeń, co pomaga rozjaśnić projekt.
Ta biała przestrzeń jest najbardziej widoczna po lewej stronie logo, pod nawigacją i po prawej stronie.
Nawet pomiędzy "Exhibit 01" i "Exhibit 02" jest bardziej biała niż ta, którą zwykle można znaleźć na takiej stronie.
Biała przestrzeń wyrównuje wszystko, nawet jeśli nie wygląda jak biała przestrzeń, ponieważ ma teksturę . Minimalny tekst i kilka sekcji (tylko trzy) również przyczyniają się do tego wyglądu prostoty.
Projekt Drew Wilson zdecydowanie łamie zasadę używania minimalnego koloru. Nadal działa, ponieważ jaskrawo kolorowy nagłówek jest jedną z niewielu funkcji tego rzadkiego projektu, więc nic nie przesadza.
A ciemne tło sprawia, że nagłówek wydaje się jeszcze jaśniejszy i bardziej niezwykły.
Ciemne tła są często używane do tworzenia efektów świetlnych, a jasne kolory wyróżniają się bardziej .
Takie projekty są cudownie twórczym wyjątkiem od reguły minimalnego koloru. Ale reguła powinna zostać zerwana z rozwagą: unikaj rozpraszających się gradientów, tekstur i kolorów w dalszej części strony.
Zawijanie
Ciemne tła nadają elegancki i kreatywny wygląd projektom internetowym, dzięki czemu są idealne do niektórych portfeli, ale nie są odpowiednie dla każdej witryny.
W przypadku większych witryn, zwłaszcza tych z upośledzeniem wzroku i innymi rodzajami niepełnosprawności, ciemne projekty są nie-nie, nawet z przełącznikiem stylu.
Mam nadzieję, że gdy nadejdzie czas, że trzeba zaprojektować stronę internetową z ciemnym tłem, te wskazówki i strategie pomogą.
Napisany wyłącznie dla WDD przez Kayla Knight .
Istnieje wiele innych technik i strategii ulepszania ciemnych projektów internetowych, więc podziel się tymi, które znajdziesz w sekcji komentarzy poniżej.