Kompozycja strony w czterech słodkich punktach

 

Prostokąt o proporcjach 1.6 x 1.0 - nasze "płótno"

Dwu- czy trzykolumnowy layout? Menu górne czy boczne? Stopka? Tak, Poproszę. Voila! Mamy gotową stronę.

Ten blog nie zostałby nazwany KISSdesign, gdyby traktował o stronach wyciętych z szablonu. Sieć to prawdopodobnie najbardziej konkurencyjne środowisko z jakim mamy do czynienia. Użytkownik naszej strony ma w zasięgu jednego kliknięcia miliony innych. Co zrobić by zatrzymać go choć na chwilę dłużej? Z pewnością treść.

A design? Może tylko pomóc. Weźmy na warsztat kompozycję strony. Choć w sieci, nasze płótno nie ma ściśle określonych wymiarów (różne rozdzielczości monitorów, proporcje ekranu itp.), warto  samemu zadbać o jego odpowiedni rozmiar. Z różnych przyczyn kultura przyniosła nam magiczne proporcje, które wydają się nam piękne. Weźmy na przykład kartki formatu A4. Albo format flag państwowych (powyżej).

Co prawda wysokość strony jest zwykle większa niż jej szerokość, ale zasada pozostaje ta sama. Resztę możemy odseparować wizualnie – linią poziomą, odstępem, odrębną kolorystyką itd.

Na rysunku powyżej, zaznaczyłem tzw. sweet spots, czyli punkty, w których krzyżują się linie pomocnicze. Wyznaczają one centrum zainteresowania czytelnika. Zobacz jak można je wykorzystać!

Symetryczna kompozycja strony internetowej

Symetryczna kompozycja strony internetowej

Wieje nudą? Strona jest pozbawiona dynamizmu. Uwaga czytelnika koncentruje się wyłącznie wokół grafiki. Słodkie punkty są zmarnowane. Pora na drugi przykład.

Dynamiczny layout strony internetowej

Dynamiczny layout strony internetowej

Każdy element strony zawiera sweet spot. Poza tym wykorzystanie pustego miejsca (white space) jest bardziej efektywne. Separuje treść od reszty. Zwróć uwagę, że ta kompozycja strony przypomina drukowane publikacje. Margines górny i lewy kierują skupienie czytelnika do centrum. Ostatecznie jego uwaga koncentruje się na tekście, leżącym w prawym, dolnym rogu. Dokładnie w ten sam sposób wędruje nasz wzrok, gdy czytamy książkę.

Słyszałeś o sweet spotach? Korzystasz z nich, czy ufasz swojemu wyczuciu? Napisz o tym w komentarzu!

 
 

Stylowanie wydruku

 

Jak zaimplementować stronę print-friendly? Wykorzystamy przeznaczony do tego oddzielny arkusz stylu. O wszystkim decyduje atrybut media:

<style type="text/css" media="screen">@import url("domyslny-arkusz.css");
</style>
<style type="text/css" media="print">@import url(“arkusz-do-wydruku.css");
</style>

To jednak nie wszystko.  O czym szczególnie należy pamiętać formatując stronę do wydruku? Oto garść porad:

  • Dla dużych fragmentów tekstu używaj czcionki szeryfowej – tę czyta się na papierze lepiej niż bezszeryfową.
  • Usuń formatowanie linków – i tak nikt z nich nie skorzysta.
  • Schowaj bloki odpowiedzialne za nawigację – użytkownika interesuje przecież zawartość TEJ strony.
  • Tło nie jest drukowane, dlatego pamiętaj o odpowiednim kontraście dla koloru tekstu (szczególnie jeżeli Twoja strona jest w kontrze)
  • Usuń marginesy strony.
  • Dostosuj szerokość layoutu, by zmieściła się na jednej szerokości kartki A4.
  • Stosuj wymiary odpowiednie dla wydruków – np. dla czcionek – pt.
  • Testuj korzystając z drukarek PDF – oszczędzaj drzewa ;-)