Design

7 najważniejszych sekretów pięknej strony internetowej

By 30 sierpnia 2016 No Comments

Co sprawia, że chętniej wracasz do stron internetowych i jesteś skłony do podzielenia się nimi ze znajomymi? Jedynym z czynników jest ich wygląd. Istnieje kilka sekretów, za pomocą których stworzenie pięknej strony internetowej nie będzie dla Ciebie problemem.

Dziś prawie wszyscy mają strony internetowe. Nie ważne czy jesteś firmą, czy osobą — musisz mieć stronę internetową, jeżeli chcesz funkcjonować w dynamicznie rozwijającym się świecie.

Polska, jako kraj, w którym na internetową rewolucję musieliśmy trochę czekać, ten trend się dynamicznie rozwija. Dziś, każdy powinien mieć własne portfolio w formie strony internetowej choćby po to, aby zwiększyć swoją atrakcyjność na rynku pracy.

Internet jest tłocznym miejscem, nawet jeżeli patrzymy na polskie internetowe podwórko. Oznacza to, że musisz korzystać ze wszystkich dostępnych szans wyróżnienia się. Jedną z takich możliwości jest na pewno oryginalny design strony.

Jest kilka fundamentalnych cech dobrze zaprojektowanej strony internetowej, na które warto zwrócić uwagę:

Balans

Odpowiedni balans zachowany na stronie pokazuje, w jakim stopniu rozłożona jest waga naszych elementów. Dwa najpowszechniejsze typy to balans symetryczny oraz asymetryczny.

Balans asymetryczny zależy głównie od sposobu rozmieszczenia elementów. Ich wagę możesz regulować poprzez zmianę kolorystyki, kształtu, pozycji oraz rozmiaru elementów. Każde cecha elementu strony, zależy od kontekstu jego użycia na całej stronie oraz tego, jak mocno zależy Ci na kierowaniu wzroku użytkownika na ten element.

honda asmetria design

Asymetrie na swojej stronie zastosowała Honda

Z kolei Balans symetryczny charakteryzuje się (jak sama nazwa wskazuje) bardziej regularnym rozkładem elementów na naszej stronie internetowej. Najczęściej spotykaną praktyką jest układanie elementów strony w kolumny. Wzrok odwiedzającego jest kierowany kolejno od lewej do prawej kolumny. Warto zastosować taki układ, gdy zależy Ci na jak największej czytelności elementów na stronie.

cisco

Przykład symetryczej strony internetowej – firma Cisco

Układ elementów – siatka/grid (ang.)

Jak sprawić, żeby strona stała się bardziej czytelna oraz żeby jej treści były w prosty sposób zaprezentowane czytelnikowi? Wystarczy, że na swojej stronie rozrysujesz siatkę, której linie będą oddzielały poszczególne elementy treści. Układ siatki nie musi być regularny — tworząc kolumny o nieregularnych rozmiarach warto abyś pamiętał o zastosowaniu złotego podziału, który ureguluje rozmiar kolumn.grid system

Kolor

Jeżeli masz zamiar stworzyć stronę dla firmy, to wybór kolorystyki elementów będzie w głównej mierze zależał od zaprojektowanej wcześniej komunikacji wizualnej firmy. W przypadku, gdy możesz  zdecydować o kolorach warto od razu ograniczyć się do wyboru kilku z określonej palety.

Przydatnym narzędziem w tym etapie jest strona Paletton, która przygotuje Ci odpowiednią paletę oraz przedstawi warianty kolorystyczne na przykładowej grafice.

Grafika strony

Odpowiednia grafika strony internetowej, czyli między innymi: ikony, przyciski, tła to elementy, które mają największy wpływ na unikalność Twojej strony internetowej. Przykładem mogą być strony internetowe światowych korporacji czy banków, gdzie każda ikona, zdjęcie, przycisk są robione na zamówienie. Zastanów się, czy chcesz samemu zadbać o elementy graficzne, czy też skorzystać z gotowych, ogólnodostępnych rozwiązań.

>> Przykład projektu (Behance)

Typografia

Podobnie jak przy pisaniu dokumentów również w przypadku stron internetowych ważny jest dobór odpowiedniego fontu. Tak, font to nie czcionka.

Font to zestaw czcionek o wspólnych cechach. Czcionka, to najprościej mówiąc, pojedynczy znak.

Odpowiednio dobrany typ fontu wpływa na właściwy odbiór charakteru Twojej strony. Znacznie trudniejszą czynnością jest właściwe dobranie dwóch fontów do poszczególnych elementów, gdzie przykładowo font szeryfowy będzie obecny w nagłówkach, a font bezszeryfowy określał będzie wygląd treści. W tym przypadku musisz eksperymentować i przetestować odpowiednią kompozycje, która pozytywnie wpłynie na estetykę strony, a przede wszystkim czytelność zamieszczonych na niej treści.

Vgrafiks is a Manila Based Branding agency & Graphic Design studio. We design for Print, Website, Packaging, Motion, Advertising, Wearable, and Environments. We are a team of brand strategists, designers, account managers, copywriters, web developers, illustrators and photographers. We craft, develop and inspire the most loved and most loving brands on the planet.

Vgrafiks – przykład ciekawego zastosowania typografii

White space / przestrzeń negatywna

Na pierwszy rzut oka, puste miejsca są aspektem, którym chciałbyś unikać z racji lepszego wykorzystania przestrzeni na naszej stronie. Jest zupełnie inaczej. Nasza strona internetowa to nie banner, billboard czy też ulotka. Nie powinieneś przenosić zasad projektowania reklam na grunt strony internetowej. Choć podczas projektowania reklam również wykorzystuje się przestrzeń negatywną.

Puste miejsca można porównać do otwartych okien w pokoju. Wprowadzają trochę powietrza w projekt. Sprawiają, że wzrok czytelnika odpoczywa. Przestrzeń negatywna wpływa również na same elementy.

medium whitespace

Medium.com uważam za wzorzec w wykorzystywaniu przestrzeni negatywnej

Poprzez odpowiednie zastosowanie przestrzeni negatywnej możesz wyróżnić elementy, na które odwiedzający Twoją stronę internetową, powinien zwrócić uwagę. Odpowiednie zastosowanie marginesów potrafi wyróżnić takie elementy jak nagłówki czy też zdjęcia, które są wartościowe dla większości użytkowników.

Estetyka

W którym momencie strona jest estetyczna? Trudno to precyzyjnie określić, każdy element strony musi być spójny z innymi i wynikać z założonej na samym początku koncepcji. Na to odczucie wpływają różne czynniki, których rozpoznawanie przychodzi z czasem. Z doświadczenia wiem, że w pewnym momencie można odczuć, gdy przesunięcie elementu o 1 piksel poprawi czytelność elementu.

Konkluzja

Nie zrozum mnie źle. Przedstawionych 7 cech nie definiuje czy dana strona jest piękna. Dziś wyjątkowe projekty powstają każdego dnia, ich twórcy nie ograniczają się do utartych zasad. Jeżeli jesteś na etapie poznawania tematu projektowania stron internetowych i masz wrażenie, że ruszasz w nieznane, to powinieneś poznać fundamenty, na których opiera się większość projektów.

Część z wymienionych cech w pewnym momencie stosuje się automatycznie w drodze nabranego doświadczenia i inspiracji. Dlatego polecam na bieżąco przeglądać katalog Awwwards oraz portfolio popularnych grafików na portalu Behance.


Tym wpisem rozpoczynam serie wpisów/porad, które pomogą zrozumieć, na czym polega projektowanie stron internetowych. W przyszłych postach będę analizował każde zagadnienie dokładniej. Zachęcam do subskrypcji newslettera, aby dostawać powiadomienia o nowych wpisach wprost na skrzynkę.

Dodaj komentarz

All rights reserved Łukasz Święciak