Projektowanie stron internetowych dla początkujących
Projektowanie stron internetowych przeszło długą drogę od czasu, gdy w 1991 r. opublikowano pierwszą stronę www. Dziś mamy ponad miliard stron, witryn i serwisów online – a będzie ich jeszcze więcej. Wix jest platformą, na której tysiące profesjonalistów i entuzjastów projektowania stron internetowych budują i rozwijają swoje strony. Dzięki funkcjonalnościom platformy i umiejętnościom użytkowników web design osiąga nowe wyżyny. Jeśli chcesz dowiedzieć się więcej o tym, na czym polega projektowanie stron www, to jesteś we właściwym miejscu.
Tworzysz własne strony internetowe? Chcesz pogłębić swoją wiedzę o projektowaniu? Jesteśmy przekonani, że ten kompleksowy przewodnik będzie stanowił dla Ciebie źródło wartościowych informacji i inspiracji.
Czym jest projektowanie stron internetowych?
Projektowanie stron internetowych jest sztuką planowania i organizowania treści w przestrzeni internetowej w taki sposób, aby była dostępna dla ludzi z całego świata. Strony internetowe powstają z wielu różnych powodów i dla różnych celów. W sieci są m.in. następujące rodzaje stron i serwisów online:
Portfolio online – prezentacja efektów pracy
Sklep internetowy – sprzedaż produktów
Strona biznesowa – rozwój firmy
Blog – dzielenie się wiedzą i doświadczeniami
Strona restauracji – zamówienia, rezerwacje i płatności online
Łącząc elementy estetyczne i funkcjonalne, web design określa wygląd strony internetowej – np. kolory, czcionki i grafiki – a także kształtuje jej strukturę i wpływa na doświadczenia użytkowników.
Czym dzisiaj jest projektowanie stron internetowych? Funkcjonalne i estetyczne strony to filar skutecznego działania w sieci. Dlatego świat projektowania stron www rozwija się coraz bardziej dynamicznie – nieustannie ewoluuje, aby sprostać rosnącym potrzebom zarówno właścicieli stron, jak i ich użytkowników.
Przewodnik stanowiący wstęp do projektowania stron internetowych pokaże Ci znaczenie web designu i dostarczy kilku pomocnych wskazówek. Opiszemy główne terminy i koncepcje oraz pokażemy inspirujące przykłady.
Omówimy siedem głównych tematów:
1. Czym jest web design, a czym website development
Pierwszym krokiem będzie wyjaśnienie istotnej różnicy między projektowaniem stron internetowych (web design) a budowaniem ich od podstaw (website development), ponieważ te dwa pojęcia są ze sobą ściśle powiązane, ale nie powinny być używane zamiennie:
Web design, czyli projektowanie stron internetowych, dotyczy wizualnych i funkcjonalnych aspektów projektu, wpływających na doświadczenia użytkowników. Tym tematem właśnie zajmiemy się w pozostałej części tego artykułu.
Website development, czyli budowanie struktury stron internetowych, odnosi się do kwestii tworzenia i utrzymania struktury strony www i obejmuje skomplikowane systemy kodowania zapewniające prawidłowe funkcjonowanie strony lub serwisu online.
Oto języki programowania najczęściej stosowane przy tworzeniu stron www:
HTML (hypertext markup language) to język kodowania używany do tworzenia front-endu stron internetowych. Jego kod zawiera informacje o strukturze stron i umożliwia określenie wyglądu dokumentu w przeglądarce internetowej.
CSS (cascading style sheets) określa wszystkie istotne informacje dotyczące wyświetlania strony internetowej. CSS współpracuje z HTML, oba języki odpowiadają za projekt i formatowanie stron lub serwisów – całościowy układ, typy czcionek, kolory tekstu i tła, odstępy itd.
CMS (content management system) to oprogramowanie do zarządzania zawartością witryny. Przykładem systemu CMS jest Wix – przyjazna dla użytkowników platforma do tworzenia zawartości stron, która umożliwia łatwe tworzenie własnych stron www i bieżące wprowadzanie zmian, bez znajomości zasad kodowania.
Mając dostęp do odpowiednich narzędzi oraz wskazówki dotyczące projektowania stron internetowych, każdy może stworzyć swoją stronę www – na pewno nie trzeba być programistą.
2. Zasady projektowania stron internetowych
Co jest podstawą projektowania stron internetowych? Wiedza o tym, czym jest dobry projekt strony i jak go stworzyć.
Przyjrzymy się ogólnym zasadom projektowania – regułom praktykowanym przez artystów i projektantów, które określają pewne wizualne koncepcje definiujące udaną kompozycję. To uniwersalne zasady, do których powinni stosować się zarówno początkujący, jak i eksperci, aby ich projekty wyglądały estetycznie i harmonijnie.
Oczywiście nie są to przepisy prawa, których trzeba ściśle przestrzegać, to raczej wskazówki opisujące zasady projektowania poszczególnych elementów stron. Jak mawiał Picasso: „Ucz się zasad jak profesjonalista, aby je potem łamać jak artysta”. Kiedy już poznasz podstawy projektowania stron internetowych i będziesz wiedzieć, jakiemu celowi służy każda reguła, wtedy możesz pomyśleć, jak kreatywnie wprowadzić do projektu swój indywidualny rys.
Balans
Równowaga wizualna to taki układ, w którym żaden pojedynczy element kompozycji nie dominuje nad całością. Przy projektowaniu stron internetowych można osiągnąć balans, wyobrażając sobie linię przechodzącą przez środek strony i następnie tak rozmieszczając elementy, aby równoważyły się wizualnie po obu stronach.
Są dwa główne sposoby osiągania równowagi na stronie internetowej:
Równowaga w kompozycji symetrycznej jest zachowana, gdy waga elementów wizualnych po obu stronach linii jest taka sama, a ogólny układ przypomina lustrzane odbicie. Zastosowana na stronie internetowej, kojarzy się z harmonią, pięknem i spójnością.
Równowaga w kompozycji symetrycznej występuje, gdy waga wizualna jest równo rozłożona po obu stronach, ale elementy istotnie się różnią (nie jest to lustrzane odbicie). Projekty zrównoważone asymetrycznie są uważane za nowoczesne. Odbiorcy mają wrażenie dynamiki, a jednocześnie jest zachowany harmonijny układ.
Kontrast
Kontrast to takie zestawienie elementów, aby podkreślić ich różnice: coś jest ciemne, a coś jasne, gładkie i szorstkie, duże i małe. Kontrast od razu zwraca na siebie uwagę, buduje lekkie napięcie i przyciąga oczy użytkowników strony.
Wyróżnienie
Dzięki akcentom nie wszystkie elementy strony internetowej są równie ważne. Akcentem może być logo, CTA lub charakterystyczna grafika – jeśli na Twojej stronie jest coś, co odwiedzający powinni natychmiast zauważyć, to właśnie ten element należy uwypuklić za pomocą jaskrawego koloru, animacji lub innego rozmiaru, aby stał się dominującym aspektem całej kompozycji.
Ruch
W odniesieniu do projektowania stron internetowych, ruch to element decydujący o tym, co prowadzi wzrok odwiedzających. Ustalając rozmiar, kierunek i kolejność elementów na stronie internetowej, możesz kierować ruchem oka użytkownika i decydować o tym w jakiej kolejności odwiedzający zapozna się z całą witryną.
Rytm
Rytm to powtarzalność pewnych elementów tworząca wrażenie spójności i konsekwencji, bywa stosowany dla wzmocnienia określonego przekazu. Regularnie pojawiające się logo i kolory marki oraz stosowanie jednego kroju pisma wzmocni tożsamość Twojej marki i wyraźnie zaznaczy jej obecność w sieci.
Hierarchia
Umieszczenie nazwy firmy na samym dole strony głównej byłoby przykładem klasycznego błędu w projektowaniu stron internetowych – i pewnie jest to dla Ciebie oczywiste. Osoby po raz pierwszy odwiedzające stronę musiałyby przewinąć całą stronę, aby dowiedzieć się, do kogo ona należy. Tak właśnie przejawia się zasada hierarchii, która mówi, że najważniejsza treść powinna być umieszczona w najbardziej widocznym miejscu, gdzie użytkownicy natychmiast będą mieli z nią kontakt.
Wolna przestrzeń
W sztuce i designie każdy obszar kompozycji pozbawiony elementów wizualnych jest określany jako white space – biała, czyli pusta przestrzeń (kolor nie ma tu znaczenia). Celowa aranżacja pustej przestrzeni nie wydaje się pierwszorzędną kwestią, ale świadome stosowanie niezapełnionych niczym obszarów w projekcie stron dodaje im wrażenia lekkości, oddechu i podkreśla inne elementy wizualne. White space również służy takim aspektom kompozycji jak hierarchia, równowaga, akcent.
Spójność
Efekt spójności powstaje jako kulminacja wszystkich indywidualnych elementów strony, które razem tworzą idealną, harmonijną kompozycję. W projektowaniu stron internetowych zachowanie spójności i jednorodności zapewnia, że użytkownicy nie poczują się przytłoczeni ani zdezorientowani i nie zrezygnują z dalszego przeglądania Twojej strony.
Zapewne uzyskanie efektu spójności będzie wymagało kilku prób, ale gdy uda Ci się to osiągnąć, każdy aspekt strony będzie odgrywał cenną rolę w jej funkcjonalności i wydajności. Jednorodność oznacza także uważne stosowanie wszystkich elementów – gdzie i jak mają być umiejscowione i czy będą służyły założonemu celowi.
3. Układy stron internetowych
Planowanie layoutu stron internetowych jest jak kładzenie fundamentów. Na tym etapie określamy organizację i układ elementów wizualnych na każdej podstronie witryny. To krytyczny krok w projektowaniu stron www, ponieważ wpływa na całościowy wizerunek stron i poziom ich użyteczności, wzmacniania lub osłabia ich przekaz.
Idealny układ stron internetowych zależy od wielu czynników. Cel istnienia stron, główny komunikat dla użytkowników i prezentowana treść to najważniejsze elementy wpływające na docelowy layout. Nie ma jednego uniwersalnego rozwiązania dla wszystkich, ale warto obrać jeden z głównych kierunków:
Układ dopasowany do typu treści – layout powinien odpowiadać typowi zawartości. Jeśli chcesz prezentować produkty, wybierz układ, w którym jest dużo miejsca na wyróżnienie zdjęć. Jeśli zaś prowadzisz bloga, zastosuj layout, który umożliwia przekazywanie nowych informacji w zorganizowany sposób.
Znany typ layoutu – istnieje wiele sprawdzonych układów stron internetowych. Użytkownicy poruszają się po nich bez trudu, bo układy tego typu bazują na ich oczekiwaniach i dotychczasowych doświadczeniach w sieci. W efekcie powstaje intuicyjny i łatwy w użyciu interfejs – to rozwiązanie może być świetne dla początkujących twórców stron.
Projektując własne strony internetowe, możesz skorzystać z gotowych szablonów stron internetowych dostępnych dla wielu różnych kategorii – to Ci zapewni solidne podwaliny dla układu całej witryny. Jeśli jednak wolisz zaprojektować swój layout od podstaw, sugerujemy wykorzystanie makiet, które ułatwią Ci naszkicowanie układu stron przed rozpoczęciem procesu prac nad nimi.
4. Funkcjonalność stron internetowych
Funkcjonalność stron odnosi się do całokształtu ich działania – od szybkości ładowania i łatwości użytkowania, do tego, jakie aktywności są na niej dostępne.
Ryzykując, że właśnie narażam się na ujawnienie wieku, powiem, że internet w ciągu zaledwie trzech dekad przeszedł długą drogę. W porównaniu do lat 90. (trzaski i piski modemu w tle), dzisiejsze systemy są szybkie i wydajne. Szybki postęp dotyczy całej branży, więc przy projektowaniu stron internetowych we własnym interesie należy korzystać z najbardziej nowoczesnych narzędzi, aby mieć pewność, że strony będą płynnie i efektywnie działać.
Oto główne komponenty, które wpływają na sposób funkcjonowania stron www:
Nawigacja
Strona, serwis lub witryna składają się z wielu elementów i podstron, które mają być oglądane lub używane przez użytkowników. To właśnie nawigacja pozwala odwiedzającym odnaleźć na Twoich stronach potrzebne informacje.
Dodanie menu zapewnia płynne przechodzenie między stronami. Menu witryny jest połączone z wieloma pozycjami w ramach stron i pomaga użytkownikom w poruszaniu się pomiędzy różnymi podstronami i sekcjami.
W zależności od projektu stron, możesz wybrać jeden z następujących typów menu:
Klasyczne menu – ten często stosowany typ menu jest umieszczony w nagłówku strony formie poziomej listy.
Przypięte menu (sticky menu) – znane jest również jako menu stałe lub pływające; gdy użytkownik przewija stronę w dół, menu pozostaje na stałym miejscu.
Menu hamburgerowe – ikona składająca się z trzech poziomych pasków przypominających przekrój hamburgera; po kliknięciu w paski otwiera się pełne menu.
Menu rozwijane (dropdown menu) – po kliknięciu na jedną z pozycji w menu lub najechaniu na nią myszką, otwiera się lista dodatkowych pozycji.
Menu w pasku bocznym (sidebar menu) – menu umieszczone na pasku po lewej lub prawej stronie ekranu.
Prędkość
Prędkość określa czas ładowania całej strony po jej otwarciu przez użytkownika. Nikt – zwłaszcza w pokoleniu oczekującym natychmiastowych efektów – nie lubi czekać na załadowanie stron internetowych, wszystko musi działać w oszałamiającym tempie. Badania pokazują, że gdy czas ładowania strony przekracza 3 sekundy, współczynnik odrzuceń rośnie o 38 proc. Nawet najpiękniejszy projekt nie da Ci przewagi konkurencyjnej, jeśli nie zapewnisz użytkownikom płynnych, przyjemnych doświadczeń przy przeglądaniu stron.
Wiele czynników ma wpływ na czas ładowania stron, niektóre są bezpośrednio związane z urządzeniem użytkownika lub jego łączem internetowym, inne zaś są specyficzne dla danej strony. Możesz skorzystać z narzędzi do audytu wydajności stron i zwiększyć szybkość jej ładowania.
SEO
SEO (search engine optimization) to proces optymalizacji stron internetowych, aby osiągały wysokie pozycje w wynikach wyszukiwań. Zamieszczamy informację o SEO wraz z innymi elementami decydującymi o funkcjonalności stron, ponieważ optymalizacja odgrywa dużą rolę w zapewnieniu sukcesu Twoim stronom – im więcej osób znajdzie Cię w Google, tym więcej użytkowników będą mieć Twoje strony.
Praca nad SEO to proces ciągły. Już od pierwszego dnia działania warto dbać o pozycjonowanie strony w Google. Platforma Wix SEO zapewni Ci dostęp do gotowych rozwiązań infrastrukturalnych, które wspierają optymalizację stron.
Kilka istotnych praktyk SEO możesz zastosować już na etapie projektowania stron. Uporządkuj teksty dzięki otagowanym tytułom i podtytułom, grafikę i zdjęcia uzupełnij tekstami alternatywnymi, stosuj metaopisy na odpowiednich stronach i wybierz domenę z nazwą Twojej marki lub firmy.
UX
Od upowszechnienia komputerów osobistych w latach 80. przemysł technologiczny stale prowadzi badania nad tym, jak ludzie współdziałają z technologią i jak można te procesy usprawnić. Temu właśnie służy praktyka UX (user experience) – stałemu ulepszaniu doświadczeń użytkowników. Gdy przy projektowaniu stron internetowych brane są pod uwagę zasady UX, pozytywnie odmieniają wrażenia płynące z korzystania ze stron.
Termin UX jest często traktowany jako zamienne określenie projektowania interfejsu użytkownika lub dbania o funkcjonalność stron – w rzeczywistości oba te pojęcia zawierają się w szerokiej koncepcji UX. Projektanci UX zajmują się tymi aspektami i patrzą znacznie szerzej, skupiając się na pełnym obrazie doświadczeń użytkowników. Stale szukają nowych sposobów na rozwój i doskonalenie produktów, brandingu, designu, użyteczności i funkcjonalności stron.
Celem procesu UX jest zapewnienie użytkownikom wysokiej jakości doświadczeń na stronach online dzięki oferowanym tam informacjom, produktom i usługom. Wszystkie strony www powinny spełniać siedem poniższych wymagań i być:
Przydatne
Funkcjonalne
Łatwe do znalezienia
Wiarygodne
Atrakcyjne
Dostępne
Wartościowe
Projektowanie adaptacyjne a responsywne
Urządzenia mobilne obecnie generują ponad połowę ruchu w sieci – dostosowanie stron online do małego ekranu stało się koniecznością. Są dwie metody przenoszenia projektu strony internetowej z wersji desktopowej na mobilną: adaptacyjna i responsywna. Warto znać różnicę między nimi, zwłaszcza, gdy czeka Cię wybór kreatora stron internetowych, ponieważ większość platform obsługuje tylko jeden model:
Projektowanie adaptacyjne polega na tworzeniu różnych wersji tej samej witryny, a każdą z nich można dostosować do ekranu innego rozmiaru lub innej szerokości przeglądarki. Na przykład użytkownicy platformy Wix tworzą layouty swoich stron w wersji desktopowej i otrzymują ich adaptację – konfigurowalny projekt dostosowany do urządzeń mobilnych.
Projektowanie responsywne polega na tworzeniu stron internetowych z elastyczną siatką. Dzięki temu strony dynamicznie dostosowują się do wielkości ekranu i orientacji urządzenia, na którym są wyświetlane.
5. Elementy wizualne w projektowaniu strony internetowej
Elementy wizualne strony internetowej są tak samo ważne jak jej funkcjonalność, razem kształtują jej odbiór. Kolorystyka, typy czcionek, stosowanie wideo – wszystkie szczegóły odgrywają rolę w kształtowaniu doświadczeń użytkowników i wpływają na postrzeganie Twojej marki. W tym rozdziale omówimy elementy wizualne projektu strony internetowej oraz podamy kilka wskazówek, które ułatwią Ci podejmowanie decyzji związanych z kwestiami estetyki stron:
Nagłówek strony internetowej
Nagłówek mieści się w górnej sekcji strony internetowej i jest pierwszą rzeczą, którą użytkownicy widzą po wejściu na stronę. To strategicznie ważne miejsce strony – w nagłówku zazwyczaj pojawia się menu, nazwa firmy, jej logo, dane kontaktowe.
Stopka strony internetowej
Stopka znajduje się na dole strony i jest obecna na każdej stronie i podstronie. To ostatnia rzecz, jaką widzą użytkownicy – warto tam zamieścić (albo przypomnieć) najważniejsze informacje, oczywiście z uwzględnieniem ograniczonej przestrzeni. W stopce często zamieszcza się dane kontaktowe, mapę stron, formatkę umożliwiającą prenumeratę firmowego newslettera i przyciski prowadzące do profili w mediach społecznościowych.
Kolorystyka
Projektowanie stron internetowych to w dużej mierze praca z kolorystyką. Schemat kolorów, który wybierzesz, w dużej mierze wpłynie na styl projektu, a strategiczne rozmieszczenie charakterystycznych barw marki może odegrać istotną rolę w umacnianiu obecności Twojej firmy online.
Wybierając schemat kolorów, zdefiniuj główny kolor (który będzie dominował na stronie), dodatkowy kolor (używany konsekwentnie, choć bardziej oszczędnie niż kolor główny) i kolory do akcentowanych elementów (używane w sprytny sposób, aby podkreślić pewne szczegóły na stronie).
Typografia
Typografia dotyczy wizualnych aspektów tekstu, takich jak krój czcionki i rozmieszczenie tekstu. To kluczowy aspekt graficzny przy projektowaniu stron www. Dobrze dobrana typografia uzupełnia estetyczny styl strony i wzmacnia jej przekaz.
Wybierając czcionki na strony internetowe, weź pod uwagę fakt, że sposób zapisania tekstu bywa tak samo ważny jak jego treść. Wybierz czcionki, które są czytelne, pasują stylistycznie do tematu strony, a przede wszystkim – do Twojej marki. Podobnie jak w przypadku schematu kolorów, możesz wybrać czcionki główne, dodatkowe i akcentujące, aby kierować wzrokiem użytkowników w określone miejsca.
Tło strony internetowej
Tło witryny odgrywa ważną rolę w projektowaniu stron internetowych, nadając im pewien ton. Może być statyczne lub animowane, jednolite lub teksturowane. Tło nieustannie towarzyszy użytkownikom podczas przeglądania stron.
Możesz wykorzystać dowolne zdjęcie lub film na tło swojej strony, użyć barw marki, wybrać modne tło gradientowe lub zdecydować się na minimalistyczne rozwiązanie i pozostawić białą oprawę. Niezależnie od tego, co wybierzesz, tło musi pasować do ogólnego tematu wizualnego stron i przyciągać uwagę odwiedzających, ale ich nie rozpraszać.
Jeśli chcesz dodać stronom więcej finezji, wykorzystaj efekty przewijania, takie jak scrollowanie z efektem paralaksy – zdecydowany faworyt zarówno wśród początkujących, jak i profesjonalnych projektantów stron www.
Obrazy
W ciągu zaledwie kilku sekund pojedynczy obraz na stronie wzmocni przekaz wysyłany do użytkowników. Może to być zdjęcie produktu lub lokalizacji Twojej firmy, galeria zdjęć z ciekawego wydarzenia, dodanie markowej faviconki lub użycie grafiki – strona z pewnością na tym dużo zyska.
Wix udostępnia bogatą bibliotekę bezpłatnych treści wizualnych – od zdjęć stockowych po kolekcje innowacyjnych projektów, takich jak transparentne wideo, które kupujemy od naszych utalentowanych użytkowników. Pracując nad projektem strony, użytkownicy Wix mogą dodawać własne obrazy, animacje lub grafiki wektorowe i korzystać ze zdjęć stockowych z takich źródeł jak Unsplash.
Animacje
Jednym z celów projektowania stron internetowych jest wyróżnienie się na tle innych stron w sieci. Dlatego warto dodać animację – to uatrakcyjnia strony, współtworzy doświadczenia użytkowników i kieruje ich działaniami. Możesz włączyć animację na stronach, aby je zdynamizować lub aby wywołać pewne reakcje odwiedzających.
Na przykład spróbuj dodać animację do:
Przycisków CTA, aby zachęcić odwiedzających do klikania
Elementów takich jak strzałki wskazujące kierunki
Obszarów widocznych podczas ładowania się elementów, aby urozmaicić użytkownikom (oby jak najkrótszy) czas oczekiwania
Elementów, na które chcesz zwrócić uwagę gości, jak np. formularz subskrypcji newslettera
6. Utrzymanie strony internetowej
W projektowaniu stron internetowych nieustannie pojawiają się nowe funkcje, narzędzia i rozwiązania. Błyskawiczny rozwój ma też swoje minusy – musisz śledzić nowości, a Twoja strona powinna być na bieżąco aktualizowana i ulepszana.
Po wdrożeniu w życie pierwszego projektu co pewien czas trzeba weryfikować i poprawiać strony. Musisz zapewnić aktualną treść i dbać o to, by projekt nie wyglądał na przestarzały. Wszystkie przedawnione informacje i funkcje będą negatywnie wpływać na wrażenia odwiedzających, co doprowadzi do zmniejszenia ogólnej wydajności stron i Twojej sprzedaży.
Co najmniej raz w miesiącu przeglądaj strony, aby upewnić się, że nie ma tam błędów, wszystko działa poprawnie, a podane informacje nadal są aktualne. Jeśli pewnego dnia uznasz, że przyszła pora na odświeżenie projektu, wprowadź zmiany, które poprawią łatwość korzystania ze stron i zwiększą ich wydajność. Może to oznaczać dodanie nowej treści wizualnej, dodatkowych podstron, odświeżenie tekstów, ulepszenie witryny pod kątem SEO i wykonanie audytu dostępności.
7. Inspiracje w projektowaniu stron internetowych
Po omówieniu podstaw projektowania stron internetowych nadszedł czas na przejrzenie kreatywnych przykładów. Budowa stron www i web design to inspirujący temat i łatwo można trafić na ciekawe rozwiązania. Sugerujemy regularne przeglądanie stron takich jak Behance, Awwwards i Pinterest, gdzie zawsze jest dużo świeżych idei.
W Wix stale trzymamy rękę na pulsie i badamy najnowsze trendy w projektowaniu stron internetowych. Nieustannie przeglądamy powstające prace i poszukujemy najbardziej fantastycznych projektów naszych użytkowników. Z dumą patrzymy, jak właściciele stron – od artystów po właścicieli małych firm – dzięki naszej platformie osiągają znakomite efekty.
Zespół Wix
