Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPWWWWątek: Jak zwiększyć przejrzystość i użyteczność layoutu/strony WWW?
Strony: [1]
DrukujPobierz PDF
Autor Wątek: Jak zwiększyć przejrzystość i użyteczność layoutu/strony WWW?  (Przeczytany 34134 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
ubivbehwbcvjh
Użytkownik

Reputacja: 14 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
Licencja: Copyright
Wiadomości: 1 182
Galeria Użytkownika

ubivbehwbcvjh


Zobacz profil
« : 23.03.2009, 19:15:29 »

Jak zwiększyć przejrzystość i użyteczność
layoutu/strony WWW?

Poradnik

Opracowanie: ubivbehwbcvjh



Witam, a zarazem zapraszam do przeczytania poradnika traktującego o zwiększaniu przejrzystości, czystości i wygody korzystania ze strony. Oprócz podstaw takich jak kolorystyka czy układ chciałbym poruszyć kilka dodatkowych, tu żeby nie spalić... aspektów stron. Tutorial traktuje o tychże aspektach pobieżnie, trudno opisać wszystko dokładnie w tekście, który ma zapoznać początkujących w tej dziedzinie z ogólnymi, nie tyle zasadami, co cechami stron.

Po pierwsze i to tyczy się całego poradnika: należy odróżnić projektowania strony internetowej od projektowania plakatu, kartki świątecznej czy bilboardu! Ma ona bowiem często, właściwie zawsze, zupełnie inne cechy i funkcje niż powyższe dziedziny.



Lime Point Kolorystyka i elementy graficzne

Stworzenie odpowiedniej palety kolorów i trafne wykorzystanie jej na stronie to właściwie jedna z najważniejszych części layoutu. Pierwszą rzeczą, nad którą powinniśmy się zastanowić dobierając kolorystykę, jest jej zgodność z tematyką witryny. Przykładowo: nie użyjemy żółtych kolorów do strony salonu dentystycznego albo biało-niebieskich do kółka harleyowców. Musimy wczuć się w temat i wykreować sobie w głowie podstawowe skojarzenia na zasadzie: strona lekarska -> sterylność, czystość -> niebieski, biały; strona harleyowców -> power, skóra, siła, brody -> czarny, czerwony, srebrny.

Drugą ważną częścią tworzenia kolorystyki jest zgranie jej z układem. Kolory nie powinny się zlewać i wszystko powinno być czytelne. Wszakże strony internetowe mają najczęściej funkcję informacyjną!

Warto tutaj wspomnieć o kontrastach. Jak wiemy, strony dzielą się na różne części: header, menu, sidebary, content, gdzie znajdziemy często newsy, wyszukiwarkę czy też możliwość zamówienia subskrypcji, w końcu stopkę oraz wiele innych, które można by wypisywać w nieskończoność. Zazwyczaj strona wygląda ładniej, gdy pewne rzeczy będą wyeksponowane, pewne mniej. Tutaj też z pomocą przychodzą nam kolory. Tak na przykład mając białe tło strony możemy wmontować subskrypcję na czarnym tle tylko dlatego, żeby wzrok oglądającego samoczynnie na nią trafił. Używamy takich zabiegów wtedy, gdy chcemy zainteresować odwiedzającego pewną rzeczą, ale nie tylko. Zwykle po prostu strona wygląda przejrzyściej, kiedy wydzielimy jakoś sidebar, wydzielimy wyszukiwarkę od newsów itd.

Wiadomo - zawsze miło wprowadzić trochę grafiki, zachęcić i zainteresować nią potencjalnego odwiedzającego naszą stronę i nie mam temu nic przeciwko. Należy jednak pamiętać, że najważniejszy jest przekaz merytoryczny i to, co strona ze sobą niesie, a nie ładne opakowanie (choć jak się niedługo dowiecie te dwie rzeczy można powiązać). Bardzo łatwo możemy przesadzić i po prostu zrazić kogoś do naszej strony i wcale nie jest to rzadko spotykane (pozdrawiam flashowe portfolia niektórych agencji). Jeśli chodzi o dodawanie elementów graficznych - powinny mieć związek z tematem strony i trzymać jej charakter. Tutaj też posłużę się przykładem: listki do owych harleyowców nie pasują, jednak jakieś metaliczne połyski, trochę ognia, coś co przekazuje nam tę siłę - owszem. Nie ma co dyskutować z twierdzeniem, że większość stron wygląda lepiej, gdy coś się z nimi dzieje, nie śpią. Do tego nawet nie trzeba dodawać kolejnych obrazków, listków, tekstur. Dusza tkwi w kolorystyce.

Bardziej rozbudowana grafika na stronie może mieć jednak kilka zalet. Wspomniałem już o zainteresowaniu oglądającego i jest to oczywiście podstawowy plus tej grafiki, z którym wiąże się kilka innych. Budowanie pozytywnych skojarzeń jest bardzo ważne i nie zawsze można temu podołać poprzez same kolory. Kolejną zaletą jest zapadanie w pamięć bardziej charakterystycznej strony oraz mocniejszy i dobitniejszy jej przekaz - tak, nie tylko za pomocą tekstu budujemy przekaz. Grafika skupia też oko oglądającego i pozwala nim pokierować. Należy pamiętać o tym, że grafika waży, a skoro waży to i łatwo można z tą wagą przeholować. Nie zapominajmy o tych słabszych komputerach i łączach, gdyż chcemy wywołać pozytywne wrażenie u jak największej ilości osób.

Wiele palet kolorystycznych możemy znaleźć na stronie http://www.colourlovers.com jednak nie ma to jak satysfakcja ze stworzenia porządnych kolorów samemu.



Lime Point Układ

O układzie trochę napisałem już w poprzedniej części poradnika, ale myślę, że przyda się coś więcej. Zacznę od tego, że przed zaprojektowaniem strony warto rozrysować sobie układ na kartce. Wtedy wiemy, na czym stoimy, mamy plan i działamy roztropnie. Pamiętajcie jednak, że kartka nie zastąpi widoku projektu w komputerze i praktycznie zawsze potrzebne będzie dokonanie pewnych zmian w stosunku do naszego szkicu.

Podstawowy układ stron to (od góry): header (logo/nazwa strony, narzędzia, wyszukiwarka), menu (menu główne oraz ścieżka nawigacyjna [tutaj jesteś]), content (sidebar [z menu], nagłówek, tekst powitalny, właściwa treść), stopka (menu, copyrighty). Od takiego układu jednak jest wiele odstępstw, mało tego, nie warto się go kurczowo trzymać, bo tylko na złe nam to wyjdzie. Często bowiem widzimy połączone menu z headerem czy sidebarem itd. Układ każdej strony powinniśmy dokładnie przemyśleć i ułożyć go pod elementy, które na tej stronie mają się znaleźć i które chcemy uwidocznić.

Ważna jest przejrzystość układu. Tworzenie zbyt dużego chaosu na stronie na pewno jej nie pomoże i choć fajnie to wygląda, nie jest zbyt wygodne. Przejrzystość wiąże się też z intuicyjnością. Wchodząc na stronę nie spodziewamy się menu  umieszczonego pod stopką czy stopki nad headerem.  Warto też wyrównywać kolumny czy nagłówki w kolumnach, warto równać wszystko do jednej bocznej krawędzi. Tak jest po prostu ładniej.

Żeby było zabawniej z intuicyjnością także się coś wiąże, a jest to kierowanie wzrokiem odwiedzającego, swoiste prowadzenie go przez czeluście naszej witryny. Tutaj spotykają się takie rzeczy jak kolorystyka, ekspozycja i ustawienie. Tworząc stronę wyobraźmy sobie po co potencjalny gość tam wejdzie i ułatwmy mu drogę do celu. Bardzo często zdarza mi się wejść na jakąś stronę i nie znaleźć funkcji, która by mnie interesowała - przemyślcie wprowadzenie udogodnień dla użytkowników przed rozpoczęciem pracy. Pomogą nam w tym oprócz wyżej wymienionych czynników przeróżne szybkie odnośniki oraz ograniczenie ilości podstron, ale także zupełnie nowe opcje i możliwości, śledźcie nowinki!

Jedną z ważnych rzeczy, o której wiele osób zapomina jest tworzenie layoutu pod kod. Nie rezygnując z grafiki i innych elementów starajmy się ułatwić kodującemu napisanie kodu. Często tym kodującym jesteśmy my, więc tym bardziej - nie ma nic miłego w byciu masochistą. Tutaj wypadałoby znać chociaż podstawy kodowania, co trudne nie jest, a przyda nam się w projektowaniu. Jak to pięknie ujął palmiak, kodowanie layoutu przygotowanego przez DTP-owca może być katorgą.

Ostatnim aspektem jest treść. Różne wiadomości mają inne miejsce na stronie. Nie wrzucimy na stronę główną wielkiej bazy zdjęć lub wszystkich możliwych informacji. Odpowiednie zagospodarowanie strony głównej i podstron jest bardzo ważne, ale wbrew pozorom bardzo trudne. Nie powinniśmy zasypywać użytkownika zbyt wieloma informacjami (głównie tyczy się to strony głównej), ale pokazywać ogólne informacje i dopiero po ich przejrzeniu umożliwić przeniesienie się do bardziej szczegółowych treści (właśnie na podstronach).



Lime Point Przejrzystość a typografia

Kolejnym czynnikiem zapewniającym stronie przejrzystość jest typografia, czyli odpowiednie użycie fontów na stronie. Liczy się wielkość, kolor, ustawienie i przede wszystkim krój.

Krój czcionki należy dopasować do klimatu strony. Jeśli chcemy wzbudzić poczucie elegancji warto wybrać czcionki z serii "handwriting" lub inne szeryfowe. Co innego w przypadku typowo informacyjnej treści strony - tutaj przydałaby się czcionka łatwa i przyjemna w czytaniu. Oczywiście co innego napisy w headerze, np. motto, a co innego aktywny tekst, w którym mamy zdecydowanie mniejsze pole do popisu. Należy jednak pamiętać o tym, aby całość ze sobą współgrała.

Podobnie przedstawia się sytuacja z kolorami. Wszystko polega na dopasowywaniu do całości. Identycznie jest z wielkością. Powinniśmy oddzielić nagłówki i tekst pod nimi w jakiś sposób. Zwiększenie wielkości nagłówka jest dobrym pomysłem. Można też pogrubić napis, lecz tę metodę zostawiłbym raczej na eksponowanie pewnych części tekstu pod nagłówkiem.

Rzucę jeszcze praktyczną wskazówką na koniec. Zawsze ograniczajcie ilość czcionek i ich kolorów w projekcie do dwóch, trzech. Przy większej ich ilości wszystko może się nieprzyjemnie wymieszać. Są oczywiście projekty specyficzne, lecz tutaj omawiam zwykłe serwisy.



Lime Point Dodatkowe elementy

Czas napisać o dodatkowych elementach a to zwiększających usability, a to uatrakcyjniających wygląd strony.

Pierwszym z nich jest ikonka, a właściwie ikonki. Są to jak wiemy małe obrazki przedstawiające charakterystyczne dla danego odnośnika lub dla danej części strony rzeczy, w jakiś sposób je odzwierciedlające. I nie dość, że mogą one uatrakcyjnić wygląd witryny, zwiększają wygodę korzystania z niej, a przy tym wygląd schodzi na drugi plan. Nie warto ich nawalić za przeproszeniem wszędzie, ale w niektórych miejscach lepiej wygląda odnośnik z ikonką niż bez - po prostu. Najczęściej używa się ich na większych portalach i serwisach.
Ikon można jednak użyć jako nagłówki lub pewne punkty na stronie co wiąże się z ich większym rozmiarem. Możemy dzięki nim uprofesjonalnić witrynę, przynajmniej w oczach zwykłego człowieka.

Ikony wbrew pozorom nie jest tak łatwo stworzyć samemu. Z pomocą przychodzi nam Internet, gdzie z łatwością znajdziemy darmowe zestawy ikon na wolnej licencji. Wystarczy wpisać w Google frazę "web icons" i już wyskoczą nam strony takie jak: http://www.freeiconsweb.com/.

Pozytywne przykłady: (klikając przejdziesz na stronę)




: D



Kolejnym elementem uprzyjemniającym pobyt na stronie są hovery. Są to podświetlenia czy jakiekolwiek zmiany wyglądu odnośników po najechaniu na nie - od zmian koloru tekstu do zmiany całego buttona. Istnieje naprawdę wiele rodzajów hoverów, co daje nam praktycznie nieograniczone pole do popisu. Osobiście wolę korzystać ze strony, na której coś się dzieje po najechaniu na odnośnik, poza zwykłym pojawieniem się łapki. Ożywia to na swój sposób stronę, co jest kolejną zaletą i zmiana wcale nie musi być znaczna.
Pokrewną sprawą są odnośniki w tekście. Konwencją, choć na szczęście powoli mijającą, jest ich niebieski kolor oraz oznaczenie odnośników już klikniętych (najczęściej fioletem). Nie namawiam do używania tych dwóch kolorów, osobiście wolę dopasować je do ogólnej kolorystyki strony, lecz zaznaczenie i wyróżnienie odnośników jest ważne.

Pozytywne przykłady: (klikając przejdziesz na stronę)






Dobrze by było nie zapomnieć o liniach oddzielających pewne elementy od innych. Dzięki nim całość nie będzie się zlewać, a odpowiednio wykonane mogą dodać smaczku naszej stronie. Nie powinno być ich za dużo, ale linie podziału uporządkowują w pewnym sensie treść i ułatwiają przeglądać witrynę. Możemy dać je np. w kolumnie po każdym newsie, w pionie między contentem a sidebarem lub między topem a menu czy menu a contentem. Oczywiście takie linie nie pasują do każdej strony, często linie zastępuje po prostu większy odstęp. Przykładem takiego separowania mogą być aktualności na niektórych stronach, gdzie zamiast takiej linii (zrobionej na różne sposoby) jest po prostu większy, grubszy czy też różny kolorystycznie tytuł newsa lub nagłówek całego div-a z newsami.
Na koniec: linia to nazwa umowna, jej rolę może spełniać cień, jakieś ozdoby (przy stylizowanych projektach) czy cokolwiek innego - nawet zwykły odstęp, trochę światła.
Wszystko zależy od designu, warto jednak wiedzieć, że coś takiego istnieje i chce nam pomóc.

Pozytywne przykłady: (klikając przejdziesz na stronę)





Lime Point Koniec



I w ten oto sposób, niczym zwycięska armia przechodzi przez łuk tryumfalny, my przebrnęliśmy przez setki linijek, dzięki którym wirtualne życie stanie się łatwiejsze, a wirtualny świat uporządkowany dużo lepiej od trawników w polskich parkach.
Dzięki za uwagę.


« Ostatnia zmiana: 26.04.2011, 10:18:55 wysłane przez ubivbehwbcvjh » Zapisane

lol32
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 9
Galeria Użytkownika



Zobacz profil
« Odpowiedz #1 : 06.03.2010, 16:02:41 »

Nie pisano od iluś tam dni.. A co tam!
Fajny tutorial Uśmiech, nawet trochę mi pomógł w zbliżeniu się do projektowania layoutów...
<a href="http://www.gimpuj.info/"><img src="http://proxy.gimpuj.info/gallery/33954_15_02_10_3_35_56.png" alt="My first layout..." title="My first layout..." /></a>
Możecie ocenić.
Zapisane

Nie ma zatem takiego człowieka, który kocha cierpienie samo w sobie, kto by do niego dążył lub chciał go doświadczyć, tylko dlatego, że jest to cierpienie, a dlatego, że czasami zdarzają się takie okoliczności, w których to cierpienie może doprowadzić go do jakiejś wielkiej przyjemności. Dając przykład banalny: któż z nas kiedyś nie podejmował się trudnego wysiłku fizycznego mając na względzie uzyskanie z tego korzyści? Kto ma jakiekolwiek prawo obwiniać człowieka, który wybiera przyjemność nie wiążącą się z przykrymi konsekwencjami, albo tego, kto unika takiego cierpienia, które nie prowadzi do przyjemności?" (i dalej: "jednocześnie potępiamy ze słusznym oburzeniem i czujemy niechęć do ludzi, którzy są tak owładnięci urokami nietrwałej przyjemności, tak zaślepieni jej pragnieniem, że nie dostrzegają, iż następstwem ich postępowania będą z pewnością cierpienie i trudność

Łukasz
Użytkownik

Reputacja: 7 Offline Offline

Płeć: Mężczyzna
GIMP: 2.8 + GAP
Licencja: CC-BY-SA
Wiadomości: 902
Galeria Użytkownika


...


Zobacz profil
« Odpowiedz #2 : 15.05.2010, 20:52:10 »

Genialny tutorial... Dużo ważnych informacji, które na pewno mi się przydadzą...
Zapisane
Strony: [1]
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPWWWWątek: Jak zwiększyć przejrzystość i użyteczność layoutu/strony WWW?
Skocz do: