Responsywna strona dla kwiaciarni Różany Zakątek

Projekt responsywnej strony internetowej miał w założeniu zbliżyć firmę do klienta oraz być jej wirtualną wizytówką: prezentować ofertę kwiaciarni, ułatwić kontakt z użytkownikiem oraz zamawianie bukietów. Zdecydowałam się na pastelowe kolory oraz dekoracyjne „falbanki” i ciekawą ekspozycję zdjęć, która wyróżnia stronę wśród innych.

Projekt powstał w ramach Case Study.

Strona zawiera następujące sekcje:

• Hero – różany bukiet – nawiązujący do nazwy kwiaciarni oraz logo, chwytliwe hasło oraz przycisk CTA: „Skontaktuj się z nami” angażuje użytkownika od pierwszego wejścia;
• Nasza oferta – w tej sekcji skupiłam się na wizualnym przedstawieniu, jakimi usługami zajmuje się kwiaciarnia: zdjęcia oferowanych produktów oraz krótki opis rozwiewają wszelkie wątpliwości;
• Kim jesteśmy – opis historii i działalności firmy poparty opiniami zadowolonych klientów;
• Blok CTA – angażujący wizualnie blok z chwytliwym hasłem zachęcający do kontaktu z kwiaciarnią;
• FAQ – lista najczęstszych pytań klientów wraz z odpowiedziami;
• Kontakt – informacje kontaktowe, mapa dojazdu oraz formualarz kontaktowy ułatwiający zamawianie w kwiaciarni.

Autorski projekt gry promującej sztukę wśród dzieci i młodzieży.

Pomysł na grę edukacyjną powstał z potrzeby zainteresowania sztuką dzieci i młodzież w wieku szkolnym. Mimo, że gra powstała z myślą o dzieciach, mogą z niej bez przeszkód korzystać także dorośli, którzy lubią układać puzzle i interesują się sztuką.

Pomysł najpierw został spisany i na podstawie opisu powstały pierwsze mockupy Lo-Fi. Następnie została opracowana ścieżka użytkownika w aplikacji oraz poszczególne ekrany. Dobrałam czcionkę i paletę kolorów. Na ich podstawie stworzyłam Mockupy Hi-Fi. Prace nad aplikacją były wykonywane w programie Figma.

Zakres wykonanych prac:

• ramowy opis aplikacji
• stworzenie profilu użytkownika
• zaprojektowanie mockupów Lo-Fi
• opracowanie ścieżek użytkownika
• opracowanie kierunku prezentacji wizualnej
• stworzenie mockupów Hi-Fi

Responsywna strona internetowa typu one-page dla firmy z branży mechaniki samochodowej

Moim zadaniem było odświeżenie i unowocześnienie strony internetowej warsztatu samochodowego z długoletnim doświadczeniem. Identyfikacja wizualna miała pozostać bez zmian, więc miałam do wykorzystania firmowe logo oraz solidną podstawę kolorystyczną, na której ramach zbudowałam identyfikację wizualną. Dodatkowo miałam zaakcentować możliwość wypożyczenia auta zastępczego. Zdecydowałam się na zbudowanie drugiej, spójnej wizualnie strony tylko dla wypożyczalni.

Wróćmy jednak do strony warsztatu. Poprzednia wersja była bardzo prosta, pełniła głównie funkcję informacyjną – krótka opis historii firmy, zakres usług i kontakt. Postanowiłam, że nowa wersja powinna mieć jasno nakreślone sekcje, które dodatkowo zaangażują potencjalnego klienta, zdecydowałam się więc na taki układ:

• sekcja Hero – ciekawy wizualnie obrazek kojarzący się z motoryzacją, krótki tekst jasno informującym gdzie się znaleźliśmy, chwytliwe hasło oraz dwa przyciski CTA: „Poznaj ofertę” oraz „Umów się do nas” angażują użytkownika od pierwszego wejścia;
• Oferta – opis oferty warsztatu w wydzielonych blokach, do każdego elementu oddzielna ikonka spójna z koncepcją wizualną, tytuł i krótki opis usługi zawierający same konkrety;
• O nas – krótki opis firmy, jakie posiada certyfikaty oraz informacja o możliwości wypożyczenia auta na czas naprawy;
• Blok CTA – angażujący wizualnie blok z chwytliwym hasłem zachęcający do umówienia się do warsztatu;
• FAQ – lista najczęstszych pytań klientów wraz z odpowiedziami;
• Kontakt – informacje kontaktowe (adres, telefon) oraz mapa dojazdu, informacja o wypożyczalni aut.

Strona została zaprojektowana w programie Figma z uwzględnieniem zasad responsywności, czyli dostosowania strony do czytelnego wyświetlania na różnych urządzeniach: zarówno na komputerach, tabletach czy smartfonach.

Zakres wykonanych prac:

• zaprojektowanie designu strony internetowej w programie Figma,
• nowy układ strony, propozycje CTA angażujące użytkownika, FAQ,
• instalacja i konfiguracja systemu WordPress ,
• stworzenie layoutu przy pomocy Gutenberg,
• konfiguracja WordPressa
• opieka nad statystykami strony.

Responsywna strona internetowa zrealizowana na zlecenie adwokata z Lublina.

Moim zdaniem było wykonanie eleganckiego, nowoczesnego i „czystego” designu strony internetowej z uwzględnieniem dostarczonych treści i zdjęć z profesjonalnej sesji wizerunkowej. Witryna ma za zadanie pełnić funkcje informacyjną dotyczącą zakresu i sposobu pracy klienta, w subtelny sposób angażując użytkownika. Ważnym aspektem było dostosowanie witryny do różnych urządzeń – przeglądarki internetowej, tabletu czy telefonu.

Zakres prac:

• ułożenie identyfikacji kolorystycznej i typograficznej,
• zaprojektowanie designu strony internetowej w programie Figma,
• propozycje CTA angażujące użytkownika,
• instalacja i konfiguracja systemu WordPress ,
• zakodowanie layoutu w WordPress,
• konfiguracja i opieka nad statystykami strony.

Projekt strony internetowej i aplikacji mobilnej wykonany w ramach kursu z obsługi programu Figma.

Projekt został wykonany podczas kursu internetowego zrealizowanego za pośrednictwem portalu szkoleniowego Udemy. Kurs „Figma UI UX Essentials” prowadzony był przez Daniela Waltera Scotta i jego celem było przybliżenie podstawowych zasad korzystania z programu Figma. Każdy z kursantów podążając za nauczycielem miał za zadanie stworzyć projekt strony internetowej oraz projekt na urządzenia mobilne do wylosowanego przez siebie briefu.

Kurs pokazał mi moc narzędzi programu Figma. Przybliżył po co jest mockup Lo-Fi, jak go stworzyć stworzyć oraz czym różni się od mockupu Hi-Fi. Nauczyłam się robić Moodboard, dobrać odpowiednią czcionkę i kolorystykę do projektu. Tworzyć komponenty i dodawać własne style. Jak stworzyć działający prototyp, zrobić subtelne przejścia między ekranami oraz drobne animacje.

Projekt aplikacji mobilnej wykonanej podczas kursu zaawansowanej obsługi programu Figma.

Projekt został zrealizowany podczas kursu internetowego dostępnego na platformie e-learningowej Udemy. Autorem kursu “Figma UI UX Advanced” jest Daniel Walter Scott, dobrze znany w środowisku szkoleniowym Designer oraz projektant serwisów internetowych i mobilnych.

Zadaniem kursantów było stworzenie aplikacji mobilnej dla wymyślonej firmy z branży eventowej. Do wylosowanego zwierzęcia i rodzaju muzyki mieliśmy zaprojektować działający prototyp aplikacji z uwzględnieniem zadawanych przez prowadzącego zadań.

Ukończenie kursu otworzyło mnie na nowe możliwości zastosowania zaawansowanych zmiennych, np. do tworzenia trybu ciemnego i jasnego aplikacji, zaawansowanych opcji typografii oraz możliwości jakie daje korzystanie w projekcie auto layout. Dodatkowo poznałam inne sposoby tworzenia animacji oraz rozbudowane opcje tworzenia komponentów i wykorzystania ich w projekcie.