projekt Www 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? 😉


web design sketch google
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ć.

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
Przygotowany na szybko szkic przy pomocy 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. 😉

Tutaj akurat przygotowałem szybki szkic opierając się na własnych przyzwyczajeniach i nie przykładając się do niego zbytnio, 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. 🙂



 

To co robi teraz jest lepsze od tego co robił pół roku temu, ale co będzie robił za pół roku będzie jeszcze lepsze niż to, co robi teraz – w każdej dziedzinie, którą się zajmuje, ponieważ jak twierdzi, jak się nie rozwija to się zwija. Uważa, że na wszystkim jesteśmy w stanie zarabiać, cokolwiek przychodzi nam do głowy, cokolwiek lubimy robić, jesteśmy w stanie mieć z tego zysk.

Artysta, autor bloga, projektant, grafik komputerowy, barista. Na codzień mieszka we Wrocławiu, prowadzi bloga BrainDesign, robi to co lubi i ma z tego frajdę. Fan pozytywnego myślenia, standupu, rozwoju osobistego oraz dobrej kawy. W wolnych chwilach łapie chwile na zdjęciach, czyta ciekawe książki, bawi się w Social Mediach, a także przegląda YouTube’a podziwiając występy sztuki Flair czy inspirujące wystąpienia z TED/TEDx’owych konferencji.

Wczytaj więcej

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Sprawdź także

Projektowanie Logo – Jak się za to zabrać?

Często gęsto osobom spoza branży kreatywnej wydaje się, że projektowanie to prosta sprawa …