Czym jest layout strony internetowej, jak go stworzyć i ile kosztuje?

Nie chciałbym tutaj nikomu umniejszyć, ale uważam, że projektowanie layoutów stron internetowych można bez problemu zaliczyć do sztuki. Poza tym, że wiele z nich naprawdę przypomina prawdziwe dzieła, takie layouty oprócz samego wyglądu, powinny spełniać pewien zestaw cech. Layout ma za zadanie przyciągać uwagę (choć nie nadmierną) i dobrze się prezentować. Przede wszystkim powinien być funkcjonalny i pozwalać na sprawne realizowanie celów strony (np. na sprzedaż). Czcionki powinny być czytelne, a jego układ dopasowany do najnowszych standardów z zakresu UX. Co więcej, całość powinna być skrupulatnie przemyślana pod konkretną strategię SEO.

Stworzenie dobrego layoutu to bez wątpienie nimałe wyzwanie. W tym wpisie opiszę, czym w ogóle jest layout, ile może on kosztować, a także jakie rzeczy warto uwzględnić na etapie jego projektowania.

Czym jest layout strony internetowej?

Layout strony internetowej jest po prostu jej warstwą wizualną, która składa się na wygląd całego serwisu. Elementami layoutu są między innymi rzeczy takie jak typografia (dobór czcionek), grafiki, czy nawet sama kolorystyka.

Ile kosztuje layout strony internetowej?

Zgodnie z tym, o czym pisałem przy okazji wpisu “Jaki jest koszt strony internetowej“, muszę przyznać, że ciężko przedstawić jednoznaczne widełki. Wszystko tak naprawdę zależy od konkretnych potrzeb, oraz od osoby lub firmy, która realizuje nasz projekt. Najtańszy “współdzielony” layout strony można kupić już za około kilkadziesiąt złotych (jest też całkiem sporo darmowych). W takim przypadku należy jednak liczyć się z tym, że taki layout nie będzie indywidualny, ani najprawdopodobniej nie będzie od razu w pełni dopasowany do naszych potrzeb. Co więcej, w przypadku popularniejszych szablonów, prawdopodobnie w internecie znajduje się już co najmniej kilka-kilkanaście tak samo wyglądających stron.

Indywidualny projekt wraz z całym wdrożeniem to kwoty zaczynające się zwykle od około tysiąca złotych, sięgające spokojnie do nawet kilkunastu tysięcy złotych. Oczywiście da się to zrobić zarówno taniej, jak i znacznie drożej – wszystko zależy przede wszystkim od naszych oczekiwań.

Jak stworzyć layout strony internetowej?

Tutaj szkół jest naprawdę mnóstwo. Większość profesjonalistów przy takiej pracy zaczyna od projektu graficznego. Taki projekt może być przygotowany między innymi w programach takich jak Sketch, Photoshop, czy Lunacy. Gotowy projekt należy później odpowiednio pociąć i zakodować tak, żeby nie był jedynie statycznym obrazkiem, a w pełni funkcjonalną stroną internetową. Przydać się może tutaj znajomość HTML, CSS, a także JavaScript, czy nawet PHP. W przypadku mniej skomplikowanych layoutów wiele osób pomija etap projektu i wizualizuje go sobie w głowie, a później od razu pisze gotowy szkielet strony, który później odpowiednio dopasowuje do indywidualnych preferencji. Na dość podobnej zasadzie powstał nawet layout webporady.pl, który jak sam widzisz – nie należy do specjalnie złożonych – dlatego właśnie postanowiłem oszczędzić czas na projektowaniu, zwłaszcza ze względu na to, że lepiej niż w programach graficznych czuję się mimo wszystko w kodzie.

Co uwzględnić przy tworzeniu layoutu strony internetowej?

Pomyśl przede wszystkim o użytkowniku

Świetnie wyglądający layout na pewno wywrze wrażenie na niejednej osobie, która odwiedzi Twoją stronę. Niemniej, ważna jest także jego funkcjonalność i sama wygoda użytkowania. Powinieneś zadbać o odpowiedni kontrast, wyróżnienie klikanych elementów i inne istotne elementy z zakresu UX. Bardzo ważne jest też dostosowanie swojego szablonu do obsługi przez osoby niepełnosprawne.

Dostosuj stronę do urządzeń mobilnych

Niektóre witryny notują nawet ponad 90% ruchu z urządzeń mobilnych. Nie są to jednak kompletne wyjątki, bo na wielu stronach internetowych mobilne urządzenia stanowią około połowy całkowitych wyświetleń. Z tego względu, nie jest to jakaś mniejszość i warto zadbać o to, żeby nasza strona internetowa była w pełni responsywna – nawet kosztem fenomenalnego wyglądu i zaawansowanych animacji.

Zadbaj o konwersję

Jako użytkownik jestem wielkim fanem ciemnych szablonów. Sam dbam o to, żeby moje strony internetowe, na których użytkownicy spędzają dużo czasu, miały przynajmniej opcjonalną możliwość włączenia ciemnego motywu (być może kiedyś pojawi się on także na webporady.pl). Zaobserwowałem jednak, że zdecydowana większość największych sklepów internetowych i ogólnie bardziej sprzedażowych witryn używa jednak jasnego, najczęściej białego tła. Powodu nie musiałem szukać zbyt długo – podejrzewam, że jest to spowodowane przede wszystkim chęcią osiągnięcia większej konwersji za sprawą tego, że produkty bardziej rzucają się w oczy – nie bez powodu zresztą strony największych sklepów są zwykle dość minimalistyczne i pozbawione nadmiernych bajerów.

Pomyśl o SEO

O tym jak świetnym ruchem jest ten z wyszukiwarek, piszę pewnie w średnio co drugim wpisie. Tym razem więc sobie daruję i napiszę tylko, że warto zadbać o elementy strategii SEO już na etapie projektowania layoutu (warto to skonsultować z kimś, kto będzie odpowiedzialny za całe SEO). Układ menu, struktura linków, czy wkomponowanie nagłówków to tylko niektóre z rzeczy, o których warto pomyśleć na etapie przygotowania się do projektowania layoutu. Jeśli będziesz chciał wykorzystywać na swojej stronie np. menu okruszkowe, też warto mieć to na uwadze odpowiednio wcześniej, by dobrze wkomponować je  jakoś w cały projekt. Warto zastanowić się także nad tymi rzeczami jeszcze przed rozpoczęciem projektu, żeby później nie wykonywać tej samej pracy dwa razy, tym bardziej że gruntowne zmiany związane z SEO na stronie potrafią być naprawdę czasochłonne.