Trendy w modzie w projektowaniu stron internetowych. Rosnące znaczenie stron docelowych
W dobie rozwoju technologii informatycznych nie można stać z boku i przyglądać się temu, co się dzieje. Musisz być tym, co się dzieje. Aby nie być outsiderem, trzeba czerpać wiedzę ze wszystkich możliwych i niemożliwych źródeł i bądź na bieżąco ze wszystkimi wydarzeniami. Rok 2016 dobiega końca, co oznacza, że rok 2017 już tuż tuż i wniesie coś nowego w dziedzinie tworzenia stron internetowych. A co dokładnie, przeczytasz w tym artykule!
Nie bądź outsiderem, idź z duchem czasu.
Boty
Proste strony internetowe nie są już tak popularne, stają się coraz bardziej interaktywne, w dodatku po pewnym czasie nasze życie w Internecie zostanie na tyle uproszczona dzięki różnym interaktywnym podpowiedziom, że nie będziemy musieli w ogóle wysilać mózgu. Boty są obecnie powszechnie stosowane, a to dopiero początek. Każdy zna aplikację Slack do komunikacji korporacyjnej, tam też można znaleźć bota, który Cię wita, pyta o Twoje imię i od razu wstawia je do Twojego profilu. Boty pojawiają się w wielu innych narzędziach i aplikacjach, rozpoczynając erę asystentów online.
Interfejs ruchu
Animacja, wideo, GIF-y od dawna stały się naszą codziennością, wszystko jest tak żywe i atrakcyjne, czego jeszcze potrzebuje użytkownik? Są szeroko stosowane do szybkiego Tworzenie CSS przejścia i animacje, aby zapewnić łatwość użytkowania. Ostatnia wersja Motion UI wyposażony jest w elastyczny system obsługi grup animacji Szablony CSS, które mają rozszerzone możliwości pełnego przejścia i są w stanie pracować ze wszystkimi typami animacji Biblioteki JavaScriptu. Jesteśmy więcej niż pewni, że mobilność całkowicie zastąpi użytkowanie obrazy statyczne.
Zdolność adaptacji
Mobile First to hasło naszych czasów, każdego dnia każdy człowiek choć raz (nie mówiąc już o tych uzależnionych, którzy tak naprawdę żyją z telefonem w rękach) szuka informacji w Internecie, wysyła wiadomości czy wykonuje połączenia, dlatego ich używanie powinno być tak wygodne, jak to możliwe. Jeśli jesteś właścicielem strony internetowej i nadal nie słyszałeś o responsywności, czas chwycić się za nogi i wdrożyć ją , aby zapewnić sobie potencjalny klient komfort korzystania z Twojej witryny. Jak być może już zauważyłeś, jest to prawdziwy must-have w świecie projektowania i tworzenia stron internetowych, a ponadto pomoże Ci zaoszczędzić na tworzeniu aplikacji mobilnych.
Witryna jednostronicowa
Czy dezorientują Cię strony z mnóstwem stron, na których jest tak dużo wszystkiego i wszystko jest tak niezrozumiałe? Nie martw się, era witryn jednostronicowych jest tuż za rogiem. Strony tego typu cieszą się dużą popularnością wśród dużych firm, są wygodniejsze w użyciu i łatwiej jest znaleźć potrzebne informacje użytkownikowi, który odwiedził witrynę w konkretnym celu.
JavaScript zyskuje obecnie na popularności
JavaScript jest przyszłością, pomimo plotek, że ma wady i słabe strony. Nikt nie kwestionuje, że rzeczywiście istnieją, ale co jest idealne na tym świecie? Nawet Mac OS używa JS w swoim sprzęt komputerowy. Co więcej, jego biblioteki front-endowe, takie jak Angular, Node, React, podobnie jak inne mniejsze biblioteki, szybko zyskują na popularności.
Nic dziwnego, że JavaScript stał się integralną częścią standardowego stosu tworzenia stron internetowych, wraz z HTML i CSS. I ten fakt mówi sam za siebie.
Efekt paralaksy
Efekt ten jest najczęściej używany, jednak niewiele osób wie na pewno, jak się on nazywa. W celu wyjaśnienia: Ten Najlepszym sposobem dodaj warstwy wolumetryczne do witryny , można go również wykorzystać do dodania oszałamiającego efektu 3D.
Trendy, które zmienią świat
W tym artykule zebraliśmy wszystkie obiecujące trendy w tworzeniu stron internetowych, które natychmiast zmienią świat. Ale nie wiemy jeszcze, jakie trendy przyniesie nam rok 2017. Bądź na bieżąco nowoczesne technologie a może pewnego dnia będziesz tak zainspirowany tym, co się dzieje, że sam wymyślisz coś rewolucyjnego?
Zastanówmy się, co to znaczy być popularnym, modnym i nowoczesnym w projektowaniu stron internetowych w 2017 roku. Aby to zrobić, przyjrzyjmy się głównym trendom w projektowaniu stron internetowych. Większość z nich wędruje z roku na rok i już stała się integralną częścią budowy nowoczesnych stron internetowych. Jest to szczególnie związane z rozwojem technologie mobilne, kanały komunikacji i ulepszenia urządzeń. Na przykład trend taki jak mobilność stron internetowych stał się obowiązkowy. Komercjalizacja Internetu narzuca także projektantom i twórcom stron internetowych rygorystyczne warunki. Jednocześnie niektóre trendy słabną i tracą na popularności, choć nadal pozostają dość aktywne. Pojawiają się także modne hobby, charakterystyczne dla krótkiego okresu. Na przykład w zeszłym roku były to ikony z długim cieniem przedstawianych obiektów. W tym roku popularne stały się wzory geometryczne, my też się im przyjrzymy. A więc uporządkujmy to.
1. Mobilny, responsywny projekt
Dziś być może najważniejszy i obowiązkowy trend. Strona powinna wyglądać równie dobrze na wszystkich rozdzielczościach monitorów, laptopów, ekranów smartfony mobilne i tablety. Nawiasem mówiąc, wyszukiwarki bardzo dokładnie monitorują stopień dostosowania witryny różne urządzenia i na tej podstawie określają swoje miejsce w wynikach wyszukiwania. 
2. Aktywna typografia
Od kilku lat jeden z najpopularniejszych popularne trendy. Duże czcionki i typografia na stronie składają się z dwóch elementów. Po pierwsze estetyka - piękne linie, zaokrąglenia i napisy same w sobie są ozdobą i elementem dekoracyjnym. Po drugie, jest to funkcjonalność - użytkowanie duża czcionka potrafisz jednoznacznie i dobitnie przekazać odwiedzającemu główną ideę. 
3. Wideo panoramiczne
Naszą uwagę niewątpliwie od razu przykuwa pełnoekranowy film w tle strony. Ten dobre powitanie zainteresować gościa. Nowoczesny rozwój technologia ułatwia osadzanie wideo na stronie internetowej, co oznacza, że projektanci będą coraz częściej korzystać z tej techniki. Jest jednak jedno zastrzeżenie: oglądanie wideo jest interesujące tylko za pierwszym razem, za drugim i trzecim razem staje się nudne. Dlatego ta technika jest skuteczna tylko w przypadku nowych gości.
5. Kinografie
Dobra alternatywa dla panoramicznych filmów wideo i świetne zdjęcia w tle. Kinografie to fotografie, na których występują drobne, powtarzalne ruchy. Zazwyczaj prezentowane są w formacie GIF i dać widzowi złudzenie, że ogląda wideo. Więcej o kinografiach z duża ilość przykłady można znaleźć w wyborze 
6. Płaska konstrukcja
Kolejny mocny trend ostatnie lata. Witryny wykonane w płaski kolor dokładność i przejrzystość są nieodłączne. Ale w Ostatnio pojawił się nowy rodzaj płaskiej konstrukcji - Półpłaski. Dzieje się tak wtedy, gdy cały projekt jest wykonany w jednolitym kolorze i tylko jeden element ma cień, gradient lub teksturę. Z reguły tym elementem jest przycisk, któremu nadano głośność lub wyeksponowanie, aby przyciągnąć uwagę odwiedzających.
7. Mikrointerakcja na stronie
Teraz duże skupienie projektowanie stron internetowych koncentruje się na mikrointerakcji funkcjonalności i projektu witryny z odwiedzającym. Istotą tego jest to, że odwiedzający może wyraźnie zobaczyć wynik swojego działania na stronie, niezależnie od tego, czy jest to korekta Własne ustawienia, podążanie za linkiem, potwierdzanie operacji, interakcja z aktywnymi ikonami, przyciskami, przełącznikami, licznikami i innymi elementami.
8. Animacja obiektów
Możliwości współczesnego HTML5 i CSS3 pozwalają na wykorzystanie dużego arsenału efekty wizualne Online. Dzięki temu interakcja ze stroną jest bardziej interesująca i ekscytująca dla odwiedzającego. Zatem w nowym roku zobaczymy także najbardziej nieoczekiwane interaktywne mikroruchy obiektów, zwykle reagujące na ruch myszy. Być może zobaczymy przykłady bardziej złożonych animacji.
9. Żywe schematy kolorów
Popularne, modne kolory roku 2017 sprzyjają jasności i nasyceniu. Ciekawe, oryginalne odcienie szkarłatu, musztardy, żółci, szmaragdu, głębokiego błękitu, a także czerwieni, fioletu i czekolady sprawią, że Twoja witryna wyróżni się i nabierze własnego, niepowtarzalnego stylu. 
10. Przewijanie witryny
Ponieważ przewijanie serwisu jest idealne dla urządzeń mobilnych, jego obecność będzie znacząca w 2017 roku. Jedyną rzeczą jest to, że przewijanie nie pozostawia miejsca na interakcję użytkownika, dlatego istnieje pewne zmęczenie spowodowane niekończącym się ładowaniem treści. Być może trend zmieni się w stronę łączenia prostych elementów sterujących z przewijaniem.
11. Efekt paralaksy
Paralaksa to zmiana pozornego położenia obiektu względem odległego tła. W projektowaniu stron internetowych efekt ten jest używany podczas przewijania witryny, podczas przewijania obiektów i tła przy różnych prędkościach, co daje iluzję trójwymiarowości. Trend jest dość stabilny, dlatego strony z paralaksą będziemy widzieć nie raz.
12. Konstrukcja modułowa
Od pewnego czasu popularna jest konstrukcja modułowa, czyli interfejs karty składający się z samodzielnych bloków znaczeniowych. Ten trend jest bardzo dobry w przypadku urządzeń mobilnych, ponieważ bloki dobrze dopasowują się do dowolnej rozdzielczości ekranu. Jednak w dużych witrynach wyglądają one zupełnie tak samo i trudno je hierarchizować i strukturyzować.
13. Jednostronicowe
witryny jednostronicowe, strony docelowe strony docelowe stały się integralną częścią współczesnego Internetu. Więcej o tym, czym jest strona docelowa, przeczytasz w artykule oraz. W 2017 roku na stronach docelowych większy nacisk zostanie położony na przycisk wzywający do działania – zamów, zadzwoń, zarejestruj się itp. Wszystko inne, co odwraca uwagę potencjalnego gościa, zostanie odcięte.
14. Reklama graficzna
Chciałbym jeszcze zwrócić uwagę na jedną rzecz, którą pamiętam z minionego roku i najprawdopodobniej tendencja ta utrzyma się w roku 2017. W związku z komercjalizacją Runetu i rozwojem handlu internetowego zapotrzebowanie na graficzne materiały promocyjne do celów reklamy i promocji znacznie wzrosła - banery, zwiastuny, kartki, ulotki. 
15. Automatyzacja typowych procesów
Wszystko standardowe rozwiązania i procedury na stronie są stopniowo zastępowane procesami zautomatyzowanymi, co eliminuje konieczność komunikacji z obsługą klienta lub konsultantami online. Z tego powodu popularność rośnie różne zastosowania i rozszerzenia. Teraz możesz kupić produkt lub usługę, złożyć zamówienie, umówić się na spotkanie, zarezerwować miejsca, przelać pieniądze, wypełnić formularz lub przystąpić do testu - wszystko to można zrobić online za pomocą kilku kliknięć myszką.
16. Infografiki
Prezentacja graficzna w formie infografik jest nadal popularna i pożądana. Akompaniament tekstowy piękne zdjęcie lub ikona wraz ze stylowymi elementami projektu sprawiają, że infografika jest atrakcyjna estetycznie. Infografiki porównawcze są szczególnie przejrzyste i interesujące wizualnie – np. mogą zawierać informacje dotyczące tego, co się stało, co się stało, tak, nie, zalety i wady, zalecenia i zakazy itp. Możesz także wykorzystać infografiki, aby opowiedzieć historię krok po kroku lub obrazowo przedstawić nudne statystyki. 
17. Menu hamburgerowe
Menu hamburgera to wizualna ikona składająca się z trzech poziomych pasków, zwykle u góry w rogu strony, po kliknięciu otwiera się lub wysuwa z boku pełne menu. Wielu ekspertów przewiduje, że ten trend wygaśnie, ponieważ większość niedoświadczonych użytkowników po prostu nie rozumie przeznaczenia tej ikony. Dlatego projektanci stron internetowych preferują uproszczoną nawigację. Niemniej jednak menu hamburgerów zobaczymy więcej niż raz na nowo utworzonych witrynach.
18. Ikony
Ikony, jako sposób prezentacji informacji i narzędzie wizualizacji, były i pozostają jednym z najpopularniejszych i ulubionych trendów wśród projektantów. Wystarczy umieścić odpowiednie ikony tematyczne w pobliżu bloków z tekstem – a teraz cały tekst nabiera logicznej i wizualnej uporządkowania oraz struktury. Dlatego w nadchodzącym roku będziemy nadal aktywnie korzystać z ikon.
19. Układanie listów
Układanie liter to tekst w kwadracie. Zasadniczo jest to przykład złożonego rozwiązania kreatywnego - musisz sobie wyobrazić długi tekst w objętości maleńkiej przestrzeni. Jednocześnie powinien wyglądać pięknie i oryginalnie. W tym roku też jest modne. 
20. Pusty przycisk
Aby zaoszczędzić miejsce i przestrzeń, jakiś czas temu na urządzeniach mobilnych pojawił się pusty przycisk - duży napis z kwadratowym konturem wokół słowa. Taki przycisk daje przegląd tła znajdującego się za przyciskiem, a jednocześnie zachowuje swoją funkcjonalność jako pełnoprawnego przycisku. Ponadto jako element projektu taki przycisk wygląda stylowo i schludnie.
21. Unikaj zdjęć stockowych
Niektórzy eksperci zauważyli, że projektanci zaczynają odchodzić od zdjęć stockowych. Ponieważ nowoczesne urządzenia pozwalają szybko i sprawnie samodzielnie wykonać zdjęcie, dzięki czemu możesz uniknąć bezosobowości i jednolitości stocku i stworzyć własne wyjątkowe zdjęcie i stwórz swój własny, niepowtarzalny projekt.
22. Niezwykłe kąty na zdjęciu
Znajdowanie ciekawych ujęć na zdjęciach stało się dostępne dla każdego posiadacza smartfona z aparatem. W związku z tym kreatywność podczas tworzenia zdjęć nie wchodzi w grę i możemy udekorować witrynę wyjątkowy obraz z nietypowym kątem widzenia lub perspektywą. 
23. Karuzela
Suwak karuzelowy, który wszedł w życie projektowe kilka lat temu, nadal jest popularny i przydatny przy projektowaniu stron internetowych. Za pomocą szerokiego suwaka wygodnie jest obracać główne wiadomości, a także teraźniejszość aktualne promocje, zbiory i inne istotne informacje, które odwiedzający widzi natychmiast po wejściu na stronę.
24. Samoodtwarzające się audio i wideo
Ale ten trend pochodzi z 2000 roku. Pamiętam, że wtedy modne było odtwarzanie dźwięku po wejściu na stronę internetową. I ten dla wielu. Nie mogę powiedzieć, że akompaniament audio mi się podoba, ale być może umiarkowane użycie będzie dyskretne. Cóż, dla mnie samoodtwarzające się wideo jest raczej hołdem dla reklamy. Cóż, plus chęć utrzymania uwagi odwiedzającego w kanale. Nie jest to najprzyjemniejszy trend, ale niezbędny z komercyjnego punktu widzenia.
25. Wzory geometryczne
Cóż, zakończymy naszą recenzję krótkoterminową trend modowy w postaci różnorodnych wzory geometryczne i wzory. Stały się niespodziewanie popularne pod koniec ubiegłego roku. Cóż, to kolejny sposób, aby projekt Twojej witryny internetowej wyróżniał się i był niepowtarzalny. 
Infografika „Trendy w projektowaniu stron internetowych 2017”
Oferuję Państwu infografikę, która w przejrzysty sposób przedstawia wszystkie trendy i trendy w projektowaniu stron internetowych. Pobierz zdjęcie w formacie duży rozmiar Możesz skorzystać z tego linku na DeviantArt. Strona na DeviantArt otworzy się w nowym oknie. Tam kliknij słowo Pobierz po prawej stronie obrazu i zapisz zdjęcie na swoim komputerze.
Śledzimy trendy w projektowaniu stron internetowych i eksperymentujemy. Większość nowych gadżetów jest przydatna w biznesie, niezależnie od tego, co ktoś mówi. Ponieważ rok 2017 przygotowuje się do ustąpienia następcy, czas sporządzić wstępną prognozę.
Składanie obietnic w sprawach, które od ciebie nie zależą, jest niewdzięcznym zadaniem. Niemniej jednak wyróżnimy dziesięć kluczowych obszarów projektowania stron internetowych na przyszły rok. Lista została opracowana na podstawie doświadczenia naszego zespołu.
Płaska konstrukcja
W 2017 roku projektanci i programiści stworzyli przejrzyste, proste strony internetowe, które lepiej wyświetlają się na smartfonach i tabletach. Ciężkie zasoby zniechęcają mobilni odbiorcy. Ruch ze smartfonów stale rośnie, a wraz z nim zmienia się podejście do projektowania stron internetowych. Teraz strona jest przystosowana przede wszystkim do urządzenia mobilne, nie wygląda na kaprys. Tendencja ta dotyczy także Rosji.
Nie myśl tak płaska konstrukcja sprowadza się do dwóch wymiarów – chodzi o minimalizm i praktyczność. Pomyśl o tym jako o filozofii pozbycia się rozpraszaczy i skupienia się na ważne elementy strona. Po powolnych stronach internetowych z ich masywnymi strukturami, jasnymi kolorami, wyraźnymi krawędziami i otwartymi przestrzeniami, czujesz się jak powiew świeżego powietrza.
Minimalizm i przewaga funkcji nad formą nie sprawiają, że mieszkanie staje się nudne. Kontrastujące jasne kolory, ilustracje, proste obrazy i czcionki bezszeryfowe à la Apple – razem przekazują coś wspaniałego doświadczenie użytkownika, chwytliwy i zaskakujący.
Projekt jednego z bloków portalu „Kultura Finansowa”.
Płaska konstrukcja nie opiera się na zdjęciach, więc łatwiej jest ją załadować. Dla administracji witryny oznacza to dwie fajne rzeczy:
- Zasób szybko przekaże wiadomość klientom. Nie ma znaczenia, w jaki sposób uzyskali dostęp do witryny: z telefonu lub komputera.
- Zoptymalizowane strony są bardziej atrakcyjne dla wyszukiwarek: Google, Bing i innych.
Witryna o płaskiej konstrukcji ma większe szanse na pozycjonowanie dobra pozycja Wyszukiwarki. A odwiedzający zwykle pozostają na stronie dłużej. Dlatego właśnie płaski design stał się popularny i tak pozostanie w 2018 roku.
Ekspresyjna typografia
Czy projektanci stron internetowych są bezbronni bez swoich zdjęć i złożone struktury? Nie, punkt orientacyjny po prostu się zmienił. W typografii 2018 jedno słowo warte jest tysiąca zdjęć. Spójrzmy na to stwierdzenie.
Niektórzy twierdzą, że „typografia” nie brzmi jak interesujący element projektu. Jakie znaczenie ma to, czy czcionka tytułowa jest gotycka czy nowoczesna, szeryfowa czy bezszeryfowa?
Każda decyzja typograficzna może tak samo przekazywać myśli i budzić skojarzenia, jak fotografia.
Strona internetowa producenta napojów winnych cirq mówi o lojalności wobec tradycji
Rosyjski rząd również rozumie znaczenie technologii. W naszym kraju do 2022 roku planują stworzyć krajową system operacyjny dla urządzeń Internetu Rzeczy.
Wideo w wirtualnej rzeczywistości
Pod koniec 2017 roku wydawało się, że każda szanująca się strona internetowa stworzyła wideo-intro. To jest wspaniałe. Konsumenci widzieli ludzi stojących za usługą lub produktem. Jednocześnie opracowano usługi ułatwiające tworzenie treści wideo.
Wirtualna rzeczywistość (VR) jeszcze kilkanaście lat temu była postrzegana jako science fiction, dziś jednak trudno sobie wyobrazić imprezę bez niej. VR wkrótce zaprzyjaźni się z projektowaniem stron internetowych. Tworzenie filmów 360 stopni z każdym dniem staje się tańsze i łatwiejsze.
Wirtualna rzeczywistość zbliża się do ludzi. Państwowy Ermitaż stworzył film o historii muzeum w formacie VR. Przewodnikiem minifilmu był aktor Konstantin Khabensky. Fragment udostępniono do publicznego wglądu o godz Usługa YouTube. Spójrz też.
Chatbot, sztuczna inteligencja i uczenie maszynowe
Częściej komunikujemy się z botami. Prawdopodobnie robisz to, dzwoniąc operator mobilny. Wydawało się, że ich realizacja zajmie wiele lat. Jednak dzięki udoskonaleniom stają się coraz mądrzejsi sztuczna inteligencja(AI) i uczenie maszynowe. Dlatego też Facebook tak dobrze zna Twoje preferencje. Wykorzystuje dane geolokalizacyjne, nawyki i informacje o przeglądaniu, dzięki czemu wie, jakie wiadomości ma do zaoferowania.
Rozwoju tej technologii spodziewamy się w 2018 roku, ale już w technologiach webowych. Wyobraź sobie stronę internetową, która analizuje zachowania klientów i generuje oferta specjalna. Dzięki temu obsługa Klienta poprzez Internet staje się szybsza i sprawniejsza inteligentne systemy. Pamiętaj o nich.
Głosowy interfejs użytkownika i wyszukiwanie
Głos interfejs użytkownika czasami określane jako przetwarzanie język naturalny: Mówiąc najprościej, jest to interakcja człowiek-komputer w formie mowy. No wiesz, „OK, Google. Gdzie jest moja druga skarpetka? W połączeniu z uczeniem maszynowym technologia ta może przewidywać potrzeby, zanim dana osoba zrealizuje żądanie.
Mamy nadzieję, że strony przemówią własnym głosem. Szukanie głosowe również na wzroście. Upewnij się, że Twoja witryna posiada odpowiedni moduł, ponieważ konsumenci mają tendencję do innej interakcji z interfejsem. Użytkownik komputer osobisty prawdopodobnie użyje klawiatury, ale łatwiej jest dyktować ze smartfona.
Bezproblemowa interakcja
Pamiętaj, że wcześniej w sieci społecznościowej VKontakte musiałeś ponownie załadować stronę, aby dowiedzieć się, czy ktoś napisał, czy nie? (W takim razie powinieneś zapamiętać ścianę, polubić ją, jeśli chcesz ją odzyskać). Później dodali aktualizacje w czasie rzeczywistym. To właśnie nazywamy płynną interakcją.
Ryan McCready, redaktor treści w serwisie infograficznym Venngage, opowiada o trendach obecnie na świecie. projekt graficzny i jakie techniki trzeba było w tym roku porzucić.
Odważne i żywe kolory
W ciągu ostatnich kilku lat wielu liderów technologii stosowało stonowane i łatwe do odczytania kolory. Postanowili więc stworzyć bardzo przejrzysty schemat projektowy i pokazać, że elegancka i funkcjonalna przyszłość, jaką zwykle pokazuje się w filmach science fiction, już nadeszła.
Ta metoda pomogła firmie przenieść się do Nowa scena rozwoju i zjednoczenia wszystkich aplikacji w jednym kolorze. Podobnie jak w przypadku Spotify, odważne użycie jasnych kolorów wyróżniło markę.
Moda na odważne i jasne kolory w projektach wywodzi się z zasad Google Material Design. Firma zdecydowała się na płaski, opływowy i intuicyjny projekt, do którego dodano „nieoczekiwane i energetyczne kolory oraz funkcjonalne i przyjemne dla oka czcionki i obrazy”.
Ogólnie rzecz biorąc, wiele aktualnych trendów 2017 roku powstało pod wpływem zasad Material Projekt Google'a.
Wykorzystaliśmy je również do wykonania tego obrazu reklamowego. e-book. W rezultacie obraz stał się niezwykle popularny.
Jeśli nie możesz wybrać najlepsze kolory Aby przygotować swój projekt, zapoznaj się z kilkoma świetnymi przykładami palet kolorów. I nie bój się używać kontrastujących ze sobą kolorów.
Pogrubiona czcionka
Pogrubiona czcionka przyciąga uwagę czytelników. Mimowolnie zwracasz uwagę na duże i przyciągające wzrok napisy.
Mój ulubiony przykład to Wired. To używa różne czcionki aby wyróżnić określone nagłówki i zachować hierarchiczną kolejność informacji na stronie.
Tylko spójrz:
Inny dobry przykład używając chwytliwych czcionek - HubSpot. Tekst znajduje się na pierwszym planie i jest wspierany grafiką:
HubSpot rozumie, że każdego roku czas potrzebny na wchłonięcie informacji z tweeta dąży do zera. Dlatego, aby przyciągnąć uwagę czytelnika, stosują krótkie i zwięzłe napisy pisane pogrubioną czcionką.
Poza tym, teraz wszystko więcej ludzi surfować po Internecie za pomocą telefony komórkowe. Ze względu na ekrany o wysokiej rozdzielczości istnieje coraz większa potrzeba stosowania pogrubionych czcionek. Aby więc zatrzymać czytelników, musisz dostarczać swoje treści we właściwy sposób.
Bufor wyróżnia nagłówki w całym artykule, a nie tylko na początku, dzięki czemu artykuły są łatwiejsze do odczytania na wszystkich urządzeniach. Polecam stosować to podejście w przypadku długich artykułów – w ten sposób pomożesz czytelnikom w poruszaniu się po nich.
Zastosowaliśmy tę metodę podczas tworzenia tej infografiki. Połączenie pogrubiony i ciekawe rozwiązania kolorystyczne przyciągają uwagę:
Czcionki z czcionek Google
używam Czcionki Google przez bardzo długi czas, ponieważ są uniwersalne. Jeśli muszę wymyślić projekt publikacji online, a następnie dodać go do prezentacji, mam pewność, że wszystkie czcionki będą dobrze ze sobą współgrać. Wszystkie wyglądają świetnie na dowolnej platformie blogowej lub stronie internetowej.
Nawiasem mówiąc, wszystkie 810 czcionek jest całkowicie darmowych! O tak, ludzie lubią darmowe rzeczy. Lubią też rzeczy, które są bardzo łatwe w użyciu. Oto jeden przykład połączenia kilku popularne czcionki z Google'a:
Na naszej stronie używamy czcionek Roboto i Open Sans.
Oryginalne zdjęcia
Z każdym rokiem ilość treści rośnie, a wraz z nią zapotrzebowanie obrazy wysokiej jakości. Aby fotografie mogły służyć jak najdłużej, autorzy starają się, aby były jak najbardziej uniwersalne.
Jest tylko jeden problem: najlepsze obrazy ogólne z czasem stają się nieaktualne. Jeśli śledzisz nowości z zakresu technologii i marketingu, to prawdopodobnie znasz to zdjęcie:
Używa się go na stronach docelowych, blogach, a nawet w postach na Instagramie. Szczerze mówiąc, sam wziąłem to za witrynę, nad którą pracowałem kilka lat temu. Ze względu na popularność takich obrazów stockowych, oryginalność treści graficznych gwałtownie spadła.
A konieczność stosowania wyraźnych i doskonałych zdjęć tylko pogorszyła sytuację.
Kiedy czytelnik po raz setny widzi to samo zdjęcie, ma wrażenie, że autor artykułu nie starał się być choć trochę oryginalny. Po co więc w ogóle czytać taki artykuł?
Dlatego warto skorzystać oryginalne obrazy. Przestań robić popularne zdjęcia, zacznij tworzyć własne.
Jestem pewien, że wszyscy w twoim zespole mają telefon z aparatem. Dlaczego ich nie używasz? Zrób zdjęcia swojego biura lub logo i wykorzystaj je.
Dowiedz się, czy wśród Twoich kolegów jest początkujący fotograf. Daj mu kilka dni na wynajęcie biura - a zdjęć będziesz miał dość na cały rok!
Kiedy tworzyliśmy naszą nową stronę internetową, sfotografowaliśmy naszych pracowników i byliśmy bardzo zadowoleni z efektu.
Ręcznie rysowane obrazy i ikony
Oryginalne muszą być nie tylko zdjęcia, ale także ikony i rysunki. Niektóre marki już to zauważyły i starają się w ten sposób wyróżnić z tłumu. Takie podejście dodaje projektowi elementu osobistego i zabawnego.
Niektórzy twierdzą, że trend ten wygląda nieprofesjonalnie i dziecinnie, a mimo to zdecydowanie przyciąga wzrok. Podobnie jak większość trendów 2017 roku, stanowi alternatywę dla sterylnie czystego designu z ostatnich lat.
Dropbox wykorzystuje w całości ręcznie rysowane ilustracje. Stały się częścią marki firmy i uczyniły ją rozpoznawalną.
Takie ilustracje wprowadzają w zrelaksowany nastrój i zachwycają dziecko, które żyje w duszy każdego z nas. Sprawiają, że produkt wygląda na bardziej przystępny cenowo. Są szczególnie skuteczne w dużych firmach technologicznych, takich jak Dropbox.
Innym udanym przykładem takiego podejścia jest firma produkująca materace Casper. Prawie cała jej witryna składa się z ręcznie rysowanych rysunków. Oto jeden z nich:
Trend ten podchwyciła także usługa MailChimp. W raporcie z 2016 roku pokazuje także podobne rysunki.
Moz, firma tworząca oprogramowanie marketingowe, wstawia ilustracje w nagłówkach artykułów:
Czasami nasza miłość do rysunków objawia się w innych projektach:
Powrót do korzeni minimalizmu
Gdyby poproszono Cię o wyjaśnienie do nieznajomego, czym jest minimalizm, zapewne odpowiedziałbyś, że wtedy, gdy trzeba porzucić dekoracyjność na rzecz funkcjonalności. Najprawdopodobniej od razu pomyślisz o neutralności paleta kolorów, składający się z odcieni czerni, szarości i bieli.
Wydaje się, że prawdziwy duch minimalizmu został wyparty przez zastosowanie nudnej czerni i bieli schematy kolorów. Myślę, że zrobiono to celowo, aby zrekompensować mały rozmiar ekranu i mała moc urządzeń mobilnych.
Ale w 2017 wszystko się zmieni. Minimalizm powróci w swojej prawdziwej postaci. Co oznacza, że tak będzie więcej koloru. Obecnie urządzenia mobilne mają taką samą moc jak komputery, a niektóre mają nawet lepsze ekrany.
Moim ulubionym przykładem minimalistycznego designu jest logo. Platformy średnie. Jej twórcom udało się połączyć kilka różnych kolorów, zachowując jednocześnie minimalistyczny styl.
Google dokonał kolejnego redesignu logo na rzecz minimalizmu i połączenia jasnych kolorów. Warto zauważyć, że to właśnie ta firma była katalizatorem pojawienia się wielu nowych trendów. Projektanci nieco okroili styl czcionki i zaprezentowali się nowy rodzaj logo w kształcie litery G, które naprawdę mi się podoba.
Czuć w tym wszystkim ducha minimalizmu, choć prasa o tym nie pisała. Ludzie zapomnieli, czym jest prawdziwy minimalizm. Logo nie było bezbarwne i wykonane w jednej formie, dlatego nikt nie pomyślał, że zostało wykonane w stylu minimalistycznym.
Nowe logo było jasne i przyciągało wzrok, zachowując przy tym minimalistyczny wygląd. Po przeprojektowaniu ludzie wokół nich zaczęli naśladować Google, tak jak robili to wcześniej pod innymi względami.
Sami zaczęliśmy używać bardziej minimalistycznego stylu przy projektowaniu naszych blogów.
Prosty projekt obrazu z łatwością przekazuje niezbędne informacje.
Korzystanie z GIF-ów
Wszyscy (no, prawie wszyscy) kochają GIF-y. Pomagają nam w rozmowie, bo czasami potrafią przekazać emocje lepiej niż tekst.
Ponadto, aby je odtwarzać, nie są potrzebne żadne specjalne programy. Pliki GIF mają zazwyczaj niewielkie rozmiary i można je osadzić niemal wszędzie.
Są lepsze niż filmy i obrazy, zwłaszcza gdy chcesz skrócić czas ładowania strony i zmniejszyć ruch. Wierzę, że dzięki swojej wszechstronności GIF-y staną się jeszcze bardziej popularne przydatny element projekt.
Bardzo lubię umieszczać gify w nagłówku artykułu. Zamiast umieszczać tam nudny obraz stockowy, poświęć kilka minut i zrób GIF taki jak ten.
Aby to zrobić, nie musisz podejmować żadnych specjalnych wysiłków twórczych, ale w ten sposób na pewno przyciągniesz uwagę do swojego wpisu w sieciach społecznościowych. Oto kolejny dobry przykład użycia GIF-ów w nagłówku artykułu.
Obrazy dwukolorowe
Jest to połączenie dwóch, zwykle bardzo jasnych lub kontrastujących kolorów na jednym obrazie. Aby stworzyć takie obrazy, będziesz musiał włączyć swoje umiejętności projektowania, ale warto.
Tylko bardzo utalentowany projektant może wykonać tak piękne dwukolorowe obrazy. Jestem pewien, że nie potrafię stworzyć czegoś takiego, ale to nie znaczy, że powinieneś wyciąć tę technikę ze swoich planów projektowych.
Pod Nowy Rok ktoś przepowiada przyszłość na fusach od kawy i zarzuca mu pantofle na ramię. A projektanci starają się sondować przyszłość i identyfikować trendy, które staną się tematem przewodnim 2017 roku. Spróbujmy i my. Będziemy opierać się nie tylko na guście i tym, że „dyrektor artystyczny tak powiedział”, ale także na analizie.
1. Wideo jest elementem funkcjonalnym
Teksty są zbyt trudne, musisz się skoncentrować. Zdjęcia nie mają charakteru informacyjnego. A wideo to rodzaj treści, który nowoczesny użytkownik Internet jest gotowy do konsumpcji i lizania warg. A kiedy opowiesz użytkownikowi historię – na przykład, jak działa złożony proces tworzenia strony internetowej – wykorzystaj ją. Sfilmuj i pokaż, jak analityk tworzy prototypy, a projektant rysuje makiety. Zanurz użytkownika w historii i odpowiedz na pytania, jakie może mieć.
I przestań wciskać filmy wszędzie tam, gdzie klient prosi o coś zapierającego dech w piersiach w ramach budżetu. Film o urodzie - zawiedziona nadzieja użytkownika. Patrzy i ma nadzieję, że pokażą mu coś przydatnego, opowiedzą historię. Ale nie. Dlatego jako element dekoracyjny projektowania stron internetowych, który nie spełnia przydatna funkcja, wideo pozostaje w 2016 roku.
Tak: Film, który odpowiada na pytania użytkowników i rozwiązuje problemy ze stroną internetową.
NIE: Film jest w tle, ponieważ jest piękny i wszyscy tak robią.
2. Kinogramy zamiast filmów
Skorzystaj z kinematografii. Są ciekawsze niż obrazy statyczne, ale nie dają użytkownikom fałszywej nadziei, jak filmy bez historii i celu.
Ostrożnie! Filmogramy są strasznie lepkie.
3. Grafika czcionek
Inną alternatywą dla filmów i obrazów jest grafika czcionkowa. Zarówno ozdabia witrynę, jak i sprawia, że jest ona bardziej informacyjna. Główną obawą jest tutaj wysokiej jakości treści. Ale to zupełnie inna historia.
4. Ikony są głównym elementem dekoracyjnym
Po co Ci obrazy, filmy i zmiany czcionek, skoro możesz dodać „wow” do ikon, które już będą na stronie? Poważnie, dodaj niestandardową animację i skończ z tym. Będziesz najmodniejszy.
5. Przyklejone infografiki
Problemem użytkowników jest to, że stają się mniej sumienni. I zapominalscy jak złota rybka - pojechaliśmy na stronę, po czym telefon mrugnął (och, fałszywy alarm- tylko odblask słońca), wrócili do monitora i nie mogą sobie przypomnieć, co tu robili. I odchodzą.
Problem nasila się z roku na rok. Dlatego zadaniem projektanta jest wciągnąć użytkownika i zmusić go do interakcji z treścią, nawet jeśli są to nudne statystyki. Szczególnie (!) jeśli są to nudne statystyki.
Animuj go, maluj na jasne kolory, zmuszaj użytkownika do interakcji z nim - rób wszystko, aby wciągnąć go i nie puścić aż do końca strony.
6. Nawigacja łączona
Zyskująca na popularności technika – łączenie przewijania w poziomie i w pionie – również rozjaśni szarą codzienność użytkownika, zainteresuje go i zmusi do przemyślanej interakcji ze stroną.
7. Unikanie menu hamburgerowego
W 99,9% prognoz dotyczących projektowania stron internetowych na lata 2015 i 2016 autorzy obiecują, że w tym roku projektanci z pewnością porzucą menu hamburgerowe. Właśnie tak. No cóż, podtrzymajmy tradycję i powiedzmy też: w 2017 roku menu hamburgerowe nie będzie modne, nie rób tego, ugh!
Problem z ikoną z trzema paskami polega na tym, że nie jest ona intuicyjna. Rozpoznają go doświadczeni kalachi, którzy już z nim mieli kontakt i wiedzą, co kryje się za tym symbolem. Ale w Internecie pojawia się coraz więcej nowicjuszy: zarówno bardzo małych kijanek, jak i osób starszych. A ikona menu hamburgera nie jest im ani znana, ani zrozumiała. Co ukrywa i gdzie do cholery znajduje się menu, mogą dowiedzieć się dopiero po bolesnym doświadczeniu.
Bądźmy realistami: jest mało prawdopodobne, że będziesz w stanie całkowicie zrezygnować z menu hamburgerowego. Zanim jednak go wkleisz, poszukaj możliwej alternatywy w każdym projekcie.
studio-spoon.co.jp
8. Obramuj witrynę
Popularnym rozwiązaniem jest nie rozciąganie witryny tak, aby zajmowała cały ekran, ale umieszczenie jej w zgrabnej ramce. Ładny i pojawia się wolna przestrzeń, który można dostosować do nawigacji (czemu nie, skoro menu hamburgerów umiera).
teletype.online
9. Więcej emoji
Im mniej wysiłku użytkownik włoży w reakcję, tym chętniej będzie to zrobić. I nie wymyślili prostszych reakcji niż emoji. Na razie na stronach internetowych można jedynie polubić treść, maksymalnie można dać emotkę Facebooka. Ale czas przejść na emoji, drodzy projektanci.
10. Projektowanie materiałów
Tak, nadal jest z nami.
11. Najpierw więcej urządzeń mobilnych
Coraz więcej użytkowników przegląda strony internetowe z telefonów komórkowych – stąd takie podejście Najpierw mobilność z roku na rok jest coraz łatwiej akceptowany przez klientów. Nie jest już uważany za dziwny eksperyment, ale za metodę, która się usprawiedliwia. Przygotuj się więc na lawinę witryn tego samego typu, ale tak wygodnych dla telefonów komórkowych.
12. Więcej mikrointerakcji
Witryny będą wchłaniać więcej żetonów aplikacje mobilne. W 2017 roku nastąpią niesamowite mikrointerakcje, od których drżą Ci palce. Jak serce na Twitterze – cóż, to dzieło sztuki! Chcę go naciskać na zawsze. Będzie tego więcej w projektach Mobile First i klasycznych.
13. Wezwania do działania są jeszcze bardziej inwazyjne
Projektant budzi piękno dla piękna tylko na stole i na Dribbble. W innych przypadkach (tych, za które płaci się pieniądze) ciężko mu oddychają marketerzy, którzy tu potrzebują czegoś jaśniejszego, a tam większego przycisku. Wygląda na to, że w 2016 roku nastąpił punkt zwrotny i przemyślenie tych wymagań – w 2017 roku można się spodziewać dużych, soczystych, przyciągających wzrok bloków CTA. Takie, że marketerzy nie mają już nic do dodania.
strv.com
14. Nostalgia za latami 80-tymi
W wyrafinowanym Internecie projektanci tęsknią za pikselami lamp zapałkowych, ośmiobitowym dźwiękiem dekoderów i hałasem telewizorów lampowych. Tęsknotę za latami 80. i 90. rekompensują projektowaniem stron internetowych. Bądź na czasie – dodaj do swoich projektów kwaśne kolory, zakłócenia i usterki.
retrominder.tv
15. Unikaj zdjęć stockowych
Obrazy stockowe już wywołały ostre emocje, poważnie. Menu hamburgerowe jest gorsze i łatwiej je zastąpić. Nakręćmy więc nasze.
XXI wiek jest na podwórku, kamon. Telefony są takie, jakie są zdjęcia wysokiej jakości. Dlatego nie jest problemem sfilmowanie pracowników lub procesu pracy już teraz na telefonie. Najważniejszy jest czas i chęć zrobienia dobrego projektu.
16. Zieloni
Chłopaki z Pantone uważają, że kolorem roku 2017 jest ta mała zielona zieleń. Posłuchajmy i dodajmy to do naszej listy. 
17. Nowe podejście do prototypowania
Niezależnie od tego, jaki wspaniały projekt narysujesz, najważniejsze jest przedstawienie go w taki sposób, aby klient się zakochał. Albo przynajmniej widziałem to tak, jak ty to widzisz.
Układ statyczny ledwo radzi sobie z tym zadaniem, więc w 2017 roku musisz doskonalić swoje umiejętności prezentacji. Tak, aby od razu, przed rozmieszczeniem, klient widział wszystkie wymyślone ławki, a nie wyobrażał sobie ich w głowie. W przeciwnym razie wyobrazi sobie coś złego, tworząc oczekiwania, których twórcy nie będą w stanie uzasadnić.
Projektant nie musi po prostu rysować i pokazywać obrazu. Aby utworzyć interaktywny szablon, musisz umieć obsługiwać jedno z narzędzi do prototypowania lub doskonalić swoje umiejętności animacji.
Oto wasz arsenał na nadchodzący rok, koledzy. Ale nie kłóć się z klientem, który chce wideofonu. Nie umieszczaj elementów pikselowych i emotikonów tam, gdzie potrzebujesz czystego, minimalistycznego handlu elektronicznego. I nie bombarduj niechętnych klientów na Skype linkami do tego artykułu. Korzystaj z trendów mądrze lub nie używaj ich wcale. Tak czy inaczej za trzy lata zostaną całkowicie zaktualizowane :)