Web design – Co to takiego i od czego zacząć przygodę?

25 marca, 2012 w kategoriach: Grafika 2D, Web design, Adobe Photoshop

25,986 0
Dane:
  • Czas pracy: kilka minut na przeczytanie, wiele godzin na naukę
  • Poziom: Podstawowy
Opis:

W tutorialu opiszę podstawy projektowania stron internetowych.

Pokaż/Ukryj wszystko

Alt 1

Web Design – jest to dziedzina grafiki komputerowej, która zajmuje się szeroko pojętym projektowaniem na potrzeby internetu, od szat graficznych stron, po różnego rodzaju interfejsy użytkownika. Projektanci stron internetowych muszą mieć świadomość, że dziedzina ta zmienia się i ewoluuje z miesiąca na miesiąc, więc trzeba być na bieżąco z panującymi trendami. o tym jak „nie wypaść z gry” napiszę w kolejnych krokach.


Wydawnictwo Strefa Kursów

Alt 725739-ringbinder-on-a-sketch-book

Najważniejszym elementem, od którego musisz zacząć jest sporządzenie briefu. Brief jest niczym innym jak zbiorem najpotrzebniejszych informacji na temat strony spisanym na kartce papieru. Osobiście mam założony zeszyt, w którym notuję wszystko co związane jest ze zleceniem dla każdego klienta, żeby mieć wszystko pod ręką. Informacje jakie powinien zawierać brief:

  • Tematyka strony – najważniejszy element briefu. Musisz poznać temat strony, by później odpowiednio dostosować wszystkie elementy designu (np. kolorystykę – strony dla dzieci nie zrobisz w kolorach czarnym i czerwonokrwistym).

  • Target strony – musisz wiedzieć do kogo będzie kierowana strona, do jakiej grupy wiekowej, bardziej do kobiet czy do mężczyzn, czy do użytkowników z Polski czy innego kraju i tak dalej.

  • Istotne elementy, które muszą się na stronie znaleźć – często się zdarza, że klient sobie życzy żeby na jego stronie znalazły się jakieś nietypowe elementy, więc aby o tym nie zapomnieć, wypisz je sobie na kartce.

  • Słowa kluczowe – słowa, które będą się przeplatać podczas wszystkich etapów projektowania, bądź jakieś myśli przewodnie, np. ‚delikatny’ – wiesz, że musisz stworzyć coś lekkiego, jasnego, dla kobiet.

Alt 3

Często zdarza się, że klient ma dla Ciebie nietypowe zlecenie, np. nigdy nie miałeś styczności z taką tematyką lub po prostu brak Ci pomysłów. Nic straconego! Na pomoc przybywają serwisy oferujące prace innych webdesignerów, które powinny nakierować Cię na odpowiednią drogę. Oto lista stron, na których znajdziesz coś dla siebie:

http://www.webcreme.com/
http://www.designbombs.com/
http://browse.deviantart.com/designs/web/
http://www.csselite.com/
http://www.dezinspiration.com/

Projektowanie logo także często należy do zadania webdesignera, więc tutaj parę stron z inspiracjami logo:

http://logopond.com/
http://www.logosauce.com/
http://creattica.com/logos/latest-designs
http://www.logogalleria.com/

Brakuje Ci stocków? Nie możesz dobrać właściwej kolorystyki? To też nie problem:

Lista stron ze stockami:

http://pixmac.pl
http://browse.deviantart.com/resources/
http://sxc.hu
http://www.istockphoto.com/
http://www.photoxpress.com/
http://www.freepixels.com/

Lista stron ze schematami kolorów:

http://www.degraeve.com/color-palette/
http://kuler.adobe.com/#themes/rating?time=30
http://www.colorotate.org/
http://www.colourlovers.com/

Oczywiście w internecie możemy znaleźć masę tego typu stron, jednak wypisałem wam te, które są godne uwagi.

Mając brief, materiały, kolorystykę, możesz włączyć program graficzny i zacząć projektowanie. Musisz pamiętać o odpowiednich wymiarach strony. Aby strona była wyświetlana na większości monitorów poprawnie (tj. bez zbędnego poziomego scrollbara), powinna mieć szerokość 960 pikseli. W tym miejscu polecam stosowanie grida: http://960.gs/ – co to jest? Nic innego jak układ prowadnic.Pozwoli on ładnie rozplanować wszystkie elementy strony, nie wykraczając poza wyznaczone 960 pikseli.

Alt 2

Jak go zainstalować? Oto instrukcja:

  1. Wchodzimy na stronę http://960.gs/ i ściągamy owego grida.
  2. Rozpakowujemy plik i przechodzimy do folderu app_plugins>photoshop
  3. Kopiujemy plik do folderu Folder z instalacją Photoshopa > Presets > Actions

lub z folderu templates>photoshop wybieramy pliczki .PSD.

Mając wszystko przygotowane możemy zaczynać właściwy proces projektowania w programie graficznym.

Pozdrawiam, matias

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz