10 interaktywnych stron internetowych inspiracji
Opublikowany: 2020-07-06Jako projektant interfejsu użytkownika potrzeba dużo ciężkiej pracy, aby zaprojektować interaktywną i przyjemną dla oka witrynę internetową, a także osiągnąć cel witryny. Jednak przy projektowaniu niektórych stron często schodzi na dalszy plan kreatywność i czytelność strony, a strony wyglądają tak, jakby były mało interaktywne. Strony internetowe powinny mieć taki projekt, aby odwiedzający chciał odwiedzać Twoją witrynę częściej, tylko po to, aby doświadczyć przyjemności korzystania z witryny i interakcji ze stronami internetowymi.
Dawno minęły czasy, kiedy użytkownicy korzystali z prostych stron internetowych, które osiągały więcej. Teraz celem jest skłonienie użytkownika do korzystania z witryny poprzez zwiększenie interakcji i utrzymanie zaangażowania. Twoja witryna jest atutem Twojej organizacji, jeśli użytkownik będzie wracał w przyszłości, aby uzyskać więcej interakcji z Twoją witryną.
Na tym blogu przyjrzymy się takim stronom internetowym, które są interaktywne i mają nieszablonową kreatywność.
1. Cyklon:
Cyclemon to strona internetowa z różnymi projektami rowerów, które możesz zamówić i jeździć. Ta strona internetowa wykorzystuje przewijanie, aby rzucić okiem na ich produkty. Musisz tylko przewijać, aby zobaczyć wszystkie projekty produktów. Slogan firmy mówi: „Jesteś tym, czym jeździsz!” A to sprawia, że użytkownik przewija na sam dół strony, aby znaleźć odpowiedni dla siebie projekt roweru. Dlatego zmuszasz użytkownika do przewijania, aż pojawią się wszystkie modele.
Możesz zamówić rower, który Twoim zdaniem pasuje do Twojej osobowości. W projekcie zastosowała ludzką psychologię. Witryna zawiera wszystkie modele i sprawiają, że przewijasz, aż „poczujesz”, że znalazłeś model, który Ci odpowiada.
2. Alex Buga:
Alex Buga jest projektantem z Bukaresztu w Rumunii i ma swoją stronę internetową, która działa jako jego portfolio. Po otwarciu strony indeksu witryny zaprojektował kafelki na ekranie, na których poszczególne kafelki zawierają zrobione przez niego obrazy, a niektóre kafelki zawierają linki wideo YouTube. Oprócz projektowania stron internetowych jest także fotografem i muzykiem.
Pracował jako dyrektor kreatywny w MB Dragan, który ma bogate, siedmioletnie doświadczenie zawodowe w projektowaniu stron internetowych. Stworzona przez niego strona internetowa ma nieszablonowy projekt.
3. Evans Halshaw – Bond Cars:
Evans Halshaw to portal samochodów nowych i używanych. Pracowali w 130 lokalizacjach w Anglii, Szkocji i Walii. Ich strona internetowa jest podobna do strony internetowej Cyclemon. Różnica polega na tym, że używali różnych modeli samochodów, które były obecne w filmach o Jamesie Bondzie. Każdy obraz ma rok, model samochodu i tytuł filmu, w którym się pojawia. Przewijając stronę główną w dół, zobaczysz różne pojazdy, które oddalają się od poprzedniego obrazu.
Projekt zapewni rozrywkę miłośnikowi samochodów przez kilka chwil. Oprócz tego fanatyk filmów o Jamesie Bondzie będzie przewijał stronę internetową, aby zobaczyć wszystkie samochody użyte w filmach o Bondzie. Wraz ze zdjęciami mają krótki opis na podstawie filmu, w prawym dolnym rogu ekranu dla każdego samochodu.
4. Graj w kropki:
Ta strona jest najbardziej interaktywna dla graczy. Zawiera grę polegającą na łączeniu kropek z ich numerów w kolejności malejącej. Korzysta z timera. Musisz połączyć podane kropki w określonym oknie czasowym i przechodzi do następnej gry. To z pewnością sprawi, że będziesz zajęty i może okazać się ulubieńcem dzieci.
Poziom interakcji z tą stroną jest najwyższy, ponieważ wszyscy mamy obsesję na punkcie łączenia ponumerowanych kropek w kolejności malejącej. Interfejs jest prosty, ale może Cię angażować przez wiele godzin.
5. Pozbądź się moich nawyków:
Kick My Habits to strona internetowa, która pomaga obliczyć wydatki na niektóre rzeczy, takie jak zestawy kosmetyczne, jedzenie poza domem, palenie, picie alkoholu i imprezowanie. Informuje, ile pieniędzy przeznacza się na te złe nawyki rocznie, a wszystko to w bardzo interaktywny sposób.
Pyta Cię o to, ile pieniędzy przeznacza się na złe nawyki tygodniowo. Kiedy już nakarmisz wszystkie dane dla jednego ćwiczenia, przeniesie cię to do następnego wzorca. Możesz wybrać „Nie mam tego nawyku”, jeśli nie masz tego nawyku. Po przeanalizowaniu każdej praktyki, dla której podajesz dane, sprawdza, ile pieniędzy wydajesz w ciągu roku na ściganie tych nawyków. Każdy może co roku obliczyć nakłady, w które inwestuje. Najpiękniejszy design ma jednak interaktywny interfejs użytkownika serwisu, który ma tutaj największe znaczenie. W końcu pokazuje Twoje całkowite oszczędności roczne i tygodniowe, wraz z kwotą, która pojawi się po wpłaceniu tych pieniędzy na konto bankowe.
6. Usługa:
Zervice to grupa z kilkoma różnymi markami franczyzowymi, które wiodą prym. Jest to inteligentny i kreatywny projekt strony internetowej, która była jedną z najczęściej nagradzanych stron internetowych. Serwis zaczyna się od podróżowania po mieście. Witryna wykorzystała zdjęcia i ścieżkę SVG, po której porusza się pojazd. Chmury sprawiają wrażenie interakcji, takich jak quizy i pytania. Witryna wygląda jak model 3D, gdy samochód przejeżdża nad i pod niektórymi aspektami witryny.
Strona otwiera się z dymkiem myśli, wiadomością powitalną i widokiem na miasto. Posiada również przycisk „Go”, który prowadzi pojazd do następnego punktu. Kolejny ekran to wyrafinowany ekran z pływającym namiotem i budynkiem, przez który przejeżdża samochód. Dzięki kilku przystankom i quizom wraz z nimi poznasz usługi Zervice. Kręte drogi, budowa, a najlepsza część to jadący pociąg, pod którym jedzie pojazd, to widok. Nawet jeśli nie musisz znać ich usług, powinieneś odwiedzić go raz, aby zapoznać się z powyższym opisem.
7. Przyszłość współdzielenia samochodów:
Ta strona mówi o dzieleniu się samochodem, a nie kupowaniu go. Ta strona jest bardzo interaktywna w inny sposób. Gdy lądujesz na stronie głównej witryny, widzisz zielony samochód, który może poruszać się do przodu i do tyłu, naciskając klawisze strzałek w lewo i w prawo. Strona docelowa pokazuje rodzaj współdzielenia samochodów i jego statystyki. Gdy naciśniesz prawy klawisz, samochód zacznie jechać do przodu w prawą stronę, gdzie pojawia się klasyfikacja car-sharingu i jego opis.
Pierwsza klasyfikacja to P2P, co oznacza koncepcję współdzielenia samochodów w sieci peer-to-peer. Określa grupę samochodów należących do określonej liczby osób. Ci właściciele samochodów wynajmują samochody kierowcom. Kolejną kategorią jest B2C, czyli Business-to-Consumers. Tutaj firma posiada zestaw samochodów, którymi dzielą się z członkami firmy. Obejmują one producentów samochodów, wypożyczalnie i marki współdzielenia samochodów. Trzecia kategoria to NFP, co oznacza Not-for-Profit. Społeczność lokalna udostępnia samochód, aby zmienić nawyki kierowcy, zamiast wynajmować samochód, aby zarobić na nim.
Gdy płyniemy dalej, zielony samochód wydaje się jechać przez góry, mimo że droga wydaje się liniowa. Następnie zielony samochód zaczyna przejeżdżać przez most, przejeżdżając przez ogromną stertę śmieci, a następnie przecinając słup z flagą USA. Na stronie znajduje się mocna grafika i użytkownik może zrobić wiele rzeczy, aby je zbadać. Na przykład, gdy najedziesz myszką na wieżę, zobaczysz, że kursor myszy zmienia się w dłoń, co sugeruje, że jest to hiperłącze.
Podczas dalszej nawigacji po stronie widzisz unoszące się chmury i szympansa zawieszonego na wieży. Gdy najedziesz myszką na flagi kraju, zobaczysz świetne opcje współdzielenia samochodów. Idąc dalej, odkryjesz, że coraz więcej miast i stanów zdecydowało się na opcje wspólnego korzystania z samochodu. Strona została zaprojektowana w taki sposób, że trzeba przewijać ekran w poziomie, co pokazuje różne fakty w postaci animacji.
8. Robby Leonardi:
Robby Leonardi jest grafikiem, który oferuje wiedzę z zakresu projektowania graficznego, ilustracji, animacji i programowania front-end. Posiada duże doświadczenie w pracy z branżą rozrywkową. Stworzył tę stronę internetową, aby w bardzo kreatywny sposób zaprezentować swoje CV.
Ta witryna jest podobna do witryn Future of Car Sharing i przewija się w poziomie, ale pasek przewijania na stronie jest pionowy. Możesz poruszać się po witrynie za pomocą klawiszy strzałek w górę i w dół. Kiedy naciśniesz strzałkę w dół, facet w okularach w pelerynie zaczyna biec. Pierwsza sekcja, którą napotkasz, to sekcja „O programie”, w której znajdują się cztery pola Projekt, Ilustracja, Kod i Animacja. I pokazuje swój poziom wiedzy przez kwiaty kwitnące zgodnie z poziomami. Na przykład ma doświadczenie w projektowaniu, a następnie kwitnienie kwiatów będzie sięgać, aż osiągnie linię „Ekspert”, co pokazuje, że jest w tym ekspertem.
Kiedy idziesz dalej, facet przeskakuje przeszkodę i pokazuje, że pracuje i mieszka w Nowym Jorku, gdzie wieże i Statua Wolności pokazują siedzącego w nich demona. Idąc dalej, facet ponownie przeskakuje przez przeszkodę i pokazuje, że jest fanem drużyny piłkarskiej NBA. Tutaj gracz wydaje się podchodzić i rzucać piłką do koszykówki przez siatkę.
Idąc dalej, napotkasz sekcję umiejętności, w której liczby ryb określają poziom wiedzy, jaką posiada, w każdej sekcji. W tej samej części znajduje się inny podrozdział, w którym podkreśla swoje doświadczenie w językach programowania, gdzie kraby pokazują jego poziom wiedzy.
Co więcej, następny podrozdział dotyczy jego wiedzy w zakresie oprogramowania wideo i 3D, gdzie żółwie pokazują jego poziom wiedzy w każdej dziedzinie. Dalej jest sekcja, w której podkreśla swoje doświadczenie zawodowe w postaci ośmiornicy i innych pojazdów wodnych. W przedostatnim dziale pokazane są jego nagrody i publikacje, które otrzymał do tej pory w postaci etykiet. Facet wskakuje do spadochronu i leci za znacznikami, które określają jego nagrody, podczas gdy on kontynuuje latanie. W trakcie lotu dochodzisz do końca strony, gdzie podajesz swoje dane kontaktowe i wysyłasz mu wiadomość.
9. Polski przewodnik bożonarodzeniowy:
Polish Christmas Guide to strona internetowa, która pomaga osobom w każdym wieku dowiedzieć się o polskich świętach Bożego Narodzenia i jak je obchodzi się każdego roku. Zaczyna się od uroczego Świętego Mikołaja z saniami do przewożenia rzeczy, których potrzebuje do świętowania Bożego Narodzenia w Polsce. Dzieciom spodobałaby się ta strona internetowa, ponieważ Mikołaj zbiera przedmioty w swoich saniach, prezentując fakty i informacje o zebranych rzeczach i innych rzeczach.
Święta Bożego Narodzenia w Polsce to tradycja wysyłania i otrzymywania od siebie prezentów. Utrzymuje również kulturę dzielenia się posiłkiem z innymi osobami, które mogą odwiedzić Cię bez uprzedzenia w Wigilię. Ta strona opiera się na ilustracji i podkładach muzycznych. Podczas przeglądania witryny wrażenia przypominają grę w grę.
Na końcu strony znajduje się komunikat, który szerzy świadomość na temat maltretowanych dzieci i ich powołania do pomocy tym dzieciom i ich ochrony.
10. Wspinacz:
Wspinacz opracował swoją interaktywną stronę internetową, która zawiera wszystkie informacje o kreatywnej firmie, zwanej Interactive Production Company, która produkuje niektóre z fantastycznych produktów cyfrowych i doświadczeń użytkowników. Rozpoczyna się unikalnym motywem opartym na lasach i lasach. Dzięki różnym elementom, które pozwalają na interakcję z nimi, możesz w bardzo kreatywny sposób przeglądać ich portfolio. Pokazuje swoje projekty projektowe w postaci różnych animacji poprzez przewijanie i zwykłe kliknięcie myszką.
Na jednym z ekranów tekst pojawia się po najechaniu myszką, co jest widokiem do zobaczenia. Kiedy ekran się zmienia, rozpada się na różne kwadraty, spada z ekranu i pozwala przejść na inny ekran. Jeśli chcesz zbudować stronę internetową dla swojej firmy bez względu na to, czym się ona zajmuje, powinieneś zainspirować się grafiką inspirowaną stroną Climber.
Wniosek:
To nasza reprezentacja stron internetowych inspiruje grafika do wydobycia swojej kreatywności i pokazania się z jak najlepszej strony podczas projektowania strony internetowej. Tego typu strony internetowe są nie tylko wspaniałym widokiem, ale także pomagają właścicielowi witryny utrzymać zaangażowanie i zaintrygowanie odwiedzających. Jak wspomniano powyżej, we wszystkich witrynach jest tak wiele pomysłów na projekt, które można zastosować. Należą do nich animacje, ekran gry, kreskówki i inne, z których możesz czerpać pomysły.