Prezentacja omawiająca trendy na rok 2015 w dziedzinie webdesignu, technologii webowych oraz pochodnych dziedzin mogących mieć wpływ na sposób tworzenia stron internetowych.

1. Trendy na rok 2015
przewidywania na bazie analiz i szklanej kuli
Tomasz Dziuda

2. Tomasz Dziuda
Lead Developer @
Twitter: @dziudek
WWW: http://dziudek.pl
Mail: dziudek@gavick.com

3. Design

4. Material Design

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

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

7. • Popularność Androida będzie wymuszać
popularność Material Design
• Jest to bardzo dopracowany zestaw wytycznych

8. • Popularność Androida będzie wymuszać
popularność Material Design
• Jest to bardzo dopracowany zestaw wytycznych
• Wykorzystanie Card UI jako pochodna Material
Design

9. • 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

10. Więcej subtelnych
animacji

11. • Wpływ Material Design

12. • Wpływ Material Design
• Przy minimalistycznych projektach graficznych
animacje to jeden ze sposobów na wyróżnienie się

13. • Wpływ Material Design
• Przy minimalistycznych projektach graficznych
animacje to jeden ze sposobów na wyróżnienie się
• Animacje są idealną częścią nawigacji

14. • 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

15. Video Headery

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

17. • Alternatywa dla sliderów

18. • Alternatywa dla sliderów
• Alternatywa dla animacji CSS

19. • Alternatywa dla sliderów
• Alternatywa dla animacji CSS
• Dobry kilkusekundowy film może przekazać dużo
więcej niż kilka zdjęć

20. • 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.

21. • 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

22. Typografia
Nacisk na responsywność
Nietypowe fonty
Sposób na wyróżnienie się

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

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

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

26. Stylistyka Low Poly
Kompatybilna z SVG
Lekka
Prosta do manipulacji i animacji

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

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

29. Technologie Webowe

30. SVG

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

32. • Rosnąca rola ze względu na trendy w designie
• Konsekwencja wyścigu na ilość pikseli

33. • Rosnąca rola ze względu na trendy w designie
• Konsekwencja wyścigu na ilość pikseli
• Więcej bibliotek manipulujących grafikami SVG

34. • 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

35. WebComponents

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

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

38. Performance-first

39. • Android podbił rynek tanimi urządzeniami

40. • Android podbił rynek tanimi urządzeniami
• które nie grzeszą wydajnością

41. • 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.

42. • 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

43. 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/

44. Zanikanie granicy
projektant - Front-end developer

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

46. • Rosnąca łatwość tworzenia projektów
bezpośrednio w przeglądarce
• Animacji nie da się namalować w Photoshopie

47. • 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

48. • 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

49. ECMAScript6

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

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

52. • Zasięg blokowy z użyciem słowa kluczowego let
• Klasy
• Moduły + ich importowanie

53. • Zasięg blokowy z użyciem słowa kluczowego let
• Klasy
• Moduły + ich importowanie
• Generatory

54. • Zasięg blokowy z użyciem słowa kluczowego let
• Klasy
• Moduły + ich importowanie
• Generatory
• Promises

55. • 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

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

57. Inne

58. Wearables

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

60. • Apple Watch nie zrewolucjonizuje zbyt szybko
rynku opanowanego już przez konkurencję
• Wearables wciąż cierpią z powodu niedostatków
technologicznych

61. • 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

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

63. Eager.io
Nie 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

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

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

67. Czas porządków

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

69. io.js vs Node.js

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

71. Wasze prognozy?

72. 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/