[Grafika]Szata graficzna na WWW - porady ogólne

[witmann 0]

Postanowiłem dać ten temat z racji chwilowego braku czasu na pisanie tutoriala o tym jak zrobić jakiś layout oraz dlatego, że imho lepiej poznać podstawowe wskazówki zanim się człowiek za robienie czegoś zabierze. Podam tu pewne kwestie, którymi się sam kieruję pracując nad szatą graficzną do jakiegoś serwisu.

 

1. Pamiętaj, że nie cały obszar udostępniany przez daną rozdzielczość jest widoczny bez przewijania w przeglądarce. Przyjmuje się, że pasek przewijania ma szerokość 16 pikseli, dlatego też szerokość strony jest najczęściej mniejsza o 20 pikseli od zadeklarowanej rozdzielczości (te 4px tak na wszelki wypadek). Na przykład robiąc stronę, która z założenia ma być dopasowana do rozdziałki 1024x768 robi się stronę o maks. szerokości 1004 piksele (najczęściej się zaokrągla do 1000).

 

2. Z moich (i nie tylko moich) badań wynika, że ponad 90% internautów używa rozdzielczości 1024x768 lub większej. Przyjmuje się więc tę pierwszą za standardową i większość stron dopasowuje do niej.

 

3.Tworząc nowy projekt w Photoshopie ustal jego wymiary na trochę większe niż finalna praca, by dać sobie pole do manewru. Ja zazwyczaj tworzę plik o wymiarach 1030x800 i za pomocą prowadnic (Guides - View --> New Guide) ograniczam sobie obszar roboczy do takiego, jaki chcę.

 

4. Używaj siatki pomocniczej (View --> Show Grid). Sam najczęściej używam siatki 10x10 px (lub 20x20 podzieloną na 2) i kolorze lekko różniącym się od koloru tła (Edit --> Preferences --> Guides, Grid & Slices).

 

5. Bardzo ważne jest odpowiednie użycie barw. Najlepiej wybrać 2 lub 3 kolory, które będą się wzajemnie uzupełniały. Stosowanie większej ilości kontrastujących ze sobą kolorów może odwracać uwagę oglądającego od przekazywanej treści. Oczywiście można stosować różne odcienie tego samego koloru (na przykład gradient od ciemnego niebieskiego do błękitu).

 

6. Czytelność i intuicyjność interfejsu to podstawa. Internauci są przyzwyczajeni do pewnych układów elementów na stronie i należy raczej unikać zmiany tych przyzwyczajeń. Oczywiście nowe pomysły są jak najbardziej zalecane, gdyż nikt nie lubi nudy, jednak należy je wprowadzać z głową - tak, aby nie wywracały znanej wszystkim struktury do góry nogami.

Oto najpopularniejszy układ:

-banner głowny, nie za duży (maks. 1/3 wysokości domyślnej rozdzielczości)

-czytelne menu pionowe po lewej stronie i/lub proste poziome menu tuż pod bannerem głównym

-wyszukiwarka (o ile jest) w prawym górnym rogu. Najważniejsze informacje na środku, w 2/3 wysokości ekranu (patrząc od dołu), czyli zaraz pod bannerem/menu poziomym.

-reszta informacji poukładana w miarę dowolnie, jednak z zachowaniem pewnej logiki

-na dole stopka z informacjami na temat praw autorskich (ważne - nie jest to wymagane, jednak lepiej napisać ten "copyright") wraz z informacjami technicznymi (np. domyślna rozdzielczość/głębia kolorów).

 

7. Tekst powinien być czytelny. Najlepiej czarny na białym tle lub biały na tle czarnym, jednak można trochę dostosowywać te kolory do szaty graficznej (np. tło granatowe i biały tekst, lub tło białe a tekst ciemno szary itp.). Nie powinno się stosować czcionek szeryfowych (tych z "daszkami/haczykami" typu Times New Roman). Zostały one zaprojektowane z myślą utrzymywania wzroku na linii tekstu w książce, jednak nie sprawdzają się na ekranie monitora. Dobre czcionki do WWW to Verdana, Arial, Helvetica (dobrze jest podawać je w takim zestawie, gdyż na różnych kompach mogą być zainstalowane różne fonty).

 

Tyle na początek. Jak przypomnę sobie więcej, to dopiszę Mam nadzieję, że się przyda.

[rzepak 0]

 

a ja mam jedną radę:

Używaj wyobraźni i ogranicz ją rozsądkiem

[Filipinho 0]

@Witmann

 

Byłbyś może zainteresowany zrobieniem dla mnie layouta??

 

Oczywiście nie za darmo

[witmann 0]

Filipinho - jak najbardziej, ale szczegóły na PW.

[BeneQ 0]

byc moze komus sie to przyda (tak AD. pkt5)

 

http://www.wellstyled.com/tools/colorscheme2/index-en.html

[theGamer 0]

A wiec dzieki za porady biore sie za mój pierwszy szablon

 

Pozdro

[Filip 0]

Bardzo dobry poradnik ! Pozatym polecam witmann'a Dzięki niemu moje layouty wyglądają coraz lepiej ( mam nadzieje )

[KlaxoN 0]

Mam pytanko:

Kiedyś (w dziecinstwie ) robiłem kilka layout'ów, ale na zasadzie takiej że robiłem w photoshopie poszczególne części, a sam składałem wszystko w HTML. A jak to jest z tym wycinaniem w Photoshopie? Na pewno ze strony projektowania wszystkiego jest wygodniejsze. Ale słyszałem ze kod jaki photoshop generuje nie jest zbyt przejrzysty, czy to prawda? Bo szczerze mówiąc nawet jeszcze sie tym nie bawiłem...

 

A co do tematu to wkońcu zaczynamy robić layouty na forum, może chociaż po części doścignął popularnością sygnaturki (miejmy nadzieje). Zaczynacie robić według jakiegoś tutoriala czy eksperymentujecie narazie?

[witmann 0]

Dzięki wszystkim za komentarze

 

FilipK - nie przesadzaj, ja Cię tylko trochę nakierowałem, reszta jest Twoją zasługą - masz, wodzu, talent i pracuj nad nim!

 

KlaxoN - ja zawsze robię layout w całości a potem wycinam za pomocą slice tool. Wygenerowany przez PS kod jest całkiem niezły, a przede wszystkim działający i poprawny technicznie. Czasem trzebaby się nieźle namęczyć by samemu taki layout poprawnie w kod ubrać. Trzeba tylko pamiętać, żeby nazywać przed zapisywaniem poszczególne kawałki, to wtedy kod będzie dużo czytelniejszy

[BeneQ 0]

Mam pytanko: smilies/smile.gif

Kiedyś (w dziecinstwie smilies/wink.gif ) robiłem kilka layout'ów, ale na zasadzie takiej że robiłem w photoshopie poszczególne części, a sam składałem wszystko w HTML. A jak to jest z tym wycinaniem w Photoshopie? Na pewno ze strony projektowania wszystkiego jest wygodniejsze. Ale słyszałem ze kod jaki photoshop generuje nie jest zbyt przejrzysty, czy to prawda? Bo szczerze mówiąc nawet jeszcze sie tym nie bawiłem...

 

KlaxoN - ja zawsze robię layout w całości a potem wycinam za pomocą slice tool. Wygenerowany przez PS kod jest całkiem niezły, a przede wszystkim działający i poprawny technicznie. Czasem trzebaby się nieźle namęczyć by samemu taki layout poprawnie w kod ubrać. Trzeba tylko pamiętać, żeby nazywać przed zapisywaniem poszczególne kawałki, to wtedy kod będzie dużo czytelniejszy

 

Zawsze mozna pozniej ingerowac w kod, jesli cos sie nie podoba

[witmann 0]

Zawsze mozna pozniej ingerowac w kod, jesli cos sie nie podoba

To się rozumie samo przez się W końcu jakoś trzeba teksty na stronę dodać, czasem jakiegoś skrypta wstawić itp. Photoshop generuje bazę odpowiedzialną za poukładanie obrazków na stronie. Trzeba go zmodyfikować, bo wszystkie obrazki są dawane w znaczniku <img>, a niektóre powinny tworzyć tło na przykład.

[neonek 109]

to ja jako taki lamer w tym wszystkim sie zapytam, gdzie sie ustala aby np dany lay byl dopasowany do www? ktos ttuaj mowi ze ps sam stwarza kod? powiedzcie juz mniejwiecej cos na ten temat ;]

[witmann 0]

to ja jako taki lamer w tym wszystkim sie zapytam, gdzie sie ustala aby np dany lay byl dopasowany do www? ktos ttuaj mowi ze ps sam stwarza kod? powiedzcie juz mniejwiecej cos na ten temat ;]

Tu trzeba sobie poczytać na temat narzędzia 'slice'. Przy okazji tutoriala do zrobienia konkretnego layoutu (który pojawi się za jakieś 3 tygodnie - mówię o swoim, może FilipK coś wcześniej skrobnie) będzie to przeze mnie omówione.

[Gość Vennor]

Tu trzeba sobie poczytać na temat narzędzia 'slice'. Przy okazji tutoriala do zrobienia konkretnego layoutu (który pojawi się za jakieś 3 tygodnie - mówię o swoim, może FilipK coś wcześniej skrobnie) będzie to przeze mnie omówione.

Widzialem to kiedys na jakims tutorialu. Duzo roboty z tym dzieleniem obrazu na czesci.

 

Narazie zostaje przy sygnaturach, pozniej sie wezme za webdesign .

[MDX 0]

Fajnie, że za coś takiego się bierzesz, ale mam kilka uwag.

 

ad2.

To na pewno będzie się zgadzało w przypadku komputerów domowych (graczy, bardziej doświadczonych użytkowników), ale w serwisach firmowych te statystyki to zupełna bzdura, ponieważ 90% osób używa standardowych rozdzielczości, 10% to przeglądarki tekstowe i urządzenia mobilne.

 

ad6.

Żadnej rozdzielczości domyślnej się nie podaje, strona musi się wzorowo wyświetlać na rozdzielczościach 800/600 wzwyż, i poprawnie (czytelnie) wyświetlać się w pojedynczych przypadkach typu (urządzenia mobilne, przeglądarki tekstowe, czy jaws)

Wskaż mi osobę, która po przeczytaniu ze przeglądarka wymaga rozdzielczości innej niż aktualnie ustawiona, zmieni ją.

 

ad7.

nie do końca prawda vide wordpress.org

[Ziomalek_2 0]

Dobrze że takie coś zrobiłeś oby więcej takich porad i itp.Jestem pełen podziwu dla was wszystkich którzy piszą tutoriale

[rzepak 0]

no to witmann się załapał na zlecenie

może ja też kogoś skusze

moje prace:

dobrekomputery.com

@dA

Fenix

projekt portfolio

[b4rtaz 0]

Co do webdesignu, luknijcie na moją stronę www. Jak narazie nic za wiele na niej nie ma, lecz narazie tylko jest praktycznie sam design... Oceńcie.

[witmann 0]

Co do webdesignu, luknijcie na moją stronę www. Jak narazie nic za wiele na niej nie ma, lecz narazie tylko jest praktycznie sam design... Oceńcie.

Nie jest zła. Dość prosta, ale dzięki temu czytelna. O kodzie się nie wypowiadam, bo mi się go nie chce za bardzo analizować Poza tym miałem ocenić design

[Axelio 0]

O kodzie się nie wypowiadam, bo mi się go nie chce za bardzo analizować Poza tym miałem ocenić design

Nie chcę się czepiać tej wypowiedzi ale strasznie denerwują mnie osoby, które MUSZĄ spojrzeć w kod strony - kogo to interesuje w ogóle ?

[witmann 0]

Nie chcę się czepiać tej wypowiedzi ale strasznie denerwują mnie osoby, które MUSZĄ spojrzeć w kod strony - kogo to interesuje w ogóle ?

Jak już się robi stronę to należy ją robić poprawnie również pod względem kodu. Przez to, że większość osób jest za leniwa, by robić kod zgodny z międzynarodowymi standardami mamy potem krzaki tego typu, że strona pod jedną przeglądarką działa a inną nie. Pooglądaj sobie osiolki.net to zobaczysz co mam na myśli.