Szczegóły

03 sierpnia 2024

Prosta, ale przykuwająca oko strona internetowa? Oto, jak kilkoma kreatywnymi trikami stworzyłam projekt, który nadał stronie CodeCraft wyjątkowy charakter.

Wytyczne – świeże spojrzenie

Firma CodeCraft zgłosiła się do mnie w trudnej sytuacji — poprzedni grafik, u którego zamówili oni projekt swojej nowej strony, niestety nie spełnił ich oczekiwań, dlatego potrzebowali świeżego spojrzenia. Wymagania co do stylistyki były jasne: nowa strona miała być minimalistyczna, ale przykuwająca wzrok. Jako firma działająca w sektorze IT, CodeCraft chciało, aby ich strona była nowoczesna i skierowana do młodych, ambitnych klientów. Główne cele strony to budowanie zaufania do marki oraz zachęcenie do skorzystania ze sklepu z materiałami edukacyjnymi. Projekt miał być zrealizowany na Wordpressie przy użyciu Elementor Pro.

 

Odważny design system

Pracę jak zawsze rozpoczęłam od stworzenia design systemu odzwierciedlającego założenia marki. Wybrałam kolorystykę oddającą minimalistyczny charakter — biel i szarości — z akcentami limonkowej żółci, która przykuwa wzrok do buttonów oraz banerów reklamowych. Dla przełamania monotonii dodałam jasnobłękitne elementy. Dodatkowo wybrałam siedem pastelowych odcieni z całej gamy barw, które posłużyły jako subtelne wyróżniki dla elementów takich jak tagi na blogu. 

Przy projekcie standardowo zastosowałam 12-kolumnowy podział pozwalający na bezproblemowe zbudowanie responsywnej strony.

 

Projekt kluczowych zakładek

Na podstawie wypracowanego design systemu stworzyłam projekt trzech kluczowych zakładek: strony głównej, oferty oraz bloga. Znalazły się tam sekcje takie jak:

• Oferta kursów, 
• CodeCraft w liczbach, 
• Opinie kursantów,
• banery reklamowe zachęcające do przejścia do sklepu.

Kolor limonkowy użyłam przede wszystkim przy buttonach oraz banerach, które jako elementy zachęcające użytkownika do podjęcia działania, powinny najbardziej rzucać się w oczy.

Zdjęcia koncentrują się na zadowolonych klientach, podświadomie budując pozytywne skojarzenia i zaufanie do marki. Aby urozmaicić ich wygląd, zastosowałam cienkie ramki i zaokrąglone narożniki, które nawiązują stylem do przycisków.

 

Baza wiedzy

Na szczególną uwagę zasługuje “Baza wiedzy”. Przygotowane wcześniej pastelowe kolory akcentowe znalazły tutaj zastosowanie przy tagach — mają one za zadanie wyróżnić konkretne tematy postów, jak również urozmaicić wizualnie podstronę. W bocznej kolumnie umieściłam baner reklamowy zachęcający do przejścia do sklepu — subtelne, ale skuteczne rozwiązanie zwiększające wyświetlenia sklepu.

 

Podsumowanie

Cały proces, od pierwszego kontaktu, przez projektowanie i modyfikacje, aż po dostarczenie pliku w Figmie, zamknął się w tygodniu. Efekt? Nowoczesna, minimalistyczna strona internetowa, która przyciąga uwagę i wzmacnia charakter marki CodeCraft.

Szczegóły

11 stycznia 2023

Brief

Oskar Sauna to firma działająca na terenie Niemiec, zajmująca się sprzedażą saun i jacuzzi. Ich dotychczasowy sklep internetowy zbudowany był na bazie gotowego szablonu. Celem naszej współpracy było stworzenie dedykowanego, nowoczesnego projektu, który swoim stylem wpasowałby się w gust niemieckiego klienta. Zlecenie nie obejmowało projektowania procesu zakupowego, a jedynie główne zakładki strony.

Kolorystyka inspirowana zimową Finlandią

Zaczynając od kolorystyki strony, zachowałam barwy pomarańczowe oraz błękitne nawiązujące do logo firmy. Pomarańczowy stał się kolorem akcentowym dla buttonów, natomiast szary oraz biel zagościły jako tło dla strony - bardzo spodobało mi się to połączenie przywodzące na myśl zimowe krajobrazy Finlandii, kraju odpowiedzialnego za popularyzację saun.

Karta produktu 

Jednym z kluczowych elementów karty produktu było zaprojektowanie funkcji personalizacji sauny. Użytkownik jeszcze przed dodaniem sauny do koszyka, bez potrzeby wertowania sklepu, powinien móc wybrać dodatkowe usługi bądź akcesoria. Przewidziane zostały dwa przypadki (które stosować można wymiennie, razem bądź tylko jedną z nich):

1. możliwość wielokrotnego wyboru, przewidzianego przede wszystkim dla akcesoriów i usług,

2. pojedynczego wyboru z rozwijanej listy, w przypadku wyboru wariantu stylistycznego sauny, np. koloru drewna.

 

O firmie - elegancka alternatywa dla 'ściany tekstu'

Zakładkę o firmie, która dotychczas zawierała jedynie ścianę tekstu, podzieliłam na 4 odrębne sekcje tematyczne, każdą urozmaicając graficznie. Wyróżniłam za pomocą ikon i wypunktowań najważniejsze cechy, jakimi może się pochwalić Oskar Sauna - jeśli jest jedna rzecz, jaką potencjalny klient powinien zapamiętać z tej strony, to właśnie te hasła reklamujące wysoki poziom usług. Nie zabrakło również miejsca na nastrojowe fotografie.

 

Podsumowanie procesu

Proces projektowania rozpoczęłam od przygotowania strony głównej. Ten pierwszy etap jest jednym z najważniejszych, jako że stanowi on punkt wyjściowy do opracowania 'key visuala', czyli stylistyki, dla całej strony. Określane są kluczowe graficzne elementy, takie jak kolorystyka, hierarchia tekstów, styl zdjęć oraz ikon, buttony, ozdobne motywy. Dopiero po akceptacji przez klienta strony głównej, przeszłam do projektowania pozostałych podstron. Kiedy i te projekty zostały akceptowane, stworzyłam widoki na urządzenia mobilne.

 

 

 

 

 

 

Szczegóły

19 listopada 2022

Brief

Firma PBS zajmująca się prowadzeniem badań statystycznych, zgłosiła się w celu odświeżenia graficznego ich panelu badawczego. Strona miała przejść drobne zmiany w nawigacji, ale głównym celem było unowocześnienie grafiki i dostosowanie jej do nowego Key Visuala marki. Nowa szata graficzna miała bazować na dostarczonych przez zleceniodawcę grafikach wektorowych.

Docelowym użytkownikiem strony jest osoba młoda - potencjalny panelista, który za pomocą tej strony powinien dowiedzieć się podstawowych informacji na temat usługi oraz móc zarejestrować się do panelu badawczego.

Dotychczasowa strona

W pierwszej kolejności zapoznałam się z dotychczasowym wyglądem strony, aby zdiagnozować główne wady designu:

• ciemne, przygnębiające tło - osobiście przywodziło mi ono na myśl burzowe niebo i nie napawało ekscytacją,
• informacje o panelu przedstawione były w suchy, nieciekawy wizualnie sposób,
• przytłaczająca strona FAQ - niemal 30 pytań ułożonych w wysokiej kolumnie, która zdawała się ciągnąć w nieskończoność. Do tego biały tekst na ciemnogranatowym kolorze męczący wzrok,
• za małe przyciski w menu w wersji mobilnej strony - utrudniające trafienie w wybraną zakładkę.

Zebrawszy informacje z briefu klienta oraz własne obserwacje, mogłam rozpocząć prace nad projektem graficznym.

 Nowy projekt strony

Nowa strona nie wstydzi się odważnych barw - zielonego i niebieskiego, które jako kolory akcentowe mocno kontrastują na tle błękitnego tła. Swoje miejsce znalazł także firmowy granat, który stał się głównym odcieniem dla tekstu. 

Informacje o panelu rozdzieliłam na kilka sekcji podzielonych tematycznie. Teraz jednym spojrzeniem można zapoznać się ze statystykami firmy. Sekcję o firmie urozmaiciłam wektorową grafiką. Instrukcję rejestracji podzieliłam na kroki i opatrzyłam minimalistycznymi ikonami. 

Również sekcji FAQ nie pozostawiłam bez zmian. Zapoznałam się z listą pytań i podzieliłam je na 3 główne tematy. Dzięki temu użytkownik może od ręki wybrać interesujący go dział i nie przekopywać się przez ogrom różnorodnych pytań. Zrezygnowałam również z nieczytelnego ciemnego tła, zastępując je czystą bielą.

Na dół strony głównej trafił prosty formularz kontaktowy z możliwością wyboru tematu z listy.

Nowy widok logowania na pierwszym miejscu stawia opcję logowania za pomocą Facebooka - według informacji klienta jest to najczęściej wybierana przez panelistów opcja. Poniżej dopiero można skorzystać z formularza logowania za pomocą adresu e-mail.

Podsumowanie

Ostateczna wersja graficzna strony została zaakceptowana z niewielką liczbą poprawek. Wszystko udało się wykonać w wyjątkowo krótkim terminie ze względu na zbliżające się wtedy targi, na których nowa strona miała zadebiutować.