Wypuszczanie Produktów i Startupów na Rynek: Mapa witryny i treści na strone

0:00Przejdźmy teraz do koncepcji marketingowej naszej najważniejszej rzeczy, jaką mamy

0:04w marketingu, czyli strony internetowej.

0:06Strona internetowa, tak jak powiedziałem, wypadkowa tego, co mówią klienci o nas

0:11oraz SEO czy keyword researchu, który zrobiliśmy poprzednio.

0:14Ultra Ważne, żebyśmy właśnie robili ją z tego powodu i żebyśmy postarali się, żeby

0:21również jej sitemapa to jak będą, jak będzie stworzone menu, jak będą układały

0:26się strony, odpowiadały temu, jak chcemy pokierować tą treścią i jakie

0:30rodzaje treści chcemy przygotować.

0:32Pokazywałem Ci wcześniej, że w ramach tego keyword researchu już wpadaliśmy

0:36na takie różne pomysły.

0:37Na przykład, że to może być na bloga, to może być jakaś strona comparison, to może

0:41być strona główna, to może być jakiś landing page, to może być na przykład

0:45jakiś freebik, który będziemy dawać.

0:47I właśnie w ten sposób łapiemy kolejne pomysły na to, jak

0:51przygotować strukturę tej naszej strony.

0:53Struktura naszej strony jest zbudowana.

0:55Przynajmniej w moim przypadku.

0:56Jest zbudowana w również w fig jamie.

0:59Możesz to zrobić w Miro.

1:00Możesz to zrobić w muralu, w czymkolwiek.

1:03Generalnie chodzi o to, żeby po prostu stworzyć powiązania pomiędzy

1:07poszczególnymi podstronami.

1:09No i w moim przypadku też będzie to oznaczało zaznaczenie tutaj tym kolorem

1:15różowym stron, które będą dynamiczne i kolorem pomarańczowym,

1:19stron, które będą statyczne.

1:20Statyczne strony to takie, do których całą treść napiszę sam i po prostu ta treść

1:24będzie na nich możliwa do zmiany wyłącznie akurat u mnie w Webflow.

1:28Po wejściu do tego narzędzia.

1:30No i tam te treści będzie można zmieniać.

1:32Natomiast strony dynamiczne to takie strony, które będą automatycznie

1:36generowane, do których przygotowujemy tylko szablon, natomiast wszystkie treści

1:40uzupełniamy do nich z poziomu CMS a.

1:42Podobnie jak na przykład w WordPressie, uzupełnia się treści do poszczególnych

1:46postów na bloga i te posty się pojawiają w tym samym szablonie.

1:48To są właśnie te strony dynamiczne.

1:50No i teraz strona, czyli to, jak przewidziałem, jak

1:54przygotowałem sobie całą, Cały, całą tą side mapę dla bardzo złożonego projektu.

2:00Od razu Ci mówię, że chcę Ci to pokazać na najtrudniejszym z możliwych przykładów,

2:04bo każdy inny będzie prostszy.

2:05Ale tu jednocześnie mogę wytłumaczyć dużo moich takich ważnych koncepcji, jeśli

2:09chodzi na przykład o stronę Alice czy innych moich projektów.

2:12One są dużo, dużo prostsze.

2:14Często jest to tylko jeden prosty landing page strona z dokumentacją, tak

2:18jak to jest w przypadku Alice.

2:19Ona jest bardzo ważna i powinniśmy zawsze ją umieszczać.

2:22Strona z jakąś akademią, czyli video tutoriale, bo zawsze

2:24łączę produkt z edukacją. To co Ci mówiłem.

2:26No i strona pricingu i strona do pobrania czy kupienia naszego produktu.

2:32W zasadzie oczywiście tylko te strony można powiedzieć, że są najważniejsze,

2:35kontakt możemy zawrzeć w stopce i tak dalej, i tak dalej.

2:39Natomiast budując jakiś SaaS, budując jakiś bardziej złożony produkt i myśląc o

2:45tym tak już mocniej na poważnie, będziesz musiał prędzej czy później zacząć dodawać

2:49te rozmaite strony, które mam tutaj rozpisane.

2:53Na przykład w przypadku premiery Easy, którą teraz planuję.

2:56I nowych stron. Które na potrzeby Isi.

2:58Teraz robimy, więc ważne, żeby tutaj rozpisać całą nawigację.

3:01Ja mam tak.

3:02Najpierw stronę główną, Następnie mam strony poszczególnych

3:05narzędzi i są to strony statyczne, czyli będę mógł je dowolnie zmieniać.

3:10Nie będą z żadnego szablonu.

3:11Mamy EasyCart i z EasyPlayer i z Lowe i te narzędzia, które które

3:16aktualnie mamy w ofercie.

3:17Następnie te strony linkują do stron, które znajdują się poniżej, czyli do

3:22strony z feature'ami, do strony z use casami i do strony z integracjami.

3:27Czyli każda z tych narzędzi ma jakieś funkcje i te funkcje są już dynamiczne.

3:35Co to znaczy?

3:36To znaczy, że na przykład jak EasyCookie ma funkcję na przykład dodawania

3:40banera z ciasteczkami, to to jest feature, który będę chciał opisać w dynamicznie w

3:46CMS ie i też będę chciał wygenerować wtedy z CMS automatycznie dla niego stronę.

3:51Dzięki temu będę miał mnóstwo stron z różnymi fakturami, które będę

3:55mógł spinać z różnymi narzędziami.

3:57Tak samo use case'y i use case'y.

3:59To będą moje właśnie konkretne zastosowania.

4:03No i dzięki temu, że będę je miał dynamiczne, że na przykład możesz

4:07sprzedawać kursy, że możesz sprzedawać konferencje, że możesz

4:11zbierać opinie i tak dalej.

4:13Jeśli te case'y będę miał dynamicznie dodawane przez CMS, czyli dodawane właśnie

4:17przez panel administracyjny, będę mógł bardzo prosto sobie wygenerować mnóstwo

4:21różnych use case'ów i później popodpinać jeden guzik, drugi do easy love,

4:25trzeci raz do timera i tak dalej.

4:27I właśnie fajnie jest dynamicznie zbudować taką strukturę, również jeśli chodzi o

4:31integracje, gdzie integracje to po prostu różne narzędzia, które łączą

4:34się z tymi moimi narzędziami.

4:36Następnie mam dużą stronę edukacyjną i to jest główna część, taka, która odpowiada

4:40właśnie za edukację w produkcie i za SEO.

4:43To jest tak naprawdę strona, która jest hubem, czyli można powiedzieć, że łączy

4:46ze sobą wszystkie strony edukacyjne.

4:49No, ja akurat zaprojektowałem tutaj dużo różnych typów contentu edukacyjnego,

4:54który chcemy dostarczać.

4:55Czyli będą to po pierwsze strony dokumentacji dynamicznie.

4:58Będą to strony bloga i poszczególnych wpisów na blogu.

5:02Będzie to cała akademia, na którą będą składały się warsztaty, czyli wydarzenia

5:06na żywo, kursy wideo, które będą już tutaj gotowe i każdy będzie miał swoje

5:12jeszcze podstrony do rejestracji.

5:14Jeśli chodzi o kolejne typy treści, które zaplanowałem, to na przykład są to

5:19guidesy, czyli takie bardziej obszerne poradniki, które chcielibyśmy pisać oraz

5:23case study naszych klientów, które mają swoje osobne strony.

5:27Moglibyśmy tutaj dodawać jeszcze wiele różnych typów podstron, na przykład

5:31podcast albo cokolwiek innego, gdybyśmy chcieli je tworzyć.

5:34Ale wszystko to jest podlinkowane z takiego jednego dużego resource huba,

5:37który jest stroną statyczną, a te strony różowe są stronami dynamicznymi,

5:41które będziemy wypełniać przez CMS.

5:44Następnie mamy stronę z priceingiem, która jest super ważna.

5:47Stronę z alternatywami.

5:48No i tutaj będziemy mieli statyczny szereg stron easy kontra coś tam.

5:52Moglibyśmy zrobić je dynamicznie, ale jest tyle różnic między tymi różnymi stronami,

5:56że postanowiłem, że będą to strony statyczne.

5:58Później mamy dynamiczny changelog.

6:00Co się zmieniło w naszej aplikacji?

6:01Mamy jakąś road mapę czy tam sugerowanie funkcji?

6:04Mamy stronę o nas, mamy stronę kontaktową, mamy stronę z warunkami, z polityką

6:09prywatności i z regulaminem.

6:11No i mamy link do logowania, który jest wyjątkowym linkiem, ponieważ już

6:15prowadzi do naszej aplikacji.

6:17W ten sposób przedstawia się cała struktura witryny i w ten sposób

6:21zobrazowane są relacje pomiędzy poszczególnymi podstronami.

6:24Powinniśmy właśnie coś takiego zrobić.

6:25Na ogół będziemy mieli tą strukturę prostszą, ale nadal, nawet jeśli ma się

6:30składać tylko z kilku tych elementów, warto to zrobić w taki sposób.

6:34Jeśli będziesz pracować na narzędziu na przykład takim jak Webflow czy Framer

6:38czy WordPress, które pozwoli Ci na stworzenie właśnie tych dynamicznych

6:43kategorii i dodawanie różnych rzeczy przez CMS, to warto też zastanowić się, które

6:47rzeczy mają być właśnie w ten sposób stworzone i które strony

6:51mają być tak rozpisane.

6:52Następnie mamy rozpisane.

6:56Mamy rozpisaną całą nawigację.

6:58Nawigację często możesz znaleźć, zainspirować się.

7:01Na innych stronach na przykład ja tutaj się zainspirowałem stroną

7:05jednego z naszych konkurentów. Konkurentów.

7:07Jak masz rozwiązaną nawigację i najczęściej tą nawigację

7:10możesz znaleźć w stopce.

7:11To co powinniśmy zrobić to strony produktu.

7:14Mamy strony przykładów, mamy strony.

7:17Na przykład właśnie feedback czy jakiś roadmapa.

7:19Mamy strony poszczególnych narzędzi, mamy instrukcje jak pododawać to do rozmaitych

7:24miejsc, Czyli to są fragmenty naszej dokumentacji.

7:27Mamy na przykład dla kogo to jest dla sales teamów, dla

7:30freelancerów i tak dalej.

7:32Jaki resource, czyli ten cały Resource Hub, który stworzyłem Compare

7:36compare, czyli sekcje z porównaniami.

7:38Jak widzisz, tutaj jest mnóstwo alternatyw i też świetnie to robią,

7:42po to, żeby świetnie się pozycjonować na te frazy, które są wysoko zasięgowe.

7:46No i support, jakieś dokumentacje.

7:48Więc jak widzisz sporo różnych stron jest tutaj porobionych.

7:50Część z nich ma faktycznie odzwierciedlenie w tym co ja zrobiłem i

7:54teraz trzeba się zastanowić, które z tych elementów warto wrzucić do menu.

7:58Które z elementów warto wrzucić do menu na górze?

8:00Jak to menu ma na górze wyglądać, jak chcemy to rozegrać i które z tych

8:04elementów warto wrzucić do footer, czyli do naszej stopki, więc odpowiednio

8:10rozpisuję każdą sekcję w menu.

8:12Czyli mamy sekcję Solutions, sekcję narzędzi, sekcję resources, sekcję

8:16pricingu już dokładnie jak mają się nazywać te poszczególne elementy,

8:19poszczególne sekcje w tym menu. No i to jest ważne.

8:22Stworzenie mapy witryny i stworzenie prototypu nawigacji po naszej stronie, bo

8:26dzięki temu złapiemy taki szerszy kontekst odnośnie tego, jakie strony chcemy

8:31stworzyć, jakie typy treści zamierzamy produkować na potrzeby naszego projektu.

8:35I to, co tutaj przygotowałem, jest, można powiedzieć, bardzo rozbudowane, ale też

8:39można powiedzieć, że jest czymś, do czego być może będziesz chciał stopniowo

8:43dochodzić w momencie, gdy Twój produkt będzie się coraz lepiej rozwijał.

8:48I jeśli chodzi o side mapę to tyle.

8:50Teraz kolejna rzecz, którą trzeba zrobić, to rozpisane w ten sposób strony.

8:55Czyli już wiemy dokładnie jakich stron potrzebujemy.

8:57Potrafimy je szczegółowo rozpisać, więc takie rozpisane w ten sposób strony

9:02będziemy chcieli umieścić jako content database base do naszej strony.

9:06Czyli wszystkie po kolei strony spisujemy. Co musimy zrobić.

9:09Musimy zrobić porównanie z Gumroad.

9:11Musimy zrobić porównanie z paddle, musimy zrobić strony produktowe, musimy

9:14zrobić case'y i tak dalej.

9:16I w tym momencie rozpisujemy je właśnie tutaj.

9:19Czyli na przykład tu mamy Easy Tools Page copy oznaczone gwiazdką.

9:22To są te nasze statyczne, najważniejsze strony i możemy sobie

9:25otworzyć taką stronę.

9:26To jest baza danych zrobiona w Notion i my na takiej bazie z Martą sobie na przykład

9:30pracujemy i tutaj robimy mnóstwo różnych komentarzy, ale generalnie najpierw robimy

9:35statyczną treść do tych podstron, czyli tutaj znajdzie się na bazie naszego

9:40researchu słów kluczowych, tego, co wiemy, znajdzie się statyczna treść, to co chcemy

9:44na naszej stronie głównej umieścić i po kolei jest to.

9:48Są to opisy narzędzi.

9:49Jest to sekcja z Creator Tools.

9:52Jest to kolejna sekcja z.

9:55Tym z jakimś demo produktowym. Jest to.

9:58Tu dokładnie piszemy takie treści, jakie chcielibyśmy mieć na tej głównej stronie.

10:02Staramy się.

10:03Oczywiście trzeba to trochę takich treści napisać, żeby wiedzieć

10:07jak mniej więcej objętościowo będzie to wyglądać na stronie.

10:09Na początku pewnie będziesz pisał zdecydowanie za dużo treści,

10:13ale po jakimś szeregu iteracji każda z tych stron jest właśnie

10:17w ten sposób rozpisywana.

10:19I każda z tych stron.

10:20Jest tego naprawdę sporo, ale każda z tych stron też jest zbudowana pod jakieś

10:24konkretne słowa kluczowe, na przykład.

10:25I ma też jakąś konkretną konkurencję, którą można sprawdzić.

10:28Więc no, mamy tutaj jak najwięcej informacji, które pozwalają nam zrobić

10:32dobrą stronę ofertową, dobre kopie na stronę ofertową, na przykład

10:35e-mailowe, jeśli już mam takie treści.

10:38Kolejną rzeczą, którą robię, to wracam sobie w to miejsce i zaczynam te strony

10:43projektować w ten sposób, że posługuję się bardzo uproszczonym schematem w gamie.

10:50Po prostu korzystam z narzędzi, które tutaj są po to, żeby zrobić

10:53bardzo prosty prototyp.

10:55Jeszcze nie będę dobierał teraz do tego żadnych komponentów, żadnej technologii.

10:58To może być właśnie Webflow, to może być Framer.

11:01Nie jest to istotne na ten moment.

11:03Dla mnie jest istotne to, żeby po prostu zaprojektować tak schematycznie, jak

11:08wydaje mi się, że powinny te strony wyglądać.

11:11A mając już treści jest mi dużo łatwiej, więc mam treści, ale na przykład jeszcze

11:15tam nie miałem tego, że tutaj bym chciał wrzucić jakiś taki komponent, który by

11:19wyświetlał testimoniale i byłby takim social proof em.

11:22Więc to w tym momencie dodałem miałem treści, ale nie miałem jeszcze na przykład

11:26tego przycisku, więc tutaj go dodałem.

11:28Miałem treści, ale nie miałem tego pomysłu, żeby zrobić na przykład taką

11:31karuzelę z tymi screenami, więc to tutaj widać.

11:35Albo na przykład, żeby ułożyć w takich kafelkach mniej więcej i rozbić tą sekcję,

11:40która opisuje poszczególne narzędzia.

11:42Miałem też jakieś statystyki, ale tutaj mniej więcej pokazuje jak

11:45chciałbym, żeby były zaprezentowane.

11:49Tutaj jest jakiś testimonial.

11:50Następnie jest jakiś komponent, który chciałbym zrobić w taki sposób, że tutaj

11:56te funkcje, które się pokazują, po prostu będą zmieniać tą prawą szpalt.

12:00Jest to tutaj wyjaśnione, że po kliknięciu na tą funkcję po prawej stronie

12:03będzie się to przełączać. Dalej mamy demo.

12:06Też mniej więcej jak powinno to być rozmieszczone.

12:09No i to mi pozwala zobaczyć, a nawet zobacz dać przykłady.

12:13Jak na przykład widziałem na Webflow University fajną sekcję, która jest

12:17podobna do tej, którą chcę tutaj zrobić.

12:19No to wrzucam screen jak mniej więcej chciałbym, żeby to wyglądało.

12:22Tak samo tutaj, że mamy tutaj integracje i że te integracje będą

12:25musiały przejść w to miejsce.

12:27No i właśnie w ten sposób taka stronka zaczyna nam trochę fajnie wyglądać.

12:32Już tak jak zaczynamy widzieć to kopie, jak ono tutaj leży.

12:35I często to jest też powód do tego, żeby trochę je dostosować, zmienić, bo widzimy,

12:40że na przykład ten nagłówek będzie zdecydowanie za długi.

12:43Prawdopodobnie powinniśmy go mocno skrócić.

12:47No i właśnie zastanawiamy się tutaj nad tymi rzeczami i po kolei lecimy sobie i

12:51każdą z tych stron właśnie w ten sposób rozpisujemy, oczywiście nie trzymając

12:57się żadnych, żadnego layoutu.

12:58Tutaj, korzystając z jakichś prostych shapeów, po prostu powielając sobie te

13:02rzeczy, zmieniając te teksty, kopiując i wklejając z notion,

13:06aż uzyskamy jakiś taki schemat strony, która na przykład w przypadku

13:11poszczególnych narzędzi u mnie wygląda tak.

13:14Więc każdą z tych stron w ten sposób trzeba rozrysować

13:18dopiero kolejnym krokiem.

13:20Aha, jeszcze jedna ważna rzecz.

13:22Tutaj proszę zobacz, że dla każdej z tych stron ja na górze też używam tych słów

13:27kluczowych, które tutaj występują i też staram się przygotować dla

13:30niej tytuł i meta description.

13:31Może jeszcze na tym etapie nie jest to kluczowe, ale faktycznie

13:34warto tutaj ewentualnie mieć.

13:35Natomiast słowa kluczowe widzę od razu jakie tworzę, więc ewentualnie

13:39jeśli zamierzam np.

13:40Zmienić jakiś nagłówek, skrócić itd.

13:43To też biorę je pod uwagę po to, żeby pojawiały się w odpowiednich miejscach.

13:48Także to jest ten schemat, to jest struktura strony, którą robię.

13:51Sidemapa.

13:52Rozpisanie krok po kroku tego, co znajduje się w menu, na bazie konkretnego researchu

13:57i konkretnych słów, a następnie przygotowanie mock upów, bardzo prostych

14:01wizualnych podstron na podstawie treści, które wcześniej stworzyliśmy w Notion.

14:07W naszym przypadku strasznie dużo roboty, bo widziałeś pewnie ile set różnych

14:12stron tutaj tak naprawdę jest.

14:14Tu jest mnóstwo tych treści, które sobie planujemy, ale tak jak

14:17mówię, to jest duża strona.

14:18Natomiast nie zmienia to faktu, że robię to dokładnie w taki sam sposób.

14:21Nawet jeśli ta strona jest zdecydowanie mniejsza i bazy Notion dają nam tą

14:26możliwość, że możemy sobie to później bardzo łatwo odfiltrować np.

14:29Że do Comparison S chcemy przygotować i możemy zrobić sobie nawet w widoku kanban

14:34Właśnie tego typu materiały, że w dokumentacji chcemy mieć te materiały,

14:38których jeszcze nie zacząłem robić. I tak dalej, i tak dalej.

14:40Tutaj mamy same product pages, które są zrobione, zaakceptowane in progress, więc

14:44możemy tutaj pracować sobie na różnych statusach.

14:46Mówiłem wcześniej Olina, że nie chcę, żebyś to mylił jedno z drugim.

14:49Tutaj faktycznie, jeśli chodzi o treści marketingowe,

14:53wszystkie praktycznie mam w notion i dużo mam tutaj takich właśnie tablic Kanban ów,

14:57gdzie sobie pracujemy z zespołem marketingu czy obsługi klienta.

15:00Linear najczęściej wykorzystuję właśnie w developmencie i do tego

15:04sprawdza się on świetnie.

15:06Natomiast Notion jest tutaj idealny, jeśli chodzi o treści.

15:08To wszystko, co chciałem Ci powiedzieć na teraz.

15:10Mam nadzieję, że to Cię nie przytłacza.

15:12I to jest taki bardzo zaawansowany już przykład.

15:15Natomiast na tej podstawie na pewno możesz wyciągnąć wnioski dla siebie, A ja w

15:19kolejnej lekcji pokażę Ci, jak wygląda już ten mock up przełożony na gotowy layout i

15:25jak później pracujemy z nim, żeby przerzucić go na stronę internetową i

15:29zarządzać bardzo łatwo treściami, które są dynamiczne.

15:32Do usłyszenia.