Tworzenie layoutu - Dobry poradnik

[Luka]

Chodzac po roznych forach graficznych natknolem sie na dobry i pomocny poradnik. Zachecam do czytania.

___________________________________________________________________________

Od czego zacząć projekt?

1. Najpierw zapoznaj się z tematem. Dowiedz się jak najwięcej, czego on dotyczy, zorientuj się z czym się kojarzy, byś wiedział czego szukać.
Przykładowo strony o samochodach [raczej - bo to też po części zależy od zleceniodawcy, jeśli mówimy o komercyjnych projektach] nie zrobisz cukierkowo różowej.

2. Zrób sobie spis WSZYSTKICH elementów, które ZAWSZE będą na stronie. Przykładowo takim elementem jest menu, często też wyszukiwarka. Będziesz wiedzieć dla jakich elementów musisz znaleźć stałe miejsce.

3. Przeglądnij strony, które mogą Cię zainspirować, pomóc w wymyśleniu układu. Pamiętaj, że układ musi być przejrzysty, uporządkowany, by potencjalny internauta mógł wszystko znaleźć od razu. Bardzo ważnym elementem na stronie jest menu. To kluczowa część, musi być wyróżniające się i łatwe w obsłudze. Co do inspiracji, to tu masz parę przydatnych stron:
Web Templates | Flash Templates | Template Monster
Browsing Web Interfaces on deviantART
CSSelite.com - CSS Gallery Showcasing the best in CSS web design and development.
digart.pl | projekty | strony www
Browse Art, Photography, Web Design, Flash, Skins, Themes, Logos, Icons ,Fonts, Literature, and Artisan Crafts on Artician Design
Web Design Inspiration - Inspirujące strony www - web.vivee.info
LogoPond - Identity Inspiration - - logo/typy na strony

4. Naszkicuj na kartce parę wersji układu. Z każdą następną zacznie Ci się rozjaśniać. Pamiętaj o rozsądnym ustawieniu elementów. Tu dochodzą też kwestie marketingowe, jak i psychologiczne - jakie elementy powinny być najbardziej widoczne i zwracać uwagę? Które muszą być, ale jak najmniej widoczne? Zastanów się nad tym przy rozmieszczaniu.
5. Znajdź odpowiednią kolorystykę pasującą do tematu. Proponuję stosować się do niepisanej zasady grafików, a mianowicie: dwa kolory podstawowe + jeden uzupełniający. Oczywiście nie trzeba sztywno robić wg schematu, wiadomo, że w przyszłości bez problemu możemy więcej używać, jednakże początkującym dla dobrego efektu zaleca się tyle - opanować dobre zestawienie ze sobą tych trzech kolorów. Ważne są również stocki. Oto pomoce:
Kolory:
ColorSchemer Gallery | Website-ready color schemes for ColorSchemer
ColorToy 2.0 - The Flash Color Scheme Generator
kuler
Color Palette Generator - dopasowuje kolory do stocka
Color Scheme Designer 3
COLOURlovers :: Color Trends + Palettes
ColorToy 2.0 - The Flash Color Scheme Generator
Stocki:
http://sxc.hu
Stock Photography: Search Royalty Free Images & Photos
Zanim kupisz zdjęcie z iStock to możecie je wykorzystać w pracy ze znakiem wodnym, jak robi większość osób. Tu macie link do strony, dzięki której powiększycie zdjęcie:
iStockZOOM - www.kanjar.pl - BETA2.1

6. Zacznij tworzyć szablon w programie graficznym (Photoshop, Gimp - nie będę omawiała samej procedury tworzenia). Pamiętaj o tym, żeby robić szablony o szerokości 1008px (optymalnie 1000px), bo obecnie większość monitorów na rynku ma właśnie taką (po odjęciu scrollbar'a). Gdy będziesz robić mniejszą, to dla większości świata Twoja strona będzie nieczytelna, mała i zgubi się w przeglądarce.
Na początku zaprojektuj podstawowe ułożenie, najważniejsze efekty, typografia - kombinuj z nią długo, by dobrać jak najlepszą czcionkę. Pamiętaj o tym, by nie wygładzać czcionek, które będą pisane ręcznie (głównie w contencie). Ważny jest również odpowiedni kontrast. Tutaj wiele początkujących popełnia podstawowe błędy, np. na białej stronie używają czarnych czcionek, co bardzo męczy wzrok. Lepiej użyć ciemnoszarego fonta, który niewiele na pierwszy rzut oka będzie się różnił, a za to nie będzie męczył wzroku. Zwróćmy uwagę też na odpowiedni rozmiar i interlinię oraz krój - powinien być taki, żeby każdy potencjalny internauta miał go na swoim komputerze. Najpopularniejsze to Arial, Verdana i Tahoma. Optymalny rozmiar czcionek jest w granicach 10-12px, a interlinii około 14px.
To takie podstawy. Więcej o typografii znajdziecie tu:
Typografia w projektach stron WWW | Ludwik.org - bardzo ciekawy artykuł, który w przyjazny sposób opowiada o typografii
Rodzaje fontów

7. Gdy już masz całość teraz zajmij się dodawaniem efektów. Ten schemat proponuję dla początkujących, by nabrać wyczucia, bo wielu przesadza z efektami od razu do każdego dodanego elementu ładując ile się da. Dlatego robiąc najpierw szkielet, a później efekty będziemy mieli wgląd w wygląd całej pracy.

8. Gdy myślisz, że skończyłeś, to zobacz na swoją stronę. Co Cię nie zadowala? Jak powinno być? Zmieniaj. Później pokaż innym do oceny, może ktoś zwróci Ci uwagę na jakiś nieczytelny element, może Ci podpowie co u niego źle wygląda.


Mam nadzieję, że choć trochę Wam rozjaśniłam tworzenie stron. Na koniec daję Wam wszystkie źródła z jakich ja korzystam. Jest to zbiór stron, które przewija się przez masę for, jednak ja podczas swojego używania usystematyzowałam je, wyodrębniłam działy o webdesignie i sprawdziłam informacje. Nie wstawiałam masy, ale niepotrzebnych linków.


Tutoriale:
Good-Tutorials - Photoshop Tutorials ? Web Layouts
Webdesign | Vivee - blog o grafice, webmasteringu i fotografii
Designing - Psdtuts+
Adobe Photoshop Web Templates, Interfaces & Layouts Tutorials - Tutorialized

Fonty na strony:
Download fonts from classic to cool - Linotype.com
dafont.com
Web Fonts List website design graphic software 3000 truetype fonts
Free Fonts - Free Font Download - Cool Fonts
Resources - Stencil Revolution

Ikonki na strony:
Best Small Web Design Icon Download Sites :: Best Sites List

Patterny:
Download Free Repeat Patterns

___________________________________________________________________________

Autor: Panthere_Noire
Zródło: GrafaArt.org

[Ganimadeus]

O ciekawy tutek jutro jak znajdę czas wgłębię się w lekturę ;] GZ

[Vario]

lepiej napisz Autora, a nie tylko Grafart :) czytałem to, i polecam wejść na grafart, bo tutaj jakiś taki chaos sie zrobił

[-Non.Str!t-]

dostales gibona ale nie dal bym jak bym przeczytal ze skopiowany ^^

[Flash]

Czytałem już to. Oceniać nie będę a tak a pro po zgodę autora masz ??

[Luka]

Czytałem już to. Oceniać nie będę a tak a pro po zgodę autora masz ??

Podalem autora i zrodlo ;] Nie pisal ze nie mozna kopiowac ;)

Mam nadzieje ze sie nie obrazi :p

[ShooT]

nie pisal bo nie musi w stopce strony masz napisane! i popraw zrodlo bo link nie dziala

[# DreSzCzyK]

Usuń a Bo jest grafaart - ,
Podadnik nice,

[eNNeR.!]

Spoko tutek skorzystam napewno ;)
3maj gibona ;)
Szkoda że bana masz ;p

[Panthere_Noire]

Witam, z tej strony Panthere_Noire, autorka tego artykułu, który zrobiłam specjalnie dla Forum graficzne GrafArt.org :: Strona Główna.

Chciałam wyjaśnić sprawę.
Tu jest link do mojego artykułu:
Forum graficzne GrafArt.org :: Zaloguj

Na dole od początku powstania widniał dopisek:
"Bardzo proszę o nie RIPowanie mojej pracy. Ufam Wam i udostępniam wersję tekstową, a nie graficzną, by było Wam lepiej korzystać z tego, nie zawiedźcie mnie."

Prosiłabym o nie kopiowanie artykułów bez mojej wiedzy. Bardzo cieszę się, że się podoba, no i oczywiście że komuś się przyda. Miło mi, że użytkownik w końcu dopisał źródło i autora, jednakże byłoby mi miło, gdyby ktokolwiek wcześniej zapytał tylko o zgodę. Raczej nie byłoby problemu z umieszczeniem mojego artykułu, gdyby mnie ktoś wcześniej w ogóle o tym poinformował. Przykro mi, że tak się nie stało.

[zer0wiec]

dokladnie nie powinno to sie powtarzac

[maqq[t].]

Popraw z GrafaArt.org na GrafArt.org, tak wogóle po co mu gratulujecie ? przecież to nie jego brawka dla Panthere_noire