Jak zaprojektować atrakcyjną stronę, nie będąc grafikiem?

Definicja programisty front-end stała się obecnie tak szeroka, że w ofertach pracy zaczęto rozdzielać ją na coraz węższe kategorie. W niektórych firmach, poszukiwany jest programista JS, czyli osoba, która świetnie radzi sobie ze wszystkim, co związane z Javascriptem, wie, jak podłączyć się do bazy danych i wyciągać z niej dane i ogólnie, ma doświadczenie w programowaniu. Taką osobę można określić mianem bardziej technicznej, niż zwykły front-endowiec, zajmujący się głównie dłubaniem w CSS i HTML, którego można na potrzeby tego artykułu, nazwać po prostu front-end deweloperem. Jeszcze inne zadania w pracy ma designer czy grafik, który przygotowuje layout, „cięty” później przez front-end dewelopera.

Jeszcze jakiś czas temu, jako taki podstawowy front-end, zanim zabrałem się za zakodowanie przynajmniej linijki CSS’a, zawsze pytałem o to, czy mamy już zaprojektowany wygląd strony i jej poszczególnych elementów, albo wzorowałem się na już istniejących podstronach. Problem takiego front-endowca od CSS i HTML pojawia się wtedy, gdy trzeba stworzyć stronę, a w zespole nie ma grafika, ani nie można też posłużyć się gotowym plikiem PSD. Jeśli spadnie w pracy na Ciebie taki okrutny task, możesz posłużyć się moim krótkim poradnikiem.

Jak zaprojektować stronę „bez lipy”?

Rozmawiaj z zespołem o wymaganiach – zanim stworzysz index.html i podłączysz do niego Bootstrapa, zaczekaj chwilę. Dowiedz się, kto będzie odpowiedzialny za ocenę strony i jej akceptację i zorganizuj spotkanie. Zapytaj o to, jakie podstrony będą potrzebne i jak ma działać strona (one-page czy zwykła strona), oraz wypytaj o poszczególne sekcje. Musisz to wszystko zanotować.

Pytaj o inspiracje – poważny klient, przed zamówieniem strony WWW, zwykle przegląda strony swojej konkurencji. Gdy masz już ustalone wymagania odnośnie do strony – na przykład rozpisane poszczególne sekcje – zapytaj się o to, na jakich innych stronach możesz się wzorować. Często jest tak, że klient powie Ci – sekcję A robimy podobnie jak na stronie X, a sekcję B, jak na Y.

Jeśli firma, dla której tworzysz stronę, ma już logo, może ono posłużyć do ustalenia głównego motywu kolorystycznego strony – będzie to duże ułatwienie.

Dobierz czcionki, które zrobią wrażenie – dobra typografia, to połowa sukcesu strony. Na samym początku prac, powinieneś ustalić czcionkę do nagłówków oraz do treści, ustawić prawidłową interlinię (około 1.4 – 1.5) oraz odstępy po paragrafach i innych elementach tekstowych. Jeśli logo ma charakterystyczny kolor, ustaw go na detalach, na przykład na nagłówkach.

Bootstrap ma domyślnie wybrane czytelne czcionki, ale nie powinieneś ich zostawiać – zbyt dużo jest podobnych stron.

Wybierz świetne zdjęcia – dobrze dobrane zdjęcie w „hero-image”, to druga połowa sukcesu (no może trochę mniej). Dobre zdjęcie w tym miejscu, powinno być:

• W dużej rozdzielczości (dłuższy bok około 2000 px lub więcej)
• Nieco przyciemnione (można też przyciemnić zdjęcie i nadać mu kolor) lub delikatnie rozmyte (gorsza opcja), by było dobrze widać na nim tekst. Możesz też dobrać zdjęcie tak, by w miejscu tekstu, nie miało elementów, które mogłyby zakłócać jego czytelność, lub pod tekstem ustawić background.
• Idealnie – dopasowane kolorystycznie do całej strony.
• Uwaga – zdjęcie nie musi mieć super jakości – odbiorca raczej nie zauważy, że zdjęcie jest nieco skompresowane, a dzięki temu, zaoszczędzisz trochę kilobajtów.

Dobre zdjęcie + duży tekst i jakaś grafika i strona zaczyna robić coraz lepsze wrażenie.

Postawiaj jak pod sznurek – tutaj muszę przyznać się do jednej rzeczy – wolę tworzyć stronę od razu w edytorze, a nie w Photoshopie. Dzięki podpięciu jakiegoś frameworka do grida (Bootstrap, Bulma.css czy Foundation), ustawisz sobie wygodnie elementy i będziesz mógł testować, czy nie pojawiają się problemy, związane na przykład z systemem CMS (ponadto uważam, że Visual Composer powinien być zabroniony). To też najlepsza droga do testowania na mobile i sposób na szybkie pokazanie strony dla zespołu. Poszczególne sekcje możesz sobie rozrysować na kartce

Mały sekret – strona wygląda dobrze wtedy, gdy elementy są poustawiane równo wertykalnie i horyzontalnie. Stwórz kilka sekcji, przyłóż linijkę do ekranu i sprawdź, czy żaden element nie wyłazi z grida.

Strona musi mieć też równe odstępy góra-dół. Oznacza to na przykład, że element section kryjący w sobie poszczególne sekcje strony, zawsze będzie miał stały padding od góry i od dołu. Następnie trzeba zachować odpowiednie odstępy między nagłówkami <hx> oraz paragrafami. Kluczem jest tutaj unikanie lokalnych zmian i dobre ustawienie parametrów na samym początku. Odstępy góra-dół na mobile będą mniejsze, dla tego od razu możesz tworzyć media-queries.

Na tym etapie rozplanuj ustawienie zdjęć, ale zamiast prawdziwych fotek, powstawiaj placeholdery.

Masz już prostą stronę, ze świetnym obrazkiem głównym, przemyślaną strukturą i czytelnie rozmieszczonym tekstem. Jeśli pozmieniałeś kolory poszczególnych sekcji, wygląda ona prawdopodobnie, jak nudne prostokąty poustawiane jeden na drugim. Podczas prezentacji strony, możesz usłyszeć, że „to się wcale nam nie podoba” i „nie o to nam chodziło”. Na pewno pojawiły się też uwagi, dotyczące zmian w treści i zmian układu.

Działamy dalej.

Waloryzacja strony internetowej

Uwaga – dygresja

Podczas sklejania modeli, gdy już połączymy ze sobą wszystkie elementy i wstępnie pomalujemy model, wygląda on płasko, jak zabawka. Wtedy modelarz bierze się za nakładanie kolejnych warstw farby, cieniowanie pojazdu, nakładanie na niego rys i śladów brudu. Po tym procesie, model wygląda jak prawdziwy pojazd. Podobnie będzie z Twoją stroną, po przeprowadzeniu jej waloryzacji. Na ten temat więcej w następnym wpisie.