Nie jestem specjalistką od www, nie umiem programować ani tworzyć od zera cudów na kiju. Ale kilka stron internetowych w życiu postawiłam: niektóry były prostymi landingami, inne zawierały w sobie blog czy portfolio. Stworzyłam też całkiem sama stronę internetową, na której właśnie jesteś.

Jedna z poprzednich stron, które zrobiłam, dotyczyła pewnego projektu w Hiszpanii, w który się zaangażowałam (tutaj możesz ją podejrzeć). Bardzo dużo czasu zajęło mi „wyklikanie” jej odpowiedniej formy, logicznego i ładnego układu treści. Dodawałam tekst, obrazek, poniżej jakiś banner, znowu tekst – a potem okazywało się, że taka kolejność jest bez sensu i w sumie to brzydko wygląda. I znów wszystko przesuwałam, zmieniałam kolejność – ale dalej nie byłam przekonana. I tak klikałam i klikałam wciąż od nowa.

A potem podpatrzyłam u Kasi z Worqshop szybki szkic, który stworzyła, gdy przygotowywała materiały promocyjne swojego produktu. Nic skomplikowanego: kilka kolorowych kwadratów i linijek tekstu narysowanych na papierze. Olśniło mnie: tak należy przygotowywać się do pracy nad stroną www!

Jak zrobić stronę www krok po kroku

Krok 1: zbieranie inspiracji

Prawie każdy projekt, który ma być wizualny, ładny, zaczynam od przejrzenia Pinteresta. Podglądam inne projekty stron internetowych, ale przede wszystkim inspiruję się zdjęciami w ogóle nie związanymi z budowaniem własnej www: jakieś kubeczki, poduszki, kwiatki – i inne fotografie, które estetycznie oddają charakter mojej strony. Te inspiracje zapisuję sobie na odpowiedniej tablicy, ale móc do nich później wrócić.

Krok 2: lista funkcji

Na kartce papieru, na komputerze lub w planerze wypisuję sobie wszystko, co powinno się na mojej stronie znaleźć: zakładka „zacznij tutaj”, blog, oferta, portfolio, sklep internetowy… No i czy strona główna ma po prostu prezentować najnowsze wpisy, czy być stroną statyczną, moją wizytówką?

Do każdej zakładki dopisuję także, jakie konkretne elementy ma zawierać. Na przykład na stronie głównej chcę mieć: moje zdjęcie, kilka słów o mnie, dostęp do ostatnich artykułów, ofertę, opinie, możliwość zapisu na newsletter i tak dalej. Taka szczegółowa lista pozwala mi na to, żeby w czasie tworzenia strony zająć się… tworzeniem strony. A nie myśleniem, co by tu jeszcze dodać.

Krok 3: logiczny ciąg dla każdej podstrony

Na karteczkach samoprzylepnych wypisuję sobie elementy poszczególnych zakładek i zastanawiam się, w jakiej kolejności odwiedzający moją stronę ma na nie trafić. Przekładam karteczki jedna pod drugą tak długo, aż osiągnę logiczną całość zgodną z moją aktualną strategią: chcę, żeby użytkownik kojarzył mnie z grafiką (kafelek „gdzie trafiłeś” na samej górze) oraz żeby poznał mnie jako specjalistkę za pośrednictwem bloga (kafelek „blog” – jako drugi). W dalszej kolejności zapraszam do zapisania się na newsletter oraz przechodzę do typowej oferty pracy jako grafik.

Krok 4: szkic, czyli jak to ma wyglądać

Dopiero, gdy mam już ustalony logiczny ciąg zwiedzania www, przechodzę do tego fajnego etapu, w którym można bawić się pisadłami. Na pionowym pasku papieru – u mnie pół A4 – planuję, jak całość będzie wizualnie wyglądać. Na kolorowo zamalowuję pola, w których znajdą się zdjęcia lub grafiki oraz robię maziaja tam, gdzie umieszczę kolorowy guzik. Kreskami zaznaczam tekst. Słownie zapisuję sobie tylko nazwy poszczególnych części, aby móc zobaczyć, jak całość będzie się prezentować, gdy pojawi się nagłówek.

Czasem na tym etapie jeszcze następuje drobna korekta logiczne ciągu – jak widzicie na szkicu mojej strony głównej, który stworzyłam, gdy rzeczywiście nad nią pracowała – jest przecięty w poprzek i ponownie sklejony, pojawiają się też strzałki.

Taki szkic robię do wszystkich podstron na mojej stronie – czyli do bloga, zakładki „potrzebujesz grafika” oraz „zacznij tutaj”. Wykonanie szkicu trwa nie więcej niż 15 minut, a potem, w czasie rzeczywistego budowania strony pozwala zaoszczędzić ogrom czasu.

To, jaki układ ma strona internetowa, jakie znajdują się na niej elementy, jej kolorystyka – to wszystko wnika z roli, jaką ma www w strategii twojej marki. Zupełnie inaczej będzie prezentować się strona, służąca do zbiórki pieniędzy dla potrzebujących, a inaczej taka, która ma sprzedać produkt. Warto odpowiedź sobie na pytania o cel i rolę www w procesie rozwoju marki, zanim w ogóle zajmiesz się projektowaniem i klikaniem w WordPressie. Bo może być tak, że strona internetowa w ogóle nie jest ci potrzebna.

Jak pisałam we wstępie do tego artykułu: nie jestem specjalistką od tworzenia stron www. Ale skoro wymyśliłam sobie metodę, która działa i pomogła mi stworzyć stronę, z której jestem zadowolona – to się nią z wami dzielę. Mam nadzieję, że przyda wam się przy pracy na stronami i pozwoli zaoszczędzić sporo czasu i nerwów.