20 najgorętszych trendów, które nadadzą kształt Web Design 2016

W miarę upływu czasu z każdym rokiem na horyzoncie pojawia się wiele nowych trendów projektowych. Dziedzina projektowania stron internetowych zawsze zmienia się wraz z nowymi narzędziami, przepływami pracy i najlepszymi praktykami do tworzenia użytecznych układów.

Trudno przewidzieć, które dokładnie trendy przyciągną największą uwagę. Jednak najnowsza historia pokazuje wzorzec trendów, które rosną jak pożar. Zorganizowałem 20 unikalnych trendów, które zyskały trakcję w 2015 r. I prawdopodobnie będą kontynuowane do 2016 r.

1. Szkicuj aplikację do projektowania interfejsu użytkownika

Szkic szybko zastępuje Photoshopa dla wszystkich zadań projektowania interfejsu użytkownika od modele szkieletowe o niskiej wierności do wysokiej jakości makiety i projektowanie ikon.

Sketch App to aplikacja przeznaczona wyłącznie dla komputerów Mac, stworzona specjalnie dla projektantów internetowych i mobilnych. Oferuje bardziej płynne środowisko pracy do tworzenia elementów wektorowych dla dowolnego interfejsu, a jednocześnie zachowuje wiele funkcji, których można oczekiwać od Photoshopa, takich jak efekty tekstowe i style warstw.

Chociaż nie ma dowodów na to, że Sketch kiedykolwiek zostanie wydany dla Windows, nadal jest cenionym wyborem przez użytkowników OS X. Uproszczony obieg pracy i tańsza cena dają firmie Adobe szansę na pieniądze. Jeśli Sketch nadal zapewnia najlepsze wrażenia z projektowania interfejsu użytkownika, to z pewnością będzie się dobrze rozwijał w 2016 roku i później.

2. IDE oparte na przeglądarce

Desktop IDE istnieją już od dziesięcioleci z opcjami od Notepad ++ do Xcode i Visual Studio. IDE ułatwia pisanie kodu z sugestiami i podświetlaniem składni (wśród innych funkcji).

Jednak tradycyjnie IDE zostały wydane jako aplikacje desktopowe. W ciągu ostatnich kilku lat zaobserwowaliśmy gwałtowny wzrost IDE chmur opartych na przeglądarce. Nie wymagają one żadnego oprogramowania innego niż przeglądarka internetowa, co pozwala programistom na pisanie kodu z dowolnego komputera z dostępem do Internetu.

Cloud IDE działają bardziej jak aplikacje internetowe, w których można zapisywać fragmenty kodu na swoim koncie w celu udostępniania lub przechowywania osobistego. CodePen jest jednym z najpopularniejszych IDE ze wsparciem dla HTML / CSS / JS wraz z niestandardowym przetwarzaniem wstępnym, takim jak Jade / Haml i LESS / SCSS.

Mozilla Thimble to kolejne IDE dla początkujących programistów, którzy chcą się uczyć, ponieważ kodują. Codeply jest również świetny do testowania specyficznych responsywnych struktur, takich jak Bootstrap lub Zurb's Foundation, bez konieczności pobierania jakichkolwiek plików.

3. Free Sass / SCSS Mixins

Preprocesory są modne od lat, ale dopiero niedawno stały się na tyle popularne, aby czuć się wszechobecne na całym obszarze projektowania / rozwoju stron internetowych. Obecnie wydaje się dziwne pisanie waniliowego CSS, gdy Sass / SCSS może dostarczyć o wiele więcej.

Jedną z korzyści jest rosnąca podaż bibliotek miksujących Sass. Proste miksy są jak fragmenty kodu lub podstawowe funkcje do generowania powtarzalnego kodu w CSS. Chociaż zawsze możesz napisać swój własny, wielu programistów było na tyle uprzejmie, że wypuściło darmowe miksy online.

Niektóre miksy pochodzą z bibliotek takich jak Bourbon, podczas gdy inne mogą być samodzielnymi przedmiotami. Spróbuj wykonać wyszukiwanie w GitHub dla miksów Sass / SCSS, aby zobaczyć, co możesz znaleźć.

4. Układy kart

Układ kart internetowych został po raz pierwszy spopularyzowany przez Pinterest kilka lat temu i od tego czasu stał się trendem dla stron internetowych o dużej zawartości. Darmowe wtyczki, takie jak jQuery Masonry, można wykorzystać do naśladowania tego stylu układu z animowanymi kartami o różnych wysokościach i szerokościach.

Układ kart najlepiej jest stosować na stronach z dużą ilością danych, które powinny być skanowalne. Strona docelowa Google Now wykorzystuje układ kart do reklamowania opcjonalnych kart dla aplikacji Google Now.

Możesz myśleć o układach kart jako bardziej dynamicznych siatkach, skupiających się na minimalizowaniu zawartości do podstawowych elementów, aby wyświetlić więcej elementów razem. Czasopisma internetowe, takie jak UGSMAG i The Next Web, są doskonałymi przykładami układów kart używanych do prezentacji najnowszych treści postów.

5. Niestandardowe filmy wyjaśniające

Zarówno duże, jak i małe firmy przyjęły trend niestandardowych filmów wyjaśniających. Są one często tworzone z animacją, taką jak przykład Crazy Egg. Ale inne filmy opierają się na prawdziwych materiałach, takich jak Instagram Direct.

Celem filmu wyjaśniającego jest pokazanie, jak działa produkt lub usługa. Goście mogą przejrzeć listę funkcji i nadal nie mają pojęcia, jak działa produkt. Filmy wyjaśniają wszystko wizualnie i obejmują ważne rzeczy w ciągu kilku minut.

Jeśli chcesz spróbować swoich sił w tworzeniu niestandardowego filmu wyjaśniającego, sprawdź ten kurs w Udemy. To dogłębne badanie koncentrujące się na filmach do projektowania stron docelowych.

6. Podgląd produktów na żywo

Projekt strony docelowej przyniósł niesamowity wzrost wynikający z większej prędkości Internetu i możliwości przeglądarki. Jednym z głównych trendów, który zauważyłem, jest dodanie podglądu produktu na żywo na stronach domowych lub niestandardowych stronach docelowych.

Weźmy na przykład stronę produktu Slack. Zawiera wycieczkę wideo i grafikę wektorową obejmującą interfejs Slack. Te podglądy produktów mają dać potencjalnym użytkownikom wgląd w sposób działania produktu.

Webydo to kolejny świetny przykład z animacją na żywo na stronie głównej. Pozwala to odwiedzającym zobaczyć Webydo w akcji bez konieczności ręcznego demo produktu. Ale nie zawsze trzeba polegać na animacjach do podglądu produktów. Iconjar wykorzystuje prosty zrzut ekranu PNG, aby pokazać, czym jest produkt i jak działa.

7. Zautomatyzowani uczestnicy zadań

Świat rozwoju frontendu zmienił się tak bardzo dzięki kilku nowym najlepszym praktykom tworzenia stron internetowych. Systemy uruchamiania / budowania zadań, takie jak Gulp i Grunt, są używane znacznie częściej przy wielu zadaniach, które wcześniej wymagały ręcznego wysiłku.

Automatyzacja jest siłą napędową szybkiego zwrotu i ubijania kodu jakości. Maszyny nie popełniają błędów, więc im więcej możesz zautomatyzować z pewnością mniej problemów, które będziesz miał (teoretycznie).

Aby dowiedzieć się więcej, zapoznaj się z tym postem Reddit wyjaśniającym, jak działają biegacze zadań. Narzędzia te w zasadzie uruchamiają kod JS, który automatyzuje części przepływu pracy, niestandardowe JS lub skrypty napisane przez innych.

8. Rodzime aplikacje mobilne JS

Jestem wielkim zwolennikiem używania odpowiednich narzędzi do pracy. W przypadku tworzenia aplikacji mobilnych oznacza to Java dla Androida, Objective-C / Swift dla iOS.

Ale nie każdy chce nauczyć się nowego języka, aby zbudować aplikację mobilną. Na szczęście tworzenie i kompilowanie natywnych aplikacji staje się łatwiejsze dzięki alternatywnym bibliotekom, takim jak NativeScript lub React Native.

Różnica w zostaniu programistą aplikacji mobilnych skraca się dzięki możliwości tworzenia aplikacji mobilnych za pomocą JavaScript. PhoneGap to kolejna opcja oparta na kodzie HTML / CSS / JS.

Chociaż proces tworzenia jest bardzo zróżnicowany, JS szybko staje się rozwiązaniem dla programistów, którzy chcą budować aplikacje mobilne bez uczenia się nowego języka.

9. Narzędzia współpracy w projektowaniu

Wiadomości błyskawiczne i czat grupowy istnieją już od ponad dziesięciu lat. Zasoby te tradycyjnie polegały jednak na zwykłym tekście z pewną możliwością dołączania plików.

Nowym trendem jest możliwość udostępniania dokumentów projektowych na żywo w aplikacjach do czatu. Godny uwagi jest jeden przykład, w którym adnotacje i komentarze mogą być ułożone warstwami bezpośrednio na dokumencie. Daje to projektantom czysty sposób na dzielenie się pracą bezpośrednio ze wszystkimi członkami zespołu.

Slack to najpopularniejsza aplikacja do czatu, która obsługuje wiele podobnych funkcji. Rosnąca baza użytkowników Slack jest nieugięta w tworzeniu rozszerzeń, które znacznie poprawiają możliwości Slacka i wiążą się z innymi produktami, takimi jak Hangouts, MailChimp, a nawet WordPress.

10. Elastyczne fronty

Platformy frontendowe, takie jak Bootstrap, istnieją od lat i nadal są przydatne w projektach zarówno osobistych, jak i profesjonalnych. Responsywny projekt wkroczył do frameworków i stworzył zapotrzebowanie na kod frontendowy, a nie tylko backend (Django, Laravel itp.).

Przechodząc do 2016 roku, myślę, że będziemy czytać znacznie więcej o responsywnych strukturach frontendowych i ich wartości w projektach internetowych. Wielu programistów z niecierpliwością oczekuje na wydanie Bootstrap 4 Foundation 6 i publicznej wersji v1.

Inne mniej znane struktury, które możesz sprawdzić, to Gumby i Pure CSS.

11. Większa koncentracja na UX Design

Dziedzina projektowania doświadczenia użytkownika będzie nadal szybko rosła, biorąc pod uwagę więcej projektantów i programistów. Projektowanie interfejsu użytkownika jest częścią projektu UX, ale nie jest to ostateczny cel. Interfejs użytkownika jest środkiem do celu, a koniec jest fantastycznym doświadczeniem użytkownika.

Zaledwie 5 lat temu ledwo byłem zaznajomiony z UX lub jego zastosowaniem do projektowania interfejsu. Teraz mamy zasoby takie jak UX Stack Exchange i bezpłatne e-booki UX. Jeśli nie wiesz zbyt wiele o doświadczeniach użytkowników, to teraz jest najlepszy czas, aby przestudiować i dowiedzieć się, w jaki sposób zasady UX można zastosować do wszystkich form cyfrowych interfejsów.

12. Menedżerowie pakietów

Menedżerowie pakietów cyfrowych tak szybko się rozwinęli, że są praktycznie wymogiem dla nowoczesnego tworzenia stron internetowych. Rozwiązania takie jak Bower i NPM mogą zaoszczędzić wiele czasu na rozpoczęciu nowych projektów.

Opanowanie każdej nowej technologii zajmie trochę czasu i będzie się wiązało z nauką. Ale jeśli jest jedna rzecz, którą powinien wiedzieć każdy programista frontendu (lub backendu), to jest menedżerem pakietów. Wymagają one pewnej wiedzy na temat poleceń terminala, ale kiedy już przyzwyczaisz się do procesu, nigdy nie będziesz chciał wrócić.

13. Zaawansowane animacje interfejsu użytkownika

Przejścia CSS3 były tylko początkiem długoterminowego trendu animacji w sieci. Teraz mamy dziesiątki bibliotek CSS i JavaScript poświęconych animacji. Rzeczy, o których nigdy nie marzyłem, są teraz budowane i dostępne za darmo, jeśli wiesz, gdzie szukać.

Animacja nie jest warunkiem dobrego projektu. Może jednak sprawić, że dobry projekt stanie się świetnym projektem, jeśli zostanie właściwie użyty.

Obserwuj animowane trendy interfejsów i zobacz, co możesz zabrać z różnych stron internetowych. Pamiętaj, że animacja internetowa nie jest filmem Disneya i powinna być traktowana z szacunkiem. Używaj animacji delikatnie, aby ulepszyć interfejs, nie stając się uciążliwym lub rozpraszającym elementem projektu.

14. Projektanci uczący się kodowania

Gorącym tematem w tym roku był projektanci uczący się kodowania. Niektórzy projektanci uważają, że pisanie kodu nie jest ich zadaniem, podczas gdy inni uważają, że staje się normą i powinien zostać przyjęty.

Czytałem gorące dyskusje i fascynujące posty na ten temat, które zdają się jedynie wywoływać reakcje emocjonalne. Dobry projekt to po prostu ładny obraz bez kodu. Skupienie się na obu wymaga od projektanta poświęcenia mniej czasu na ćwiczenia.

Czy jest więc ostateczna odpowiedź? Niektórzy twierdzą, że rentowność pracy wzrasta dla projektantów, którzy znają kodowanie frontendowe. A co jeśli ktoś nie chce pisać kodu? Czy warto się uczyć po prostu konkurować?

Czuję, że najjaśniejszą odpowiedzią jest robić, co chcesz. Wygląda jednak na to, że ten temat jest wciąż aktualny dla wielu projektantów, którzy prawdopodobnie będą kontynuować dyskusję w 2016 roku.

15. Darmowe narzędzia online i aplikacje internetowe

Kiedyś wszystkie programy były uruchamiane z pulpitu bez względu na to, co trzeba zrobić. Ale obecnie jestem niezmiennie zdumiony tym, ile aplikacji internetowych jest dostępnych za darmo w Internecie.

Znajdziesz tu wszystko, od kodowania URL / dekodowania po całkowicie darmowy edytor Markdown. Nawet Dysk Google przenosi produkty Microsoft Office do przeglądarki (ponownie całkowicie za darmo).

Obecny poziom mocy obliczeniowej i jednolite standardy przeglądarek internetowych oferują nieograniczoną ilość możliwości. Złożone zadania, takie jak wznowienie tworzenia do kompresji obrazu, można obsługiwać bezpośrednio z okna przeglądarki.

16. Wzrost komponentów internetowych

Komponenty internetowe próbują rozwiązać problemy złożoności dla programistów. Witryna WebComponents zawiera wspaniałe zasoby i materiały, dzięki którym programiści mogą szybko rozpocząć ten temat.

Jeśli nie wiesz, jak zrozumieć modułowe komponenty internetowe, sprawdź ten post, aby dowiedzieć się więcej.

Podczas gdy komponenty nie są szczególnie popularne do statusu głównego nurtu, są omawiane przez profesjonalnych programistów na całym świecie. Google wydał Polymer, który jest ramą używaną do dodawania komponentów internetowych za pośrednictwem JS i HTML.

Może to nie być praktyczne w przypadku dużych projektów klientów. Jakkolwiek technologia jest dostępna i przy odrobinie praktyki możesz z łatwością opanować koncepcje. Aby dowiedzieć się więcej i zobaczyć kilka przykładów kodu, możesz przeczytać ten post CSS-Tricks na modułowych komponentach internetowych.

17. Zasoby edukacyjne online

Wszyscy wiemy, że teraz jest najłatwiejszy czas, aby nauczyć się dowolnej umiejętności w zaciszu swojego komputera. Wydaje się, że rynek kształcenia online rośnie wykładniczo, a nowe kursy i strony internetowe pojawiają się każdego roku.

Czuję się bardziej pewny niż kiedykolwiek wcześniej, że zobaczymy wzrost nauki online. Znane witryny, takie jak Treehouse i CodeSchool, oferują niesamowite kursy obok nowszych witryn, takich jak Bitfountain i Learn-Verified.

Jeśli masz temat, którego chcesz się nauczyć, prawdopodobnie jest kurs online - zwłaszcza jeśli chcesz nauczyć się technik cyfrowych, takich jak projektowanie interfejsu użytkownika lub tworzenie aplikacji.

18. JavaScript po stronie serwera

Podczas gdy w przeszłości istniały opcje JS po stronie serwera, żadna z nich nie przeniknęła tak szybko jak Node.js. Deweloperzy JavaScript zakochali się w tej bibliotece i obserwowali jej bezpośrednią konkurencję z innymi językami zaplecza, takimi jak Python lub PHP.

Węzeł pozwala programistom na tworzenie stron internetowych przy użyciu jednego języka dla kodu frontend + backend. A zasoby takie jak Node Package Manager dają jeszcze większą wartość Node.js.

Z tego, co wiem, Node wciąż się rozwija i nadal zyskuje na popularności u entuzjastów przemysłu. Niezależnie od tego, czy planujesz uczyć się Node, czy nie, nie ma wątpliwości, że w 2016 r. Będzie on nadal rozwijać się jako główny trend.

19. Obsługiwane przez dotyk funkcje strony internetowej

Przeglądarki smartfonów zawsze wspierały funkcje dotykowe dla wszystkich stron internetowych, aby zachować kompatybilność wsteczną. Niedawno zauważyłem więcej wtyczek i niestandardowych funkcji dołączanych do witryn internetowych, których celem jest obsługa zdarzeń dotykowych.

Wtyczki takie jak Photoswipe i Dragend.js są skonstruowane do obsługi przesuwania i stukania na ekranach dotykowych. Wygląda na to, że twórcy stron internetowych nie tylko budują responsywne strony internetowe, ale także strony z obsługą dotyku.

Po przeszukaniu znajdziesz kilka naprawdę imponujących funkcji stworzonych dla sieci, które polegają wyłącznie na zdarzeniach dotykowych.

20. Projektowanie materiałów w sieci

Wydanie przez Google projektu materiałów było ogromnym sukcesem dla projektantów Androida. Projektowanie materiałów jest uważane za język projektowy mający na celu uproszczenie procesu tworzenia interfejsów użytkownika dla smartfonów z systemem Android.

Z czasem projektanci stron internetowych wzięli to sobie do serca i zbudowali całe strony internetowe w oparciu o nowy język projektowania Google. Wygląda na to, że trend w projektowaniu materiałów wykroczył poza aplikacje mobilne w świat projektowania stron internetowych.

Ludzie, którzy chcą budować strony z materiałami, nie muszą nawet wymyślać nowego koła. Darmowe biblioteki, takie jak Material UI i Materialise, oferują niestandardowe kody do strukturyzacji nowego układu na fundamencie projektowania materiałów.

Zamknięcie

Patrząc na te trendy, powinno być jasne, że widzimy prawdziwy wspólny wysiłek społeczności internetowej, aby ułatwić budowanie stron internetowych. Wszyscy chcemy zaoszczędzić czas w codziennej pracy.

Od początku istnienia sieci widzieliśmy wiele technologii, które zostały zastąpione lepszymi alternatywami. Te trendy na 2016 r. Naciskają na bardziej jednolity zestaw technik projektowania, dzięki którym strony internetowe będą łatwiejsze i mniej skomplikowane.