10 nowatorskich zastosowań 3D w projektowaniu stron internetowych

Do 3D czy nie do 3D? To jest pytanie, które musimy sobie zadać.

Technologia i projektowanie 3D stały się ugruntowaną częścią naszego życia. Znajduje się w filmach, grach, programach telewizyjnych, smartfonach, drukarkach, AR i VR.

Ale czy ma to miejsce w projektowaniu stron internetowych? A jeśli tak, to w jakim stopniu? Czy stworzylibyśmy stronę internetową całkowicie w 3D? Prawdopodobnie nie.

Po pierwsze, większość stron internetowych nie powinna sprawiać wrażenia wciągających światów, w których można się zgubić. Jeśli celem jest skłonienie odwiedzających do podjęcia działań, musisz zaprojektować dla nich prostą podróż.

Jest też sprawa wydajności. Telewizor może nie zostać przeciążony przez 3D, ale może odbić się na hostingu — zwłaszcza jeśli rendery 3D są generowane przez zewnętrzną wtyczkę lub interfejs API. A według ostatnich danych liczy się każdy ułamek sekundy, jeśli chodzi o odwiedzających.

Ale to nie znaczy, że 3D nie ma miejsca w projektowaniu stron internetowych. W rzeczywistości jest wiele do zrobienia z 3D i mnóstwo różnych kierunków.

Przyjrzyjmy się, jakie rodzaje 3D najlepiej nadają się do internetu, jak z nimi pracować, a następnie spójrzmy na 10 niesamowitych przykładów witryn internetowych, które dzisiaj używają 3D.

Wszystkie projektowanie stron internetowych w 3D polega na tym, że umieszczamy obiekty wzdłuż osi X, Y i Z.

Najczęstszą interpretacją projektowania 3D jest to, co widzimy na stronie Apple:

Style iPhone'a 12 na tym obrazie bohatera istnieją w trzech wymiarach. Grafika nie porusza się, a mimo to nadal widzimy, że mają głębię.

To powiedziawszy, obraz bohatera na stronie Richarda Sancho jest również tym, jak wygląda projektowanie stron internetowych 3D:

Brak widocznych obiektów 3D. Jednak jasne jest, że pływające (i interaktywne) kolorowe kule za tekstem poruszają się po innej płaszczyźnie (lub płaszczyznach).

Tak więc, w przeciwieństwie do projektowania stron internetowych 2D, w którym projekty i obiekty są szersze lub wyższe, projektowanie stron internetowych 3D pozwala na dodawanie do nich głębi, a także przesuwanie ich do tyłu i do przodu.

W latach 50. i 60. opracowano szereg programów komputerowych umożliwiających modelowanie komputerowe 3D. Oprogramowanie Robot Draftsman firmy Ivan Sutherland, znane również jako Sketchpad, było pierwszym, które korzystało z graficznego interfejsu użytkownika (GUI) i stało się pionierem w zakresie projektowania wspomaganego komputerowo (CAD).

Chociaż CAD jest obecnie używany głównie do tworzenia renderów 3D takich rzeczy jak budynki, produkty i inne obiekty fizyczne, łatwo jest zobaczyć, jak te wcześniejsze technologie utorowały drogę do nowoczesnego projektowania stron internetowych 3D.

Jednym z powodów, dla których nie widzieliśmy dominujących list 3D w trendach projektowania stron internetowych, jest to, że tworzenie nie zawsze było takie łatwe.

1994 — wprowadzenie języka znaczników wirtualnej rzeczywistości (VRML)

VRML pojawił się na rynku już w pierwszych dniach Internetu. Jest to format pliku określany również jako „świat” (.wrl), który umożliwia projektantom tworzenie obiektów i scen 3D.

1997 — Błysk pojawia się na obrazie

Aby włączyć grafikę i animacje Flash 3D na stronie internetowej, programista musiał uzyskać licencję na oprogramowanie Flash, zakodować je za pomocą ActionScript, a następnie osadzić na stronie. Zajęło to dużo pracy, a także poważnie wpłynęło na czas ładowania strony internetowej, szczególnie w dni dial-up.

2001 — X3D zostaje następcą VRML

Obecnie X3D jest otwartym standardem bez tantiem utrzymywanym przez konsorcjum Web3D. Może być używany do różnych aplikacji 3D: CAD, wizualizacji geoprzestrzennej, animacji człowieka, AR, VR, drukowania 3D, szkoleń medycznych i oczywiście projektowania stron internetowych. Co więcej, nie jest zależny od wtyczki do uruchomienia w przeglądarce.

2010 — Skeuomorfizm zyskuje na popularności

Skeuomorfizm był trendem projektowym używanym do tego, aby interfejsy i/lub ich elementy wyglądały jak rzeczywiste obiekty, na których zostały oparte. Ten trend nie trwał długo, ponieważ nie zapewniał wielu dodatkowych korzyści poza fajnym wyglądem. W rezultacie płaskie projektowanie zdominowało trendy w projektowaniu stron internetowych przez kilka następnych lat.

2011 — wprowadzenie WebGL

WebGL to bezpłatny interfejs API, który umożliwia projektantom i programistom tworzenie grafiki 3D, która działa w większości nowoczesnych przeglądarek internetowych. Jedyny problem z WebGL polega na tym, że jest trudny w użyciu. Aby zaprogramować grafikę 3D, musisz używać JavaScript, Java lub Objective C wraz z GLSL.

2012 — opublikowano artykuł NYT Snow Fall

Projektowanie stron internetowych paralaksy od dawna było używane w projektowaniu gier wideo. Jednak dopiero w 2012 roku, kiedy New York Times opublikował swój multimedialny artykuł Snow Fall, naprawdę zaczęliśmy widzieć, jak sztuczny efekt przewijania 3D zapanował w sieci.

2014 — Google rozwija swój system Material Design

Material Design powstał z wielu powodów. Jednym z jego największych wkładów w projektowanie stron internetowych było jednak to, że nadało stronie głębię i dotyk, co pomogło poprawić użyteczność. Chociaż system projektowania miał swoje problemy, pozostawił trwałe wrażenie w świecie projektowania stron internetowych, a jego fragmenty można nadal zobaczyć w warstwie i cieniowaniu płaskiego projektowania 2.0.

2021 — Wybierz swoją truciznę

Obecnie dostępnych jest wiele aplikacji, które umożliwiają projektantom stron internetowych tworzenie niestandardowych i złożonych projektów 3D:

• AutoCAD
• mikser
• SketchUp
• Vectary

Istnieje również wiele technologii AR i VR, których można użyć do tworzenia renderów 3D dla tych konkretnych przypadków użycia.

Jeśli nie próbujesz tworzyć całych światów 3D, rozważ użycie narzędzi Elementor's Style, aby dodać głębi do komponentów witryny i efektów ruchu, aby ożywić swoje projekty.

Trendy w projektowaniu przychodzą i odchodzą. Musisz więc zadać sobie pytanie – czy 3D jest techniką projektowania lub trendem, w który warto zainwestować?

Oto kilka powodów, dla których możesz chcieć zacząć używać go w swojej pracy:

Gdy większość witryn jest płaska, witryna z funkcjami 3D natychmiast się wyróżni.

Tylko upewnij się, że jest to zrobione w dobrym guście i zgodnie z zasadami projektowania stron internetowych. Jeśli sceny lub obiekty 3D nie mają znaczenia i są używane tylko jako chwyt mający na celu przyciągnięcie uwagi, sprawią, że Twoja witryna będzie się wyróżniać — tylko z niewłaściwych powodów.

Istnieją różne sposoby wykorzystania 3D w projektowaniu stron internetowych. Na przykład:

• Aby stworzyć wciągające wrażenia odwiedzających świat, gdy po raz pierwszy wchodzą na stronę
• Aby ożywić najważniejsze grafiki
• Aby zapewnić odwiedzającym bardziej rozbudowane przewodniki lub 360-stopniowe widoki produktów

Przenosząc odpowiednie elementy projektu strony internetowej na trzecią płaszczyznę, stworzysz bardziej angażujące wrażenia dla odwiedzających.

Nasze zmysły są ściśle związane z naszymi emocjami, podobnie jak zmysł dotyku. Chociaż odwiedzający oczywiście nie mogą fizycznie dotknąć strony internetowej 3D, zapewnia ona jednak wrażenie dotykowe, którego nie może zapewnić płaska konstrukcja.

Ponieważ dotyk często pomaga ludziom czuć się bardziej związanymi z innymi i pogłębia ich doświadczenia ze światem, możemy postawić hipotezę, że interakcja z elementami 3D na stronie internetowej może również zbliżyć odwiedzających do marki. Nawet jeśli tak nie jest, dotykowy charakter projektu pozostawi na nich trwałe wrażenie.

Projektowanie stron internetowych 3D ma mnóstwo praktycznych zastosowań. Na przykład, możesz dodać renderingi 3D produktów, właściwości i wydarzeń do strony internetowej.

Wiemy już, jak trudno jest konsumentom kupić niektóre drogie artykuły online bez uprzedniego zobaczenia ich osobiście. Dodając ich realistyczne rendery do witryny, możesz sprawić, że ich proces decyzyjny będzie przebiegał znacznie szybciej i sprawniej. A dzięki bardziej pewnym siebie i zadowolonym kupującym prawdopodobnie uzyskasz dzięki temu więcej konwersji.

Nawet jeśli projektowanie 3D nie jest obecnie dostępne w całej sieci, jest to zdecydowanie opłacalny trend, jeśli znajdziesz odpowiedni sposób na wykonanie go na stronie internetowej swojego klienta.

Jeśli szukasz inspiracji, zapoznaj się z poniższymi kreatywnymi przykładami 3D w projektowaniu stron internetowych. Kiedy skończysz, przejdź do naszego animowanego podsumowania strony internetowej. Nie wszystkie przykłady wykorzystują 3D, ale tych, których nie można przegapić!

Już po raz drugi przedstawiamy na tym blogu agencję graficzną Roberta Burgela. Po raz pierwszy pojawił się na naszej liście najlepszych portali portfolio. Tym razem to za sprawą oryginalnego wizerunku bohatera na stronie głównej.

Czarny sztandar ma wycięcia, które zawierają imię Roberta. Te litery ujawniają się tylko wtedy, gdy w tle pływają neonowe rybki. Daje to bohaterowi wrażenie, jakbyś patrzył na akwarium i jest to projekt, którego szybko nie zapomnisz.

Flux Academy to miejsce, w którym projektanci stron internetowych uczą się projektowania i doskonalą swoje umiejętności poprzez zajęcia. Chociaż strona główna zawiera szereg grafik 3D, to ta pierwsza jest najbardziej interesująca.

Gdy odwiedzający przewija stronę, wszystkie pływające ikony związane z projektem opadają w dół do głowy posągu. To naprawdę zgrabna metafora tego, o co chodzi w firmie.

Na uwagę zasługuje również fakt, że grafika 3D jest stosunkowo prosta. Płaskie ikony. Statua. Ilustrowane kule i twarze. To tylko pokazuje, że dzięki odpowiednim efektom cieniowania i ruchu możesz uzyskać bardzo interesujące wrażenia 3D.

Nie tylko agencje kreatywne mogą używać 3D. Wystarczy spojrzeć na ten obraz bohatera na stronie Dasher & Crank.

Wiele razy na stronach restauracji można zobaczyć ich potrawy i przedmioty sfotografowane z góry, co nadaje im płaski wygląd. Nawet te widziane z boku często nie mają namacalnego realizmu, ponieważ fotografowane są w kontekście czyichś dłoni, talerza lub tła restauracji.

Ale z jednolitym różowym tłem, kanapki z ciastkami z lodami wyróżniają się pięknie jako obiekty 3D – dzięki czemu wyglądają wystarczająco dobrze, aby sięgnąć i wgryźć.

Pomyśl o tym, kiedy ostatnio usiadłeś, aby przeczytać raport lub e-booka online. Przedzieranie się przez akapit po akapicie w poszukiwaniu danych, które są dla Ciebie najistotniejsze, może być bolesne. Ponadto wiele z nich jest zapisywanych jako pliki PDF, które mogą być chybione.

Ale raport Contry The State of Independence 2021 jest doskonałym przykładem tego, jak 3D może zmienić czytanie i doświadczenie edukacyjne, jeśli użyjesz go w wystarczającej ilości.

W całym tekście znajdują się małe dawki obiektów 3D — takich jak plamy i monety. Jednak większość renderów 3D służy do przedstawiania wizualizacji danych i cytatów freelancerów w całym raporcie.

Apple nie jest jedyną firmą produkującą smartfony, która korzysta z technologii 3D, aby zwrócić uwagę na swoje produkty. Strona docelowa Samsunga dla Galaxy Z Fold ożywia produkt od chwili, gdy ktoś wchodzi na stronę.

Zwróć uwagę, że grafika na pierwszej stronie ładowania jest obracającą się ilustracją 3D telefonu. Gdy wejdą do witryny, odwiedzający zobaczą rzeczywisty telefon pod każdym kątem, a także to, jak wygląda, gdy się otwiera i zamyka.

Klienci zastanawiający się, jak mógłby wyglądać składany smartfon, nie będą musieli iść do sklepu, aby się przekonać, ponieważ rendery 3D świetnie je reprezentują.

British Museum nawiązało współpracę z Google Cultural Institute, aby stworzyć tę mikrowitrynę dla Muzeum Świata. Został zaprojektowany przy użyciu WebGL przez WEIR+WONG i jest naprawdę wyjątkowym sposobem wizualnego projektowania osi czasu i umieszczania w niej wielu danych.

Muzeum nadal ma swoją stałą stronę internetową, na której zwiedzający mogą dowiedzieć się więcej o swoich kolekcjach i eksponatach. Jednak zamiast pokazywać przedmioty z ich kolekcji na stronie internetowej, ta oś czasu 3D umieszcza je w kategorii i ramach czasowych, z których pochodzą.

Zamiast pozostawiać odwiedzającym pasywne śledzenie na osi czasu lub przeglądanie ekwipunku, taka reprezentacja 3D zamienia ją w bardziej aktywne doświadczenie.

Czekolada KITKAT to zabawna i wciągająca strona internetowa 3D. I to zupełnie inaczej niż na innych stronach KITKAT. Dlaczego? Cóż, to nie jest strona dla osób, które chcą dowiedzieć się więcej o marce KITKAT i jej produktach.

Brazylijscy klienci, którzy kochają produkty KITKAT, są zaproszeni do odkrywania i zamawiania najnowszych czekoladek firmy cukierkowej. Mogą również spersonalizować opakowania swoich produktów własnymi zdjęciami.

Taka marka i doświadczenie zasługują na wyjątkowy świat 3D.

Od samego początku jest oczywiste, że mamy podążać za ilustracją i odręcznym szkicem kapsułki z kawą spadającej na stronę Capsul'in Zero Impact. To genialny obraz 3D stworzony przez projektantów z Indexu.

Najpierw widzimy to jako ilustrowaną kapsułkę kawy. Niedługo potem projektantka pozbawia go oznaczeń i ostatecznie analizuje każdą z jego odrębnych części. Zamiast używać kapsuły 3D jako efekciarskiej opcji projektowej, jej wygląd zmienia się w miarę ujawniania historii produktu i specyfikacji na całej stronie.

TAG Heuer to marka znana ze stylowych zegarków. Chociaż istnieje wiele sposobów, aby strona internetowa wyglądała elegancko i elegancko, nic nie przebije pokazania swoich produktów w całej okazałości w 3D. I to właśnie robi tutaj TAG Heuer.

Na tych zdjęciach widzimy piękne zegarki oprawione na surowe, białe i czarne tło. W niektórych przypadkach to tylko zdjęcie zegarka. W innych występuje lekki efekt paralaksy. Zdarzają się również sytuacje, w których widzimy zegarek w ruchu, na przykład gdy zapięcie otwiera się i zamyka.

To nie jest technika 3D, z której mogą korzystać tylko luksusowe marki. Mniejsze marki mogą wykorzystywać wizualizacje produktów 3D, aby skuteczniej sprzedawać swoje produkty również online.

To, co zrobiła Mazda, jest bardzo podobne do tego, co robią firmy e-commerce, zmieniając kolory zdjęć produktów na podstawie wyborów klientów. To powiedziawszy, Mazda nie tylko umożliwia klientom zobaczenie ich dostosowań na modelu 2D.

Ten rendering 3D pozwala klientom poruszać się po zewnątrz pojazdu, a także obracać się po jego wnętrzu, aby przyjrzeć się bliżej modelowi i temu, jak wpływają na niego wybrane przez nich kolory.

Za każdym razem, gdy masz witrynę sprzedającą drogi produkt lub nawet taką, w której klient naprawdę musi ją wypróbować przed zakupem, takie narzędzie do zakupów 3D będzie ogromnym atutem.

Nie ma znaczenia, jak duże lub małe są Twoje projekty 3D. Najważniejszą rzeczą, o której należy pamiętać podczas korzystania z 3D w projektowaniu stron internetowych, jest to, że poprawia to wrażenia. Chcesz, aby odwiedzający byli zachwyceni tym, co zobaczyli, i nie zastanawiali się, dlaczego spędzili minuty oglądając animację 3D tylko po to, by zdać sobie sprawę, że ważne rzeczy znajdują się w witrynie.

Pamiętaj też, jak 3D wpływa na wydajność Twoich witryn. Jeśli odwiedzający będą musieli poczekać dłużej niż kilka sekund, aż strona internetowa załaduje całą twoją pracę 3D, mogą jej nigdy nie zobaczyć.

To powiedziawszy, widzieliśmy dzisiaj kilka niesamowitych przykładów projektowania stron internetowych 3D. Czerp inspirację z tego, co zrobili, a powinieneś być w stanie wymyślić coś naprawdę wspaniałego dla swoich klientów oraz użytecznego i rozrywkowego dla ich gości.