Trendy na rok 2015przewidywania na bazie analiz i szklanej kuli

Tomasz Dziuda

Tomasz Dziuda

Lead Developer @

Twitter: @dziudek

WWW: http://dziudek.pl

Mail: dziudek@gavick.com

Design

Material Design

Źródło: http://www.google.com/design/spec/material-design/introduction.html#introduction-goals

• Popularność Androida będzie wymuszać popularność Material Design

• Popularność Androida będzie wymuszać popularność Material Design

• Jest to bardzo dopracowany zestaw wytycznych

• Popularność Androida będzie wymuszać popularność Material Design

• Jest to bardzo dopracowany zestaw wytycznych

• Wykorzystanie Card UI jako pochodna Material Design

• Popularność Androida będzie wymuszać popularność Material Design

• Jest to bardzo dopracowany zestaw wytycznych

• Wykorzystanie Card UI jako pochodna Material Design

• Rosnący wpływ designu aplikacji mobilnych na strony WWW

Więcej subtelnych animacji

• Wpływ Material Design

• Wpływ Material Design

• Przy minimalistycznych projektach graficznych animacje to jeden ze sposobów na wyróżnienie się

• Wpływ Material Design

• Przy minimalistycznych projektach graficznych animacje to jeden ze sposobów na wyróżnienie się

• Animacje są idealną częścią nawigacji

• Wpływ Material Design

• Przy minimalistycznych projektach graficznych animacje to jeden ze sposobów na wyróżnienie się

• Animacje są idealną częścią nawigacji

• SVG na dużo pozwala w tej kwestii

Video Headery

Źródło: http://www.madebyhangar.com/

• Alternatywa dla sliderów

• Alternatywa dla sliderów

• Alternatywa dla animacji CSS

• Alternatywa dla sliderów

• Alternatywa dla animacji CSS

• Dobry kilkusekundowy film może przekazać dużo więcej niż kilka zdjęć

• Alternatywa dla sliderów

• Alternatywa dla animacji CSS

• Dobry kilkusekundowy film może przekazać dużo więcej niż kilka zdjęć

• Pojawia się coraz więcej serwisów z filmami na licencjach CC i CC0.

• Kolekcja przykładów: http://www.hongkiat.com/blog/big-video-headers-websites/

• http://mazwai.com/

• http://www.wedistill.io/

• http://creativecommons.org/weblog/entry/31415

Typografia

Nacisk na responsywność

Nietypowe fonty

Sposób na wyróżnienie się

Źródło: http://simplefocus.com/flowtype/

Źródło: http://www.google.com/fonts/

Źródło: http://www.google.com/fonts/

Stylistyka Low PolyKompatybilna z SVG

Lekka

Prosta do manipulacji i animacji

Wygenerowane dzięki: http://qrohlf.com/trianglify/

Źródło: http://www.designbolts.com/2014/11/23/20-low-polygon-logo-design-examples-a-new-trend-for-2015/

Technologie Webowe

SVG

• Rosnąca rola ze względu na trendy w designie

• Rosnąca rola ze względu na trendy w designie

• Konsekwencja wyścigu na ilość pikseli

• Rosnąca rola ze względu na trendy w designie

• Konsekwencja wyścigu na ilość pikseli

• Więcej bibliotek manipulujących grafikami SVG

• Rosnąca rola ze względu na trendy w designie

• Konsekwencja wyścigu na ilość pikseli

• Więcej bibliotek manipulujących grafikami SVG

• Lepsze wykorzystanie możliwości SVG np. filtrów

WebComponents

Źródło: http://webcomponents.org/

Źródło: http://customelements.io/

Performance-first

• Android podbił rynek tanimi urządzeniami

• Android podbił rynek tanimi urządzeniami

• które nie grzeszą wydajnością

• Android podbił rynek tanimi urządzeniami

• które nie grzeszą wydajnością

• i mają często zainstalowany system w wersji, która jest zbyt wymagająca dla podzespołów.

• Android podbił rynek tanimi urządzeniami

• które nie grzeszą wydajnością

• i mają często zainstalowany system w wersji, która jest zbyt wymagająca dla podzespołów.

• A strona, która się przycina potrafi zirytować tak samo jak strona, która się wolno ładuje

Lektura• http://timkadlec.com/2014/09/js-parse-and-

execution-time/

• http://jankfree.org/

• http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/

• https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

Zanikanie granicy projektant - Front-end developer

• Rosnąca łatwość tworzenia projektów bezpośrednio w przeglądarce

• Rosnąca łatwość tworzenia projektów bezpośrednio w przeglądarce

• Animacji nie da się namalować w Photoshopie

• Rosnąca łatwość tworzenia projektów bezpośrednio w przeglądarce

• Animacji nie da się namalować w Photoshopie

• Malowanie responsywnych układów jest czasochłonne

• Rosnąca łatwość tworzenia projektów bezpośrednio w przeglądarce

• Animacji nie da się namalować w Photoshopie

• Malowanie responsywnych układów jest czasochłonne

• Projektant musi coraz lepiej znać obecnie wykorzystywane technologie

ECMAScript6

• Zasięg blokowy z użyciem słowa kluczowego let

• Zasięg blokowy z użyciem słowa kluczowego let

• Klasy

• Zasięg blokowy z użyciem słowa kluczowego let

• Klasy

• Moduły + ich importowanie

• Zasięg blokowy z użyciem słowa kluczowego let

• Klasy

• Moduły + ich importowanie

• Generatory

• Zasięg blokowy z użyciem słowa kluczowego let

• Klasy

• Moduły + ich importowanie

• Generatory

• Promises

• Zasięg blokowy z użyciem słowa kluczowego let

• Klasy

• Moduły + ich importowanie

• Generatory

• Promises

• Więcej na: https://github.com/lukehoban/es6features

Źródło: https://6to5.org/

Inne

Wearables

• Apple Watch nie zrewolucjonizuje zbyt szybko rynku opanowanego już przez konkurencję

• Apple Watch nie zrewolucjonizuje zbyt szybko rynku opanowanego już przez konkurencję

• Wearables wciąż cierpią z powodu niedostatków technologicznych

• Apple Watch nie zrewolucjonizuje zbyt szybko rynku opanowanego już przez konkurencję

• Wearables wciąż cierpią z powodu niedostatków technologicznych

• Obecnie jest to kategoria sprzętu dla największych fanów gadżetów

Źródło: https://www.youtube.com/watch?v=Xt9aznX9x0I

Eager.ioNie wymaga w zasadzie żadnej wiedzy programistycznej - instalujemy wtyczkę a potem możemy dodawać funkcje do strony. W porównaniu do jQuery to duży skok

Źródło: http://eager.io

Źródło: http://eager.io

Czas porządków

Źródło: https://twitter.com/ddprrt/status/529909875347030016

io.js vs Node.js

Rok 2015 z pewnością będzie rokiem Linuxa ;-)

Wasze prognozy?

Do poczytania• http://foundersgrid.com/design-trends-2015• http://tutorialzine.com/2014/12/the-languages-and-frameworks-that-you-should-learn-in-2015/• http://tympanus.net/codrops2014/• https://medium.com/@LetsAlign/mobile-trends-for-2015-754399c0bdd5• http://glenmaddern.com/articles/javascript-in-2015• http://www.slideshare.net/mobile/divanteltd/ecommerce-trends-from-2014-to-2015• http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015• http://thenextweb.com/dd/2015/01/02/10-web-design-trends-can-expect-see-2015/• https://speakerdeck.com/christse/patterns-of-card-ui-design• http://semantic-ui.com/views/card.html• http://webdesignledger.com/sponsored/7-crucial-web-design-trends-for-2015• http://fontyou.com/blog/6-typography-trends-2015/• http://www.elegantthemes.com/blog/tips-tricks/let-2015-be-the-year-of-understanding-web-font-typography

• http://www.google.com/design/spec/material-design/introduction.html#introduction-goals• http://www.sitepoint.com/10-web-predictions-2015/• http://manuel.bernhardt.io/2014/12/30/generation-javascript/