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…

——————————————————————————————————————————-

Zobacz kurs Photoshop projektowanie stron -> TUTAJ

——————————————————————————————————————————-

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.

——————————————————————————————————————————-

Zobacz kurs cięcie i kodowanie do HTML & CSS -> TUTAJ

——————————————————————————————————————————-

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(16) + Dodaj komentarz

  • 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!

  • 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.

    • 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.

  • […] 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.  […]

Zostaw komentarz

Musisz być zalogowany aby dodać komentarz.

Polecane

Kategorie