Top 5 trendów: projektowanie stron

Paulina Kaminska
Paulina Kaminska
April 15, 2017
Top 5 trendów: projektowanie stron

Czytasz te słowa, bo z pewnością lubisz przeglądać listy typu “Top najlepszych trendów na cokolwiek”, “100 rzeczy, które musisz zrobić przed śmiercią”. Ja też! Takie treści po prostu nas przyciągają. Jednak zanim zaczniesz czytać poniższy artykuł zapamiętaj jedno zdanie: “Czy mój sklep rzeczywiście tego potrzebuje?”. Jeśli przy większości punktów odpowiesz przecząco, potraktuj tę listę jako ciekawostkę, może któryś z twoich znajomych jej bardziej potrzebuje. Natomiast jeśli zdarzy ci się choć raz powiedzieć “tak” - to znak, że nadszedł moment by zakasać rękawy i wziąć się do roboty.

1. One page

Na początku zacznijmy od zdefiniowania tego czym jest one page. Mówiąc najprościej, one page to taki typ strony, która nie zawiera żadnych podstron (osobnej strony z danymi kontaktowymi, informacjami o firmie itd.), a wszystkie informacje znajdują się na pojedynczej, długiej stronie. Na takiej stronie zazwyczaj nie znajdziemy menu, które odeśle nas do poszczególnych zakładek, a jeśli już się pojawi, po kliknięciu w dany element trafimy najczęściej do sekcji poniżej. Na one page’u odbiorca mniej klika, a więcej porusza się poprzez przesuwanie strony w dół (scrolluje). W stronie typu one page (podobnie jak w przypadku landing page’a), chodzi głównie o to, by jak tylko to możliwe nie rozpraszać uwagi odbiorcy.Czym zatem różni się one page od landing page? Landing page jest wykorzystywany najczęściej do przekierowania odbiorców z reklamy. Landing page w ecommerce i nie tylko, jest tworzony do jednego celu: zbierania leadów, rejestracji do newslettera, czy sprzedaży jednego produktu. One page natomiast może pełnić funkcję strony głównej.Projektowanie tego typu stron wiąże się z przede wszystkim z dwoma faktami: spadkiem czasu jaki spędzamy na stronach www oraz coraz częstszym korzystaniem ze smartfonów do przeglądania Internetu.Dlaczego warto zainwestować w one page websites?

  • łatwiejsza nawigacja
  • content jest skondensowany=bardziej czytelny
  • łatwiej dostosować stronę do mobile
  • łatwiej jest stworzyć na stronie wizualną opowieść

W przypadku projektowania e-sklepów wykorzystywane są elementy one page’y, ale można znaleźć przykłady typowych tego typu stron, np. sklepów sprzedających pojedyncze, unikalne produktu.

2. Mobile

Dostosowanie strony do wyświetlania się na ekranach wszystkich urządzeń można nazwać już bardziej standardem niż trendem. Nawet jeśli twoi klienci częściej dokonują zakupów za pomocą komputera, na pewno przeglądają sklep również przy użyciu smartfonów i tabletów. Nie ma żadnego racjonalnego powodu, żeby im to utrudniać - trzeba więc zainwestować w stronę dostosowana do mobile!

3. Duże zdjęcia/video w tle

Nie jest to do końca nowość, ponieważ ten trend jest zauważalny już od pewnego czasu. Na pewno jest to jednak moda rosnąca w siłę i coraz częściej można spotkać właśnie duże, bardzo dobrej jakości zdjęcia, służące jako tło strony (nie tylko w e-commerce). Jego istnienie nie bierze się też bez przyczyny - mózg przetwarza informacje wizualne 60,000 razy szybciej niż tekstowe, a ludzie zapamiętują 80% tego co widzą i robią, 20% tego co czytają i tylko 10% tego co usłyszą. Po prostu tak działa ludzka percepcja - zwracamy uwagę na to co estetyczne i ładne. Dlatego też czymś naturalnym stało się wykorzystywanie tego w designie.

źródło: www.cambriawines.com

Duża typografia…

...zamiast zdjęcia w tle! Jeśli spojrzymy na powyższy punkt może się to wydawać dosyć dziwne, ale chodzi głównie o sposób na wyróżnienie się z tłumu. Jeśli w większości przypadków mamy do czynienia z dużym zdjęciem w tle, minimalistyczny design z wyraźną i oryginalną typografią wydaje się być dobry rozwiązaniem. Jednak wahałabym się z zastosowaniem tego zabiegu w przypadku e-commerce. Wszystko zależy rzecz jasna od tego, co sprzedajesz. W przypadku e-sklepu zdjęcia grają na stronie główną rolę, a typografia może być elementem dodatkowym, ale zdecydowanie nie jedynym (tak jak na obrazku poniżej).

Źródło: www.newwavecompany.co

Minimalizm

Mniej znaczy więcej - ta zasada na dobre zadomowiła się w nowoczesnym projektowaniu stron. Nikt już nie boi się białych, pustych przestrzeni, a nawet lepiej - uchodzą one za coś eleganckiego. Prostota w projektowaniu stron www stała się po prostu odpowiednikiem dobrego stylu. Ten trend jest najbardziej widoczny w przypadku e-sklepów z ubraniami, biżuterią, czy dodatkami, ale sprawdzi się w każdym biznesie, szczególnie zaś w w przypadku tych firm, które kierują swoje produkty do młodego pokolenia. Myślę też, że minimalistyczny design w przypadku e-sklepu pomaga w bardzo istotnej sprawie. Eliminując wszystkie niepotrzebne elementy i graficzne fajerwerki sprawisz, że to co najważniejsze - czyli twoje PRODUKTY - będą wyróżnione.

Co myśleć o tych wszystkich trendach? Na pewno trzeba je śledzić, ale na pewno nie warto na ślepo podążać za wszystkim, co można zobaczyć w Internecie, także u konkurencji ;-) W przypadku e-sklepu strona musi być przede wszystkim funkcjonalna. Część wymienionych przykładów staje się aktualnie standardem, np. dostosowanie do mobile. Pamiętaj bowiem o tym, że można mieć ładne zdjęcie, jednak jeśli twój potencjalny konsument będzie miał problem ze złożeniem zamówienia w niczym nam ono nie pomoże.

przeczytaj także

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.