Udostępniamy za darmo, nowy szablon STANDARD "4" - minimalistyczny wygląd, w dopracowanej stylistyce
Zespół IdoSell Shop WD Conversion Lab z dumą prezentuje, stworzony przez siebie, nowy szablon Standard "4". Powstał on jako suma najlepszych cech i rozwiązań dotychczasowo powstałych szablonów standard, z uwzględnieniem i naciskiem na prezentowanie treści i opisy produktów, a także ich zdjęcia. Wszystko w duchu rozwoju szablonów pod kątem Mobile First. Teraz każdy sklep internetowy w IdoSell Shop może korzystać ze STANDARDU 4.
Jak to zrobiliśmy?
Jako wzorcowy szablon wyjściowy przyjęliśmy szablon Standard Catalog, jako najczęściej wybierany szablon dla wdrożeń indywidualnych, przy założeniu, że głównie skupiamy się na prezentacji treści i zdjęć produktów. Główne punkty układu informacji do opracowania nowej wersji szablonu mieliśmy zdefiniowane.
Drugim wzorcem, który posłużył nam podczas prac projektowych, został szablon Standard Fashion. Ten szablon, jest jednym z najchętniej wybieranych szablonów z uwagi na swój praktyczny i pożądany minimalizm, który sprawdza się nie tylko w branży modowej, ale także w wielu innych. W naszych rozważaniach projektowych uwzględniliśmy także doświadczenia naszych Klientów, którzy w konkretnych sposób przekazują nam informacje i wrażenia z użytkowania szablonów standard.
Na czym się skupiliśmy?
- Architektura Informacji (linki, teksty)
- Wygląd (design, kolory, proporcje)
- Funkcjonalność (działanie, procesy)
- Użyteczność (czytelność, dostępność)
- Typografia (font, wielkość, wysokość linii, tracking)
- Interfejs użytkownika (przyciski, zakładki, harmonijki)
- Treść (strategia, przekaz, marketing)
- Mobile first (użytkownik mobilny traktowany jako priorytetowy)
Minimalizm - słowo klucz
Popularność minimalizmu i flat designu obecnie jest niezaprzeczalna. Niektórzy starają się wytłumaczyć ten trend coraz bardziej stylowym wyglądem interfejsów w systemach operacyjnych i aplikacjach, my dorzucamy do tego także wygląd sklepów internetowych.
Jednolite tło i wyraźny tekst – najczęściej dobrane tak aby harmonijnie wyglądały na wyświetlaczu i od razu rzucały się w oczy. Duże przestrzenie, a także operowanie przestrzenią i zredukowana do minimum lub achromatyczna kolorystyka – to główne cechy minimalistycznego nowego szablonu Standard 4.
Podczas prac projektowych nie chodziło nam o to aby, szablon wyglądał jak niesformatowany dokument, nie miał grafiki ani kolorów tylko o to, żeby wszystko było wykonane stylowo zgodnie z zasadą: mniej to więcej.
Główne cechy designu nowego szablonu:
- białe tło,
- spore marginesy i operowanie przestrzenią,
- mała ilość (wręcz brak) elementów ozdobnych,
- zredukowana najczęściej achromatyczna kolorystyka,
- zwięzły i konkretny przekaz,
- operowanie tekstem i fontami,
- brak nachalności (pop-upów, migających elementów, natrętnych animacji)
Strona techniczna szablonu - Mobile First, RWD - co jeszcze?
W pierwszym etapie projektu została przeprowadzona analiza obecnych szablonów standard oraz potencjalnej grupy docelowej. Na podstawie jej wyników przyjęto założenia realizacyjne. Najważniejszym z nich było stworzenie szablonu uwzględniającego przede wszystkim najbardziej aktualną wiedzę zespołu IdoSell Shop dotyczącą UX/UI.
Kolejnym istotnym wymaganiem było zapewnienie responsywności w szerokim zakresie rozdzielczości ekranów - z naciskiem na szczególnie dopracowany mobile, aż do ekranów o rozdzielczości powyżej Full HD.
To co stało się już standardem, czyli RWD - zdolność szablonu do przystosowania wyglądu do wielkości urządzenia, na którym jest wyświetlana. Wygląd sklepu, w którym zainstalowana jest taka maska zmienia się, aby zawsze pokazać Twoją ofertę w sposób przejrzysty i umożliwić łatwe złożenie zamówienia niezależnie, czy odbywa się to na telefonie, tablecie, laptopie, czy stacjonarnym komputerze z dużym monitorem.
Mobile First to kolejna rzecz jaka nam przyświecała podczas planowania prac i projektowania rozwiązań z myślą o użytkownikach mobile. Obecnie po smartfony użytkownicy sięgają częściej, niż korzystają z komputerów desktop. Dlatego też, już od dawna nasze szablony sklepów są dobrze zoptymalizowane pod kątem UI, formularze są wygodne w użytkowaniu, liczba czynności jaką należy wykonać podczas zakupu jest zoptymalizowana, a płatności nie powodują problemów. Wszystkie te rozwiązania i dobre praktyki zostały uwzględnione w nowej wersji szablonu Standard RWD 4.
Kolorystyka i styl graficzny zostały dobrane tak, aby były zgodne z najnowszymi trendami w dziedzinie webdesignu. Prosta kolorystyka oparta na czerni i bieli oraz utrzymany styl tzw. Flat Design pozwalają maksymalnie eksponować wysokiej jakości zdjęcia towarów i prezentowany asortyment. Największe atuty tego szablonu to: przejrzystość, prostota, ekspozycja zdjęć towarów.
Układ szablonu
To czym, odróżnia się STANDARD RWD 4 od pozostałych szablonów, to sposób prezentacji produktów i treści. Sam układ, to najczęściej stosowane rozwiązanie jednokolumnowe pozwalające na najlepszą prezentację i odbiór zawartości strony. W topie szablonu bardziej wyeksponowane zostało logo sklepu, dzięki czemu bardziej przykuwa wzrok odbiorcy. Poniżej, znajduje się nasze dobrze znane menu główne z intuicyjną nawigacją. W szablonie STANDARD RWD 4 główna strefa banerowa nie jest ograniczona kontenerem dla treści strony i rozciąga się na całą szerokość ekranu. Filtry listy zostały przeniesione nad wyniki wyszukiwania. Strefę banerową można umieścić pomiędzy produktami na liście. Takie rozwiązanie pozwala skupić uwagę na konkretnym produkcie, czy szczególnej cesze towarów lub usług w sklepie internetowym. Karta towaru w STANDARDZIE RWD 4 otrzymała innowacyjny wygląd, zrywając z dotychczasowym układem na rzecz wyeksponowania wizualnej części produktu.
Czytelność interfejsu
Projekt musi dawać do zrozumienia co można kliknąć, co można rozwinąć, przewinąć. Jeżeli po najechaniu danego elementu w menu rozwija się pod-menu warto to zaznaczyć “dziubkiem” w dół. Szczegóły, które kumulując się wywierają dobre albo złe wrażenie. Projektując nowy szablon chcieliśmy, aby tych pozytywnych wrażeń było jak najwięcej.
Czytelny interfejs minimalizuje błędy użytkownika, ułatwia decyzje związane z poruszaniem się po stronie a odpowiedni projekt wręcz kieruje użytkowników zgodnie z ich zamierzeniami. Taki jest właśnie nowy Standard RWD 4.
Lista produktów
Wzorem szablonu Standard Catalog, przyjęliśmy, że ekspozycja zdjęć produktów w połączeniu z czytelnymi i dostępnymi filtrami jest tutaj kluczowa. Ta kombinacja daje statystycznie najlepsze efekty w sprzedaży produktów. Dzięki zachowaniu minimalizmu tej strony udał się to osiągnąć, skupiając uwagę użytkownika na ww najważniejszych elementach, jednocześnie zachowując pełną funkcjonalność dotychczasowych list z szablonów standard.
Karta produktu
Zawiera szereg ulepszeń i nowych rozwiązań jakie staramy się wypracować dla naszych klientów. Jest to m.in. ulepszony układ informacji, lepszy dostęp do miniatur zdjęć produktów. Uproszczona ekspozycja detali produktu oraz opcji jego konfiguracji. Większe zdjęcie główne produktu. Zupełnie nowe opinie klientów oraz szereg innych mniejszych usprawnień.
Optymalizacja szablonu
Nie zapomnieliśmy także o wydajności i osiągach, badania pokazują, że głównym czynnikiem porzuceń jest w pierwszej kolejności, szybkość ładowania strony. Nowy szablon powstał w oparciu o zupełnie nowy kod nazwany "v3" i rozwiązania, dzięki czemu notujemy 97% ocenę na Google PageInsight tak jak w przypadku Standardu "3".
Podsumowanie zalet nowego szablonu:
- łatwość zwracania uwagi na kluczowe treści,
- elastyczność prezentacji i łatwy sposób skalowania,
- możliwość dotarcia do szerokiej grupy odbiorców,
- kontrast z publikacjami zawierającymi nadmiar informacji,
- neutralność projektu i szerokie możliwości stosowania,
- uproszczona nawigacja ułatwiająca poruszanie się po stronie.
- Mobile First
- szybkość działania (zoptymalizowany kod)
Chcę nowy szablon, co mam zrobić?
Nowy szablon Standard RWD 4 dla wszystkich naszych klientów będzie można pobrać w swoim panelu zupełnie za darmo, bez jakichkolwiek opłat. W przypadku przełączenia się z innego szablonu, niektóre elementy mogą wymagać niewielkich zmian i korekt w wyświetlaniu dlatego też, zalecamy, aby nasz specjalista przygotował takie przejście w sposób profesjonalny i bezproblemowy.
Jeżeli korzystasz z indywidualnego szablonu i chciałbyś przenieść usprawnienia z nowej wersji Standardu RWD 4 do siebie, informujemy, że mogą wystąpić zmiany w strukturze kodu, które nie będą możliwe do przeprowadzenia w prosty i szybki sposób. Zalecamy w takim przypadku przeprowadzenie pełnego redesignu.