Wielu naszych klientów przychodzi do nas z stronami, które nierzadko są przestarzałe, mimo, że w momencie publikacji ich pierwszych wersji cieszyły oko, z czasem jednak zaczęły wydawać się staromodne. I nic dziwnego, trendy w branży IT, ale i w samym designie bardzo szybko się zmieniają. Nie da się stworzyć uniwersalnego layoutu, który będzie świeży na lata. Co jakiś czas trzeba wymyślić coś nowego, co się wdroży przy okazji wprowadzania nowych funkcjonalności na stronie. Dlatego dzisiaj przedstawiamy 5 porad, które mogą nieco odświeżyć wygląd strony.
1# Backdrop filter to stosunkowo nowy atrybut w CSS, który mimo tego jest już w miarę dobrze wspierany (ponad 90%) i szeroko stosowany, przykładowo na stronach Microsoftu czy Apple. Dzięki niemu można rozmyć tło, dać skalę szarości lub inne efekty nie na sam element, ale właśnie na to co jest za nim, co więcej ten efekt jest dynamiczny co można zobaczyć poniżej.
Jeśli masz na swojej stronie nawigację z półprzezroczystym tłem, warto wzbogacić ją o ten efekt. W przypadku braku kompatybilności będzie nadal półprzezroczyste tak jak wcześniej, jednak w większości przypadków wyświetli się eleganckie rozmycie tła poprawiające czytelność oraz efekt wizualny. Backdrop filter dobrze się sprawdza kiedy chcemy upiększyć jeden kluczowy element, taki jak nawigacja, jednak nie zalecamy nadużywania tej właściwości, ponieważ bardzo obciąża procesor. Użycie tego efektu np. na liście elementów, może ekstremalnie spowolnić działanie strony.
2# Gradienty, kiedyś popularne potem uznawane za relikt przeszłości, a teraz ponownie wzbogacają nowoczesny designy stron. Co się zmieniło? Sposób ich użycia. Dobierając odpowiednie kolory na odpowiednie elementy strony można w prosty sposób nadać świeżości swojej stronie. Takim najprostszym sposobem jest danie gradientu na tło jakiejś karty na stronie, może być to krótkie wprowadzenie lub wyróżniona karta usługi. Dobry efekt można uzyskać dobierając jakiś żywy kolor oraz jego jaśniejszą wariacje, natomiast sam gradient najlepiej jak jest poprowadzony pod ukosem, linearny lub radialny. Oto przykład takiego użycia.
Efekt wydaje się skromny jednak robi sporą różnicę, przede wszystkim karta nie wygląda na płaską, za to sprawia wrażenie podświetlonej, co oddziałuje na podświadomość odbiorcy. Można oczywiście łączyć nie tylko odcienie tego samego koloru, ale i różne kolory jednak to wymaga już pewnego wyczucia, w takim wypadku najlepiej jest się wzorować na czymś gotowym. Można wygooglować frazę „gradient art” i color pickerem pobrać kolory wybranego gradientu. Na podstawie gotowych grafik ma się wgląd w to, jakie kolory ze sobą dobrze współgrają. To jest właśnie ta różnica miedzy tym, jak teraz się stosuje gradienty, a jak kiedyś się to robiło.
3# Większe jest lepsze, większe czcionki, większe przyciski, szersze grafiki, większe odstępy. Większość ludzi przegląda strony internetowe na urządzeniach przenośnych, laptopy i smartfony nie mają dużego ekranu, więc dawanie na stronie tekstu drobną czcionką czy małych przycisków utrudnia przeglądanie treści na tych urządzeniach. Dlatego warto jest pomyśleć o tym, jak można zwiększyć czytelność na takich urządzeniach.
W przypadku tekstu oprócz zwiększenia rozmiaru czcionki ważnym atrybutem jest line-height. Taką optymalną wartością jest 1.5em. W przypadku dużych nagłówków można nawet pokusić się o delikatne zwiększenie wartości letter-spacing o kilka pikseli. W przypadku wstawiania dużych zdjęć warto pamiętać, aby ich rozdzielczość wynosiła mniej więcej tyle, ile faktycznie będzie miała na stronie oraz by było odpowiednio skompresowana. To pomoże przyspieszyć wczytywanie bez znacznej utraty jakości.
Wszystkie elementy klikalne na stronie powinny mieć pewien zapas przestrzeni, czyli padding dookoła. Nawet linki w formie tekstu powinny mieć lekki padding, aby link miał minimum 40px wysokości. W tym przypadku jednak ważne jest, aby padding był wyłącznie na top oraz bottom, nie zwiększy to odstępu między liniami a łatwiej będzie kliknąć w link.
4# Akcentowanie jest elementem dopełniającym, samo w sobie nie polepszy wyglądu strony, ale może być znakomitym uzupełnieniem do reszty. Na początek najlepiej wyjaśnić czego nie robić, a mianowicie, nie należy ręcznie w edytorze CMSa zmieniać koloru tekstu. Przypomina to wtedy ogłoszenia na portalach aukcyjnych, a nie profesjonalnie wykonaną treść. Wszystkie elementy akcentujące kolorem treści muszą być przewidziane w kodzie strony.
Niekoniecznie trzeba zmieniać kolor czcionki, dobrze się sprawdza niestandardowe podkreślenie zrobione za pomocą pseudoelementów lub kwadrat w tle w rogu akapitu. Poniżej kilka przykładów jak do tego można podejść.
5# Nadaj życie stronie za pomocą hover. Elementem, który często jest traktowany po macoszemu, są efekty hover elementów na stronie. O ile linki i przyciski jeszcze zazwyczaj mają taki efekt, aby wskazać, że jest to element interaktywny, tak nie tylko do elementów interaktywnych można stosować efekty hover. Dobrym zabiegiem jest na przykład odsłanianie pewnej części treści po najechaniu na dany element, wprowadza to pewien element tajemnicy i zwiększa ciekawość przeglądania treści.
Motyw z odsłanianiem treści jest często stosowany na stronach, na których chcemy coś zaprezentować, ale przedstawienie wszystkiego prosto z mostu jest przytłaczające, dlatego ukrywa się większość treści i dawkuje się je stopniowo za pomocą odsłanianych popupów, czy innych interaktywnych elementów. Nie ma również obaw o dostępność na urządzeniach mobilnych, ponieważ na ekranach dotykowych tapnięcie w element hover aktywuje go tak, jakby to był efekt focus.
Jako przykład można zmodyfikować jeden z wcześniejszych snippetów i wzbogacić go o efekt obracania się kart w 3d po najechaniu. Jest to trochę kodu do napisania, ale efekt końcowy jest ciekawy. Co prawda nie wszędzie się taki zabieg nadaje, ale jeśli chcemy aby strona była jak najciekawsza, warto rozpatrzyć taką opcję.
Oprócz podanych wyżej porad, warto się zainteresować również gotowymi systemami designu stworzonymi przez profesjonalistów. Takimi systemami są Material Design czy Flat Design. Nie chodzi o to by wszystko robić według twardo ustalonych reguł, ale takie systemy zawierają standardy, które mają odzwierciedlenie w czysto praktycznych i estetycznych aspektach projektowania stron, więc warto te konkretne aspekty wyłapać. Są to przykładowo: sposób doboru barw, wartości odstępów między elementami i sekcjami na stronie czy pewne wzorce odnośnie sprawdzonych układów, rzeczy niewidoczne na pierwszy rzut oka, ale wywierające w efekcie końcowym odpowiednie wrażenie. Jeśli masz wrażenie, że twoja strona niby wygląda ok, ale jest z nią coś nie tak, być może odpowiedź znajdziesz właśnie w podejściu, jakie dają takie gotowe systemy.