Jeśli chcesz przeczytać artykuły z innej kategorii, kliknij w wybrane przez siebie pole:

Jak zrobić stronę internetową?

Obierz zniżkę - 30%

w WebWave

Najnowsze artykuły:

Co zrobić, aby nasza strona internetowa była w pełni funkcjonalna? Jak nauczyć się webdesignu? Postanowiliśmy odpowiedzieć na te pytania! To drugi artykuł z cyklu Nauka webdesignu. Jak zwykle na początku, zajmiemy się przygotowaniami. Przeczytaj ten wpis i dowiedz się, jak zacząć!

Koniecznie przeczytaj inne artykuły z tej serii:

• Część 1. Podstawy projektowania graficznego

• Część 2. Pojęcia, pomysły, podstawy UX - tu jesteś

• Część 3. UX - badania, makiety, programy 

• Część 4. UX. Jak zrobić makietę? Budowa strony www. Wstęp do UI 

• Część 5. Tworzymy prototyp strony, czyli UI! 

• Część 6. Publikacja strony www i pozycjonowanie (SEO)

Terminologia w webdesignie

Aby profesjonalnie podejść do tworzenia strony, należy poznać podstawową terminologię. Ważne jest, aby pamiętać o pojęciach takich jak m. in.:

• UX, czyli doświadczenia użytkownika - wrażenia, które odbiera on będąc na stronie. 

• UI - interfejs użytkownika, czyli część projektowa, która dotyczy tego, co wchodzi w interakcję z użytkownikiem, np. wyglądu strony internetowej. 

• Domena - inaczej adres strony internetowej. 

• Makieta strony - projekt witryny, który przypomina ją wyglądem. Nie można się jednak po niej poruszać. 

• RWD (rozwinięcie to Responsive Web Design) polega na tworzeniu witryn, które automatycznie dostosowują się do ekranów telefonów i tabletów. 

• Brief, czyli spis wszystkich najważniejszych informacji, które trzeba uwzględnić przy projekcie. Więcej o briefie przeczytasz tutaj. 

• Benchmark, czyli po prostu obserwacja konkurencji i wyciąganie wniosków, które w późniejszych etapach można zastosować w projekcie.

• Grupa docelowa - osoby, do których kierujemy swój projekt. 

• Konwersja - wykonanie przez użytkownika działania, którego od niego oczekujemy. 

Znajdź pomysł i nie bój się inspiracji 

W tworzeniu stron internetowych równie ważne jak unikalny pomysł są inspiracje. Nie chodzi tu o to, by kopiować czyjąś pracę, a żeby wyłapać z niej dobre aspekty i zastanowić się, w jaki sposób moglibyśmy wykorzystać je w swoim projekcie. Jeśli podobają Ci się kolory na danej stronie, wybierz podobną paletę, jeśli zainteresuje Cię ciekawy wygląd przycisków, zastosuj go w swojej własnej wersji. Ten temat głębiej poruszyliśmy tutaj. 

Chodzi tu głównie o wyłapanie trendów. Podobny efekt da śledzenie blogów i grup tematycznych. Warto także obserwować profile social media, które służą stricte projektowaniu, webdesignowi i grafice. Można też regularnie zaglądać na Behance, Dribble czy Pinterest. Na naszym blogu artykuły o trendach w webdesignie znajdziesz tutaj. 

Zdobądź wiedzę o UX

UX, jak już wcześniej wspomnieliśmy, to ogół doświadczeń, jakie ma użytkownik korzystając z produktu, czyli w naszym przypadku odwiedzając stronę internetową. Czym charakteryzuje się dobry UX? Należy kierować się kilkoma zasadami. 

Produkt ma być przede wszystkim przydatny. Odnosząc się do zależności popyt - podaż, musimy zaoferować użytkownikom coś, czego potrzebują. W naszym przypadku możemy zastanowić się nad celem strony - jeśli jest to np. strona gabinetu lekarskiego wiemy, że musi ona spełniać konkretną funkcję - przedstawiać ofertę, lekarzy i ich doświadczenie, ale także umożliwić kontakt czy zapisanie się na wizytę. 

Idąc naszym przykładem, przedstawimy drugi warunek dobrego UX - użyteczność. Jeśli wiemy już, co chcemy przekazać za pomocą strony internetowej, musimy sprawić, aby nasz użytkownik również o tym wiedział. Dlatego zapisy na wizytę powinny być jasno zakomunikowane - na przykład poprzez zakładkę “Zapisy” w menu lub stopce. 

Zadbać należy także o to, aby użytkownik, który kliknie w tę zakładkę, wiedział, co musi zrobić w kolejnych krokach. Komunikujemy mu to poprzez teksty i elementy graficzne, tak, jak dzieje się to w formularzu zapisu. Mamy tu elementy graficzne, które służą za pola do wypełnienia (wpisania tekstu przez użytkownika). Takim elementem będzie również przycisk z napisem “Wyślij”. Teksty powinny pokazywać, co ma zrobić użytkownik (np. wpisać swoje imię i nazwisko, a w kolejnym polu podać numer telefonu).

Jeśli mówimy o cechach dobrego produktu, należy pomyśleć też o tym, jak sprawić, by użytkownicy chętnie z niego korzystali. Istotne będzie więc, aby był on pożądany, czyli po prostu modny. W tym momencie należy podejść do naszej strony internetowej nieco marketingowo. Co sprawi, że przyciągnie ona użytkowników? Może to być stylowy design lub niebanalna oferta. Co w takim razie wyróżnić? Jakich trendów użyć? Na te pytania należy szukać odpowiedzi. 

10 heurystyk Nielsena

Nie tylko powyższe zasady są tymi, którymi należy się kierować tworząc stronę. Dekalogiem UX Designerów jest 10 heurystyk Nielsena, czyli to, co musimy zaoferować użytkownikowi, jeśli chcemy, aby nasz produkt dobrze się sprawdzał. Są to: 

• Widoczność statusu systemu

• Powiązanie pomiędzy systemem a światem rzeczywistym

• Uczucie kontroli nad tym, co się dzieje

• Spójność przekazu

• Unikanie błędów na stronie

• Udostępnienie niezbędnych funkcji

• Możliwość wyboru

• Minimalizm i estetyka

• Zakomunikuj, co zrobić w przypadku błędu

• Support - wsparcie użytkownika

Zachęcamy do zapoznania się ze szczegółowymi opisami każdego z tych podpunktów w tym artykule.

Narzędzia 

Przygotowując się do tworzenia strony www powinniśmy mieć na uwadze narzędzia, których zamierzamy użyć. Oczywiście, na każdym z etapów tworzenia będziemy korzystać z różnych aplikacji - od wszystkim znanego pakietu Adobe, przez programy do prototypowania (np. Figma, którą przybliżymy w kolejnym wpisie), aż do narzędzi, w których opublikujemy gotowy projekt w internecie. 

O ile Photoshopa nikomu nie trzeba przedstawiać, tak zastanawiające może być to, w jaki sposób gotową stronę opublikować. My polecamy do tego kreator stron internetowych, w którym mamy możliwość wprowadzenia naszego projektu w życie. Może on nawet zastąpić nam inne programy już na samym początku pracy, ponieważ w kreatorach możemy stworzyć stronę internetową całkowicie od podstaw. Jest to pewnego rodzaju połączenie funkcjonalności WordPressa i interfejsu programów graficznych. Więcej na ten temat możesz przeczytać tutaj. 

Podsumowanie

Jest to druga z 6. części naszego mini cyklu poświęconego nauce webdesignu. Skupiliśmy się tu głównie na przygotowaniach do projektowania i zapleczu niezbędnej wiedzy. W kolejnych wpisach dowiesz się, jak przeprowadzać badania i robić makiety, jak stworzyć prototyp strony pod względem UI oraz jak wdrożyć witrynę i dbać o gotową stronę. Śledź nas na facebooku, aby nie przegapić żadnego wpisu!