Proces projektowania szablonu graficznego - przykład

Rozpoczynając proces projektowania strony internetowej, zawsze należy zastanowić się, co na niej będzie umieszczane. Po zdefiniowaniu etapów powstawania strony, ostatnim najważniejszym punktem jest praktyczne wykonanie szablonu graficznego. Trzymanie się założeń wynikających z wcześniejszego dokładnego planowania jest bardzo istotna. Po stworzeniu projektu nie ma sensu dokładać coraz to nowych elementów, ponieważ w pewnym momencie zostanie całkowicie zatarta idea strony.
Projektowanie serwisu w dużej mierze zależy od możliwości oprogramowania wykorzystanemu do budowy szablonu graficznego.
Program Photoshop firmy Adobe to rozbudowany program graficzny przeznaczony do grafiki rastrowej. Posiada bardzo wygodną możliwość rozłożenia projektu na warstwy i umieszczania poszczególnych jej elementów na nich. Korzyści płynące z wykorzystania warstw nie tylko przyspieszają ale także ułatwiają pracę. Poszczególne warstwy są niezależne od siebie. Dodatkowo można wyłączyć widok poszczególnych warstw oraz w razie potrzeby je zablokować. Należy pamiętać o odpowiednim ułożeniu komponentów strony na warstwach tak by elementy wzajemnie się nie zasłaniały, chyba że takie działanie jest zamierzone. Umieszczając każdy nowy element na nowej warstwie,  uzyskuje się większą kontrolę nad projektem. Ważna zasadą podczas projektowania jest również dążenie do ujednolicania krojów czcionek w projekcie, ich niejednorodność może przyciemnić jego wygląd. Wszystkie elementy projektu powinny tworzyć jednolitą kompozycję graficzną.
         Wykonanie części projektu przebiegało w następujący sposób:

• Rozpoczęcie budowy strony w programie Photoshop należy zacząć od odpowiedniego ustawienia wielkości pola pracy. Wymiary obszaru pracy to 800x780 pikseli.
  

• Tło główne wykorzystane w projekcie to powtarzający się element graficzny – jest to  plik o nazwie 1.gif i pochodzi ze strony www.deviantart.com.
  

• Strukturę główna strony  stanowią dwie ramki, złożone odpowiednio w grupę warstw wypełnioną teksturą zdefiniowaną w programie. Główna – górna ramka złożona jest odpowiednio z dwóch ramek o zaokrąglonych krawędziach o wymiarach: 767x137 pikseli oraz 756x123 pikseli.
  

Ramka główna - górna

Natomiast główna – dolna ramka złożona jest również z dwóch ramek o zaokrąglonych krawędziach o wymiarach: 767x554 pikseli oraz 756x543 pikseli.

Ramka główna – dolna

• Aby obie ramki lepiej wyodrębniały się na powierzchni tła głównego, a jednocześnie tworzyły z nim spójną całość, zostały wzbogacone o dodatkowy element. Jest nim, otaczająca je ramka o nieco ciemniejszej barwie i wymiarach: 787x153 pikseli dla ramki górnej oraz 787x573 dla ramki dolnej. Ponadto krawędzie otaczających ramek zostały „postrzępione” tworząc nie regularne kształty. W celu uzyskania takiego efektu zostało wykorzystane narzędzie do zaznaczania – „lasso” oraz „lasso magnetyczne”. Po zaznaczeniu odpowiednich fragmentów krawędzi ramki, zostały one usunięte tworząc miejscowe „postrzępienie”.
  

Ramka główna - górna z obramowaniem

Ramka główna - dolna z obramowaniem

• Obie ramki będą cały czas widoczne niezależnie od działań interaktywnych użytkownika, jednak dolna ramka  – w której będzie umieszczona główna treść serwisu i podstrony ma się dynamicznie zmieniać w zależności od ilości wyświetlanych elementów.
  

 

Ramki główne na tle głównym strony

• Blok dotyczący identyfikacji wizualnej firmy znajduje się na górze strony na środku górnej ramki. Wykorzystane logo firmy w projekcie jest już wcześniej istniejącym elementem graficznym, który był wykorzystywany między innymi na wizytówkach i ulotkach restauracji. Umieszczenie na stałe logo w statycznej ramce zwiększa rozpoznawalność marki i informuje użytkowników, że strony, które przeglądają, są częścią jednej witryny.
  

 

Logo filrmy "Aviator"

• Aby łatwo można było znaleźć system nawigacji strony, menu główne strony umieszczone zostało pomiędzy górną i dolną ramką. Składa się z pięciu pozycji. Są to tekstowe przyciski nawigacji. Czcionka użyta w menu to czcionka szeryfowa Times New Roman o wielkości 24 pkt. Napisy w menu zostały dodatkowo wzbogacone o style warstwy takie jak: „cień”, „faza i płaskorzeźba” oraz „obrys” i osadzone na ramce o 84 % wypełnieniu.
  

 

Blok nawigacji strony

• Ramka dolna stanowi główny blok strony. Ważne jest, aby utrzymać główny blok treści w miejscu centralnym projektu, tak aby nie marnować cennych sekund, kiedy odwiedzający przegląda stronę w poszukiwaniu potrzebnych im informacji.
  
• Elementy umieszczone w ramce dolnej to wkomponowane w tło zdjęcie przedstawiające wnętrze lokalu. Efekt wnikania zdjęcia w tło został uzyskany poprzez zastosowanie narzędzia „pędzel”. Wzdłuż krawędzi fotografii narysowano dwie ramki: jedna nieprzezroczysta o średnicy 35 pikseli i twardości 30% pędzla, druga zaś o wypełnieniu 65%, średnicy 54 pikseli i twardości 25% pędzla.
  

• Następnym elementami umieszczonymi w ramce są zdjęcia potraw stanowiących ofertę firmy. W celu lekkiego wyeksponowania grupy tych zdjęć, znajdujących się po prawej stronie, zostały do nich dodane style warstwy takie jak: „cień”, „faza zewnętrzna” i „blask wewnętrzny” oraz przenikający przez nie wzorek o 76% kryciu. Wykorzystany wzorek pochodzi z pliku graficznego ze strony www.deviantart.com. Został on wycięty za pomocą narzędzi „różdżka” i „lasso magnetyczne” i w postaci oddzielnej warstwy zastosowany jako element tła w każdej z podstron projektu.
  
• Kolejnym elementem dolnej ramki głównej jest blok tekstowy. Zawiera on kilka krótkich  komunikatów dotyczących firmy, mających na celu zaproszenie oraz zachęcenie potencjalnego klienta restauracji do zapoznania się ze stroną, a następnie odwiedzenia lokalu.  W celu zachowania jednorodności czcionki w projekcie, tekst znajdujący się w ramce dolnej to pochylona czcionka Times New Roman. Zastosowanie pochylenia czcionki wiąże się z potrzebą zachowania klasycznego wyglądu strony. Czcionka Times New Roman jest podstawową czcionką z grupy fontów szeryfowych, które bez wątpienia kojarzą się z elegancją i wyrafinowaniem. Reprezentują one ponadczasowość nawet bardziej niż najbardziej nowatorską nowoczesność. Treść bloku tekstowego jest na tyle zwięzła i krótka, iż bez wahania można sobie pozwolić na zastosowanie tego typu czcionki w projekcie. Natomiast w sytuacji zamieszczania na stronie większych fragmentów tekstu, zastosowanie  czcionki z grupy szeryfowych nie było by najlepszym rozwiązaniem z racji słabszej czytelności, a niżeli w sytuacji czcionek z grupy bezszeryfowych.
  

Strona główna - ramka dolna

Wszystkie elementy zostały umieszczone w sposób tworzący  ze sobą równowagę asymetryczną. Wizualna waga dużego zdjęcia lokalu umieszczonego w lewym górnym rogu równoważona jest poprzez połączoną wagę mniejszych zdjęć potraw znajdujących się z prawej strony i kilku bloków tekstów umieszczonych w lewym dolnym rogu kompozycji.

• Stopka, której zadaniem jest oddzielanie końcowej zawartości strony od dołu okna przeglądarki znajduje się na końcu strony. Zawiera ona informacje na temat praw autorskich i kontaktu. Została ona wykonana w podobny sposób jak ramka otaczająca ramki główne projektu. Jest umieszczona na środku dolnej części dolnych ramek i stanowi nieregularne ich wykończenie.
  
  

Stopka strony

• Podstawą dla projektów każdej z następnych podstron strony Awiatora, jest główna – dolna ramka z obramowaniem z tym samym tłem. Dodatkowo na każdej z podstron umieszczony jest ten sam wnikający w tło wzorek. Na bazie powyższych elementów zostały wykonane inne podstrony projektu.
  
• Zawartość podstrony „Oferta” stanowi głównie blok tekstowy. Zawiera on krótka charakterystykę usług świadczących przez firmę. Podobnie jak na stronie głównej zastosowana jest czcionka szeryfowi Times New Roman. Dodatkowym elementem tła jest umieszczony wzorek mający na celu zarówno stanowić równowagę wizualną jak i zachować klasyczny charakter projektu.
  

Rezerwacje - podstrona

• Następną podstroną jest strona o nazwie „Rezerwacje”. Zastosowanie  prostego formularza pozwala na lepszy kontakt klienta z firmą. W tym przypadku jest to szybka możliwość  dokonania rezerwacji stolika w lokalu. Użyta czcionka jest taka sama jak w przypadku pozostałych stron. Wstawione ramki są to odpowiednio dwie ramki o wymiarach: szerokość 200 pikseli i długość 26 pikseli, natomiast ramka będąca polem treści wiadomości ma wymiary: szerokość 339 pikseli oraz wysokość 200 pikseli. Na wszystkich ramkach dodatkowo został zastosowany ten sam styl warstwy. Jest nim efekt „Faza zewnętrzna”, która nadaje jasną delikatna otoczkę na krawędziach ramek.
  

 

Rezerwacje - podstrona

• Kolejna podstrona to „Kontakt”. Zawiera ona typowe informacje na temat adresu restauracji, adresu e-mail oraz telefonu. W celu określenia dokładnej lokalizacji firmy została zamieszczona orientacyjna mapka. Użyta czcionka to Times New Roman – taka sama co w pozostałych stronach. Umieszczona na stronie mapka pochodzi ze strony http://map24.interia.pl/. Po wykonaniu zrzutu ekranowego z powyższej strony, została wycięta pożądana część mapki za pomocą narzędzia „zaznaczanie  prostokątne”, który wyznacza dokładną lokalizację restauracji. Dodatkowo cała mapka została przyciemniona za pomocą narzędzia „jasność/kontrast”, zwiększyło to czytelność mapy i wyodrębniło ja na tle strony. Miejsce, gdzie na mapie znajduje się lokal, oznaczone zostało czerwonym punktem za pomocą narzędzia „pędzel” o twardości 7% i o średnicy 5 pikseli. Dodatkowo został wstawiony napis „Aviator” - czcionka Times New Roman wzbogacony o styl warstwy „Faza zewnętrzna”, nadając mu jasną otoczkę w kolorze tła strony.
  

Kontakt - podstrona

• Po połączeniu wszystkich powyższych elementów projektu można uznać, iż tworzą one wspólną harmonijną całość.
  

 

Strona główna "Aviator"

Kolory wykorzystane w projekcie to głownie jasne średnio nasycone ciepłe barwy. Związane jest to z wystrojem lokalu charakteryzującym się miłym dla oka, ciepłym wnętrzem. Elementy klasyczne użyte w projekcie tj. tło główne, czcionka kojarzyć się mogą użytkownikowi z wyrafinowaniem i wysoką klasą restauracji. Elementy graficzne - fotografie przedstawiające przykładowe potrawy świadczyć mogą o wykwintnej kuchni charakterystycznej dla tej restauracji co dodatkowo potęgują pozytywne wrażenie odbiorcy. Wszystkie te czynniki w połączeniu z zastosowaniem zachęcających  haseł opisujących charakter i klimat lokalu mogą sprawić iż klient odwiedzający stronę firmy może być w przyszłości zainteresowany skorzystaniem z jej usług.