Proste wskazówki dotyczące projektowania witryn internetowych zapewniające dobre wyniki

Istnieje nieskończona liczba sposobów projektowania strony internetowej. Mając to na uwadze, istnieją również nieskończone sposoby, aby to zepsuć. Istnieją dwie główne metody, aby uniknąć zaliczenia do drugiej kategorii - poznaj podstawy projektowania i odpowiednio je zastosuj. Musisz także mieć wystarczające doświadczenie, aby dowiedzieć się, co działa dobrze, a co nie.

Wszyscy projektanci wybierają różne ścieżki uczenia się i często znajdują się na różnych etapach swojej podróży. Jeśli to czytasz, miejmy nadzieję, że starasz się również ulepszyć swoją pracę i tworzyć lepsze projekty.

Niestety, nie sposób zmieścić całej potrzebnej wiedzy w 1500 słowach. Zamiast tego skupimy się tylko na kilku wskazówkach, które sprawią, że przemyślisz podejście do elementów UX / UI. Idealnie, ten sposób myślenia można zastosować również w innych obszarach pracy projektowej.

Zacznij od dobrego zrozumienia produktu / witryny

Niezwykle trudno jest projektować, gdy nie rozumiesz w pełni treści / witryny. Nie musisz studiować medycyny, żeby stworzyć medyczną stronę internetową, to nie jest celem. Powinieneś jednak wiedzieć, w jaki sposób użytkownik uzyska dostęp do wszelkich informacji, których może potrzebować.

Jeśli chcesz zaprojektować aplikację do tworzenia muzyki, najpierw powinieneś złapać kilka istniejących, pobawić się z nimi, aby je poczuć, poczytać o teorii, która się za tym kryje i jak funkcjonują określone elementy.

Najlepiej byłoby, gdybyś pracował z klientem, który również powinien być bardzo zaangażowany w projekt i chcieć pomóc Ci we wdrożeniu lepszego UX dla swoich użytkowników.

Jeśli jednak nie masz podstawowego zrozumienia, o czym jest strona i jaki problem rozwiązuje, możesz sparaliżować doświadczenie użytkownika lub zmusić się do przestrzegania istniejących rozwiązań i po prostu zmienić ich skórkę (co czasami działa).

W przypadku witryn internetowych należy mieć przed sobą mapę witryny, aby pracować nad właściwą nawigacją i podejmować decyzje o tym, które elementy będą pasować do określonych stron docelowych. Jeśli wykonujesz projekt „fabryki czekolady”, możesz wizualnie przedstawić proces jej wytwarzania lub zrobić zrzut informacyjny. Wszystko zależy od celów witryny.

Wszystkie te informacje są potrzebne wcześniej, aby uzyskać wyższy wskaźnik sukcesu. Biorąc pod uwagę, jak bardzo jest to skomplikowane, może się to zdarzyć, jeśli jesteś początkującym niezależnym projektantem, więc najlepiej od samego początku zadać wiele pytań. Jeśli pracujesz w zespole, nie zapomnij skonsultować się z członkami zespołu w sprawie treści, UX, celu i nie tylko.

Wskazówki i porady dotyczące konkretnego projektu:

Zobaczmy teraz kilka wskazówek dotyczących interfejsu użytkownika / UX, które możesz wykorzystać w następnym projekcie:

1 - Kontrast!

Tak łatwo zepsuć kontrast w witrynie. Szybkim sposobem na znalezienie mniej doświadczonego projektanta byłoby sprawdzenie ogólnego kontrastu. Zobacz ten przykład:

Źródło

Widzisz, jak jasny jest tekst wszędzie? Zielone przyciski z białym tekstem, jasnoszary tekst ?. Porównajmy to z bardziej kontrastowym interfejsem użytkownika:

Źródło

Duża część czcionki jest czarna (lub prawie czarna), a mniej ważne informacje są nieco szare. Kolor zielony jest ciemniejszy, co pozwala teraz na umieszczenie białego tekstu na górze.

Wskazówka: kiedy pracujesz z tekstem, zacznij od Czarnego na białym lub białego na czarnym. Gdy dodajesz więcej elementów i musisz oddzielić je za pomocą hierarchii wizualnej, spróbuj najpierw pogrubić lub zmienić rozmiar czcionki. Dopiero potem, jeśli nie działa, idź ze zmianami koloru, ale najlepiej nie więcej niż 30-40% różnicy (ogólnie krycie jest ustawione na 70%).

2 - Spójna biała przestrzeń

Innym częstym błędem byłoby niespójne odstępy wokół elementów. W rzeczywistości jest to tak powszechne, że większość projektantów nadal boryka się z tym po latach pracy i jest to całkiem zrozumiałe - przesuwamy pudełka za pomocą myszy. Łatwo się trochę poślizgnąć i przesunąć o piksel lub dwa w bok. A może nie wyszkoliłeś jeszcze swojego oka na tyle dobrze, aby bezpośrednio dostrzec tę różnicę.

W poniższym przykładzie przyjrzyj się, jak różne komponenty mają wokół siebie różne białe przestrzenie. Niektóre są zagracone razem, inne są bardzo rozstawione. Wizualnie nie wygląda to zbyt spójnie.

Dla kontrastu, oto przykład z mniej więcej podobną ilością treści / typem komponentów, ale o bardziej spójnym wyglądzie:

Źródło

Można to osiągnąć na wiele sposobów, ale w większości przypadków nie wystarczy po prostu mierzyć. Często jest to „odczucie”, kiedy na to patrzysz. Czy to wygląda na zrównoważone? Jeśli masz pudełka, zawsze możesz zmierzyć około 30 pikseli z boków, 30 pikseli pod tytułem, 15 pikseli pod napisami itp. I to jest dobre podejście! Ale przy większych elementach wizualnych, takich jak tytuły lub obrazy, możesz chcieć trochę zwiększyć, aby nadrobić cięższy element.

3 - Kolor

Kolejny podstawowy składnik dobrego projektu. Kolory muszą ze sobą dobrze współgrać. Jednym z łatwych sposobów podejścia do witryn internetowych jest trzymanie się jednego koloru podstawowego, a reszta pozostaje monochromatyczna.

Poniższy przykład jest zgodny ze wszystkimi trzema dotychczasowymi sugestiami - Dobry kontrast, równowaga i użycie koloru:

Źródło

Jednym z łatwych sposobów rozpoczęcia pracy z kolorami jest śledzenie dobrze przyjętych schematów kolorów ze stron takich jak https://colorhunt.co/ lub czerpanie inspiracji z Dribbble do kombinacji. Praca z kołem kolorów jest pomocna przy ustalaniu kombinacji, ale często potrzeba trochę dodatkowego dotyku od projektantów, aby znaleźć najlepsze kombinacje. Koła kolorów często nie zapewniają idealnych kolorów do zastosowania w projekcie.

Przykład z koła kolorów Adobe:

Źródło

Ładny zielony kolor pośrodku, ale trochę trudny do wykorzystania wyników po lewej / prawej stronie.

4 - Trzymaj się stylu w całej witrynie

Tworzenie strony internetowej jest jednym z głównych zadań projektanta. Chociaż pojęcie „ładna” jest bardzo trudne do zdefiniowania, zwłaszcza że ludzie często mają inny pogląd na to, co jest ładne, a co nie. . Zamiast się tym martwić, postaw na konsekwencję i trzymaj się stylu.

Co to znaczy? Cóż, zaprojektujmy przycisk. Ustawiamy rozmiar czcionki, czcionkę, kolor, tło, odstępy itp. I otrzymujemy coś takiego:

Teraz, jeśli mamy dodać zdjęcie i tytuł, możemy osiągnąć coś takiego:

Zobacz rogi. Wszystkie idealne rogi 90 stopni, bez zaokrąglania. Teraz oznacza to, że nasz projekt będzie głównie podążał za ostrymi narożnikami. Wygląda to bardziej spójnie, jeśli obraz ma również te idealne rogi. Tak jak gdybyśmy dodali wejścia, wszystkie miałyby te ostrzejsze rogi. Dodajmy jeszcze jeden element:

Dodaliśmy siatkę pól w prawym górnym i lewym dolnym rogu. Mogły to być koła, ale aby zachować ostry wygląd, ustawiliśmy je na kwadraty. To samo myślenie należy zachować w całej witrynie. Jeśli zaczniesz zmieniać elementy, możesz zacząć tracić to poczucie, co z kolei skutkuje niespójnym projektem i osłabi markę.

Oto ten sam projekt z góry, ale z zaokrąglonym wyglądem:

To to samo, ale teraz wydaje się zupełnie inne.

5 - Projektowanie z komponentami

Komponenty istnieją we wszystkich nowoczesnych narzędziach do projektowania, takich jak Figma i Adobe XD. Są tam z bardzo dobrego powodu - programiści implementują strony w taki sposób, aby można je było ponownie wykorzystać w jak największym stopniu.

Jeśli utworzysz element podobny do powyższego, chcesz go po prostu „skopiować i wkleić” na innej stronie i po prostu zadziała. Nie ma potrzeby ponownego kodowania z niewielkimi różnicami. Idealnie byłoby, gdybyś jako projektant chciał ponownie wykorzystać swoje komponenty w podobny sposób.

Jeśli tworzysz stronę główną z 3 postami z rzędu, być może możesz po prostu ponownie użyć tego samego posta ze strony głównej. Oszczędza to czas, oszczędza czas programisty i zapewnia spójność projektu dla użytkowników.

Źródło

Wyobraź sobie, że tworzysz nagłówek sekcji. Jeśli potrzebujesz 8 sekcji z nagłówkiem, czy zaprojektujesz go za każdym razem, czy skopiujesz i wklej poprzednią? Idealnie byłoby, gdybyś chciał go ponownie użyć. Ale co, jeśli musisz zmienić to z wyśrodkowanego na wyrównane do lewej? Może trochę zmień rozmiar, może kolor? Rada z tego jest taka, aby spróbować, a NIE tego robić. Postaraj się zachować go jak oryginał. Jeśli naprawdę potrzebujesz różnych widoków (poza wyrównaniem do lewej / wyśrodkowanej / prawej), spróbuj wprowadzić tylko jedną odmianę. Nie pięć czy dziesięciu.

Przykład przez DevriX

W podsumowaniu:

Aby osiągnąć dobre wyniki, potrzebujesz dobrego zrozumienia podstaw projektowania, takich jak kolor, kontrast, biała przestrzeń, równowaga, hierarchia wizualna, porządek i nie tylko. Kiedy projektujesz pod tym kątem i koncentrujesz się na użyteczności, spójności i stylu, a nawet jeśli nie jest to „WOW!” będzie solidna pod każdym względem i dobrze funkcjonować, co często daje marce lepsze efekty w dłuższej perspektywie.