Prezentacja, w której zebrane zostały przykłady projektowania stron internetowych z zakresu: designu, funkcjonalności i nawigacji. Wszystkie przedstawione trendy są wykorzystywane w 2017 roku.

1. P R E Z E N T U J E
Projektowanie stron www -
Trendy UI na 2017r.

2. Pobierz tutaj
Cała prezentacja w lepszej
jakości dostępna
do pobrania tutaj.
(link także w opisie prezentacji)
https://www.krakweb.pl/trendy-ui-stron-www-na-2017

3. Spis treści
Design i layout
● Stylizowanie typografii -
różnorodność rozmiarów
czcionki [4]
● Paleta żywych, jasnych
kolorów i gradientów [5]
● Układ nieregularnej siatki [7]
● Pełnoekranowe
video w tle [8]
● Pełnoekranowe zdjęcia
HD w tle [9]
● Minimalizm [11]
● Duotone [12]
● Niestandardowa
ilustracja/infografika [14]
● Material design [15]
● Efekt paralaksy [16]
Funkcjonalności
● Spersonalizowane mapy
Google [19]
● Liczby [20]
● Mikrointerakcje [21]
● Chat z konsultantem [22]
● Chatbot [23]
● Powiadomienia push [24]
● Video informacje
o produkcie/
● usługach/firmie [25]
● Karty [26]
Nawigacja
● Scrollowanie
● (przewijanie) [29]
● Pełnoekranowe menu [31]
● Śledzące (przyklejone)
● menu [32]
● Pionowe menu [33]

4. Design i layout

5. Stylizowanie
typografii -
różnorodność
rozmiarów
czcionki
Źródło: http://www.ipp.expert/
projekt i realizacja Krakweb, 2016

6. Paleta
żywych,
jasnych
kolorów
i gradientów
Źródło: http://www.slawkow.pl/
projekt i realizacja Krakweb, 2016

7. Obecnie webdesign pełen jest
zdjęć wysokiej jakości
i unikalnych animacji,
a wszystko to po to, by
zatrzymać na stronie
użytkownika

8. Układ
nieregularnej
siatki
Źródło: http://softwaremind.com/
realizacja Krakweb, 2016

9. Pełnoekranowe
video w tle
Źródło: http://livebank24.com/
realizacja Krakweb, 2017

10. Pełnoekranowe
zdjęcie HD
w tle
Źródło: http://www.fenetra.com.pl/
projekt i realizacja Krakweb, 2015

11. Strony tworzone są pod urządzenia
mobilne. Efektem tego wiele stron
to longpage’e przypominające
infografiki, bądź strony budowane
na bazie kraty (układ kafelkowy).

12. Minimalizm
Źródło: http://www.grzejnikiszklane.pl/
projekt i realizacja Krakweb, 2016

13. Duotone
Źródło: http://holmmarcher.dk/en/

14. Niemal wszystkie strony
są już responsywne.
Często powtarza się, że jeden
temat (dział strony), zajmuje
całą objętość ekranu.

15. Niestandardowa
ilustracja /
infografika
Źródło: http://smartcity.otwartyplan.org/
projekt i realizacja Krakweb, 2015

16. Material
design
Źródło: http://www.flatguitars.com/Charvel-Guthrie-Govan

17. Efekt
paralaksy
Źródło: http://www.firewatchgame.com/

18. Funkcjonalności

19. Aktualnie strony tworzone
są pod ich użytkowników.
Wszystkie udogodnienia mają
na celu, ułatwienie korzystania
ze strony

20. Spersonalizowane
mapy Google
Źródło: http://www.grzejnikiszklane.pl/ogrzewanie-kosciolow-mapa
projekt i realizacja Krakweb

21. Liczby
Źródło: http://www.tktranslate.pl/
projekt i realizacja Krakweb

22. Mikrointerakcje

23. Chat
z konsultantem
Źródło: https://edrone.me/pl/

24. Chatbot
Źródło: https://framework.realtime.co/demo/web-push/

25. Powiadomienia
push
Źródło: https://framework.realtime.co/demo/web-push/

26. Video
informacje
o produkcie /
usługach /
firmie
Źródło: https://www.youtube.com/watch?v=WxAy8wlU_2Y
projekt i realizacja Krakweb

27. Karty
Źródło: https://dribbble.com/

28. Nawigacja

29. Nawigację projektuje się dla
użytkownika strony
internetowej. Ma ona być
wygodna i intuicyjna, zarówno
na desktopie, jak i na
urządzeniach mobilnych!

30. Scrolowanie
(przewijanie)
Źródło: http://nasaprospect.com/

31. W tym roku będziemy obserwować
dużą różnorodność w rodzajach
nawigacji - w poszukiwaniu przez
projektantów alternatywy dla
tzw. hamburgerowego menu.

32. Pełnoekrano-
we menu
Źródło: http://www.ariastudio.com.hk/

33. Śledzące
(przyklejone)
menu
Źródło: http://www.fenetra.com.pl/
projekt i realizacja Krakweb

34. Pionowe menu
Źródło: http://www.nuabikes.com/

35. Powyższe przykłady, to jedynie
niektóre, wybrane przez nas
z wielu pomysłów na wygodną
i interesującą nawigację

36. KILKA
SŁÓW
O NAS...
10 lat doświadczenia
★ Strony www
★ ICEberg CMS
★ Software development
Autorski CMS (ICEberg)
★ Edycja wszystkich treści
★ Pełna optymalizacja SEO
★ Moduły marketingowe

37. PRACUJEMY
M.IN. DLA:

38. ZAPRASZAMY DO ROZMOWY

39. Maciej Chmielowski
✉ kontakt@krakweb.pl
☎ (+48) 530-555-521
☏ (12) 429-30-13
Agencja Interaktywna Krakweb.pl
www.krakweb.pl
ul. Rzemieślnicza 20/124B
30-363 Kraków
Stwórzmy razem nową stronę