13 trendów w projektowaniu stron internetowych na 2020 rok

Opublikowany: 2020-02-06

W tym roku jest tak wiele trendów w projektowaniu stron internetowych, że trudno jest określić , co to jest trend, a co jest po prostu powszechnym tematem w świecie designu. Własny lider branży i dyrektor artystyczny firmy Flywheel, Nicholas Petersen, uważa, że ​​nadążanie za aktualnymi trendami w projektowaniu graficznym jest koniecznością. „Pomocna jest świadomość trendów zachodzących w społeczności projektantów, aby naprawdę rozwinąć własne umiejętności jako projektanta”.

W tym artykule omówię 13 najważniejszych trendów w projektowaniu stron internetowych, dlaczego warto się nimi zająć, a także bardziej inspirujące porady od innych wiodących projektantów w branży.

Oto 13 najlepszych trendów w projektowaniu stron internetowych na rok 2020:

  1. Abstrakcyjna ilustracja
  2. Geometryczny wzór
  3. Minimalizm
  4. 3D
  5. Dostępność
  6. Ustawienie preferencji
  7. Wciągające wrażenia
  8. Tryb ciemny
  9. Żywe schematy kolorów
  10. Projekt izometryczny
  11. Niestandardowa typografia
  12. Uproszczona ilustracja
  13. Fotografia z grafiką


Abstrakcyjna ilustracja

Abstrakcyjna ilustracja to idealna równowaga między sztuką a designem. Jest to rosnący trend, ponieważ jasne kolory i abstrakcyjne kształty, linie i obrazy tworzą projekt inny niż wszystkie.

Zrzut ekranu strony logowania Dropbox z niebieską abstrakcją po lewej stronie.
Zrzut ekranu strony logowania Dropbox z abstrakcyjną ilustracją
Zrzut ekranu przedstawiający abstrakcyjną ilustrację przedstawiającą dinozaura ze wzorem w środku.
Zrzut ekranu z Behance

Geometryczny wzór

Geometryczne projektowanie stron internetowych to kolejny trend, który pojawił się w tym roku. Geometryczny projekt ma proste geometryczne kształty i choć może wyglądać bardzo prosto, kryje się za nim wiele myśli i intencjonalności. Potrzeba określonego projektanta stron internetowych, aby wziąć proste kształty geometryczne, takie jak koła i kwadraty, i przekształcić je w historię.

Zrzut ekranu strony internetowej z różową wstążką przewleczoną pionowo na stronie, z tekstem u góry.
Zrzut ekranu strony głównej RALLY
Zrzut ekranu przezroczystych ulotek z magnetycznymi kolorami i geometrycznymi kształtami.
Obraz z Adobe

Minimalizm

Jeśli kochasz geometryczne wzornictwo, pokochasz ten trend: minimalizm. Minimalistyczny design to projekt, który jest prosty i czysty. W zatłoczonym świecie wypełnionym głośnymi i jasnymi kolorami minimalistyczne strony internetowe stały się drogowskazem w projektowaniu stron internetowych.

Coraz popularniejszy staje się również minimalistyczny projekt witryny, ponieważ zapewnia on bezproblemowe wrażenia użytkowników podczas poruszania się po witrynach.

Zrzut ekranu białej strony głównej z rowerem jako centralnym punktem na środku strony.
Zrzut ekranu strony internetowej Motus

Zac Moore, projektant z Gruzji, uważa, że ​​minimalistyczne projektowanie graficzne jest trendem, który widzą graficy. „Design podążał ścieżką minimalistyczną w ciągu ostatnich kilku lat; działa szybciej w kierunku czystego środowiska użytkownika i braku bałaganu. Myślę, że projektanci, którzy dopiero teraz podchodzą do minimalizmu, robią to, aby podążać za i tak już popularnym trendem, a z biegiem czasu będzie to stawać się coraz bardziej popularne”.

Zrzut ekranu strony głównej, która jest całkowicie zielona z białym tekstem, a centralnym punktem jest koło po lewej stronie strony.
Zrzut ekranu strony Mixd

3D

Projekt graficzny 3D stał się również jednym z czołowych trendów w projektowaniu. Wielu grafików zaczęło nakładać na siebie różne typografie, obrazy i abstrakcyjne kształty, aby stworzyć ten dziki, niepowtarzalny efekt 3D. W połączeniu z żywymi kolorami tworzy to ciekawy projekt, który wydaje się ożywać.

Zrzut ekranu strony z „Typami kreacji” na środku strony. Sama czcionka wygląda na rozmytą lub puszystą, jak dywan
Zrzut ekranu typów kreatywnych autorstwa Adobe Create
Zrzut ekranu witryny, która jest w większości fioletowa. Wokół niego znajduje się animowany potwór, a wokół niego inne animowane elementy.
Zrzut ekranu strony Toggl

Dostępność

Dostępność to rozmowa, o której ostatnio rozmawiało wielu projektantów stron internetowych, ale ważniejsze niż kiedykolwiek jest jej uwzględnienie i uwzględnienie w każdym aspekcie projektowania.

David z Calibrate Media jest przekonany, że dostępność stała się ważną częścią projektowania stron internetowych. „Szybko staje się standardem dla dużych firm. Ponieważ coraz więcej osób ze wszystkich grup wiekowych i środowisk korzysta z Internetu na co dzień, ważne jest, aby zaspokoić ich potrzeby w zakresie dostępu. W niektórych krajach, takich jak Izrael, jest teraz częścią prawa.

Oprócz dostępności, zgodność z RODO jest kolejną koniecznością w dzisiejszym cyfrowym krajobrazie. „Poza względami prawnymi coraz więcej użytkowników obawia się o swoje prawa do prywatności podczas przeglądania sieci. Wdrożenie dobrze zaprojektowanej i dobrze napisanej informacji o plikach cookie (a także wdrożenie standardów RODO) zbuduje poczucie zaufania i bezpieczeństwa wśród odwiedzających Twoją witrynę.”

Zrzut ekranu strony internetowej dostępnej dla wszystkich.
Wesley Mission ma łatwą w użyciu witrynę, alternatywny tekst obrazu, a nawet kartę ułatwień dostępu, w której można przesłać opinię na temat dostępności witryny

Ustawienia preferencji dla użytkowników

Ustawienie preferencji w dzisiejszych czasach oznacza, że ​​można teraz dostosować się do preferencji użytkownika oprogramowania (takich jak minimalizowanie ruchu!) w Internecie. Załóżmy, że użytkownik nie chce ruchu w swoich preferencjach systemowych na komputerze Mac. Projektant stron internetowych może wziąć to ustawienie i całkowicie dostosować wrażenia. Kilka rozwiązań to usunięcie efektu paralaksy lub efektu powiększenia po najechaniu kursorem. W ten sposób klient kontroluje to, co jest dla niego najlepsze, i pozwala projektantom stron internetowych budować najlepsze możliwe doświadczenia dla wszystkich użytkowników.

Ten trend jest ważny, ponieważ pomaga budować środowiska internetowe, które stawiają użytkownika na pierwszym miejscu. Tyson Reeder, starszy projektant produktu w firmie Flywheel, mówi: „Jeśli u użytkownika wyzwalany jest ruch, a oni ustawili swój komputer na »redukowanie ruchu«, możemy wykorzystać to, aby stworzyć dla niego korzystniejsze wrażenia”. Apple świetnie sobie z tym radzi.

Film pokazujący, jak projekt Apple zmienia się w oparciu o Preferencje systemowe użytkownika.

Aby dowiedzieć się więcej o dostępności i implementacji jej w swoim projekcie strony, kliknij tutaj.


Wciągające wrażenia

Wciągające wrażenia i projektowanie graficzne to kolejny trend, który wielu widziało. W świecie, w którym ludzie coraz bardziej doceniają swoje doświadczenia z marką, firmą lub produktem, nie jest niespodzianką, że projektanci stron internetowych używają rozszerzonej rzeczywistości, zwanej inaczej AR, aby wzbogacić te wciągające wrażenia.

Christel z Kwitelle była jedną z kreatywnych osób, które zobaczyły wciągające projekty graficzne z odległości mili: „Możesz to po prostu poczuć w powietrzu”.

Projektanci stron internetowych myślą o swoim projekcie jako o wciągającym doświadczeniu, niezależnie od tego, czy oznacza to zaprojektowanie witryny WordPress, stworzenie nowego animowanego logo dla marki, czy cokolwiek pomiędzy.

Apple, na przykład, składa oświadczenie o swoich nowych produktach, tworząc wciągające wrażenia dla użytkowników poszukujących więcej informacji lub gotowych do zakupu.

Zrzut ekranu otwierania MacBooka Pro
Zrzut ekranu MacBooka Pro otwierającego się nieco bardziej podczas przewijania
Zrzut ekranu MacBooka Pro w pełni otwartego podczas przewijania strony.
Zrzuty ekranu zrobione ze strony Apple

Tryb ciemny

Tryb ciemny jest tutaj i wielu projektantów stron internetowych uwielbia (i ośmielę się powiedzieć, że ma lekką obsesję na punkcie) tego trendu. Tryb ciemny ma miejsce, gdy główna część projektu jest ciemna, często czarna, a tekst, obrazy i inne elementy są białe lub mają inny kolor. To tworzy elegancki i wyrafinowany wygląd, gdy jest wykonany prawidłowo, ale jest to cienka linia do zrównoważenia.

Zrzut ekranu strony internetowej korzystającej z trybu ciemnego. Główne kolory używane to czarny dla tła oraz pomarańczowy i biały dla tekstu i innych elementów.
Zdjęcie od Anamol Maharjan Dribbble

Andrew Cacho w pełni wpasował się w trend trybu ciemnego. „Chodzi o zrównoważenie napięcia między potrzebą stworzenia przestrzeni na stronach internetowych, a podążaniem za trendami wyznaczanymi przez duże firmy produkujące sprzęt technologiczny w ich natywnym systemie operacyjnym. Żywość powraca, by tworzyć plamy osobowości!”

Inni projektanci są zgodni, że interfejsy mobilnego systemu operacyjnego już przystosowały się do tego trendu. Matt Staub z Proxima mówi: „Ponieważ tryb ciemny przejmuje interfejsy mobilnego systemu operacyjnego, zaprojektowane doświadczenia pójdą w ich ślady. Ale modne, żywe kolory przebiją się przez ciemność”.

Zrzut ekranu strony Spotify w trybie ciemnym z kolorowym zdjęciem albumu i wykonawcy oraz białym tekstem.
Obraz z CloudApp

Żywe schematy kolorów

Mówiąc o modnych, żywych kolorach, porozmawiajmy o żywych schematach kolorystycznych. Projektanci stron internetowych stosują odważne kolory, często używając bardzo nasyconych kolorów w połączeniu z ciemnymi odcieniami, które nadają ich projektom prosty, a jednocześnie kolorowy i ciepły charakter. Różne kombinacje żywych kolorów, takie jak neony i fluorescencje, pomagają wyróżnić projekt na tle hałasu.

Zrzut ekranu strony z różowym kolorem głównym.
Zrzut ekranu z Cowboy.com
Zrzut ekranu strony z różnymi żywymi kolorami, takimi jak niebieski, neonowy różowy, elektryczny niebieski, żółty, biały i czarny.
Zrzut ekranu strony internetowej Meow Wolf

Ilustracja izometryczna

Robiąc zdjęcie, łatwo jest zrozumieć, że różne perspektywy i kąty za pomocą aparatu mogą stworzyć inny wygląd, odczucia i emocje. Projektowanie ilustracji izometrycznych to podobna koncepcja, ponieważ te projekty pozwalają na więcej perspektyw tematu. Jako projektant możesz użyć ilustracji izometrycznych, aby zobaczyć górę, bok lub dowolny kąt projektu.

Zrzut ekranu projektu izometrycznego. Projekt to małe budynki z boku.
Zrzut ekranu strony internetowej Psych X86

Technika izometryczna pozwala również pokazać więcej, jeszcze więcej drobnych szczegółów przy mniejszym bałaganie. Możliwość pokazania przestrzeni w 3D otwiera przestrzeń, która była wcześniej niedostępna. Jest więcej miejsca na umieszczenie rzeczy, które nie wyglądają na zagracone i wymuszone.

Zrzut ekranu projektu izometrycznego. To małe miasto z odległego kąta.
Zrzut ekranu z Chronicled
Zrzut ekranu Flywheel's Ebook, firmy zajmującej się projektowaniem stron internetowych z laptopem, wykresami i ilustracjami.
Zrzut ekranu z raportem dotyczącym projektowania stron internetowych. Przeczytaj to tutaj.

Niestandardowa typografia

Aby tworzyć bardziej innowacyjne projekty, projektanci stron internetowych poszukują nowych sposobów przedstawiania typografii. Połączenie różnych elementów kreatywnych w celu przekształcenia tekstu to trend, który większość widziała.

Rese, nasz wewnętrzny grafik, uwielbia włączać do swoich projektów niestandardową typografię. „Tworzenie niestandardowego typu jest przyjemne, ponieważ jest to sposób na personalizację i zarządzanie czymś w projekcie, co zwykle ogranicza się do tego, co jest dostępne w Twojej bibliotece czcionek”.

Niestandardowa typografia w czerni i bieli. Tekst mówi „Super Fly” unikalną czcionką.
Zaprojektowany przez koło zamachowe przykład niestandardowej typografii

Podczas gdy niestandardowa typografia jest jednym z najstarszych trendów w projektowaniu graficznym, jest to coś, co wciąż ewoluuje. „Przeszło od pięknych ręcznie robionych szyldów okiennych do chorej grafiki, którą można znaleźć na Dribbble”.

Przykład niestandardowej typografii, niektóre z prostymi literami, a inne z kursywą, unikatową czcionką.
Zdjęcie od Allana Petersa Dribbble

Chcesz zacząć majstrować przy niestandardowej typografii? Rese oferuje świetne rady. „Jeśli jesteś podobny do mnie i uważasz, że niestandardowe typy są trochę zniechęcające, przejdź do starego typu, aby poćwiczyć i zainspirować się. Zauważyłem, że samo ćwiczenie i patrzenie na stary scenariusz bardzo mi pomogło. Idź do wyprzedaży garażowych i sklepów vintage, rób zdjęcia i spróbuj odtworzyć to, co widzisz!”


Uproszczone ilustracje

Uproszczone ilustracje są równowagą dwóch przeciwstawnych biegunowo projektów. Masz ogólne podejście, które zwykle jest ilustracją SVG z szeregiem ludzi z różnych środowisk wchodzących w interakcję z technologią z kolorową plamą koloru zakotwiczającą scenę. Z drugiej strony masz coś, co wydaje się być bardzo luźną, ręcznie rysowaną ilustracją, która jest znacznie bardziej abstrakcyjna i interpretacyjna w swoim wykonaniu.

Zrzut ekranu strony głównej Mailchimp z prostą czarną ilustracją na żółtym tle
Zrzut ekranu strony głównej Mailchimp

Bryan North, wewnętrzny grafik firmy Flywheel, uważa, że ​​w tym roku jest to trend w projektowaniu z jednego ważnego powodu: „przy dobrym wykonaniu wywołuje bardzo ludzkie/bardzo przystępne uczucie”.

W przypadku większości trendów projektowych trudno jest określić, skąd pochodzi oryginał, niezależnie od tego, czy jest to firma, marka, czy konkretny grafik. Bryan uważa jednak, że przeprojektowanie Mailchimp w 2019 roku odegrało ogromną rolę w tym trendzie. „Wygląda na to, że obecnie wiele marek goni za estetyką Mailchimp”.

Zrzut ekranu strony głównej Mailchimp z prostszymi czarnymi ilustracjami.
Zrzut ekranu strony głównej Mailchimp

„To, co podoba mi się w tym trendzie, to to, że wiele osób (którzy generalnie uważaliby się przede wszystkim za grafików) testujących swój zapał do ilustracji, które w przeciwnym razie prawdopodobnie byłyby przez nią onieśmielone. Z tego przedsięwzięcia narodziło się wiele wspaniałych ilustracji, a także kilka naprawdę złych”.


Fotografia z grafiką

Fotografia + grafika = zapałka zrobiona w niebie.

To może trochę przesadzać, ale zarówno projektanci, jak i fotografowie przyjmują ten trend i wykorzystują go do wyświetlania własnych prac. Robienie zdjęć i przenoszenie ich na nowy poziom poprzez dodawanie animacji i grafiki to trend, który przyjęliśmy nawet my w Flywheel.

Kimberly, wewnętrzna fotografka Flywheel, uwielbia pomysł przeniesienia swoich zdjęć w nowy wymiar za pomocą grafiki. „Współpraca z projektantami z naszego zespołu jest ekscytująca, aby upewnić się, że efekt końcowy jest najlepszy, jak tylko może być. Trochę dodatkowego planowania połączonego z poprawą wizerunku za pomocą projektu oznacza w końcu jeszcze bardziej celowy produkt końcowy”.

Zrzut ekranu artykułu na naszym blogu, przedstawiający siedzącego Flywheelera z grafiką i szkicami za nią.
Zrzut ekranu artykułu na naszym blogu Layout

Niezależnie od tego, czy jest to nasz blog, czy raporty, uwielbiamy przekształcać obrazy za pomocą dodanych animacji i grafik. Ten projekt przyciąga wzrok i jest obowiązkowy w Twojej pracy projektowej w tym czy innym momencie.

Wizerunek osoby siedzącej i piszącej z nakładką graficzną z wykresem i napisem „80% projektantów stron internetowych wymaga wpłaty na większość projektów”
Obraz z raportu o biznesie projektowania stron internetowych

Wniosek

Chociaż wiedza o trendach w projektowaniu i sposobie ich wdrożenia w swojej pracy jest ważna, należy również pamiętać, że tylko dlatego, że styl lub wzór jest popularny, nie oznacza, że ​​będzie to właściwe rozwiązanie Twojego problemu.

„Zadaniem projektanta jest rozwiązywanie problemów. Eksploruj, odkrywaj, obserwuj i ucz się od tego, co robią inni projektanci, a następnie zdecyduj, jakie faktycznie jest najlepsze rozwiązanie Twojego problemu. Może to być jeden z tych wzorców lub może to być coś zupełnie unikalnego dla twojego procesu projektowania.” —Nicholas Petersen, dyrektor artystyczny koła zamachowego

„Jednym z trendów, który nigdy nie wyjdzie z mody, jest oryginalność. Im więcej tworzysz, tym więcej znajdziesz tego, co Ci odpowiada, a potem staniesz się w tym naprawdę dobry. W końcu coś oryginalnego, co zrobisz, wyznaczy nowe trendy! ”

Raport z projektowania stron internetowych

Poprosiliśmy 1000 czołowych freelancerów, agencji i twórców kreatywnych o najlepsze sposoby tworzenia stron internetowych, struktury usług dla klientów i otrzymywania płatności (w pełnej wysokości!) na czas. Stamtąd przeanalizowaliśmy liczby, zagłębiliśmy się w spostrzeżenia i przygotowaliśmy piękny raport, dzięki czemu możesz przestać zgadywać i zacząć skalować swój biznes!

Przenieś swój biznes projektowania stron internetowych na zupełnie nowy poziom, począwszy od tego miesiąca. Uzyskaj informacje od innych firm projektowych, takich jak Twoja, i zacznij konkurencyjnie pobierać opłaty za swoje usługi!