Projektowanie stron internetowych

Projektowanie stron internetowych bez kodowania to czasem wyzwanie, ale też duża przyjemność. Tworząc stronę internetową, dostrzegamy wiele rzeczy, na które na co dzień nie zwracalibyśmy uwagi. Projektowanie witryny www jest ściśle powiązane z web designem, które polega na stworzeniu odpowiedniego interface’u oraz całej szaty graficznej. Za te zadania odpowiedzialny jest m.in. UX (czyli user experience) oraz UI (user interface). Efektem tej pracy jest strona internetowa.

Z pozoru cały proces projektowania witryny internetowej może wydawać się nam skomplikowany, ale w większości przypadków tak nie jest. To czy przenoszenie projektu strony do realizacji będzie dla nas łatwiejsze, czy też trudniejsze zależy w dużej mierze od samej koncepcji strony, jej złożoności oraz sposobu jej wykonania – czyli narzędzia, z jakiego będziemy korzystać do jej stworzenia.

Chcesz zaprojektować własną platformę www? Może zastanawiasz się nad zajmowaniem się web designem zawodowo? Sprawdź, co należy wiedzieć o samym tworzeniu stron, praktykach projektowych oraz jak zamienić sam proces projektowania w przyjemność, a może nawet pasję, która da obydwu stronom (zleceniodawcy i zleceniobiorcy) dużą satysfakcję – jedej pozwoli lepiej zareprezetować się swoim odbiorcom, a drugiej zdobywać doświadczenie i rozwijać swoją działalność w branży web designu.

Jak zacząć projektować strony internetowe?

Projektowanie stron internetowych zaczyna się od potrzeby lub wstępnego pomysłu na biznes. Kolejnym, w tym momencie już rozpoczynającym proces projektowy krokiem jest ustalenie roli, jaką ma pełnić witryna internetowa, czyli krótko mówiąc- jej celu – po co powstaje, co ma pozwolić osiągnąć swojemu właścicielowi etc.

Jak można się domyślać, istnieją różne rodzaje witryn www, a każda z nich przydaje się do innych celów. Świadomość tej jednej rzeczy pozwoli rozwinąć cały projekt. Po pierwsze dużo prościej będzie nam zdecydować, jaką formę ma przybrać strona, a po drugie jak ją zbudować w sensie technicznym (m.in. rozmieszczenie elementów, forma nawigacji) oraz jakie treści powinny się na niej znaleźć (czyli content strony, jego forma – tekst, grafiki, wideo, cta ect.).

Nie będziemy tutaj wymieniać wszystkich rodzajów stron internetowych, ale możemy poznać te, które zaliczmy do tych popularniejszych, z którymi zapewne nie raz się spotkamy.

Do najpopularniejszych należą:

one-pager – witryna www (jak sama nazwa wskazuje) składająca się z jednej strony (bez podstron)
- prosta wizytówka
- scrolling-page
- landing page
klasyczna strona internetowa z podstronami – może zawierać w sobie np. kontakt, ofertę, bloga
strona pełniąca funkcję sklepu online – większość z nich będzie składać się również z elementów klasycznej strony, dzięki czemu będzie można budować wiarygodność i świadomość marki oraz wypozycjonować treści w sieci

Oczywiście są też duże serwisy, do których należą m.in. portale… ale jest to już zupełnie inny temat.

Teoretycznie najprostszą witryną internetową jest one-page, a więc myśląc analogicznie – landing page również. W końcu wymagają one zaprojektowania tylko i wyłącznie jednej strony. (Chociaż najczęściej faktycznie są one niewielkie i nie zawierają dużo treści, to jednak zdarzają się pewne wyjątki).

Pomimo tego, że landing page to również one pager (ale już nie na odwrót) to różnią się one zastosowaniem. Co to i jak zrobić landing page? W wolnym tłumaczeniu – jest to „strona lądowania”, ale ma też kilka innych nazw jak np. strona produktowa, sprzedażowa lub docelowa.

Służy najczęściej do zbierania kontaktów lub skupia wokół siebie ruch dotyczący jakiejś akcji, produktu, czy też usługi. Dlatego też na www typu landing page nie ma zazwyczaj dużo treści, dzięki czemu jasno widać jej cel. Bardzo często nie mają też menu i powstają jako odłam strony głównej.

Z kolei standardowe one-pagery to „rozciągnięte” zwykłe witryny www. Wszystkie informacje są umieszczone na jednej, długiej stronie internetowej. Jest to tzw. scrolling page. Idealnie sprawdzi się gdy naszymi użytkownikami są przede wszystkim osoby korzystające z urządzeń dotykowych.

Najważniejsze treści są zawsze na górze. One-pagery mają swoje menu, ale nie odsyłają one do kolejnych podstron, tylko do nagłówków.

Projektowanie, a następnie tworzenie stron www tego typu wymaga specyficznego podejścia. Chociaż wydają się proste, to potrafią być wymagające. Lepiej zacząć przygodę z robieniem stron od czegoś innego. Zwłaszcza że projektowanie stron najczęściej kojarzy się ze „zwykłymi” stronami.

Może to nie jest dobre określenie, ponieważ posiadają elementy występujące w kilku rodzajach stron internetowych, ale z pewnością można ustalić pewnego rodzaju szablon, z elementami, które należy wziąć pod uwagę podczas projektowania.

Oczywiście kompletna specyfikacja będzie trochę odbiegała w zależności od charakteru i tematu i wcześniej wspomnianego celu strony.

Strony internetowe projektowane w dość standardowym stylu zawierają w sobie:

stronę główną
podstrony przedstawiające np.:
- ofertę wraz przykładami wdrożeń, case study czy swoistym portfolio;
- aktualności na temat Twojej firmy, jej udziału w różnych wydarzeniach;
- kontakt z danymi teleadresowymi oraz formularz kontaktowy.

Witryn o takiej budowie znajdziemy w internecie naprawdę dużo, przez co jego użytkownik, bez dodatkowych instrukcji będzie wiedział, w jaki sposób może się po nich przemieszczać.

W wypadku gdy potrzebujemy wizytówki w sieci, to prosty one-pager powinien nam w zupełności wystarczyć. Jeśli chcemy jednak umieścić nieco więcej informacji takich jak oferta, czy np.blog itp. lub po prostu mamy w niedalekich planach rozbudować projekt własnej, czy też klienta strony internetowej, klasyczna jej wersja będzie w sam raz.

Wyjaśniliśmy sobie już pokrótce pojęcie profesjonalnej, nowoczesnej strony internetowej, teraz pora powoli przejść do tego jak ją projektować.

Projekt strony a jej cel

Tak jak już wspomnieliśmy sobie wcześniej, zanim jeszcze zabierzemy się za praktyczną część naszego zadania, czyli przekładania pomysłu na stronę na faktyczny projekt, który później ukaże się w sieci, musimy ustalić kilka ważnych aspektów, które będą kluczowe do tego, by cały proces budowy strony internetowej przebiegał właściwie i ostatecznie przyniósł porządne przez nas efekty.

Pierwszym dużym krokiem jest określenie celu naszej strony – od tego właśnie zaczyna się projektowanie stron internetowych. Od początku musimy wiedzieć, co chcemy przez nią osiągnąć. Dzięki temu sama strona, jak i umieszczony na niej przekaz będą zrozumiałe dla odbiorców.

Prowadząc jakąś działalność nasz obecny lub potencjalny klient, powinien wiedzieć, co mamy mu do zaoferowania. To przecież m.in. dzięki temu przekonamy go do naszej oferty. Za przykład posłużyć nam może strona warsztatu samochodowego.

Użytkownik, wchodząc na www, musi od razu wiedzieć, że dotyczy ona warsztatu samochodowego i może dzięki niej zapoznać się z ofertą usług, które ma do dyspozycji, a także godzinami otwarcia i lokalizacją. Celem takiej strony jest przede wszystkim informowanie o tych usługach, a pozytywnym efektem dodatkowym – zdobycie nowych klientów.

Jasno określony cel to naprawdę podstawa, jeśli chodzi o projektowanie stron internetowych. Dlatego też musimy porządnie zastanowić się nad jego wyborem.
Gdy wiemy już wreszcie, jaki jest cel strony internetowej, przyszedł czas na to, by zastanowić się nad tym, kim są jej odbiorcy.

Określanie odbiorców podczas projektowania strony

Strony internetowe nie są oglądane tylko i wyłącznie przez roboty wyszukiwarek. To w końcu nie dla nich je projektujemy. W związku z tym musimy zastanowić się nad tym, kim będą (i są) odbiorcy naszej strony www. To do nich ostatecznie chcemy dotrzeć, prawda?

Określenie grupy docelowej jest bezpośrednio powiązane z tym, jaki jest cel strony internetowej. To oni wpływają na jego realizację.

Nawet jeśli nie określiliśmy wcześniej swojej grupy docelowej, to definiowanie cech i potrzeb naszego odbiorcy podczas samego projektowania stron internetowych przekłada się na jej powstanie.

Kolejnym krokiem bardzo często będzie jeszcze większe zawężenie charakteru swoich odbiorców i stworzenie tzw. tzw. person marketingowych, czyli idealnych (potencjalnych) klientów. Będą zawierały w sobie imię, wiek, pochodzenie, wykształcenie, zawód, zainteresowania, potrzeby etc. Aby nadać im jeszcze bardziej ludzkiej twarzy, często generowane są do nich zdjęcia. Czego konkretnie będą chcieli od/ z witryny i kim będą dokładnie? Odpowiedzi na ta pytania zawieramy właśnie w personach.

Jeśli mamy już pojęcie o swoim fachu i zdajemy sobie sprawę z tego co mamy do zaoferowania i czym wyróżniamy się spośród konkurencji, to na pewno stworzenie takiego profilu użytkownika strony nie powinny stanowić większego problemu.

Wystarczy, że zastanowimy się nad tym:

czego dokładnie potrzebuje,
jakie ma preferencje,
dlaczego znalazł się na tej stronie,
co powinien na niej znaleźć, żeby na niej pozostał;
co należy na niej zamieścić, żeby złożył zapytanie ofertowe.

Wracając do naszego przykładu z warsztatem samochodowym – nie budzie chyba żadnych wątpliwości, że idealnym użytkownikiem takiej strony internetowej będzie osoba, która potrzebuje naprawy auta.

Chce wiedzieć:

jakie usługi świadczy warsztat,
gdzie się mieści,
w jakich godzinach pracuje,
jak się z nim skontaktować.

Te informacje będą kluczowe i z pewnością klient będzie szukać ich na stronie.Co więc musimy zrobić? Umieścić je w projekcie strony internetowej w widocznym miejscu i sformułować w taki sposób, że będą one natychmiast zrozumiane.

Wniosek: stworzenie person pozwala na lepsze dostosowanie witryny www do potrzeb jej użytkowników, a często też może okazać się pomocne do wprowadzania udoskonaleń w swojej ofercie.

(Dobre) projektowanie stron internetowych jest ściśle związane z odpowiadaniem na potrzeby konkretnych person. Czyli idealnych użytkowników.

W momencie, gdy zidentyfikujemy już swoich odbiorców, zdecydowanie łatwiej będzie nam określić to, co użytkownik chce znaleźć na naszej platformie, a więc tym samym to, co powinniśmy umieścić w projekcie strony

Projektowanie strony internetowej a użytkownicy

Znając cel witryny www oraz wiedząc, kto jest jej idealnym użytkownikiem, możemy wreszcie zabrać się do konkretnej pracy ze stroną. Czas, który poświęciliśmy na zastanawianie się nad celem i potrzebami użytkowników zwróci się z nawiązką. Strona będzie odpowiadać na potrzeby użytkowników, a przez to – realizować swój cel.

Dzięki wcześniejszym ustaleniom mamy już mniej więcej nakreślone co powinniśmy umieścić w projekcie naszej strony. Trzeba to teraz bardziej sprecyzować i uporządkować wszystkie treści.

Najlepiej zacząć od rozpiski. To może być długa lista. Gdy jest już gotowa, musimy postarać się ją pogrupować – przyda się nam to w kolejnym etapie.

Gdy po raz kolejny będziemy przyglądać się liście, powinniśmy spojrzeć na nią jak użytkownik – które rzeczy są istotne z perspektywy każdej z person. Każda z nich będzie szukała nieco innych informacji i to też musimy uwzględnić.

Sięgnijmy po nasz stały przykład, czyli warsztat samochodowy. Powiedzieliśmy już sobie, że osoba, która go szuka, będzie potrzebowała na stronie kontaktu, lokalizacji i godzin otwarcia. Te informacje muszą być dobrze widoczne. Teraz dużo prościej będzie nam wyczyścić listę z nadmiaru informacji. Niektóre z nich mogą być zupełnie niepotrzebne.

Kiedy już wyselekcjonujemy i pogrupujemy nasze informacje z listy, zabieramy się za ich numerowanie.

Najistotniejsze rzeczy na górze, najmniej – na dole. Teraz pora znaleźć kluczowe dane w każdej grupie – te informacje powinny znaleźć się na stronie głównej.

Nie musimy ich jeszcze rozwijać. Na razie informujemy użytkowników, co mamy do zaoferowania. Jeśli będą chcieć dowiedzieć się więcej – na pewno przejdą dalej.

W miarę możliwości główne hasła warto spróbować sformułować podobnie do fraz z wyszukiwarki. Wtedy strona główna nie tylko dobrze komunikuje to, co w sobie zawiera, ale też dobrze się pozycjonuje.

Jakie treści należy uwzględnić w projekcie?

Gdy już wiemy, w jaki sposób możemy podzielić informacje, nareszcie przyszedł czas na to, by zabrać się za tworzenie podstron. Sprawdźmy jeszcze raz, czy informacje się nie dublują (są te same, ale inaczej sformułowane).

Czy jest nam to potrzebne do stworzenia właściwego projektu strony? Zazwyczaj nie. Każda z podstron powinna odpowiadać jednej z utworzonych przez nas wcześniej grup treści. Najlepiej jeśli wyjdzie ich ok. 4 – teraz struktura witryny jest praktycznie gotowa. Jeśli wyszło nam ich więcej, zastanówmy się, czy możemy to jeszcze zawęzić. Spróbujmy znaleźć jakiś wspólny mianownik.

Minimalizm bardzo przydaje się przy projektowaniu stron internetowych. Jest on przydatny zarówno ze względu na efekt wizualny, jak i praktyczny- dzięki właściwemu ułożeniu treści odbiorca nie zgubi się w ich przekazie.

Oczywiście nie możemy też na siłę skracać istotnych informacji, ponieważ to też może wpłynąć na błędne odebranie przekazu.

Uporządkowane informacje na stronie mogą przynieść również efekt psychologiczny- skoro projekt samej strony jest wykonany z głową, to po drugiej stronie najprawdopodobniej są profesjonaliści, którym warto zaufać.

A od tego tylko krok do zrealizowania przez użytkowników ustalonego przez nas celu.

Kartka i ołówek – pierwszy projekt strony

Zanim odpalimy program graficzny, warto najpierw wykonać pierwsze szkice poszczególnych elementów i sam ogólny projekt na kartce papieru. Zwłaszcza gdy nie mamy jeszcze pomysłu na to, jak zabrać się za naszą witrynę www od strony wizualnej (zgodnie z trendami) lub po prostu nie jesteśmy jeszcze przekonani do naszej koncepcji.

Poszukiwanie inspiracji

Przy projektowaniu profesjonalnych stron – zarówno dla siebie, jak i dla klientów zawsze warto zrobić wstępny research i poszukać inspiracji. Dobrze jest przejrzeć kilka stron i znaleźć te, które nam (lub zleceniodawcy) się podobają…lub też nie, a następnie wyciągnąć swoje wnioski. Z pewnością w większości przypadków znajdziemy przedstawiony przez nas wcześniej klucz projektowania stron internetowych.

Szkic strony

Mamy już elementy, które powinny się na niej znaleźć, teraz rozpiszmy je na kolejne podstrony – niech każda kartka będzie jedną podstroną. Na każdej kartce papieru symbolizującej podstronę umieszczamy kolejne elementy (z zachowaniem hierarchii ważności).

Jest to bardzo praktyczny sposób na wykonywanie próbnych projektów witryny, również z tego względu, że tutaj nic nie zepsujemy – nie musimy bać się skreśleń, a przy okazji od razu widzimy, które nasze próby były nieudane.

Osoby, które preferują tworzenie szkiców w wersji cyfrowej, mogą oczywiście od razu skorzystać z programów typu Photoshop, Illustrator lub Figma i tam wykonać wirtualny projekt. Pozwoli to na jeszcze lepszą wizualizację strony i usprawni też cały proces, ponieważ od razu przejdziemy do tworzenia elementów graficznych, które wykorzystamy w naszym projekcie witryny www.

Projekt w kreatorze WebWave

Nie zawsze potrzebujemy dodatkowego narzędzia (np. Ilustratora), aby wykonać projekt graficzny strony internetowej. W wielu przypadkach jest to niekonieczne. Korzystając z WebWave jesteśmy w stanie tworzyć wszystko w na bieżąco – w czasie rzeczywistym, bez kodowania.

Darmowy bank zdjęć i ikon znajduje się bezpośrednio w kreatorze. Kształty, dostęp do fontów i możliwość wgrania własnych. Wszystko to też jest na miejscu. Nie będzie też więc problemu z wykonaniem, chociażby baneru. Jeśli jakiś element w projekcie nam się nie spodobał, możemy go skasować, cofnąć zmiany lub nawet przywrócić stan projektu strony do poprzednio zapisanej wersji.

Co jeszcze ważniejsze projektując responsywną stronę internetową w kreatorze, jesteśmy w stanie widzieć jej ostateczne zachowanie (i oczywiście ogólny wygląd). Możemy to sprawdzić w podglądzie lub po prostu opublikować stronę za darmo i sprawdzić, czy działa na niej wszystko, tak jak powinno.

Testowanie – finalny element projektowania strony www

Zanim pokażemy swoją stronę użytkownikom, warto najpierw ją jeszcze sprawdzić…i to nie raz. Oczywiście tak jak już sobie przed chwilą zasugerowaliśmy powinniśmy samodzielnie “przeklikać się” przez cały projekt Twojej strony internetowej, ale w związku z tym, że bezpośrednio pracowaliśmy nad projektem, możemy nie zauważyć niektórych mankamentów, dlatego warto zaangażować w to też osoby trzecie – chociażby rodzinę lub znajomych, a jeśli posiadamy jakieś kontakty wśród osób, które posiadają wiedzę na temat UI i UX, to również warto z nich skorzystać. Zapytajmy każdego, co sądzi o stronie. Najlepiej zadawać te same pytania, ponieważ dzięki temu będzie nam łatwiej znaleźć elementy do poprawy i wdrożyć je do finalnego projektu.

Zacznijmy od podstawowego pytania, czyli ,,Jak podoba Ci się strona”. Potem możemy przejść do kolejnych, które sprawdzą m.in.:

czy zrozumieli jej przekaz,
czy cel był łatwy do zrealizowania,
czy nawigacja wydała im się intuicyjna.

To tylko podstawowe propozycje. Reszta z nich to kwestia indywidualna.

Oczywiście dla ułatwienia możemy im powiedzieć, jaki jest cel zaprojektowanej strony www, ale nie robiąc tego, dodatkowo sprawdzimy, czy jest on wystarczająco jasny.

Gdy zbierzemy już wszystkie uwagi, pora zastanowić się jak i czy w ogóle warto je wprowadzać. W końcu to nasza strona, ale opinia osób niezwiązanych z projektem może być bardziej obiektywna.

Projektowanie stron www i SEO

Posiadanie firmy w sieci oznacza dbałość o to, by na jej stronę www wchodziło dużo osób zainteresowanych Twoją ofertą – dużo potencjalnych klientów. A jak wiadomo, jednym z głównych źródeł takich wejść są wyszukiwarki internetowe. Dlatego optymalizacja pod kątem SEO celem znalezienia się wysoko w bezpłatnych wynikach wyszukiwania Google lub innych wyszukiwarek – to jedno z podstawowych działań w ramach zarządzania marketingiem firmy czy profesjonalnej strony internetowej.

Osobom mniej zaznajomionym z tajnikami SEO, w tym mniej zaznajomionym z tworzeniem stron internetowych, bardzo pomocnym będzie łatwy w obsłudze (dla każdego!) system CMS – system zarządzania treścią. Taki, który umożliwia edycję oraz tworzenie stron nie wymagający znajomości podstaw kodowania. A jednocześnie taki, który usprawnia proces pozycjonowania stron internetowych i zajmowania pozycji wysoko w wynikach wyszukiwania czy to Google, czy to Bing, czy Yahoo (który jest popularny w kilku krajach azjatyckich).

Od czego zacząć?

słowa kluczowe,
alternatywne opisy zdjęć,
tytuł i treść każdej strony,
meta-tytuły i meta-opisy.

Równie istotna dla projektu naszej strony będzie hierarchia samych nagłówków – dzięki temu zabiegowi roboty wyszukiwarek internetowych łatwiej odczytają wagę treści na stronie.

Działając w obrębie lokalnym (np. prowadząc lokalny warsztat samochodowy), pamiętajmy o tzw. pozycjonowanie lokalne. Na czym to polega? Do wybranych słów kluczowych dodajemy np. nazwę miejscowości, precyzując tym samym wyszukiwanie.

To bardzo ciekawy temat i warto się z nim lepiej zapoznać. Poza tym na naszym blogu znajdziemy jeszcze dużo materiałów, które zapewne okażą się przydatne do poszerzenia wiedzy na temat pozycjonowania stron.

Narzędzia, które pomogą nam w doborze słów kluczowych

Co w momencie, gdy nie do końca wiemy jakie słowa kluczowe będą odpowiednie?

W ich doborze bardzo przydadzą się narzędzia takie jak Ubersuggest, Ahrefs, czy chociażby Google Trends lub Planer Słów Kluczowych. To, który z nich wybierzemy zależy w dużej mierze od tego jak bardzo szczegółowe informacje chcemy otrzymać oraz czy zdecydujemy się na bezpłatną usługę, czy też nie.

Nie należy też zapominać o dodaniu strony do Google Search Console – narzędzie, które pozwala na bieżąco weryfikować zajmowane przez Twoją stronę www pozycję w wynikach wyszukiwania Google.

Jeśli jesteśmy już przy GSC, to warto też dodać, że przy projektowaniu należy zwrócić uwagę na responsywność strony, ponieważ np. właśnie to narzędzie sugeruje się podglądem z urządzeń mobilnych (tzw. zasada mobile first)

Grafiki na stronie internetowej

Projektowanie strony internetowej to też wybór dobrych grafik. Jeśli dysponujemy własnymi zdjęcia lub innymi formami grafik (w dobrej jakości), to temat można uznać za prawie zamknięty.

Z kolei w przypadku, gdy nie mamy prywatnych zasobów, zawsze możemy skorzystać z darmowych zbiorów obrazów (w kreatorze stron www WebWave znajdziemy ich kilkaset tysięcy).

Podczas dobierania właściwych grafik do naszego projektu strony internetowej należy zwrócić też uwagę na ich naturalność (i ogólnie rzecz biorąc jakość) – jeśli patrzymy na jakieś zdjęcie i mamy wrażenie, że jest ‘dziwne’, czyli np. takie, na których ludzie uśmiechają się w sztuczny i mało wiarygodny sposób. Z takich pozycji zdecydowanie nie powinniśmy korzystać. Dla zainteresowanych – tego typu grafiki określane są często mianem “stockowych”.

Grafiki, które umieścimy na platformie www, nie zawsze muszą być dużej rozdzielczości. Wręcz przeciwnie – im mniejsze, tym lepiej, ponieważ ich waga nie będzie przytłaczająca, a co za tym idzie, strona będzie ładowała się znacznie szybciej, co nie tylko wpłynie na jej lepszy odbiór przez użytkowników, ale i wyszukiwarki.

W przypadku tych, które zawierają w sobie dużą ilość zdjęć o dużych wymiarach mamy odwrotny scenariusz – wczytują się powoli, co źle wpływa na pozycjonowanie i zmusza użytkowników do czekania, a jak chyba większość z nas dobrze wie, z roku na rok użytkownicy internetu robią się coraz bardziej niecierpliwi, więc witryny www muszą działać coraz szybciej.

Idealna szerokość zdjęć znajdujących się wewnątrz strony, czyli takich niespełniających roli grafiki głównej, nie powinna przekraczać 1000 – 1500 pikseli.

Jeśli znajdziemy idealny obraz do zamieszczenia w projekcie strony www, ale jego parametry nie są korzystne, zawsze możemy skorzystać z narzędzi, które umożliwiają nam skompresowanie pliku (np. tinypng.com)

Tak jak wspomnieliśmy sobie w poprzedniej części, dotyczącej SEO i pozycjonowania, podczas wprowadzania grafik do projektu, należy dodać do nich opisy alternatywne. Roboty przeglądarek nie umieją oglądać grafik, ale mogą je „czytać”.

Spójna identyfikacja

Poza samymi obrazami na stronie należy też pamiętać o ogólnej identyfikacji wizualnej. Jeśli posiadamy własną markę i działamy na podstawie brand book’a, który zawiera w sobie nasze logo, kolorystykę, fonty etc. to w momencie projektowania strony internetowej również musimy trzymać się ogólnych ustaleń.

Dołącz do ponad 500 tysięcy ludzi, którzy tworzą strony według własnego projektu lub szablonu, za darmo i bez kodowania.

Kolory i typografia

Wybór fontów oraz kolorystyki strony internetowej jest niezwykle istotny dla jej charakteru i samej przejrzystości treści. W zależności od tego dla kogo powstaje projekt strony, zależy jej wygląd wizualny. Bardzo ważna jest wspomniana przed chwilą identyfikacja wizualna. Jeśli już taką posiadamy, należy jej się trzymać. Może wydawać się, że będzie to ograniczające, ale wbrew pozorom tak nie jest. Oszczędza nam to wręcz czas poświęcany na projekt, ponieważ nie musimy już ustalać palety kolorystycznej.

Jeśli jednak budujemy strony od zera, nie należy właśnie zapominać o istocie barw i ich oddziaływaniu na człowieka oraz tego, jakie budzi u niego skojarzenia. Możemy postawić na bezpieczne i ponadczasowe kolory, ale też wpleść niektóre trendy – wiele zależy od tematyki witryny www.

Sama typografia również może w pewnym sensie nawiązywać, do jakiej branży dotyczy strona i chociażby fontu użytego w logotypie, ale przede wszystkim powinna być ona czytelna. Chodzi tutaj zarówno o sam rozmiar fontu, jak i ilość krojów pisma wykorzystywanych w projekcie. Najlepiej ograniczyć się do dwóch (np. tego, który będzie stosowany do tytułów przewodnich i w nagłówkach oraz tego, który ustawimy w przypadku dłuższych treści tekstowych np. wpisów blogowych).

W przeciwnym razie może zrobić nam się lekki bałagan, a użytkownik najprawdopodobniej poczuje się zagubiony, gdy zauważy, że na każdej podstronie tekst wygląda trochę inaczej.

Najważniejsze elementy, czyli projektowanie w pigułce

Bez wątpienia niemalże zawsze w projekcie budowy strony najważniejsza jest strona główna. To na niej umieszczamy kluczowe informacje, w tym odpowiedzi na najczęściej zadawane pytania, jakie pojawiają się podczas proces zakupowego.

Stosujemy tu zasadę hierarchiczności – najistotniejsze elementy umieszczamy na górze. Dlaczego? Z jednego prostego powodu – użytkownicy będą mogli je szybciej zauważyć. Badania pokazują, że mamy ok. 10 s. (do 20 max.), aby zyskać uwagę użytkownika i zatrzymać go na dłużej.

Nawigacja

Nawigacja to standard – nie może jej zabraknąć w żadnym projekcie strony. Zazwyczaj składa się z kilku elementów, a najistotniejszymi z nich jest menu oraz stopka.

To właśnie menu pomaga poruszać się użytkownikom po całej stronie. Musimy więc zadbać również o to, aby był jak najbardziej zrozumiały. Nie należy się więc tutaj przejmować faktem, że zwroty będą typowe i oklepane- tego oczekują zazwyczaj użytkownicy. W końcu projektowanie stron opiera się często o sprawdzone rozwiązania.

Strona główna, oferta, cennik, kontakt, opinie klientów itp. – taka struktura menu sprawi, że użytkownicy szybciej znajdą to, czego szukają.

Stopka

Wbrew temu, że stopka znajduje się na samym dole projektu strony, widzi ją wielu użytkowników.

Możemy ona pełnić dla nas rolę „drugiego menu” o większej objętości. W pewnym sensie jest to też miejsce, w którym mamy ostatnią szansę na złapanie uwagi użytkowników.

Obowiązkowym elementem w stopce jest kontakt – w postaci maila lub nr. telefonu (lub po prosu tego i tego). Dobrze jest też dodać logo, odnośniki do social mediów i przekierowania w postaci linków do strony głównej oraz najważniejszych podstron/materiałów

W związku z tym, że stopka daje bardzo dużo możliwości, nie należy o niej zapominać, zabierając się za projektowanie stron internetowych. Jest jednak pewne ‘ale’. Ze względów stylistycznych nie powinniśmy traktować tego elementu jako miejsce, gdzie wrzucamy wszystko, co popadnie. Stosunek wielkości stopki do całej strony może wtedy wyglądać niekorzystnie (a wręcz komicznie).

W WebWave stopka na dole każdej strony pozwala przejść na inne podstrony, a nawet inne należące do nas witryny takie jak Edu.WebWave czy Eksperci.

Płynność i przejrzystość treści

Istotnym elementem każdej strony są też linki wewnętrzne. Jeśli na stronie głównej umieszczamy segment poświęcony ofercie – dobrze jest dodać do niego link – bezpośrednio w tekście lub za pomocą buttona z CTA, który skieruje użytkowników na podstronę z ofertą. Wiele projektów stron stosuje takie rozwiązania – nasz również.

Poza tym umieszczając teksty na stronie, należy pamiętać też o uwzględnieniu nagłówków.

W rzeczywistości spełniają one trzy zasadnicze role:

informują o temacie tekstu poniżej
porządkują informacje na stronie
pomagają w pozycjonowaniu (roboty wyszukiwarek szybciej znajdą informacje w nagłówkach niż w tekście).

Nagłówki mają też swoją określoną hierarchię i m.in.właśnie dzięki temu użytkownicy wiedzą, które informacje są ogólne, a które szczegółowe.

Najważniejszy na stronie jest nagłówek zwany H1. Powinien zawierać nazwę strony (w przypadku podstrony z kontaktem może to być „[nazwa firmy] – kontakt”).

Więcej na temat nagłówków i nie tylko, znajdziemy w tekście o hierarchii nagłówków w naszej bazie wiedzy oraz kilku naszych artykułach.

Podsumowanie

Niezależnie od tego, czy zajmujemy się projektowaniem stron internetowych zawodowo, prowadzimy lokalny biznes i potrzebujemy prostej wizytówki w postaci witryny www, czy po prostu np. za pomocą bloga dzielimy się ze swoimi użytkownikami jakąś pasją – omówione tutaj etapy i elementy tworzenia projektu pomogą nam usprawnić cały proces i podnieść prawdopodobieństwo (i poziom) realizacji celu platformy:

dotrzeć do użytkownika->zdobyć jego uwagę->dać mu możliwość, żeby zrobił to, czego od niego oczekujemy.

Wykorzystanie wiedzy na temat UX i UI (czyli user experience i user interface) nie tylko pozwoli na osiągnięcie profitów czysto biznesowych (np. rejestracje, umówienie wizyty, zakup etc.), ale sprawi, że ostateczny projekt strony, który pojawi się w internecie, będzie przejrzysty, logiczny i atrakcyjny pod względem wyglądu.

W projektowaniu stron www bardzo istotne jest umiejętne połączenie praktyczności z estetyką. Co prawda wciąż istotniejsze jest wnętrze – content, oferta etc., ale sposób przedstawienia tej zawartości, czyli cała oprawa wizualna stanowi coraz to ważniejszy element i może przesądzić o ostatecznym wyborze użytkownika.

Przy pomocy kreatora jesteśmy w stanie wprowadzić w życie naszą wizję strony – nadać mu indywidualnego charakteru wykorzystując możliwości projektowe (efekt paralax, Ken Burns, pojawianie i znikanie elementów podczas scrollowania lub po najechaniu na określony fragment i wiele więcej), ale też poza tym otrzymujemy to czego potrzebuje nasza witryna czyli m.in. darmowy certyfikat SSL, zgłoszenie do Google, hosting i chociażby domenę .pl (na rok za darmo przy każdym Planie Premium).

Spróbuj zrobić stronę internetową za darmo w WebWave.