powrot do case studies
Abyard

Abyard

Strona generalnego wykonawcy, mocny design UI przyprawiony easingiem animacji
Profesjonalna robota. Czyli co to jest 'easing' i dlaczego strona dewelopera może być 'spicey' na miarę przeglądów awwwards ?

Cele i założenia realizacji

Abyard to ekspert z branży krakowskich deweloperów. Budowa domów i osiedli to ich specjalność, a innowacyjna technologia pozwala skrócić ten czas w stosunku do tradycyjnego budownictwa.

Dotychczasowa strona internetowa nie odzwierciedlała ducha i charakteru firmy. Była też przestarzała.

Nasza rola

Zbudować stronę na miarę profesjonalizmu i technologii produkcji firmy. Zaprezentować markę Abyard w nowoczesny sposób oraz pokazać innowacyjne podejście w procesie deweloperskim.

Uwypuklić przewagę i stosowane rozwiązania. Wprawić w zachwyt użytkownika i sprawić by pozostał na dłużej.

Etapy realizacji

Dlaczego, co i jak ?

Klient już od pierwszych chwil był bardzo sprecyzowany i przygotowany oraz wiedział jakie ma oczekiwania co do strony. Przygotowane wspólnie założenia oraz określenie moodboardów tylko potwierdzały dalszy sprawny proces realizacji strony. Brief ustalony i dopracowany powstał w przeciągu kilku dni co pozwoliło w zankomitej większości czasu pracować już z sprecyzowanymi pomysłami i stylem strony.

Powstał zbiór rozwiązań i koncepcji z których klarował się jasno obraz strony nowoczesnej (na miarę topowych realizacji ze świada nagród branżowych portalu awwwards) w podejściu minimalizmu graficznego. Całość wzbogacona została niesamowitą płynną animacaj z wygładzeniem ruchu tzw. easing motion.

Projektowanie UX / UI

Po etapie konsolidacji danych przystąpiliśmy do budowy makiet UX strony głównej oraz podstron. Strona z założenia minimalistyczna, a właściwie typu portfolio dewelopera to minimum treści i dużo przestrzeni oraz nieszablonowe układy sekcji i duże typo co niezmiernie miło było nam projektować. Podczas współpracy wykonaliśmy 2-3 iteracje na etapie prototypowania UX z Klientem na który potwierdzone zostały wszelkie założenia co do budowy strony wykorzystującej minimum treści i maksimum przestrzeni oraz dużych zdjęć i fontów nagłówkowych.

Finalnie po etapie UX mogliśmy rozpocząć tworzenie warstwy UI.

Prace opraliśmy na stworzonym dotychczas brandingu firmy, który pozwolił na wykorzystanie elementu graficznego tj: rombu, skosu jako głównego motywu graficznego dla strony, co w połączeniu z kolorem czarnym oraz żółtym dało oczekiwany rezultat i zadowolenie z projektu UI.

Strona została zaprojektowana w widokach podstawowych czyli 1366px oraz mobilnych : 768px i 366px gdzie sekcje i graficzne elementy zostały uproszczone.

Development

Strona wyposażona w animacje oraz indywidualny kod: html, css, js działa szybko i mimo implementacji wideo oraz efektów jej czas wczytania i realizacji kodu jest na bardzo dobrym poziomie.

Do dyspozycji Klienta oddaliśmy wdrożony indywidualnie panel administratora CMS Wordpress zbudowany z gotowych predefiniowanych bloków. Dzięki takiemu rozwiązainu administrator może samodzielnie dodawać sekcje i kolejne podstrony realizacji bez potrzeby kontaktu z developerem. Przygotowane zostały sekcje dające możliwość pełnej kontroli nad wyglądem podstron, a mechanizm drag&drop zapewnia wygodę w ustalaniu priorytetów i kolejności sekcji na stronie .

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
Integracja cms Wordpress
Optymalizacja techniczna
Optymalizacja SEO
projekt strony głównej
czytelna i minialistyczna strona główna
duże fonty i nagłówki pomagają w czytelności
lista projektów i realizacji
Strona generalnego wykonawcy, mocny design UI przyprawiony easingiem animacji

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