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 piąty artykuł z cyklu Nauka webdesignu. Tym razem omówimy projektowanie interfejsu użytkownika, czyli UI. Przejdziemy zatem do czynności najczęściej kojarzonej z tworzeniem strony internetowej i często najbardziej lubianej - do projektowania jej wyglądu. Przeczytaj ten artykuł i dowiedz się, jak robić to dobrze!

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

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

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

Co to jest UI

UI to user interface, czyli interfejs użytkownika. W webdesignie jest to ta część strony internetowej, która odpowiada za kontakt z odbiorcą, czyli to, co widzi on na swoim monitorze i z czym może wejść w interakcję.

Przejdziemy dziś 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ą.

Aspekty techniczne webdesignu

Ustawienia początkowe

Wszystko, co nie zostanie wydrukowane, czyli każdy projekt z przeznaczeniem do internetu (czy też po prostu na ekrany), projektujemy oczywiście w pikselach, przy trybie kolorów RGB, 72 ppi.

Jakie wymiary powinna mieć strona internetowa? 

Jeśli chodzi o długość - dowolne. Szerokość natomiast powinna wynosić 1200 px, przy czym jest to wymiar strony internetowej, ale cały projekt powinien mieć szerokość 1920 px lub więcej. O co tu chodzi? 

Monitory są produkowane w różnych rozdzielczościach (a więc też w różnych szerokościach). Aby Twoja strona wyświetlała się prawidłowo na każdym komputerze, konieczne jest zastosowanie powyższych zasad. Należy stworzyć projekt o szerokości minimum 1920 px, po czym wydzielić sobie (i wycentrować) fragment, mający 1200 px i w jego obrębie umieszczać elementy. Tło jednak powinno znajdować się na całej szerokości i długości obszaru roboczego.

Takie rozwiązanie zapewnia, że każdy obiekt pokaże się na dowolnym monitorze, przy czym na tych szerszych, nie będzie widoczna pusta, biała przestrzeń, a kontynuacja tła.

Warto też wspomnieć o wymiarach przy projektowaniu RWD (szerzej na ten temat za chwilę). Przyjmuje się, że szerokość smartfonów to od 320 px do 480 px.

Czym jest grid w webdesignie? Siatka kolumnowa

Siatka projektowa, czyli inaczej grid, jest jak tabelka, w której umieszczamy elementy. W webdesignie stosuje się siatkę kolumnową. Pozwala ona stworzyć podział projektu, a jednocześnie zachować spójność poprzez umieszczanie obiektów w jednej linii, prostopadle, równolegle i w równych odstępach. 

Gotowe siatki są dostępne w internecie, nawet za darmo. Możesz wybrać, na jak wiele części powinna ona dzielić Twoją stronę internetową i wyszukać odpowiednią. Taki grid możesz umieścić na oddzielnej warstwie w programie graficznym i dopasowywać do niego obiekty za pomocą przyciągania. 

Możesz również stworzyć własną siatkę wykorzystując w swoim programie narzędzie miarka. Wystarczy wyciągnąć z niej linię poziomą i umieścić na odpowiednim miejscu, a następnie powtórzyć czynność umieszczając ponowną kilkadziesiąt pikseli dalej. Podobnie z liniami pionowymi. W ten sposób odmierzysz prawidłowe odległości i ustanowisz linie styku.

Jak stosować siatki w praktyce? Początek Twojego nagłówka powinien spotykać się po linii do niego prostopadłej, przechodzącej przez początek elementu, z początkiem następnego obiektu, np. zdjęcia. Kratkowy podział gridów pozwala także na zachowanie jednakowych odstępów. 

Kolory na wyświetlaczu komputera, czyli czym jest RGB? 

Przy projektowaniu dowolnych grafik, które wyświetlane są na ekranach, stosujemy tryb kolorów RGB (w przeciwieństwie do druku, w którym systemem kolorów jest CMYK). 

Kolory RGB to kombinacja czerwonego (R - red), zielonego (G - green) i niebieskiego (B - blue), przy czym do każdego z tych kolorów przypisanych jest 266 barw, co daje nam 16 milionów odcieni. 

Wszystkie one mają swoje kody RGB, które zapisujemy oznaczając liczbę każdego z trzech głównych kolorów. Zatem czerwień oznaczymy jako rgb (255,0,0), zieleń rgb (0,255,0), niebieski rgb (0,0,255). 

Biały, czyli pełne zastosowanie tych trzech barw to rgb (255,255,255), czarny, jako całkowity ich brak - rgb (0,0,0). Oczywiście reszta kolorów również ma swoje kody, w których występują inne liczby (w przedziale 0-255). Np. szary to rgb (192,192,192).

Jednak najczęściej stosowaną praktyką wśród designerów jest używanie kodów HEX, czyli sześciu znaków poprzedzonych płotkiem. Każdy kolor RGB ma odpowiedni kod HEX. Czerwony to np. #ff0000, biały - #ffffff, czarny - #000000, szary - #c0c0c0. Na swojej drodze spotkasz również inne odcienie, jak np. #580000. 

Na szczęście nie musisz ich wszystkich zapamiętać. W każdym programie graficznym (nawet Paincie!) możesz sprawdzić, jak i wpisać, zarówno kod RGB, jak i HEX. 

Jakie fonty stosować w projekcie strony internetowej? 

Najistotniejsze i najczęściej używane rodzaje fontów (potocznie czcionek) to szeryfowe, bezszeryfowe i tzw. pisanki. 

W projektach stron internetowych największą dowolność mamy w nagłówkach. Tutaj możemy użyć praktycznie każdego rodzaju fontu, pamiętając przy tym o czytelności, estetyce i umiarze. 

Do dłuższych tekstów zaleca się używanie fontów bezszeryfowych. Najczęściej polecane są Lato i Roboto. Najczęściej odradzanym fontem jest Comic Sans. 

Czym jest kompresja obrazów i wideo i jak z niej korzystać? 

Aby strona internetowa nie ładowała się zbyt wolno, co źle wpływa zarówno na SEO (pozycjonowanie w przeglądarkach), konwersję (wykonanie przez użytkownika pożądanej przez nas czynności), jak i zwyczajnie na UX, czyli na doświadczenie użytkownika,  niezwykle istotne jest umieszczenie na stronie odpowiednio lekkich zdjęć, grafik i filmów. 

Aby to zrobić wykorzystuje się kompresję, czyli, w dużym uproszczeniu, zmniejszenie wagi pliku. Można do tego wykorzystać program graficzny oferujący tę funkcję lub skorzystać z rozwiązań online. 

Niezwykle istotne jest jednak, by nie przesadzić. Stosując kompresję niestety pogarszamy jakość obrazu, często znacząco, dlatego należy znaleźć złoty środek. 

Czym są WebP i WebM? 

Zalecanymi przez Google formatami dla obrazów i filmów są odpowiednio WebP i WebM. Kompresowanie plików do tych formatów jest dobrą praktyką głównie ze względu na SEO.

RWD - czym jest i dlaczego jest tak ważne? 

RWD to skrót od angielskiego responsive web design, tj. responsywego web designu. Rozumiemy przez to projektowanie stron internetowych i aplikacji dostosowanych do ekranów smartfonów i tabletów, a także do różnych rozmiarów okna przeglądarki. 

Oznacza to, że konieczne jest zaprojektowanie przynajmniej trzech widoków strony internetowej - odpowiedniej na komputery, tablety i smartfony, z uwzględnieniem każdej różnicy w użytkowaniu, np. tego, że w dwóch ostatnich przypadkach posługujemy się palcem, a nie myszką. Istotne jest także dopasowanie wielkości ekranów, o czym już wspominaliśmy. Więcej na temat RWD przeczytasz tutaj i tutaj.

Narzędzia, w których można stworzyć stronę internetową

Makietę strony internetowej możesz stworzyć nawet w Photoshopie. Jeśli chodzi o prototyp, lepiej sprawdzi się tu np. Adobe XD, czy też Sketch. 

Dobrym rozwiązaniem jest jednak stworzenie strony w narzędziu, w którym możemy ją także opublikować w internecie (w dodatku darmowym). Sprawdzi się to szczególnie w przypadku, gdy samodzielnie chcemy stworzyć stronę internetową, bez umiejętności kodowania czy też konieczności współpracy z programistą. 

Dobre praktyki projektowe

Czasami projektanci UI żartują, że stronę projektują UX-owcy, a oni tylko ją kolorują. Jest w tym ziarnko prawdy, ale nie należy ujmować ważności projektowaniu UI. Tak jak w przypadku UX skupiamy się na użyteczności i funkcjonalności naszej strony internetowej, tak UI pozwala nam myśleć o projekcie szerzej. 

Pamiętaj o podstawach graficznych

Jeśli chodzi o dobre praktyki projektowe, należy pamiętać, że strona internetowa to również projekt graficzny, zatem konieczna jest znajomość podstaw, czyli zagadnień takich, jak:

• Kompozycja 

• Podstawowe elementy w plastyce

• Kolor 

• Typografia

Te wszystkie tematy omawialiśmy szerzej w pierwszym wpisie z tego cyklu. Niektóre z nich poruszymy ponownie za chwilę, tym razem jedynie w kontekście webdesignu. 

Wybadaj trendy

Użytkownicy stron www kierują się w dużej mierze wrażeniami estetycznymi. Oczywiście podstawą jest prawidłowy UX na stronie, ale jeśli nie wyróżni się ona na tle konkurencji dobrym designem, może ponieść klęskę z punktu widzenia marketingowego. Dlatego niezwykle istotne jest śledzenie trendów. Strona internetowa wyglądająca jak z początków lat 2000, nie zachwyci nikogo, choćby miała najlepszy UX. 

Od ogółu do szczegółu

Jest to zasada, którą jako pierwszą przedstawi Ci każdy nauczyciel rysunku. Także projektując stronę internetową należy mieć ją na uwadze. Na początku skup się na prostych formach, na określeniu kompozycji, podziale strony, szczegóły zostaw na koniec. W innym wypadku możesz otrzymać stronę pełną ciekawych, dopracowanych elementów, które zupełnie ze sobą nie współgrają. Zmarnujesz czas, jaki poświęciłeś na dopracowanie detali, ponieważ część elementów będziesz zmuszony zwyczajnie odrzucić. 

Porządek na stronie

Strony internetowe wymagają uporządkowania. Wydzieleniem sekcji na stronie zajmujemy się na etapie projektowania UX - dlaczego więc mówimy o tym przy UI? Ponieważ zachowanie harmonii to dużo więcej niż tematyczny podział strony.

Proponujemy małe ćwiczenie. Znajdź obraz lub grafikę, w którym zauważysz harmonię. Równie dobrze możesz spojrzeć za okno - świetnym przykładem będzie tu architektura. Zastanów się, co sprawia, że odniosłeś wrażenie uporządkowania. Teraz wejdź na dowolną stronę internetową i poszukaj podobnych elementów. 

Porządek tworzy harmonia. Harmonię tworzą powtarzalność, wyrównania elementów, rozmieszczenie obiektów prostopadle i równolegle, symetria itd. Dlatego strony internetowe należy budować na siatkach, o czym za chwilę. Oczywiście od każdej zasady można odejść - np. stworzyć stronę opartą w pełni na asymetrii. Takie zabiegi również są spotykane, ale stosują je zaawansowani projektanci. Jeśli chcesz zastosować asymetrię na stronie, np. aby wprowadzić na nią dynamikę, upewnij się, że nie stosujesz jej zbyt wiele, a inne elementy tworzące harmonię są zachowane - np. wyrównania elementów.

Hierarchia (proporcje)

Niezwykle istotne jest zadbanie o proporcje na stronie, czyli ustalenie hierarchii elementów. Pamiętaj, aby wyróżnić najważniejsze - przyciski, nagłówki, hasła reklamowe itp. Nie znaczy to jednak, że inne mają być ukryte - należy zadbać o czytelność każdego z nich.

Jeśli chodzi o wyróżnienie ważniejszego obiektu istotne jest, by robić to za pomocą jednego zabiegu. Weźmy za przykład fragment tekstu. Jeśli użyłeś wyboldowania (pogrubienia), powiększenie rozmiaru fontu jest zbędne. Dodatkowe zastosowanie innego kroju pisma i koloru, da efekt raczej komiczny, niż estetyczny. 

Buduj swoje wyczucie graficzne

Ustalenie dobrych proporcji na stronie jest trudnym zadaniem, często intuicyjnym. Dzieje się tak nie tylko w przypadku hierarchii na stronie - właściwie każdy aspekt projektowania graficznego wymaga wyczucia. Dlatego ponownie radzimy zrobienie solidnego researchu i zebranie projektów stron internetowych, które mogą posłużyć za dobry przykład. Im więcej takich stron obejrzysz, tym łatwiej będzie Ci ustalić, jakie są prawidłowe proporcje w projekcie, jak używać kolorów, typografii itd. Polecamy regularnie śledzić Pinterest, Behance i Dribbble oraz strony typu onepagelove.com. 

Spójność

Po pierwsze - strona internetowa musi być spójna sama ze sobą. Osiągniesz to stosując powtórzenia i zachowując umiar w mnogości rozwiązań graficznych:

• Elementy charakterystyczne powinny powtarzać się na wszystkich podstronach. 

• Powinieneś wybrać jeden font (ewentualnie 2-3, ale jedynie dla wyróżnienia nagłówków) i używać go na całej stronie internetowej. 

• Jeśli chcesz wyróżnić nagłówek (np. innym rozmiarem tekstu, fontem lub kolorem), na całej stronie internetowej stosuj ten sam zabieg.

• Możesz wybrać maksymalnie 3 kolory na stronę internetową i tylko je stosować na każdej z podstron. 

Ważna jest też spójność z identyfikacją wizualną marki, zwłaszcza z punktu widzenia marketingowego. 

Staraj się stosować kolory, które są charakterystyczne dla Twojej firmy. Co istotne, powinny to być dokładnie te kolory, nie zbliżone - stosuj tutaj kody HEX.

Przeanalizuj też identyfikację wizualną pod kątem stylu - jeśli w materiałach graficznych stosowane są obłe kształty, na stronie internetowej również je zastosuj. Jeśli korzystacie np. z flat design, niech takie elementy również pojawią się na stronie. Zwiększa to szanse na zbudowanie

rozpoznawalności marki. Istotne jest również powielanie innych elementów charakterystycznych dla marki, takich jak określony font itd.

Minimalizm, przestrzeń i white space

Każdy początkujący projektant ma ochotę w pełni pokazać swoją kreatywność podczas tworzenia pierwszych projektów. Czasami jednak mniej znaczy więcej, a strony internetowe to najlepszy tego przykład. 

Wróćmy tutaj do UX i zadajmy sobie pytanie - jaki jest cel strony? Co jest najważniejsze z punktu widzenia użytkownika? Jeśli Twoja strona ma być jedną z prac w portfolio, możesz zaszaleć i pokazać niecodzienne rozwiązania. Jeśli jednak tworzysz stronę, z której mają korzystać przeciętni użytkownicy internetu, musisz mieć na uwadze przede wszystkim użyteczność i czytelność. 

Dlatego już od dłuższego czasu w designie trenduje minimalizm. W jego duchu należy skupić się na tym, co istotne, a zbędne upiększacze odrzucić. Nie znaczy to jednak, że każda strona powinna być “białą kartką” z czarnym tekstem. To, co należy wynieść z minimalizmu, to przede wszystkim unikanie przepychu. Więcej informacji na ten temat znajdziesz tutaj. 

W każdym projekcie graficznym niezwykle istotny jest white space. Jest to określenie na pustą, niezagospodarowaną przez tekst i grafiki przestrzeń, czyli tło (niekoniecznie białe) bez dodatkowych elementów. Pozwala ona skupić się na ważnych elementach i nadaje projektowi czytelności. 

Przestrzeń w projekcie także jest trudnym tematem, dlatego ponownie zachęcamy do przeglądania jak największej ilości projektów i wyciągania wniosków. Doskonałym przykładem minimalizmu i dobrego wykorzystania white space jest wszystkim znana strona Google. Skupiono się tu na celu strony, a twórcy nie bali się pozostawić większości miejsca pustego. Czytelnie i przejrzyście, prawda?

Estetyka

Mówiliśmy już o oglądaniu prac innych projektantów? Tak, w przypadku estetyki również ciężko będzie dać lepszą radę niż obycie z designem i śledzenie trendów. 

Jeśli jednak będziesz stosować się do powyższych rad, unikać przepychu, stosować określoną liczbę kolorów, harmonię, nie przesadzać z fontami itd., z pewnością do estetycznego wyglądu strony będzie bliżej niż dalej. 

Warto również dać sobie chwilę odpoczynku od projektu. Jeśli stworzyłeś już jego pierwszą wersję, odczekaj dzień, dwa, a nawet tydzień i spójrz na niego jeszcze raz. Czy dalej Ci się podoba? A może widzisz jakieś błędy?

Dobrą praktyką jest również pytanie innych o zdanie - może być to przyjaciel lub członek rodziny, który podpowie Ci, jakie są jego odczucia estetyczne co do projektu. W końcu ostatecznie to do przeciętnego (takiego, który niekoniecznie śledzi trendy w designie) użytkownika kierowana jest strona. 

Warto jednak, szczególnie na początku swojej drogi, sięgnąć rad u specjalistów. W tym celu masz do dyspozycji wiele grup na portalach społecznościowych, czy też fora internetowe. Bądź jednak gotowy na krytykę i przyjmuj ją z pokorą.

Dla uzupełnienia zagadnień związanych z tworzeniem estetycznych stron internetowych zachęcamy również do zajrzenia tutaj.

Podsumowanie

To piąta z 6. części naszego mini cyklu poświęconego nauce webdesignu. Skupiliśmy się tu na projektowaniu prototypu UI. W kolejnym, ostatnim wpisie, dowiesz się, jak wdrożyć witrynę i dbać o gotową stronę. Śledź nas na facebooku, aby nie przegapić żadnego wpisu!