Projektujemy Stronę WWW – Krok 3: Szkic

krok-3-szkic

Mając pomysł na stronę internetową, znając jej przeznaczenie, kolejnym podstawowym krokiem jest stworzenie szkicu tej strony.

Gdy przychodzi ten moment, pora na narysowanie kilku prostokątów i znaczków, wiele osób zaczyna uważać, że nie potrafi rysować i pomija ten etap. Jest on bardzo ważny, ponieważ jeśli projektujesz stronę dla jakiegoś producenta, gdzie ma być przedstawiona oferta, plusem jest jeśli mieścisz się na stronie A4. Wiele osób jednak uważa, że nie potrafi rysować. Idąc w myśl podstawowej zasady Sketchnotingu (Sketchnoting w 10 Krokach) nie musisz być artystą aby narysować kilka kresek. Spójrz choćby na obrazek w nagłówku tego wpisu – malowidła na kartce wyglądają całkiem ciekawie, i wydają się tworzyć spójną całość. Diabeł jednak tkwi jak zwykle w szczegółach – wystarczy, że się przyjrzysz, a zauważysz prostokąty, kółka, kreski, a to chyba potrafisz narysować, nie? 😉


Odwiedzając Google Images możesz znaleźć wiele przykładowych szkiców po wpisaniu np. „web design sketch”

No też właśnie, skoro już wiesz, że potrafisz takie szkice wykonać to pora wziąć się do roboty! 🙂
Pierwsze co powinieneś, powinnaś zrobić to przygotowanie szkicu samej strony głównej / landing page’a (Landing Page – Co to takiego?). Określ więc elementy, podstrony, które chcesz aby znalazły się na Twojej stronie internetowej. Kontynuując wątek z poprzednich kroków, skupmy się tutaj na Portfolio fotograficznym, a więc menu będzie wyglądało następująco:

Strona główna O mnie Portfolio Kontakt

Obecnie idąc za trendami w UX (User Experience) wiele osób rezygnuje z dodatkowej podstrony „Portfolio”, natomiast jeśli strona jest dobrze przygotowana i prowadzi użytkownika za rękę, taka podstrona również może się pojawić.

Strona główna

Jeśli wiesz już jakie podstrony powinny się znaleźć, możesz przemyśleć sprawę co umieścić na stronie głównej. Pamiętaj, nie chodzi tu o dokładne rozrysowanie co do kratki tylko kilka kresek z określeniem co gdzie ma się znajdować.
Osobiście często robię tak, że na stronie głównej daję zalążek tego, co jest na pozostałych podstronach i takim sposobem strona główna jest podzielona na sekcje:

  • Header (górny pasek z logo menu, ew. slider / duży obrazek [hero image] – może być ostatnia realizacja i jedno zdanie z info o czym jest strona na środku obrazka);
  • About (Twoje imię i nazwisko, kilka zdań, zdjęcie i odnośnik „Czytaj więcej…” przenoszący na podstronę O mnie);
  • Portfolio (kilka najlepszych / aktualnych prac – jeśli jeden temat zdjęć [np. akty, abstrakcja, krajobraz] to 3-4 zdjęcia, jeśli tematów kilka to 1-2 najlepsze z każdego tematu + przycisk „Zobacz więcej” przenoszący na podstronę Portfolio);
  • CTA (Call To Action / wezwanie do akcji / czyli jedno zdanie z przyciskiem zachęcającym do wykonania jakiejś akcji, np. zakupu, zamówienia darmowej próbki, szybkiego kontaktu itp);
  • Kontakt (formularz kontaktowy lub dane kontaktowe umożliwiające szybki kontakt od razu ze strony głównej).

sketch
Szablon strony z serwisu Moqups.com

Tak jak na powyższym obrazku może wyglądać szkic, jeśli przygotujesz go w internetowej aplikacji Moqups.com, natomiast z doświadczenia wiem, że rysowanie na kartce jest lepsze, pozwala łatwiej zwizualizować pomysł i jest szybsze. Poza tym mając szkic na kartce, nie musisz co chwila przełączać się między programem graficznym a przeglądarką aby podejrzeć co ma być następne. 😉

Reasumując

To co opisuję to schemat mojej pracy tak w dużym uproszczeniu, natomiast gdy robisz szkic pod zlecenie, gdy już znasz elementy mające znaleźć się na stronie warto określić układ tej strony – czy będzie to pojedyncza kolumna, może podział na 3-4 kolumny, może coś z paskiem bocznym na widgety. Dużym ułatwieniem jest tutaj zestaw „UI Tiles” od PixelBuddha, w którym za darmo otrzymujemy 72 proponowane układy stron internetowych, dzięki czemu możemy po prostu sobie takowy wybrać i dostosować pod siebie.


Mając gotowy szkic strony głównej, możemy śmiało powiedzieć, że najgorsze już za nami. 🙂 Pora na pozostałe podstrony – możesz tu zastosować się do układu ze strony głównej, a możesz wybrać inny – np. na stronie głównej 3 kolumny, a na podstronach dwie, że jedna z treściami szersza, a druga wąska na widgety. Wybór należy do Ciebie. 😉
Mając już przygotowany zestaw szkiców na poszczególne podstrony, możesz przystąpić do właściwego projektowania w programie graficznym, ale o tym bardziej szczegółowo w następnym kroku, następnym wpisie. 🙂



 

Leave a Reply