Maj
18
2012

Projektowanie strony internetowej w Photoshopie

Znasz efekt pustej kartki? Siadasz i nie wiesz od czego zacząć swój projekt… Zegar tyka, klient czeka, a Ty nie masz żadnego pomysłu. Czas temu zaradzić! Każdy projekt zaczyna się od pustej kartki, to prawda. Trudno jednak wyczarować sensowną stronę opierając się tylko i wyłącznie na własnej wyobraźni… Niezbędne są inspiracje oraz poznanie trendów jakie aktualnie panują w internecie.

Zaczynamy

Zacznijmy więc od znalezienia inspiracji. Polecam do tego najpopularniejsze strony z szablonami jak TemplateMonster.com czy ThemeForest.com.

W themeforest wystarczy posegregować wyniki wyszukiwania po liczbie sprzedanych szablonów, by w bardzo prosty sposób zobaczyć strony, które najbardziej podobają się ogółowi internautów – w końcu nikt nie kupowałby szablonu, który mu się nie podoba…

I tak otwierając wiele wyników wyszukiwania (proponuję ok 10-20 stron) naszym oczom ukazuje się dość przejrzysty schemat jaki podoba się ludziom i który łączy funkcjonalność z pozytywnymi odczuciami estetycznymi. Strony przeglądamy podobnie jak książki czy gazety – tak jak zostaliśmy nauczeni czytać, czyli od lewej do prawej przesuwając się stopniowo z góry na dół. Jest to rzecz wydawałoby się oczywista, lecz niektórzy często o tym zapominają umieszczając istotne elementy np. w prawym dolnym rogu strony…

Jako ciekawostkę dodam, że w niektórych krajach czyta się od prawej do lewej i strony internetowe są tam tworzone również w sposób odwrotny do naszych (jest nawet specjalna deklaracja html dla takich stron <html dir=”RTL”>, skrót rtl od right to left, czyli od prawej do lewej)

Schemat strony

Logo

Pierwsza i najważniejsza rzecz, którą chcemy wyeksponować. Umieszczamy je zawsze na początku strony w lewym rogu lub ostatecznie jako wyśrodkowane. Ma znaczenie głównie brandingowe, warto więc by każde odwiedziny na stronie wiązały się z „przeskanowaniem” tego miejsca w pierwszej kolejności.

Menu

Nawigacja jest dla internauty bardzo, ale to bardzo ważna. Daje mu poczucie przestrzeni i imituje mapę, dzięki której użytkownik czuje się swobodnie na stronie. Nie boi się po niej poruszać. Odwiedzający, który nie potrafi odnaleźć się na stronie, szybko z niej ucieka, nikt bowiem nie lubi czuć się zdezorientowany i zagubiony.

Menu powinno być więc umiejscowione również zaraz na początku strony z prawej strony loga lub tuż pod nim. Powinno być wyraźnie oddzielone od reszty strony, aby nikt nie miał wątpliwości, że jest to właśnie menu.

Wyszukiwarka, logowanie, rejestracja, telefon kontaktowy, adres e-mail

Wszystko to, to elementy opcjonalne (nie obligatoryjne na każdej stronie, w końcu nie zawsze udostępniamy możliwość rejestracji, bądź nie zawsze chcemy, żeby ktoś do nas dzwonił) ale ułatwiają odbiorcą najpopularniejsze czynności jak logowanie się, czy szybkie wyszukiwanie informacji na stronie. Umieszcza się je w sposób mniej rzucający się w oczy (np. przyciemniony, mniejszą czcionką) na samej górze strony, aby łatwo było je znaleźć, ale by jednocześnie nie odciągały uwagi od istotniejszych elementów.

Slider

Kluczowy element podnoszący wizualną jakość strony, często wzbogacony o tekst. Moim zdaniem jest on najszybszym i najefektywniejszym sposobem przedstawienia internaucie esencji informacji, którą chcemy mu przekazać. Niczym bilboard reklamowy, duży, szeroki i bardzo efektowny powinien jak najlepiej reklamować Twoją stronę.

Kontent

W tym miejscu trzeba zdać sobie sprawę z skutecznych dziennikarskich praktyk formatowania tekstu.

Treść strony powinna być prezentowana tak samo jak w gazetach czy czasopismach. Jasny i przejrzysty kolumnowy styl, odpowiednie odstępy, nagłówki, akapity. Wszystko to bardzo mocno wpływa na odbiór strony. Tzw. typografia, czyli sposób prezentacji tekstu to istotny element designu i trzeba o nim bezwzględnie pamiętać. Oczywiście dochodzą do tego różne małe smaczki w postaci ikon, przycisków, zdjęć, ale całość musi stanowić przejrzystą i czytelną strukturę. W tym miejscu koniecznie powinieneś poznać system siatki 960px.

Twórcy tego rozwiązania udostępniają jego wersję praktycznie dla wszystkich popularnych programów, Photoshopa, Gimpa itp. gdzie tworzony jest automatycznie schemat kolumnowy. Polecam Ci również obejrzeć stronę demo, dzięki której łatwiej zrozumiesz ideę korzystania z tego systemu.

Duża stopka

W dużej większości popularnych szablonów ma ona znacznie ciemniejszy kolor od pozostałej części strony, aby nie odciągać uwagi czytelnika od rzeczy istotniejszych. Warto jednak pamiętać o zagospodarowaniu tego miejsca.

Zazwyczaj umieszcza się tam menu (tak aby ułatwić nawigację użytkownikom, gdy zjadą już na dół strony, aby nie musieli za każdym razem przewijać jej do góry), strzałkę/link szybkiego powrotu na górę strony (jest to sposób o wiele szybszy niż np. scrollowanie myszką), społecznościowe ikony, dane kontaktowe, formularze zapisu na newsletter etc.

Mała stopka

Pod dużą stopką pojawia się zazwyczaj mniejsza, zamykająca stronę, gdzie podaje się informacje o prawach autorskich, polityce prywatności, podpisują się tam również designerzy strony, czy podawane są technologie w jakiej wykonana została strona np. Joomla czy WordPress.

Projektujmy

Metoda ta sprawdza się przy projektowaniu wszystkiego, tak więc również i projektowaniu stron internetowych, jest bardzo prosta, wymaga jednak odrobiny wyobraźni… uwaga… jest nią kartka i ołówek!

Wysoce odradzam włączanie od razu Gimpa czy Photoshopa i tworzenie designu „z głowy”. Nie mówię, że tak się nie da, ale jest to sposób mało kreatywny i działa dobrze głównie przy kopiowaniu, nie tworzeniu.

Dlatego najpierw szkicujemy wygląd strony na kartce, zapisujemy wszystkie pomysły, rozrysowujemy różne warianty by później o wiele łatwiej i przyjemniej skopiować wszystkie te pomysły do programu graficznego. Później wystarczy taki schemat tylko pokolorować, dodać jakieś zdjęcia/tekstury, parę efektów i voila! Design strony gotowy 😉

Krok 1 – szkic na kartce

Nie musi być perfekcyjny, ba nawet nie powinien być. Możesz na nim bazgrać, zamazywać, rysować, pisać co tylko chcesz. Traktuj to jako uzewnętrznienie Twoich pomysłów i spostrzeżeń zaczerpniętych z inspiracji i doświadczenia.

UWAGA: SZKICOWANIE I NOTOWANIE NIEWYOBRAŻALNIE UŁATWIA DALSZĄ PRACĘ.

szkic projektu strony internetowej

Krok 2 – układ strony (960Grid)

W przemyślany i uporządkowany sposób rysujemy prostokąty, a w zasadzie przerysowujemy je z kartki. Jest to pierwszy schematyczny rysunek, na którym prostokąty symbolizują konkretne elementy strony. Nic poza prostokątami nie powinno się na tym etapie pojawiać.

Jeśli schemat nam się nie spodoba wracamy do kartki, zmieniamy przestawiamy, porządkujemy aż do satysfakcjonującego i przejrzystego układu.

układ strony w photoshopie

 

Krok 3 – zapełniamy stronę tekstem (typografia)

Jest to moment w którym wybieramy czcionki do naszego projektu.

Formatujemy tekst ustalając wielkość nagłówków które w zależności od wagi powinny być mniejsze bądź większe (h1 – h6). Do tekstów w akaptitach najlepiej sprawdza się popularny tekst Lorem ipsum. W tym meiscju mogę polecić Ci internetowy generator tego “bełkotu”. Cały zabieg ma na celu lepsze zrozumienie jak odbierana będzie strona przez użytkowników. Tekst, który najbardziej rzuca się w oczy jest największy i znajduje się w naszym przypadku na sliderze.

Mamy więc jasną wskazówkę gdzie umieścić informacje nr 1, tą którą najbardziej chcemy przekazać odwiedzającym naszą stronę.

typografia

 

Krok 4 – upiększanie cz.1 (ikony, buttony, formularze, etc.)

Do naszego projektu dorzucamy ikony, które w założeniu ułatwiają wizualny odbiór poszczególnych elemntów strony pod warunkiem, że będą spójne z tekstem, którego dotyczą.

Ikony potrafią zdziałać cuda. Serio. Kilka ładnych, estetycznych ikon w odpowiednich miejscach potrafi znacząco podnieść wskaźnik pozytywnego odbioru wizualnego strony.

Potraktuj internautów jak kierowców. Jeśli przy drodze zamiast znaków postawiłbyś tablice informacyjne z tekstem typu “ustąp pierwszeństwa”, “ograniczenie prędkości do pięćdziesięciu kilometrów na godzinę”, “przejście dla pieszych”, wszystkie pisane tą samą czcionką takim samym kolorem, takiego samego kształtu to jak myślisz jaki byłby poziom przestrzegania tych znaków?

Podobnie jest z użytkownikami, nikt nie czyta tekstu od deski do deski, NIKT, zapamiętaj bo to bardzo ważne NIKT. Tylko Ty tworząc stronę i Twój klient znacie każdy jej zakamarek. Każdy inny użytkownik skanuje w pośpiechu stronę szukając istotnych informacji. Jeśli nie ułatwisz mu tego zadania bądź pewien, że poziom jego cierpliwości błyskawicznie się skończy i szybko “ucieknie” na inne strony.

Dlatego ikony i przyciski traktuj jako bardzo pomocne znaki drogowe, którymi możesz przekazać wiele cennych informacji w bardzo szybkim tempie.

Pamiętaj, tekst jest zazwyczaj odbierany na końcu po wszelkich innych wizualnych bodźcach.

umieszczanie ikon w projekcie

 

Krok 5 – upiększanie cz.2 (kolory)

I tutaj polecę Ci bardzo przydatne narzędzie od Adobe – Kuler W photoshopie od wersji CS5 możesz znaleźć tą świetną paletę w zakładce Window -> Extensions -> Kuler.

Podobnie jak sugerowaliśmy się najczęściej kupowanymi szablonami, możemy zasugerować się również najwyżej ocenianymi schematami kolorów. Skoro znaczna część osób lubi pewne zestawienia kolorystyczne, są duże szanse, że strona w takiej tonacji spodoba się szerokiej rzeszy odbiorców.

W kulerze mamy do dyspozycji wiele wariantów gotowych kompozycji kolorystycznych, które aż proszą się o ich wykorzystanie przy projektowaniu strony internetowej.

wybór kolorystyki strony

 

Krok 6 – upiększanie cz.3 (finał)

Zaczynamy od dodania zdjęcia w miejscu slidera. Oczywiście dobrze przetestować kilka zdjęć z uwagi na to, że slider będzie się zmieniał dynamicznie i każde ze zdjęć powinno dobrze komponować się z resztą strony.

Dorzucamy małe “smaczki” typu cienie, gradienty, podświetlenia, obramowania, wszystko to co uatrakcyjnia wizualnie poszczególne elementy i co oferuje nam photoshop w opcjch stylowania i krycia warstw (Blending options),  uzyskując w ten sposób efektowną wizualnie stronę.

A teraz pora na mały ale jakże efektowny TIP: dodawaj cienie do tekstu (nagłówki, akapity) na odległość 1px bez rozmycia lub z minimalnym 1px. Później wystarczy, że użyjesz deklaracji css text-shadow by uzyskać ten sam efekt już po zakodowaniu projektu do html/css.

Ten mały jedno pixelowy cień daje naprawdę bardzo pozytywny wizualny efekt!

gotowy projekt strony wykonany w photoshopie

 

Podsumowanie

Design użyty w tym projekcie nie powala na kolana, zdaję sobię z tego sprawę. Został jednak stworzony w czasie kilku godzin specjalnie na potrzeby tego artykułu.

Celem było przedstawienie procesu powstawania designu w możliwie najprostszy i najszybszy sposób. Wielu webdesignerów ma często problem właśnie w początkowej fazie powstawania projektu, zwyczajnie nie wiedzą od czego zacząć. Mam więc nadzieję, że ten artykuł ułatwi im pracę 🙂

 

Tutorial Video

Tutorial tworzenia designu w bardziej rozbudowanej formie – nagrania video dostępny będzie już jutro na (moim) blogu grafika komputerowego.


Podobne wpisy

O autorze: Adrian Bienias

Grafik komputerowy, samozatrudniony freelancer, właściciel i twórca bloga o grafice komputerowej adrianbienias.pl. Zajmuje się głównie wizualizacjami 3D, tworzeniem stron internetowych i szkoleniami w tym zakresie.

Komentarze(17) + Dodaj komentarz

  • Na stronie TempalaMonster mona pobrać darmowe szablony zawierające pliki PSD http://www.templatemonster.com/pl/free-templates/. Za ich pomocą zobaczyć jak to się robi.

  • […] Treść strony powinna być prezentowana tak samo jak w gazetach czy czasopismach. Jasny i przejrzysty kolumnowy styl, odpowiednie odstępy, nagłówki, akapity. Wszystko to bardzo mocno wpływa na odbiór strony.  […]

  • Layout to tylko projekt graficzny strony internetowej. Tworzy się go w programach graficznych. To namalowany pomysł strony. Aby strona działała, trzeba „pociąć” layout do html+css, czyli podstawowych języków programowania www.

  • Witam jestem początkujący i mam pytanie:
    Czy leyout to to samo co strona internetowa,a dokładniej czy da się ten stworzony leyout wrzucić w internet stworzyć adres internetowy itd?? jeżeli tak to był bym bardzo wdzięczny gdyby ktoś napisał jak to zrobić :)Pozdrawiam.

  • Popieram w 100% ludzi, którym artykuł się podoba. Kawał dobrej roboty, wszystko wyczerpująco wyjaśnione i bogato zilustrowane. Druga część w formie video-tutoriala jeszcze lepiej wyjaśnia temat. Pozdrawiam!

  • Dla mnie bomba! Wszystko bardzo fajnie i zrozumiale przewinięte! W dodatku od samego początku. Nie zgadzam się z częścią krytyków, Pan Adrian odwalił kawał dobrej roboty, a Wy zamiast cieszyć się, że ktoś poświęca swój cenny czas na udostępnianie ZA DARMO wartościowych tutoriali jeszcze narzekacie…WON na allegrosz kupować beznadziejne poradniki na DVD za 30zł ;D

    Dla mnie (absolutnego nowicjusza w tym temacie) poradnik wartościowy OGROMNIE! Pozdrawiam autora!

  • Odezwał się profesjonalista. Napisz lepszy artykuł i podaj do niego link a nie się wyżywasz za swoje życiowe niepowodzenia.

  • […] na blogu psdtube.pl ukazał się artykuł będący wstępem do mojego mini kursu video odnośnie projektowania […]

  • […] Komentarzy Przewidywany czas na przeczytanie tego artykułu wynosi 2 minutWczoraj na blogu psdtube.pl ukazał się artykuł będący wstępem do mojego mini kursu video odnośnie projektowania […]

  • Witam, bardzo ciekawy artykuł. Cały przeczytałem dokładnie i bardzo mi on pomógł. Z pewnością pozwoli mi on się rozwijać. Będę zaglądał częściej bo widzę, że serwis bardzo zyskuje na jakości.

  • Hej, bardzo ciekawe informacje są wpisywane w tym blogu 🙂 mam nadzieję, że będzie ich coraz więcej. We need it coming more and more!

  • A ja powiem że jest to mega fajny tutorial nie koniecznie dla poczatkujacych. nie kumam tego hejtera co życzy autorowi żeby nigdy nie projektował sronek profesjonalnie, napisał to chyba nad wyrost. No ale nic ja jako że sam pracuje profesjonalnie jako grafik uważam ten artykuł za mega przydatny każdemu to chciał by zacząć projektować stronki nie od dupy strony. REspect men !! i oby więcej takich tematów było tutaj 🙂

  • Po czym programista dostaje do pociecia psd z takim rozpizdzielcem w srodku jezeli chodzi o ulkad i nazewnictwo warstw oraz bez zachowania jakiejkolwiek spojnosci wymiarowania (jeden box mniejszy od drugiego o 2-3px) ze zaczyna plakac a koeldzy z pokoju zastanawiaja sie czy to ze smeichu czy z zalu… 😛

  • Łatwo można wywnioskować, że artykuł skierowany jest do początkujących… nie zaś dla profesjonalistów. Wszystko przedstawione na PRZYKŁADZIE. Nie da się wyjaśnić wszystkich zagadnień w jednym artykule…a mimo wszystko uważam, że artykuł niezwykle pożyteczny i wyczerpujący. Krytyka chyba nieco zbyt surowa.Pozdrawiam

  • Bardzo dobry tutorial, szczególnie dla początkujących, doskonale zwrócił Pan uwagę na tak istotny aspekt projektowania jak kartka papieru, ołówek/długopis, koncept i myślenie logiczne w oparciu o zasady percepcji ludzkiej.

    Projektowanie bez rozumienia syntaktyki mija się z celem, i każdy projektant powinien to rozumieć, bo nie ważne jak kolorowa i dopieszczona będzie strona, to jak będzie nie czytelna to cała praca pójdzie na marne.

    Trzeba też rozumieć zasadę „Mniej znaczy więcej”, bo dzięki niej można o wiele łatwiej panować nad projektem, ważne też jest by analizować funkcjonalności by nie popaść w ich redundancję.

    Pozdrawiam:)

  • To smutne, że ktoś ma tak nieprofesjonalne podejście do tematu. Czy autorowi nie przyszło do głowy, że klient może mieć jakieś potrzeby? Że być może serwis powinien realizować jakieś zadania? Że to czy strona „podoba się” klientowi jest w całym procesie projektowania i realizacji najmniej istotne?

    I jeszcze – w ramach logiki autora – to przekonanie, że jak coś jest popularne w zagranicznym serwisie z szablonami, to spodoba się klientowi.

    Mama nadzieję, że autor nigdy nie będzie działał zarobkowo w tej branży, albo że przynajmniej duużo się nauczy zanim zacznie.

  • Czesc,

    Bardzo fajny tutorial, niedlugo i przede mna stoi to zadanie i szczerze mowiac nie za bardzo nawet mialem pojecie jak sie za to zabrac.

    Pozdrawiam

Zostaw komentarz

Musisz być zalogowany aby dodać komentarz.

Polecane

Kategorie