Poradnik dla każdego. Zobacz jak powstaje strona internetowa
Co to jest userflow, UX i UI design. Dlaczego w projektowaniu stron www potrzebujesz makiet,. Jak zrozumieć logikę strony i jej funkcjonalności. Od czego zacząć projektowanie stron ?
Umiejętne dobranie zdjęcia to nie wszystko. Projektowanie stron i pracę nad projektem graficznym powinniśmy zacząć najlepiej zacząć od analizy i pytania o cel budowy strony.
A zatem jak powstaje strona ? Projektowanie stron internetowych rozpoczynamy od planowania i wspólnej rozmowy. Zobacz ten krótki poradnik.
Strony internetowe spełniające oczekiwania firmy i jej klientów wymagają dogłębnego poznania firmy i zespołu. Planowanie strony internetowej odbywa się wspólnie z Klientem.
Warsztaty i wspólna rozmowa to podstawowy punkt w realizacji strony www spełniającej oczekiwania. Spotkanie i przynajmniej dwie iteracje z Klientem niezbędne jest by móc bazować na faktach i dowodach, a nie domysłach. To tutaj zbieramy informacje o projekcie, ustalamy sposób komunikacji, przebieg prac.
Podczas pierwszej iteracji poznajemy firmę i zespół Klienta. To najważniejszy etap od którego zależy spójne i właściwe przyotowanie ścieżki użytkownika i stworzenie koncepcji produktu.
W tym miejscu poznajemy model biznesowy, mocne i słabe strony przedsiębiorstwa na które należy zwrócić uwagę projektując stronę. Dzięki poznaniu walorów firmy jesteśmy w stanie spersonalizować logikę poruszania się po stronie (userflow), dobrać odpowiednie rozwiązania funkcjonalne, wizualne, nadać wartość.
Strony www - jakość i wykonanie
Dbałość o detale i spójność. Wszystko po to by nie tworzyć kolejnej wersji ‘klonu’ strony internetowej Twojej konkurencji. Użytkownik bombardowany jest setkami stron internetowych łudząco podobnych do siebie począwszy od układu banerowego po kolorystykę i często również zestawem zdjęć.
Warto podejść do procesu realizacji strony www unikatowo i twórczo by móc wyłuskać ‘to coś’. To właśnie na podstawie wartości dodanej (czy to rozwiązaniem useflow, czy podejściem do warstwy graficznej UI, które pozytywnie zaskoczą użytkownika) mamy ogromną szansę wyróżnienia i zainteresowania użytkownika firmą i jej ofertą.
Warto gruntownie omówić oczekiwania i pierwsze wizje zespołu Klienta dla tworzonego produktu.
Druga iteracja.
Spotkania, które wydają się jednostronne pomagają ustalić fakty. Zebrane informacje posłużą do określenia założeń, zobrazowania pierwszej wizji i celów jakie stawiane są przed projektowaną stroną. To tutaj często poznajemy wyzwania stawiane przed nami przez zespół ale też powody zmiany strony lub jej budowy od nowa
Poznasz lepiej profil i potrzeby Twojego Klienta (odbiorcę końcowego usługi). Wspólnie ustalimy założenia i cele jakie będzie realizowała Twoja strona internetowa. Określimy wartość dodaną i unikatowość Twojego biznesu, którą warto przełożyć na finalny produkt.
Warto dowiedzieć się również co w trawie piszczy. Poznanie stron www konkurencji i rozwiązań jakie stosuje pomoże zweryfikować założenia i wyciągnąć być może nowe wnioski. Realizując analizę konkurencji pod względem SEO będziemy mogli wyciągnąć wnioski co do parametrów technicznych i jakościowych stron znajdujących się na kluczowe frazy w TOP10 wyników wyszukiwania Google. To jednocześnie świetny sposób na dostrzeżenie trendów, a przez to projekt graficzny strony internetowej będzie skuteczniejszy i bardziej efektywny.
Poznasz konkurencję, wady i zalety wdrożonych przez nią rozwiązań.
Jeżeli tworzysz swoją markę od podstaw, warto przed rozpoczęciem projektowania strony zadbać o kompleksowe podejście do budowy wizerunku marki. W tym celu przed rozpoczęciem prac nad stroną internetową powinna powstać w pierwszej kolejności strategia marki, identyfikacja wizualna oraz logo. Zobacz projektowanie logo w naszej agencji.
Poznaliśmy cele biznesowe, końcowego odbiorcę, jego oczekiwania. Wiemy kto jest główną konkurencją. Czas sprostać założeniom wykonanym podczas warsztatów.
Poznaj dobre praktyki projektowania stron www, budowę warstwy UX. Zobacz co to jest projektowanie UX.
Czym jest i jak ją zdefiniować.
Aby móc rozmawiać o projektowaniu użyteczności, doświadczeń użytkownika zdefiniujmy samo pojęcie. Użyteczność (usability) czyli wydajność, efektywność lub inaczej satysfakcja użytkownika z używania, korzystania z produktu. Zamiennie stosowane ze słowem funkcjonalność czyli łatwości w wykorzystaniu do zrealizowania określonego zadania, celu. (zobacz czym jest UX)
Co to jest userflow ?
Userflow jest diagramem, wizualizacją procesu ścieżki jaką musi przejść użytkownik po stronie internetowej by osiągnąć cel lub wykonać zadanie np: od wejścia na stronę do złożenia zapytania.
Prawidłowo opracowana wędrówka użytkownika :
- stanowi podstawę dla dobrego funkcjonowania serwisu internetowego
- pozwala osiągnąć jak najwyższą konwersję,
- pozwoli uniknąć błędów oraz oszczędzić czas na kolejnych etapach projektowych.
Warto uświadomić sobie że podstawą jest użyteczność i intuicyjność przyjętych rozwiązań. Nawet najładniejsza strona internetowa bez poprawnie wdrożonego userflow nie będzie realizowała konwersji, a wręcz przeciwnie może stać się produktem ładnym ale nieużytecznym.
Jak zrobić userflow ?
Projektując userflow zadajemy pytania o cel, o motywacje do podjęcia takiej a nie innej decyzji przez użytkownika, o niezbędne informacje na konkretnym węźle procesu.
Skupiamy się na tym by rozwiązania przyjęte były dla użytkownika proste w zastosowaniu, intuicyjne, bezproblemowe gdyż pozytywne doświadczenia wpływają na wyższą konwersję.
Diagram use case, czyli którędy najszybciej do celu, pomoże opracować możliwe scenariusze ścieżki klienta, prowadzącej do celu.
W tym miejscu rozważmy również przypadki użycia oraz scenariusze użytkownika czyli możliwe drogi przejścia użytkownika do osiągnięcia jak najlepszej konwersji.
Przykładową konwersją strony może być np:
- przeprowadzenie zakupu,
- transakcji,
- jak najdłuższe pozostanie na stronie,
- rejestracja w portalu,
- zapis do newslettera,
- wypełnienie formularza,
- kontakt ze strony (wysłanie maila lub telefon)
Więcej o konwersjach mikro, makro i ich śledzeniu w Google Analitycs.
Co to jest architektura informacji ?
AI czyli organizowanie i projektowanie struktur. To uporządkowanie i ułożenie informacji w odpowiednich kategoriach tak by uzyskać jak najlepszą użyteczność produktu.
Dlaczego architektura informacji jest ważna ?
Uporządkowane dane pozwalają lepiej odnaleźć informacje oraz mają pozytywny wpływ na optymalizację SEO strony internetowej. Pozwala na pozyskanie wartościowego ruchu z wyszukiwarki
Zaprojektowana przez projektanta UX struktura strony to organizacja informacji w formie odpowiednio dobranych typów podstron np: produktowych, wpisów, usług, stron głównych i podstron zawierających szczegółowe informacje.
Ze względu na jak najlepsze osiągnięcie rezultatów w optymalizacji SEO struktura strony oraz zastosowane podstrony powinny być wyposażone w odpowiednie typy fraz kluczowych powiązanych z typem podstrony.
Odpowiednie ułożenie treści w kategorie (silosy) to również ważny aspekt optymalizacji SEO i wygody użytkowania strony. Każdy silos to kaskadowo zagnieżdżone podstrony zawierające informacje od ogólnych na najwyższym poziomie do szczegółowo opisujących dane zagadnienia powiązane na kolejnych niżej osadzonych podstronach.
Powiązania pomiędzy podstronami danego silosu realizuje się za pomocą linkowania wewnętrznego tworząc silosy tematyczne.
O czym warto pamiętać projektując silosy tematyczne ?
Powiązania pomiędzy podstronami danego silosu realizuje się za pomocą linkowania wewnętrznego tworząc silosy tematyczne. Warto pamiętać, że dobrze zaprojektowane linkowanie wewnętrzne może przynieść kilka korzyści:
- tworzy strukturę strony,
- zatrzymuje użytkownika na stronie, gdyż prowadzony jest od jednego tekstu do drugiego, a jego długa obecność na stronie www jest przez roboty odczytywana, jako informacja, że strona www jest ciekawa, więc warto ją pokazywać innym użytkownikom → pnie się w wynikach wyszukiwania,
- zatrzymuje roboty wyszukiwarek, które zwiedzają (crawlują) stronę również poprzez linkowanie wewnętrzne → lepiej poznają jej zakres tematyczny, skanują słowa i frazy kluczowe, mogą więc skuteczniej ją pozycjonować,
- prowadzi klienta od strony wejścia aż do strony złożenia zamówienia, przy czym prawidłowo zaprojektowane linkowanie wewnętrzne pozwoli na poprowadzenie klienta niezależnie od tego, na jakim etapie lejka sprzedażowego się znajduje aż do jego najwęższej części, czyli aż do zainteresowania zakupem i podjęcia akcji.
Czyli projektowanie wiframe i prototypu (prototypowanie).
Makietowanie strony internetowej to etap pozwalający zwizualizować proces podróży użytkownika w szybki i prosty sposób. Odpowiednio realizowana kolejność wykonania makiet w formie niższej (lowfi) i wyższej (hifi) pozwala na stopniowe przechodzenie od diagramów do wizualnych bloków.
Opracowanie makiet umożliwia sprawne przeprowadzenie testów produktu przed dalsza pracą. (zobacz narzędzia do prototypowania UX)
Na tym etapie projektant UX wizualizuje wszystkie opracowane wcześniej założenia i przypadki użycia.
Podczas projektowania doświadczeń użytkownika staramy się odpowiadać na pytania:
- czy przejście procesu jest proste i intuicyjne dla użytkownika ?
- czy można uczynić proces prostszym ?
- czy użytkownik uzyskał to po co przyszedł ?
A skoro mowa o wiframe, co to jest?
To nic innego, jak schemat, który opisuje strukturę i interfejs użytkownika. W czasie tego etapu wykorzystuje się elementy jedynie w skali szarości - chodzi o linie i pola. Elementy takie jak wideo, tekst, grafiki czy obrazy - są one umieszczane jedynie w formie symboli.
Dopiero na następnym etapie zostaną one podmienione na faktyczne elementy graficzne.
Przygotowanie makiety wiframe daje wiele korzyści:
- pozwala zwizualizować projekt i nadać mu konkretne kształty;
- pozwala zrozumieć projekt www;
- pomaga w oszacowaniu kosztów projektu strony;
- pomaga oszacować nakład pracy konieczny do sfinalizowania projektu strony;
- daje ogromne szanse nanoszenia poprawek po konsultacji z klientem.
Czyli finalny interfejs strony to właśnie jest projektowanie strony www (produktu). To narzędzie komunikacji służące do osiągania celów. Ten finalny etap przełożenia wykonanych prototypów przez projektanta UX na warstwę wizualną UI. Projektowana grafika czyli warstwa UI odpowiada za końcowy wygląd strony internetowej.
Czyli projektowanie stron internetowych i finalne interfejsu strony www, produktu. To narzędzie komunikacji służące do osiągania celów. Ten finalny etap przełożenia wykonanych prototypów przez projektanta UX na warstwę wizualną UI. Projektowana grafika czyli warstwa UI odpowiada za końcowy wygląd strony.
Moodboard czyli tablica zawierająca zebrane inspiracje do tworzonego projektu graficznego strony.
Przed przystąpieniem do prac projektowych dobrym pomysłem jest wykonanie researchu inspiracji, które posłużą za benchmarki dla projektu graficznego.
Tablice z inspiracjami pomagają projektantowi UI w pokazaniu kierunku w którym chce on podążać podczas rozmowy z Klientem. Takie wizualne pokazanie koncepcji stylu pozwala na szybsze i często trafne podjęcie i zawężenie decyzji co do stylu, kolorystyki, rodzaju fontu i innych elementów graficznych zastosowanych w projekcie.
Projektowanie stron internetowych UI obejmuje przygotowanie przygotowanie finalnego wygląd produktu, strony, sklepu, aplikacji poprzez m.in :
- kreatywne i nowoczesne rozwiązania mechaniki i funkcjonalności z przygotowanych makiet i prototypów,
- dobór odpowiedniej kolorystyki,
- opracowanie wizualne elementów nawigacji, formularzy (stany zero i aktywne np po najechaniu),
- opracowanie przełączników, przycisków, komponentów, wszelkiego rodzaju suwaków, sliderów, ikon, powiadomień, pasków postępu czy okien komunikatów,
- dobór fontu do projektu i rozmiaru oraz wagi,
- ułożenie treści w sekcjach strony,
- trzymanie i konsekwencja raz obranego stylu dla wszystkich elementów projektu, co czyni go spójnym,
Design system w projektowaniu stron internetowych to zbiór reguł i dobrych praktyk. Spójny wizerunek produktów tej samej marki. Przy większych projektach warto wdrożyć i zbudować zestawy reguł i zależności i wytycznych do rozwijania dalszego produktu. Dzięki temu nie musimy projektować elementów na nowo (lub kopiować z poprzednich projektów co często jest naznaczone błędem ludzkim).
Design system podobnie jak brandbook stanowi ujednolicenie raz zaprojektowanych form graficznych, opisanie ich by nadać spójność i jeden styl dla całej linii projektowanych produktów. Sam system to często nie tylko warstwa wizualna i zestaw opracowanych zależności ale także wizja i komunikacja firmy.
W tymi miejscu warto też zatrzymać się chwilę nad zagadnieniem kolorystyki, ponieważ na tym etapie już nie operuje się skalą szarości, ale pełną paletą barw zastosowanych w projekcie. Ich dobór nie może być przypadkowy.
Należy się zastanowić:
ile kolorów zastosować na stronie?
jakie to będą kolory?
dlaczego właśnie takie?
co mają przekazać i jaki efekt wywołać u użytkownika?
Co do tego, ile kolorów stosować na stronie internetowej, nie ma jednoznacznych wytycznych i reguł. Warto jednak unikać skrajności, czyli nadmiaru i niedoboru. W pierwszym przypadku strona będzie pstrokata, w drugim szarobura.
Twórcy mody i wykończeń wnętrz kierują się zasadą: 60-30-10 i warto zaczerpnąć tę regułę od nich. Zgodnie z nią dominujący kolor powinien zajmować 60% powierzchni strony, drugi - kontrastowy - 30%, a trzeci 10%. Ostatni kolor ma jedynie uzupełniać, podkreślać kolor dominujący lub kontrastowy.
Są trzy metody wybierania kolorów na stronę internetową. Pierwsza opiera się na guście właściciela. Ten określa kolor dominujący, a na podstawie teorii barw dobiera się kolor kontrastowy i uzupełniający. Druga metoda to wybór zdjęcia dominującego, które będzie charakteryzowało stronę. To z niego czerpie się kolor dominujący i dalej zgodnie z teorią barw dobiera resztę. Trzecia metoda opiera się na psychologii kolorów.
Zgodnie z nią wybiera się taki kolor, który ma wywołać określony efekt. Oto kilka przykładów, jakie działanie mają poszczególne barwy:
czerwony - energia, miłość, dynamika;
żółty - radość, optymizm;
zielony - zaufanie, wiarygodność;
niebieski - profesjonalizm, pewność, stabilność.
Dobierając kolory do grafik i layoutu strony, trzeba jeszcze pamiętać o kolorze fontu.
Tu sprawa jest bardzo prosta. Najlepszy będzie bardzo ciemny szary. Dlaczego? Bo do niego użytkownicy są przyzwyczajeni i wydaje się im, że to kolor czarny. Takie teksty też łatwiej się czyta i szybciej skanuje wzrokiem. Kolor czarny lepiej zachować dla nagłówków. Raz, że dzięki temu będą się bardziej wyróżniać, a dwa: ułatwią wspomniane skanowanie strony.
Jakie kolory na stronie internetowej są ważne?
Nie można zapomnieć jeszcze o kolorze białym. Pozwala “odetchnąć” czytelnikowi i stanowi doskonałą przeciwwagę do ciemnego tekstu. Najlepiej czyta się te teksty, które są skomponowane kontrastowo pod względem barw. Jeżeli więc chcesz odwrócić sytuację, to na czarnym tle Twojej strony muszą się znaleźć białe litery.
Co ciekawe odwrócona sytuacja (czarne tło i białe litery) jest też bardzo użyteczna.
Jeżeli Twoja strona będzie wyświetlana na urządzeniach mobilnych, będzie zużywała mniej baterii, niż strona biała, a oczy Twoich czytelników będą się dużo mniej męczyły w czasie czytania.
Wybrane przez Ciebie kolory na stronie internetowej muszą podkreślać to,c o jest ważne dla Ciebie i użytkownika. Najważniejsze elementy muszą więc być w towarzystwie koloru dominującego. Kolor uzupełniający musi być umieszczony tam, gdzie zamieszczasz informacje dodatkowe. Trzeci kolor służy wyłącznie do uzupełnienia wizualnego, czyli można zastosować go do kolorowania ramek, podkreśleń itp.
Poznaj proces i jak realizujemy tworzenie stron internetowych
Projektowanie stron to proces. Każdy z etapów zajmuje określoną ilość czasu. W zależności od tempa prac i zaangażowania zespołu klienta i agencji prace mogą iść sprawnie lub z przerwami np: brak czasu na akceptacje poszczególnego etapu prac co uniemożliwia przejście do kolejnego etapu. Zobacz ile trwa zrobienie projektu graficznego strony.
Terminy realizacji projektowania stron www
Na łączy termin pracy nad projektem składają się terminy realizacji poszczególnych etapów. Najażniejsze to zainwestować czas i podejść z dużą uwagą do etapu pierwszego tj warsztatów i początkowych ustaleń. W toku raz ustalonego kierunku prac dobrze aby ten kierunek nie był zbytnio modyfikowany, a brak przemyślenia koncepcji i początkowych założeń może skutkować powrotem do prac etapu warszatów i omówienia koncepcji ponownie co wygeneruje dodatkowy koszt tego i kolejnych etapów które będzie trzeba ponowić z racji wprowadzonych zmian koncepcyjnych.
Poniżej podajemy orientacyjne terminy potrzebne dla wykonania projektu graficznego średnio zaawansowanej do 20-30 podstron.
Czas potrzebny na wykonanie poszczególnych etapów :
- warsztaty i wywiad : 1-2 dni
- analityczny i researchu : 4-7 dni
- projektowanie stron UX: 7-14 dni
- projektowanie makiet : 7-14 dni
- projektowanie grafiki UI : 10-14 dni
Czas jaki należy przyjąć dla projektowania UX :
Prosty projekt strony głównej dla strony firmowej : 3-4 dni
Złożony projekt strony głównej : 4-5 dni
Projekt podstrony : 1 dzień
Czas jaki należy przyjąć dla projektowania UI :
Prosty projekt strony głównej dla strony firmowej : 2-3 dni
Złożony projekt strony głównej : 3-4 dni
Projekt podstrony : 1 dzień
Zaczynamy od wykonania planu strony internetowej tak by powstał układ makietowy (layout). W internecie jest wiele kursów i programów opisujących porady tzw poradnik projektowania stron. Jednak jesteśmy zdania że profesjonalna strona internetowa powinna powstawać w kilku następujących po sobie etapach, conajmniej w takiej formule jakąp podaliśmy powyżej. Przy czym najważniejszym etapem który zaważy na całej realizacji oraz jej powodzeniu jest etap wywiadu i rozmowy z agencji z Klientem.
Do rozmów z projektantem UX oraz UI lub agencją warto przygotować wczesniej własne oczekwania lub mieć przygotowanych kilka realizacji (benchmarków) przykładowych stron (choćby konkurencji znalezionej w Google), które pomogą w zrozumieniu potrzeb. Jeżeli nie mamy takich informacji na start zostaną one wspólnie podczas warsztatów wypracowane z projektantami oraz zebrane w tablice inspiracyjne tzw moodboards.
Koszt wykonania projektu graficznego strony internetowej jest różny. W zależności od ilości funkcjonalności, stopnia złożoności projektu graficznego oraz mechaniki należy poświęcić odpowiednią ilość czasu na każdym etapie by osiągnąć zamierzony cel. W naszym studio podając wycenę strony internetowej wyceniamy każdy etap osobno by całość prac była transparenta a Klient widział jakie koszty generują poszczególne etapy.
Z ależnie od wykonawcy czy będzie to freelancer czy agencja koszt ten może być odpowiednio mniejszy lub większy. Porównując oferty od wykonawców bardzo łatwo zauważyć różne przedziały cenowe. Warto rozważyć z kim chcemy współpracować. Agencja to 30-40% więcej kosztów na utrzymanie jej samej tj: administrację oraz utrzymanie zespołu, freelancer to koszt głównie samej pracy twórczej czyli produktu, który zamawiamy. Wybierając jednak freelancera należy wcześniej zweryfikować jego doświadczenie poprzez wgląd w portfolio oraz wykonane prace, jeżeli jest to projektant UX warto zapoznać się z zrealizowanymi case studies.
Poznaj ceny realizacji projektu UI od agencji przy założeniach :
- wykonania projektu średniej półki,
- współpracy w zadnych powyżej prac etapach,
- dostarczonych widokach dla urządzeń stacjonarnych oraz desktop tj: 360px / 768px / 1366px.
Orientacyjny koszt wykonania projektu na 2021 rok :
Projekt UX / warsztaty, prototypowanie, proces userflow, makiety /
- projektowanie UX dla strony firmowej do 10 podstron to koszt ok. 1000 - 1.500 netto
- projektowanie UX dla strony rozbudowanej od 10 - 20 podstron to koszt ok. 2.5000 - 4.000 netto
Projekt graficzny UI :
- projekt graficzny strony firmowej do 10 podstron to ok. 1.500 - 2.500 netto
- projekt graficzny strony rozbudowanej od 10 - 20 podstron to ok. 2.500 - 3.500 netto
Poznaj kilka zasad które pomogą zacząć w projektowaniu stron internetowych
Aby zacząć projektowanie strony należy poznać przede wszystkim cel jej budowy.
Drugim ważnym elementem jest określenie do kogo kierujemy naszą ofertę, kim jest nasz Klient ?
Wykonanie researchu i rozpisanie założeń nawet na kartce jest tutaj kluczowe. Źle sformułowane założenia, które nie byłby następnie zweryfikowane przez agencję / np brak realizacji warsztatów / doprowadzić mogą do stworzenia produktu, który nie będzie odpowiadał grupie docelowej i realizował konwersji.
Do przygotowania wstępnej koncepcji nie jest istotny zmysł graficzny czy opanowanie programów gdyż od tego jest agencja.
Platforma cms wordpress to system jak każdy innych. Projektowanie graficzne nie różni się zasadniczo w podejściu i wykonaniu. O ile wdrożenie strony jest wykonywane różnie w zależności od systemu to grafika i layout powinien być wykonany wg oczekiwań i założeń.
System Wordpress daje jednak pewną swobodę i wygodę dla projektanta UX oraz UI. Chodzi tutaj głównie o możliwości programistyczne i wdrożeniowe. Dla Wordpress nie ma ograniczeń ani barier narzuconych odgórnie tzn. nie ma technicznej bariery ani przeszkód które uniemożliwiałyby zakodowanie praktycznie każdego typu projektu, nawet tego najbardziej kreatywnego.
Naszym zdaniem Wordpress jest najlepszą platformą wdrożeniową dla stron zarówno tych mniejszych jak i portali internetowych.
Projektując dla cms wordpress warto natomiast zwrócić uwagę na mnogość opcji wyboru ułożenia treści i zdjęć na podstronie np: na wpisie blogowym tworzonym już przez administratora, czy budowaniu kolejnych podstron. Stylowanie dodatkowych układów na etapie kodowania nie będzie dobrze zrobione jeżeli nie zostanie uwzględnione na etapie projektowania UI.
Użytkownicy przyzwyczajeni się do standardowych rozwiązań. Warto z tego skorzystać przy planowaniu strony internetowej. Innaczej mówiąc nie nalezy wymyślać koła na nowo gdyż budowa strony internetowej może skończyć się niepowodzeniem w postaci niezrozumienia strony przez Twojego odbiorcę.
Stałe elementy które powinny znaleźć się na projekcie strony to m.in :
- logo oraz klasyczny układ menu na górze strony (po lewej stronie logo, po prawej część nawigacyjna),
- linki wewnętrzne do podstron powinny odróżniać się od standardowego tekstu,
- stopka - zawierająca w przypadku większych stron powtórzone szczegółowe menu oraz wszelkie sapisy o RODO, polityce prywatności, prawach autorskich do strony i projektu,
- wezwanie do działania - również nie tylko strona główna ale i podstorny powinny być wyposażone w odpowiednie sekcje CTA by prowadzić użytkownika do tych podstron na których najbardziej nam zależy
- sekcja social proff - czyli budowanie zaufania opiniami Klientów / referencjami
- odnośniki do social mediów w przypadku ich regularnego prowadzenia,
Poradnik do tworzenia i projektowania stron internetowych gdyby powstał to składałby się z kilku częściowych kursów. Nie sposób opisać w jednym poście czy materiale wideo całego zagadnienia projektowania stron gdyż składa się na nie za dużo czynników i etapów.
Projektowanie stron internetowych to kilkuetapowy proces dlatego ciężko jest podać jednoznacznie np 10 zasad w projektowaniu stron www gdyż dla każdego projektanta czy to początkującego czy zaawansowanego będą one bardziej lub mniej przydatne.
1. Poznaj Twojego odbiorcę i wyznacz cele dla strony
2. Porozmawiaj z potencjalnymi Klientami
3. Poznaj konkurencję i sprawdź jakie stosują rozwiązania
4. Stwórz diagramy, persony i makiety
5. Zadbaj o budowę architektury informacji
6. Przygotuj projekt w przynajmniej w rozdzielczościach : 380px / 768px / 1366px
7. Skonsultuj pomysły z grupą odbiorców, zbierz uwagi i ponownie powtórz proces
8. Zadbaj o spójność wizualną w obrębie strony wszystkich elementów i design system
Istnieje kilka narzędzi lub edytorów stron, w których za pomocą wizualnego konfiguratora możemy zaprojektować stronę. W efekcie otrzymamy gotowy kod strony statycznej lub z CMS w zależności od tego jakie narzędzie online zostało wykorzystane. Do tych najpopularniejszych należą :
Webflow
Wix
Webwave CMS
Wordpress builder jak divi, element or czy oxygenbuilder.
Jednak z projektowaniem nie mają one za wiele wspólnego gdyż to bardziej już budowa strony z gotowych komponentów (choć oczywiście można je tworzyć od zera) niż projektowanie z przejściem wszystkich jego etapów po kolei.
Agencja digital Hauerpower sp z o.o.
31-408 Kraków, Al. 29 Listopada 85
NIP 945-225-31-35
Copyrights 2010-2023
