powrot do case studies
Ambience

Ambience

Minimalizm twórczy. Profesjonalism usług
Czy stworzenie prostej, szybkiej strony na wordpress z animacjami, dobrej jakości zdjęciami jest proste ?

Cele i założenia realizacji

Stworzenie 'prostej' strony internetowej, wczytywanej w kosmicznym tempie. Czy jest to proste do wykonania ? Niestety wcale nie jest takie proste.

My mamy sposoby, a odpowiedź zamknięta jest w odpowiedniej optymalizacji technicznej i kodowaniu Frontend.

Poznaj proces tworzenia strony dla krakowskiego architekta Ambience.

Nasza rola

Zaprojektowanie strony atrakcyjnej wizualnie, użytecznej i intuicyjnej. Jednocześnie zadaniem strony było stworzenie niecodziennego 'efektu maski' przechodzenia warstw na stronie głównej.

Jednocześnie strona wykonując efekt WOW, ma zapadać w pamięć wykonaną grafiką i koncepcją wizualną warstwy UI.

Wdrożenie strony w intuicyjnym systemie CMS Wordpress w taki sposób aby z łatwośćią Klientka mogła dodawać kolejne realizacje i prowadzić bloga.

Etapy realizacji

Dlaczego, co i jak ?

Aby sprostać oczekiwaniom co do stylu i charakteru strony rozpoczęliśmy od etapu przygotowań moodboardów i researchu konkurencji. Znalezione rozwiązania posłużyły do pracy z Klientem i określenia stylistyki dla strony.

Naszym głównym celem było wzbudzenie poczucia nowoczesności i profesjonalizmu świadczonych usług. Wiemy jak ważny jest to aspekt dla każdego projektanta.

Projektowanie UX / UI

Mając gotowy materiał wspólnie z Klientem przeanalizowaliśmy zebrany materiał. Zostały wykonane założenia, określone funkcjonalności i wybrany kierunek do prac nad prototypem i makietami UX.

Projektując każdą z sekcji na etapie prototypowania UX, staraliśmy się odpowiedzieć na pytanie: W jakim celu dana sekcja powstaje, czy zasadne jest jej miejsce na stronie ?

Dzięki temu stworzyliśmy intuicyjne flow komunikacyjne.

Po fazie analizy, przystąpiliśmy do projektowania designu UI strony oraz treści.

Development

Końcowym etapem było wykonanie kodowania html, css, js czyli budowa szablonu html, którego czas wykonania będzie szybki oraz semantycznie poprawnego.

Wdrożenie strony warstwa backend to zaimplementowanie platformy WordPress.

Realizując główny cel kosmicznego wczytywania zagłębilismy się w jej maksymalne przyspieszenie, gdyż to szybkość wczytywania strony wpływa na jej użyteczność i chęć podróży w głąb oferty.

Aby stronadziałała naprawdę szybko, wykonaliśmy cały pakiet optymalizacji technicznej, analizę programami : gtmetrix, Lighthouse. Zostało wykonane m.in :

  • dostosowanie zdjęć do wielkości ekranu pod względem rozmiaru dla bazowych wielkości responsywnych, tak by nie ładować za dużych zdjęć do strony,
  • skompresowanie zdjęć bezstratnie programami typu iocompressor,
  • zastosowanie funkcji lazy loading polegającej na doczytywaniu zdjęć wraz z przewijaniem strony, a nie na start wszystkich co zdecydowanie spowalnia proces wczytania strony,
  • ustawienie wczytywania strony na fontach systemowych, w dalszej kolejności doczytywanie fontów docelowych,
  • optymalizacja i zmniejszenie ilości zapytań do bazy danych Wordpress,
  • minifikacja kodu css i js, czyli realizacja procesu mającego na celu zmniejszenie kodu źródłowego ( usunięcie niepotrzebnych linii kodu ),
  • włączenie cache’owanie strony, które polega na ustawieniu wersji statycznej strony,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Nie masz czasu przeczytać ?

Zakres prac

Prototypowanie UX
Warstwa UI
Kodowanie html, css, js
Backend Wordpress
Optymalizacja SEO
minimalistyczna strona główna w efektem maski
efekt przenikania warstw podczas przewijania strony
projekt podstrony realizacje oraz o mnie
Minimalizm twórczy. Profesjonalism usług

Jak możemy pomóc Ci osiągnąć cele i uczynić Twoją markę lepszą ?