Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Artystyczne projektowanie stron internetowych

Autor: Piotr Karpiuk o piątek 25. Listopad 2011

Miałem ostatnio okazję przejrzeć książkę dla początkujących webmasterów: Artystyczne projektowanie stron internetowych, Jason Beaird. Nie jest to nowość, ale kilka zawartych tu informacji wydało mi się interesujących.

Autor proponuje, aby w początkowych stadiach realizacji projektu (rozmowa z klientem, pierwszy szkic makiety) w ogóle zrezygnować z komputera i sięgnąć po bardziej tradycyjne technologie:

Na pierwszym spotkaniu z klientem chodzi o komunikację. Staraj się słuchać więcej, niż mówić, i przynieś ze sobą bloczek kartek papieru, na których możesz notować. Nie przynoś laptopa. Komputery mają ekrany, a ludzie mają zwyczaj wpatrywać się w nie. Jeśli klient nie będzie gapił się w ekran przez cały czas, to Ty będziesz to robił podczas zapisywania notatek. Jeśli musisz przywlec technologiczne gadżety na spotkanie, niech to będzie dyktafon. Z mojego doświadczenia wynika jednak, że notes jest mniej przerażający dla klienta, który często nie jest zbyt obeznany z nowoczesną technologią. (…) Musimy zaprojektować interfejs na czystej kartce papieru. Łatwo jest stracić z oczu sam projekt, jeśli zaczynasz myśleć o układzie graficznym przed komputerem.

Kilka innych uwag o designie stron WWW:

  • Jesteśmy tak przyzwyczajeni do wielokolorowych witryn internetowych, że kiedy natrafiamy na projekt stosujący tylko jeden kolor, to naprawdę nas on zaskakuje.
  • Wśród najczęściej wykorzystywanych elementów w projektach Web 2.0 są gradienty tła. Projektanci stron internetowych często żartują, że jeśli strona nie ma żadnych gradientów, to nie jest to Web 2.0.
  • Wiele stron zamiast używać stopki od głównych odsyłaczy i informacji o prawach autorskich rozszerza tę zaniedbywaną „nieruchomość” strony, aby zawierała informacje kontaktowe, rozbudowaną nawigację strony i dodatkowe treści, takie jak blogroll (zestaw linków do innych blogów), linkroll (zbiór odsyłaczy do innych stron), tzw. Flickr badges (miniaturowe zdjęcia dodawane do stron WWW), itd. Chociaż zamieszczenie głównych elementów nawigacyjnych na dole strony nie jest najszczęśliwszym pomysłem, to pomysł dołączenia w tym miejscu dodatkowej nawigacji i treści stał się ostatnimi czasy modny.
  • Możesz zauważyć, że w większości dwukolumnowych układów stron internetowych większa kolumna jest często bardzo jasnego koloru, co jest taktyką tworzącą dobry kontrast dla tekstu i zasadniczej treści. Drobna kolumna nawigacyjna jest zwykle ciemniejsza, a jakiś rodzaj obramowania lub jest tak sporządzona, aby — wyróżniając się w jakiś inny sposób — zapewniała równowagę kompozycji.
  • Kiedy powiązane z treścią zdjęcia są umieszczone w tekście, stanowią one graficzne „zakładki” pomagające odwiedzającym witrynę w zapamiętaniu, o czym traktowała strona, a także gdzie czego szukać, gdy później do niej powrócą.
  • Układ strony o zmiennie stałej szerokości to propozycja układu sensownie reagującego na dość znaczne różnice w rozdzielczościach ekranów Internautów: kiedy powiększymy okno przeglądarki z 800 pikseli do 1024 szerokości lub więcej, wówczas po prawej stronie pojawia się dodatkowa kolumna którą możemy wykorzystać na reklamy, zajawki, formularz do przeszukiwania witryny itp.

Wśród porad dotyczących tworzenia harmonijnych połączeń kolorystycznych znalazł się odnośnik do ciekawej witryny Color Scheme Designer:

Pozwala ona wybrać rodzaj schematu kolorów (np. triada, analogiczny, tetradyczny itp.) po czym w prosty sposób manipulować myszką aby uzyskać paletę interesujących kolorów, każdy gotowy do wklejenia do własnej strony WWW.

Nie czuję się ekspertem w dziedzinie tworzenia stron WWW, dlatego od dawna intrygowało mnie dlaczego zaokrąglone narożniki w projekcie strony WWW cieszyły się taką estymą wśród webmasterów. W książce znalazłem wyjaśnienie: otóż poza tym że pola z zaokrąglonymi rogami łagodzą kompozycję, tworząc bardziej naturalną i spokojną atmosferę, jeszcze do niedawna uzyskanie takiego efektu było po prostu… trudne i wiązało się z ręcznym tworzeniem obrazków rogów w jakimś Photoshopie — jedynie prostokątne kształty były łatwe do przedstawienia w HTMLu i CSS. Przypomina to trochę tłumaczenie dlaczego purpurowa barwa tkanin w średniowieczu i starożytności była tak nobilitująca: po prostu była ciężka do uzyskania w tamtych realiach i pozwolić sobie na nią mogli tylko królowie.

Umiejętność rozpoznania aktualnych trendów w projektowaniu stron WWW jest niezbędna w tworzeniu skutecznych, nowoczesnych projektów. Podobnie znajomość minionych tendencji, które wystąpiły poza krótką historią Internetu, pomoże Ci w znalezieniu własnego stylu i stworzeniu oryginalnych projektów. Orientację w świecie i inspirację można czerpać np. z takich źródeł:

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>