Trendy w webowym projektowaniu graficznym

Projektowanie stron w stylu korporacyjnym, projekty typu grunge, office, projekty odręczne, minimalizm, projekty typograficzne, to bogactwo, z którego projektanci czerpią całymi garściami. Dzięki takiemu zróżnicowaniu strony internetowe nie muszą wyglądać  podobnie.

1. Wysokie nagłówki

Sprawdzają się najczęściej w przypadku stron artystycznych, dobry patent na wszelkiego rodzaju portfolio, na stronach dla młodszego odbiorcy, na stronach produktowych, gdyż tutaj mają one zachwycać, pokazywać skillsy autora strony, skłaniać do składania zamówień etc.

2. Minimalistyczne nagłówki

Wąskie, których zawartość stanowi wyłącznie logo. Często prawą ich stronę wypełnia  poziomy panel logowania, bądź wyszukiwarka. Jest to zabieg praktyczny w szczególności przy projektowaniu themów i templatek sprzedawanych wielokrotnie. Edycja takiego topu przez użytkowników nie sprawia wtedy większych problemów. Piękne przykłady minimalnego headera znajdziecie na stronie Polsatu, Telewizji N itp.

3. Typograficzne layouty

Strona oparta wyłącznie o ciekawy układ treści to niebagatelna sztuka. W przypadku layoutów opartych o czcionkę, często stosuje się tu wielkie fonty o grubej strukturze. Projektanci przywykli także do stosowania niestandardowych dla sieci krojów czcionek. Na dobrze zaprojektowanych  stronach opartych wyłącznie o tekst, pamięta się o zasadzie wykorzystywania maksymalnie 3 krojów fontów.

Zerknijcie na stronkę: http://www.fajnechlopaki.com/

4. Minimalizm

Dzięki ograniczonej ilości detali graficznych, zdjęć, ikonek, buttoników, ozdobników, zadbaniu o ciekawy układ treści projekty nacechowane są klarownością, czytelnością. Strony ładują się szybciej, a ilość elementów składających się na zawartość nie dezorientuje odwiedzających.

5. Slajdery

Slajdery stosuje się głównie tuż pod topem strony, nad główną zawartością strony www. Taki zabieg służy zazwyczaj prezentacji najciekawszych, polecanych materiałów na stronie www, tudzież prezentacji produktów i usług, w ciekawej, przeważnie mocno graficznej formie. Portale, sklepy internetowe, stosują również takie slajdery do prezentacji np. najlepiej sprzedających się produktów, polecanych produktów etc.

6. Wielkie zdjęcia

Ludzkie oko kocha zdjęcia i zwykło szukać  na nich ludzkich twarzy. Porządne fotografie to świetnie prezentująca się strona. Często to zdjęcia właśnie stanowią trzon projektu graficznego, i odwrotnie, złe fotki potrafią popsuć cały efekt wizualny strony. Duże fotosy to błogosławieństwo dla stron poświęconych fotografii.

7. Wysokie stopki

Wykorzystywane są przeważnie na pionową powtórkę nawigacji, zawierają notki o autorach, linki do profili społecznościowych, linki do zaprzyjaźnionych stron www, formularz kontaktowy itp. Footer tego typu, a właściwie pozycja bottom, jest powszechny na blogach opartych o WordPressa. Rozgraniczamy te pozycje ze względu na to, że pod wymienionymi pozycjami umieszczony jest powszechny dla stron internetowych footer, wąski pasek, którego części składowe to zazwyczaj: informacje o prawach autorskich, powtórzenie najważniejszych pozycji menu, odnośniki do regulaminu, polityki prywatności, działów takich jak patronat, czy reklama, oraz link powrotu do górnego obrębu strony internetowej.

8. Dużo białej przestrzeni

Biała przestrzeń, zwiększa czytelność i przejrzystość strony. Daje projektom oddechu. Niby proste to i oczywiste zagadnienie, a tak wiele świetnie zapowiadających się projektów zniszczonych jest właśnie przez ciasnotę między poszczególnymi blokami tekstu i grafiki.

9. Duże ikonki

Podkreślają zazwyczaj belki nagłówkowe poszczególnych  działów. Ciekawie sprawdzają się jako elementy wyróżniające poszczególne usługi, świetnie wyglądają na portfolio. Wzmacniają widoczność poszczególnych punktów startowych stron internetowych.

10. Elementy przezroczyste

Służą zazwyczaj jako „nakładki” na mocno graficzne tło strony. Służą także jako „podkładki” pod tekst, który ciężko by było przeczytać, gdyby znajdował się bezpośrednio na ozdobnym tle strony.

11. Elementy odręczne

Na grafikę tego typu stron składają się kroje pisma o charakterze odręcznym. Standardem w tego typu projektach są też pędzle, wszelkiego rodzaju linie, strzałki wyrysowane wcześniej, elementy skanowane, z których stworzono oryginalne pędzle.

12. Coś więcej niż zdjęcia we wstępach artykułów

Trend panujący głównie na blogach mających zapędy magazynowe. Chodzi o przygotowanie indywidualnych grafik zachęcających do przeczytania całości opublikowanego materiału. Patent polega na zrobieniu ciekawego fotomontażu, zgrabnej graficzki, wraz z tytułami artykułu w pełnej, lub skróconej formie.

13. Bloki informacyjne

Czyli frazesy typu: „Cześć tu bombel, dobry ziombel. Jestem designerem…”. Występują głównie w projektach portfolio. Często oparte są wyłącznie na grafice, łączącej ciekawe tło z nietuzinkową czcionką. Najczęściej grafika ta nie jest odsyłaczem, to jakiejś szerszej informacji na temat autora czy grupy. Kiedy przyjrzeć się temu elementowi uważniej jednoznacznie można stwierdzić, że śmiało można go sobie podarować, bo zazwyczaj zajmuje on dość sporo zbyt cennej przestrzeni.

14. Styl magazynowy

Jakiś czas temu zapanował taki trend i nic na to poradzić nie można. Jednym z najładniejszych tego typu przykładów, jakim zachwyca się świat projektowy jest strona http://ugsmag.com/

15. Nadawanie perspektywy

Tego typu rozwiązań jest stosunkowo mało, może więc warto powalczyć z sobą i jakąś rzecz w tym stylu stworzyć. Nawet w charakterze ćwiczebnym.

16. Grafika w stylu retro

Najlepszym źródłem inspiracji w przypadku tego typu projektów są rzecz jasna galerie starych plakatów, etykiet, okładki płyt winylowych i okładki wiekowych książek. Inspirujące mogą być także stare fotografie, wiekowe wnętrza, stare odbiorniki radiowe i telewizyjne itp.

17. Layouty w stylu grunge

Tekstury graffiti, rdzy, starego papieru, plamy, to wszystko i wiele więcej mieści się w tematyce grunge.

18. Szablony graficzne teksturowane

W zasadzie można ten punkt można by połączyć z punktem poprzednim, a jednak nie do końca. Mimo tego, że oba punkty traktują o layoutach, które opierają się o tekstury, jednak w tym punkcie pragniemy uwzględnić szablony graficzne oparte o tekstury drewna, elementów biurowych, wiążących się z tematyką ekskluzywną.

Zwróćcie uwagę na teksturę drewna na tle: http://brandstorm.pl/

19. Wektorowe postaci

Charaktery wektorowe potrafią bardzo wzbogacić projekt stając się przy tym swego rodzaju maskotkami reprezentującymi dana firmę, tytuł magazynowy, czy bloga.

20. Projektowanie gridowe

Może i zbyt dużo małych boksów tekstowych rozłożonych precyzyjnie na całej szerokości ekranu to lekka przesada, ale projektowanie na siatce zwiększa czytelność layoutów, które stają się logiczne i przejrzyste. Do tego używając siatki łatwo zapanować nad białą przestrzenią.

21. Obrazkowe tło zajmuje lwią część ekranu

Bardzo efektowny patent na stronę www. Właściwie zamiast się rozpisywać, warto zerknąć: http://www.creativespaces.net.au/

Podsumowanie

Powyższy materiał można uzupełnić o modę na: strony przewijane poziomo i strony składające się z jednego pliku, o których pisaliśmy w jednym z poprzednich artykułów dotyczących projektowania.

W powyższym zestawieniu nie uwzględniliśmy dość drętwego stylu korporacyjnego oraz coraz częściej wplatanych w webdesign elementów 3d. Jak widać na powyższych przykładach już same one są mieszanką stylów.

About the author