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 czwarty artykuł z cyklu Nauka webdesignu. Przedstawimy Wam dzisiaj praktyczne podejście do UX i UI, skupiając się głównie na makietowaniu i budowie podstawowej strony internetowej, czyli jej głównych elementach. Wprowadzimy także nieco zagadnień z praktycznego projektowania interfejsu użytkownika.

Koniecznie przeczytaj inne artykuły z tej serii:

• Część 1. Podstawy projektowania graficznego

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

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

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

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

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

Czym są UX i UI

W kontekście webdesignu dużo słyszy się o UX i UI. Co oznaczają te pojęcia i czym się od siebie różnią? 

Co to jest UX

UX to User Experience, czyli doświadczenia użytkownika. Ma związek z emocjonalnym podejściem odbiorcy do naszej strony internetowej. Szerszą definicję możesz poznać w poprzednim wpisie z tej serii.

UI - co to znaczy

UI to z kolei User Interface, czyli interfejs użytkownika. Ma związek z wizualnym odbiorem strony internetowej. Ten temat rozwiniemy w następnym wpisie z cyklu.

Jak zrobić makietę strony - Wireframing

Definicję makiety strony internetowej i to, czym różni się ona od prototypu opisaliśmy w poprzednim artykule z serii. Dziś skupimy się na tym, jak ją stworzyć.

Architektura informacji

Przed tworzeniem makiety, warto stworzyć architekturę informacji, na której oprzemy nasz projekt. Jest to ścieżka użytkownika, którą musi przejść korzystając z Twojej strony internetowej. Musisz zatem wypisać krok po kroku wszystkie widoki i to, w jaki sposób użytkownik może do nich dotrzeć (np. ze strony głównej do strony kontakt itd).

Do jej stworzenia możesz po prostu wykorzystać kartkę. Jeśli nie jesteś zwolennikiem tej metody, wybierz dowolny program, dzięki któremu stworzysz schemat. 

Jak stworzyć makietę w praktyce?

Najprościej jest zacząć, tak jak w przypadku architektury informacji, od kartki i ołówka. To, w jaki sposób oznaczysz poszczególne elementy jest umowne i dopóki Ty i Twoi ewentualni współpracownicy rozumiecie legendę, możesz robić to dowolnie. 

Przyjęły się jednak pewne oznaczenia elementów, które są ogólnie przyjęte w webdesignie - np. zdjęcia jako ramki z przekreśleniem w kształcie litery X. Aby sprawdzić, jak oznaczyć poszczególne obiekty na makiecie, warto wyszukać i porównać kilka z nich. 

Podstawą w projektowaniu makiet jest skupienie się na ogóle, rozrysowanie szkieletu. Musimy myśleć w kontekście najprostszych elementów graficznych - prostokątnych ramek, kółek zamiast ikon, prostokątów zamiast przycisków itp. Bez koloru, bez rysunków - bez szczegółów. Teksty możesz oznaczyć jako “szlaczek” (a w programie graficznym jako Lorem Ipsum). Warto jednak wypisać słownie zakładki, nazwy podstron, nagłówki i napisy na przyciskach.

Taka makieta będzie podstawą do stworzenia prototypu, który zawiera już w sobie design, zatem łączy UX z UI. Przetestowany i poprawiony prototyp możemy wdrożyć jako stronę internetową.

Programy do makietowania

Innym sposobem na stworzenie makiety jest użycie specjalnego programu graficznego, np. Figmy, Sketcha, czy Axure. Tutaj jednak ciężko nam będzie opisać zasady korzystania z tych narzędzi, konieczne jest zdobycie umiejętności ich obsługi. Pomóc w tym mogą kursy na Udemy czy nawet

YouTube.

Do każdego z tych kroków możesz użyć również Photoshopa lub Illustratora i skorzystać z nich, jak z cyfrowej kartki papieru. 

Budowa strony internetowej

Elementy strony internetowej musimy znać już na etapie tworzenia makiet, ponieważ są konieczne do zaprojektowania interfejsu użytkownika. Zaczynając go projektować działamy bazując na gotowej makiecie. Powinniśmy także mieć za sobą research i zebranie inspiracji. Wtedy zastanawiamy się nad wyglądem obiektów i zwracamy uwagę na rozwiązania graficzne. Jakie są więc podstawowe elementy na stronie internetowej i jak je dobrze zaprojektować? 

Strona główna, podstrony, artykuły i strony produktowe

Każda strona internetowa ma przynajmniej jedną podstronę - home, czyli stronę główną, która odpowiada za przedstawienie tematyki strony i konwertowanie, czyli wywołanie pożądanego działania u użytkownika. Im bardziej rozbudowana strona, tym więcej podstron. Najczęściej spotykane to oferta, o nas, kontakt (na której warto umieścić formularz), czy też blog, który nie obędzie się bez artykułów (oddzielne podstrony). W sklepie internetowym konieczne są także strony produktowe. 

Nawigacja strony - menu i stopka

Menu to oczywiście nieodłączny element każdej strony internetowej, bez której nawigacja praktycznie by nie istniała. Znajduje się na górze witryny i kieruje do najważniejszych podstron wykorzystując przyciski. Jak stworzyć dobre menu dowiesz się w tym artykule.

Każda strona internetowa ma również stopkę, czyli ostatnią sekcję, która jest powtarzana na każdej podstronie i zawiera np. informacje kontaktowe, linki do social media, przycisk z zapisem do newslettera, czy też przekierowania na wybrane podstrony. Więcej o stopce znajdziesz tutaj.

Sekcje

Oczywiście każda strona internetowa ma sekcje. Jest to podział strony, zwykle tematyczny. Np. na landing page prezentującym nowy krem przeciwzmarszkowy pierwsza sekcja może przedstawiać produkt, kolejna wymieniać jego zalety. Następnie możemy dać galerię zdjęć z pięknymi celebrytkami, które młodnieją w oczach. Trzecią sekcją zaprezentujemy skład (oczywiście najlepszy z możliwych). W czwartej umieścimy wideo prezentujące, w jaki sposób używać kremu. I tak dalej, aż do stopki. 

Zdjęcia i grafiki

Tak jak tekst służy do przekazu informacji i bez wątpienia jest niezbędny na stronie, tak to grafiki i zdjęcia przyciągają uwagę odbiorcy i to właśnie one najczęściej wpływają na dobry odbiór strony internetowej (nie wspominając już o ich wpływie na klientów sklepów internetowych! Ważne jest, aby wybierać zdjęcia dobrej jakości, ale też niezbyt ciężkie, by nie opóźnić ładowania strony (co źle wpływa zarówno na konwersję, jak i na SEO). Więcej na temat doboru zdjęć na stronie internetowej przeczytasz tutaj. A jeśli zastanawiasz się, gdzie znaleźć odpowiednie grafiki i zdjęcia, polecamy ten wpis i jego kontynuację. 

Treść - nagłówki, opisy

Oczywiście na każdej stronie internetowej konieczne są teksty. To one są głównym nośnikiem informacji i nadają Twojej stronie wartości. 

W zależności od rodzaju witryny będziemy spotykać się z większymi i mniejszymi blokami tekstowymi. Na stronie lądowania będą to raczej nagłówki wraz z krótkimi akapitami. Z kolei na blogu z pewnością spotkamy masę rozbudowanych artykułów. 

Z punktu widzenia SEO bardzo istotne jest zastosowanie znaczników, ale o tym w końcowym wpisie z serii. Z punktu widzenia UX istotniejsze jest odróżnienie nagłówków poprzez ustanowienie hierarchii, np. rozmiarem fontu (potocznie czcionki). Szczególnie ważne jest to przy tworzeniu wzoru dla artykułów blogowych. 

Niezwykle ważna jest też znajomość typografii - dobór fontów i zastosowanie odpowiednich wielkości i odległości, kerning itp. Wstępem do poznania jej zasad może być ten artykuł, ale polecamy także uzupełnienie wiedzy literniczej, ponieważ jest to bardzo trudny i rozbudowany temat, a jednocześnie niezwykle ważny w każdej dziedzinie graficznej. Jedną z podstawowych pozycji, z którą powinien zaznajomić się każdy projektant, jest “Pierwsza pomoc w typografii” autorstwa Forssmana Friedricha.

CTA

Duże znaczenie na stronie internetowej mają CTA, czyli najczęściej przyciski z call to action (napisem zachęcającym do działania). Mogą to być również napisy z zamieszczonym url lub np. podlinkowane ikony. To właśnie dzięki CTA nasi odbiorcy mogą wykonać na stronie jakiekolwiek czynności, np. przejść na inną podstronę, zarejestrować się, wysłać wiadomość lub cofnąć czynność. 

Jak zrobić dobry przycisk z CTA: 

• Miej na uwadze widoczność - są one niemalże najważniejszym elementem na stronie, dlatego powinny być łatwo zauważalne. Zdarza się również, że projektanci wykorzystują dodatkowe animacje, aby zwrócić na nie jeszcze większą uwagę, jednak początkującym nie zalecamy takich praktyk.

• Wskaż możliwość interakcji - standardem jest projektowanie przycisku w dwóch wariantach - nieaktywnym (przed najechaniem na niego myszką) i aktywnym (po). Nie powinny się one jednak znacząco różnić - wystarczy delikatna, ale widoczna zmiana koloru, np. na ciemniejszy odcień przy aktywnym CTA.

• Użyj odpowiedniej barwy - jeśli chodzi o kolory, najczęściej wykorzystywany jest tu czerwony, ponieważ najbardziej zwraca uwagę. Ważniejsza jest jednak spójność z innymi kolorami na stronie. Jeśli więc używasz trzech barw, niech jedna z nich będzie przypisana m.in przyciskom - nie ma potrzeby dodawać kolejnej. 

• Zadbaj o spójność - najlepiej, jeśli wszystkie przyciski na Twojej stronie są identyczne (różnią się jedynie napisem). 

• Wykorzystaj język korzyści - zachęć użytkownika do kliknięcia w przycisk oferując mu konkretną korzyść z tym związaną, np. “odbierz prezent”.

• Zachowaj przestrzeń - pamiętaj, aby kształt, który posłuży nam za bazę przycisku, był odpowiednio większy od napisu. Aby zachować prawidłowe proporcje, sprawdź, jak to wygląda na dobrze zaprojektowanych witrynach internetowych, np. stronach banków lub znanych sklepów internetowych. 

Logo

To, co klienci lubią najbardziej, to logo. Popularnym żartem wśród designerów jest to, że zwykle proszą oni o jego powiększenie. Nie zawsze jest to dobre rozwiązanie. Należy pamiętać, że logo ma co prawda wpływać dobrze na rozpoznawalność marki, ale nie jest najważniejszym elementem na stronie i nie ma znaczenia z punktu widzenia konwersji (wykonania przez użytkownika pożądanej przez nas czynności). 

Logo zwykle umieszczamy w menu strony - w jego lewym boku lub na środku, rzadziej po prawej. W imię zasady “nie odkrywaj koła na nowo”, lepiej trzymać się dwóch pierwszych opcji. Ważne jest, aby logo zawsze było klikalne i przenosiło do strony głównej (musi być umieszczony link).

Favicon

Jest to ikona o wymiarach 16x16 pikseli, którą widzisz w karcie przeglądarki. Najczęściej jest to logo firmy czy działalności, dla której projektujemy stronę. Więcej na temat projektowania favicona przeczytasz tutaj.

Inne elementy strony internetowej

Oczywiście wymieniliśmy tylko podstawowe składowe strony internetowej. W zależności od rodzaju witryny, którą tworzysz, elementy na niej będą inne - np. tworząc sklep internetowy musisz pamiętać o umieszczenia koszyka w menu, a także o umożliwieniu użytkownikom dokonania płatności. Z kolei na Landing Page wystarczy, że zaprezentujesz produkt i umieścisz odpowiednie CTA. W przypadku bloga nie obędzie się bez news feedów.

Podsumowanie

To czwarta z 6. części naszego mini cyklu poświęconego nauce webdesignu. Skupiliśmy się tu na praktycznym projektowaniu makiet i budowie strony. Przeprowadziliśmy także wstęp do UI. W kolejnych wpisach dowiesz się, 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!