Ambience

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,

‍