Sieć jest szybko rozwijającą się przestrzenią. Technologie i techniki rozwoju mogą pojawić się szybko. Stale udoskonalane narzędzia pozwalają na większą swobodę przy projektowaniu interfejsów i interakcji. Z tego powodu wzorce i techniki projektowania stron internetowych mogą zacząć się modyfikować w krótkim czasie.

Poniżej znajduje się lista trendów w projektowaniu stron internetowych, o których należy pamiętać w 2017 roku. Nie wszystkie są nowe; niektóre są style, które zyskują i / lub utrzymują swoją popularność w 2016 roku. Oczekuje się, że będą one nadal w powszechnym użyciu dla nowych stron internetowych uruchomionych w 2017 r.

Istnieje również kilka całkiem nowych technik i technologii, które możesz chcieć zaimplementować w swoich projektach witryn. Niekoniecznie są one jeszcze powszechnie stosowane, ale możesz je teraz wykorzystać, aby wyprzedzić konkurencję.

Kolor

Wybór koloru dla strony internetowej jest niezwykle ważny. Może wpływać na emocje, myśli i współczynniki konwersji odwiedzających. Jakie będą trendy kolorystyczne w 2017 roku?

Pantone zaprezentował swój kolor Roku 2017-Zieleń. Został wybrany jako symbol nowych początków; odświeżający i rewitalizujący odcień. Nie spodziewam się, że każda strona w 2017 będzie zielona, ale jestem pewien, że będzie kilka projektów internetowych inspirowanych tym.

Jeśli szukasz inspiracji dotyczących kombinacji kolorów,możesz wyświetlić niektóre zalecane pary kolorów Pantone na stronie Kolor 2017.

Ze względu na popularność Projektowania Materiałów Google, kolory i kombinacje kolorów zalecane w tych wytycznych projektowych prawdopodobnie będą tendencję wzrostową w 2017 roku. Te kolory są jasne i odważne. Nawet poza projektowaniem materiałów, ostatnio pojawiło się wiele przykładów projektów internetowych zawierających jasne kolory.

To nie pokazuje żadnych oznak zatrzymania się w najbliższym czasie. Możesz użyć witryn, takich jak paleta materiałów i MaterialUI, aby pomóc Ci wybrać schemat kolorów Material Design.

Need help picking a color scheme for your website? The Material Design Color Palette offers a great starting point.
Potrzebujesz pomocy w wyborze schematu kolorów dla swojej strony internetowej? Paleta kolorów Material Design stanowi świetny punkt wyjścia.

Duotone to obraz, który składa się z dwóch kolorów. Widzieliśmy wiele obrazów tego typu używanych w ubiegłym roku i oczekuję, że ten styl stanie się bardziej popularny w 2017 roku.

Witryny takie jak Spotify, wykorzystały obrazy duotone do świetnego efektu. Być może zauważyłeś, że duotone jest popularnym stylem dla wielu miniatur wideo z YouTube.

Strona internetowa Adison Partners świetnie wykorzystała duotone w swoim projekcie strony internetowej.

Nowoczesne Retro

Niezależnie od tego, czy jest to sztuka pikseli, typografia w stylu vintage, czy obrazy inspirowane latami 80.i 90.; retro z nowoczesnym akcentem jest teraz. Ma większy wpływ na projektowanie stron internetowych w ciągu ostatnich kilku lat, z wielu stron korzystających z tego stylu.

To interaktywne CV Robby ‘ ego Leonardiego jest genialnym przykładem nowoczesnego retro. Połączył semi / nowoczesny styl Pixel art z przewijaniem bocznym Super Marioesque gry wideo.

Robby Leonardi's platform game-style website.
Strona Robby ‘ ego Leonardiego w stylu gier platformowych.

Sweet Magnolia Gelato poszła na vintage look, ale korzysta z kilku przyciągających wzrok animacji. Daje to witrynie elegancki nowoczesny wygląd, zachowując jednocześnie urok starszego stylu.

Czarny rynek również poszedł na vintage look w połączeniu z modularnym układem. Strona ma rustykalny urok, który dobrze współpracuje z tym, co oferuje Czarny rynek.

Kinografie

Kinografie to wciąż zdjęcia z elementami, które mają powtarzające się ruchy. Zyskują ostatnio na popularności, i słusznie; dobrze wykonany kinograf może być wizualnie uderzający.

Kinografie mogą być plikami GIF lub wideo. Oba mogą skutkować dość dużymi rozmiarami plików, jeśli cinemagraph jest wysokiej jakości. Pliki GIF Cinemagraph mogą z łatwością mieć ponad 3 MB, więc zamiast tego warto rozważyć przesyłanie strumieniowe wideo.

Możesz zobaczyć kilka wspaniałych przykładów kinografów na Flixel; usługa hostingowa dla tego typu obrazu lub wideo. Rozejrzyj się, aby zobaczyć niektóre z wielkich ludzi pracy wykonują. Poniżej znajduje się tylko jeden przykład wielu wysokiej jakości kinografów.

Projektowanie Materiałów

Projektowanie materiałów Google jest na scenie od 2014 roku. Jest on zasadniczo zbudowany na zasadzie papieru i atramentu, przekładając ich właściwości na format cyfrowy. Na przykład użycie cieni i krawędzi do wskazania, czego należy dotknąć, na przykład przycisków.

Need help picking a color scheme for your website? The Material Design Color Palette offers a great starting point.
Potrzebujesz pomocy w wyborze schematu kolorów dla swojej strony internetowej? Paleta kolorów Material Design stanowi świetny punkt wyjścia.

W ciągu ostatnich kilku lat Projektowanie materiałów zyskało na popularności, tworząc wiele motywów i szablonów dla CMSs, a także frameworków front-endowych, takich jak Twitter Bootstrap. Jedną z krytycznych uwag, które usłyszysz o Material Design, jest to, że wiele stron zbudowanych przy jego użyciu wydaje się bardzo podobnych; być może zbyt podobnych. Wynika to z zbyt sztywnego przestrzegania stylu projektowania materiałów, a nie tylko stosowania zasad.

Spodziewam się, że zobaczymy wiele mniejsze projekty internetowe przyjmujące Material Design as-is. Nie tylko zasady projektowania materiałów, ale rzeczywisty styl lub motyw. Jednak prawdopodobnie część społeczności projektantów będzie aktywnie sprzeciwiać się projektowaniu Materiałowemu, a przynajmniej sprzeciwia się stereotypowemu stylowi, nadal wdrażając Zasady.

Doskonałym przykładem projektowania materiałów w najczystszej formie jest blog o projektowaniu materiałów (niespodzianka, niespodzianka). Tutaj możesz zobaczyć większość zasad projektowania materiałów w działaniu.

Odważna, Kreatywna Typografia

Rok 2016 przyniósł bardzo kreatywne zastosowania typografii, a rok 2017 prawdopodobnie nadal będzie przesuwał granice tego, co projektanci zrobią z typem. Spodziewaj się, że czcionka nie tylko zajmie więcej miejsca na ekranie, ale także zobaczy więcej kreatywnych krojów pisma niż zwykłe czcionki internetowe, do których jesteś przyzwyczajony.

Nurture połączyło typografię i wideo, aby stworzyć stylową i elegancką stronę internetową. Wideo odtwarza się w tle, widoczne tylko przez jedną, dużą literę słowa ” nuture.”Film i litera zmieniają się w miarę poruszania się po każdej z sekcji strony głównej.

Friends to agencja projektowa z siedzibą w USA. Ich strona używa dużego, odważnego typu, który naprawdę wyróżnia się jako główna cecha.

Modułowa Konstrukcja

Modułowa konstrukcja nie jest niczym nowym, ale zyskuje na popularności w ciągu ostatnich kilku lat. Jest to podejście projektowe wykorzystujące modułowy, blokowy wzór siatki do układania elementów. Patrząc na dane Google Trends, zainteresowanie wyszukiwaniem “modułowego projektowania” rośnie od początku 2011 roku. Spodziewałbym się, że ta pozytywna tendencja utrzyma się w 2017 roku.

Build in Amsterdam stworzyli bardzo gustowną stronę modułową. Podejście modułowe pomaga jasno zdefiniować każdy element treści.

Uniwersytet Warwick włączył również podejście do projektowania modułowego do swojej strony internetowej.

SVGs

Czy jesteś zmęczony strasznie zmieniającymi się logo i innymi obrazami? Jeśli tak, powinieneś wypróbować pliki SVG zamiast zwykłych formatów PNG i JPG. Format SVG nie jest odpowiedni dla wszystkich obrazów; będą działać tylko z grafiką wektorową, więc nie można przejść i nieskończenie skalować żadnych zdjęć. Jednak w przypadku obrazów, takich jak logo, działają one znakomicie.

Pliki SVG istnieją od 1999 roku, ale nadal widzimy formaty PNG i JPG używane do obrazów, gdy SVG byłby bardziej odpowiednim formatem. Wydaje się jednak, że wszystko się zmienia. Prawdopodobnie częściej wspominano o plikach SVG, A Dane Google Trends pokazują, że zainteresowanie plikami SVG rośnie z roku na rok od 2013 roku. Przewiduję Zwiększone wykorzystanie tego formatu w 2017 roku, a także wzrost artykułów napisanych na ten temat.

Dlaczego warto używać plików SVG? Głównym powodem jest to, że obraz SVG powinien być renderowany idealnie bez względu na skalę. Ponadto obrazy w formacie SVG mają zwykle bardzo małe rozmiary plików; świetne dla szybkości strony.

Jeśli chcesz zobaczyć plik SVG w akcji, nie szukaj dalej niż logo WPMUDEV w lewym górnym rogu tej strony. Jeśli powiększysz za pomocą przeglądarki, zobaczysz, że logo nie staje się pikselowane, bez względu na to, jak bardzo je powiększysz. Zamiast tego logo WPMUDEV pozostaje ostre i wysokiej jakości.

Flexbox

Flexbox to tryb układu CSS3, który sprawia, że jest znacznie bardziej wydajny i przewidywalny podczas pracy z układami stron, które będą wyświetlane przy użyciu różnych rozmiarów ekranu i urządzeń.

Flexbox stale zyskuje na zainteresowaniu, a ponieważ jest teraz obsługiwany przez wszystkie nowoczesne przeglądarki, prawdopodobnie będzie go używać więcej programistów front-end. Możesz przeczytać więcej o Flexbox w naszych przewodnikach zrozumienie CSS3 Flexbox dla czystego, wolnego od włamań responsywnego projektowania i zrozumienie siatek CSS dla nowoczesnego projektowania stron internetowych WordPress.

360 Wideo i VR

Rok 2016 to rok VR. Wydano wiele zestawów słuchawkowych VR do gier, a wideo 360 odnotowało wzrost zainteresowania wyszukiwaniem. Spodziewam się, że projektanci pomyślą o ciekawych sposobach włączenia wideo 360 do stron internetowych w 2017.

Jeśli nie jesteś jeszcze świadomy, Google VR View to interfejs API JavaScript, który z łatwością pozwala dodawać doświadczenia wideo 360 do własnej witryny. Możesz przeczytać więcej o widoku Google VR tutaj.

Interaktywna, 360-webowa rzeczywistość VR została stworzona na potrzeby nowego filmu Blair Witch. Najlepiej jest to oglądać na telefonie komórkowym za pomocą zestawu słuchawkowego VR dla telefonu komórkowego.

Mikrointerakcje

Mikrointerakcje to pojedyncze, specyficzne momenty, gdy użytkownik wchodzi w interakcję z Twoją witryną. Nie musi to być strona internetowa per se, ale w naszym przypadku jest. Te momenty mogą być działaniami, takimi jak polubienie posta, wysłanie wiadomości lub wypełnienie pola formularza. Celem mikro interakcji w tych momentach jest dostarczenie informacji zwrotnej i wskazówek dla użytkownika, poprawiając UX.

Mikrointerakcje stają się coraz bardziej popularne, a sposoby przekazywania użytkownikom informacji zwrotnych i wskazówek stają się coraz bardziej kreatywne. Spodziewaj się więcej tego w 2017 roku.

Poniżej przykładowa animacja Mikrointerakcji autorstwa Igora Izhika. Animacja służy do interakcji podobnej i odmiennej. Możesz wyświetlić animację na dribbble.

Wrapping Up

To kończy nasze trendy w projektowaniu stron internetowych 2017, na które należy uważać. Mam nadzieję, że to wprowadziło cię w nowe wzorce projektowe i technologie internetowe, o których nie wiedziałeś, że stają się popularne.

Baw się dobrze projektując swoje witryny, ale pamiętaj, że nie musisz czegoś używać tylko dlatego, że jest modny. Upewnij się, że poprawia to wrażenia użytkowników.

Jak myślisz, jakie będą trendy w projektowaniu stron internetowych w 2017 roku? Daj nam znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…