Microsoft Modern UI, czyli co strona www hotelu może mieć wspólnego z Windows 8

Pojawienie się na rynku nowego systemu operacyjnego Microsoft – Windows 8 wzbudziło niemałą sensację. Prosty, pomysłowy i niezwykle oryginalny interfejs użytkownika, posiadający szerokie możliwości konfiguracji bardzo szybko stał się inspiracją i wytyczył nowy kierunek w designie.  

Microsoft Modern UI (UI od User Interface czyli interfejs użytkownika) to wewnętrzna nazwa kodowa dla języka projektowania, stworzona przez Microsoft i wykorzystywana m.in. w Windows 8. Początkowo interfejs nazywał się Metro UI – nazwa wywodziła się od tego, iż jest on inspirowany znakami obecnymi w infrastrukturze transportowej obecnej np. w metrze. Tym samym Modern UI jest interfejsem zrozumiałym dla niemalże każdego człowieka na świecie. Dzięki modułowej (kafelkowej) konstrukcji, bazującej na kompozycji kolorów i piktogramów, Modern UI charakteryzuje się niezwykłą przejrzystością i elastycznością. Świetna czytelność i blokowa budowa sprawiają też, że doskonale sprawdza się w urządzeniach mobilnych z interfejsem dotykowym (tablety, smartfony).

PROFITROOM, czerpiąc inspiracje z najnowszych trendów w designie, postanowił zmierzyć się z Modern UI i zaadaptować jego podstawy do realizacji witryn internetowych. Inspiracja produktem Microsoft posłużyła nam do zaprojektowania min. strony dla portalu Grupy Trip, Hotelu Dolina Charlotty Resort & Spa oraz Aparthotelu LIV’INN. Nasi graficy zdecydowanie preferują prace twórcze, a nie odtwórcze, stąd też, w zależności od projektu, inspiracja Modern UI jest mniej lub bardziej dostrzegalna. Niezmienne jest jednak to, że każdy z tych projektów został oparty o układ kafelkowy, co dało nam znakomitą bazę do stworzenia nowatorskich witryn.

Grupa Trip

http://www.trip.pl/

Strona www.trip.pl to projekt, który już na pierwszy rzut oka przywodzi skojarzenia z Modern UI. Wyraźny układ kafelkowy, gra kolorów i zdjęć oraz duża przejrzystość, są niewątpliwymi atutami projektu. W ciekawy sposób udało nam się rozszerzyć pierwowzór o efektowne animacje 3D oraz zawartość tekstową, dostępną po odwróceniu kafelków. Modułowa konstrukcja strony głównej dała też świetną bazę do zastosowania animowanego układu responsywnego. W zależności od wielkości ekranu bloki układane są w 7 (laptop), 4 (tablet) lub 2 (smartfon) kolumny, dostosowując się do obszaru ekranu.

Warto też zwrócić uwagę na ciekawy podział tematyczny witryny. Już od samego początku użytkownik strony widzi cztery główne filary działalności Grupy Trip. Są to okienka startowe, które niewątpliwie ułatwiają zgłębienie oferty firmy i dotarcie do właściwej informacji.

Dolina Charlotty

http://www.dolinacharlotty.pl/

Ta witryna to dosyć daleka inspiracja Modern UI i na pewno nie każdy uchwyci ten zamysł na pierwszy rzut oka. Układ kafelkowy posłużył tu do stworzenia oryginalnych mozajek zdjęć, układających się niczym kafelki interfejsu Windows 8. Bloki zdjęciowe pełnią też funkcję elementów interfejsu użytkownika i ich kliknięcie przenosi do odpowiednich stron.

Ten projekt jest świetnym przykładem wykorzystania symboliki zdjęcia (będącego substytutem piktogramu) do przekazu informacji. Zdjęcie foki symbolizuje możliwość przejścia do sekcji poświęconej fokarium, niezwykle barwna papuga prowadzi do zoo, a Carlos Santana zaprasza do zapoznania się z Festiwalem Legend Rocka. To oryginalne rozwiązanie stało się nieodłącznym elementem witryny Doliny Charlotty i sprawia, że nie sposób pomylić ją z jakąkolwiek inną.

Kolejną zaletą tego rozwiązania jest możliwość zastosowania responsywności. Bloki interfejsu użytkownika skalują się, dopasowując do rozmiaru ekranu, a na mniejszych ekranach, układają się w mniejszą liczbę kolumn.

Hotel LIVINN

http://www.livinn.pl/

Projekt witryny Aparthotelu Liv’inn również czerpie ze źródła Modern UI. Charakterystyczne bloki zdjęciowe oraz zachowanie elementów interfejsu nie pozostawiają wątpliwości, że mamy do czynienia z nowoczesną witryną. Tutaj kafle stanowią zarówno elementy designu jak i budują klimat obiektu oraz składają się na interfejs strony. Oryginalny design witryny znakomicie komponuje się z oryginalnymi wnętrzami aparthotelu. Warto zwrócić uwagę na ciekawe animacje podczas ładowania witryny, które podkreślają modułową budowę strony i zwiększają tzw. user eXperience.

Powyższe przykłady pokazują, że Modern UI daje grafikom niemalże nieograniczone możliwości. Estetyczny wygląd witryn wymaga jednak zrozumienia koncepcji pierwotnego zamysłu projektantów z Microsoft, a co za tym idzie – wyklucza bezmyślne kopiowanie wyglądu Windows 8. Obecnie w sieci można odnaleźć sporo bezpośrednich inspiracji systemem giganta z Redmond. Ich cechą wspólną jest próba skopiowania Metro UI w całości i wstawienia na siłę, i bez pomysłu tekstów i zdjęć. Zazwyczaj tego typu praktyki kończą się strasznym bałaganem i niemożnością dotarcia do podstawowych informacji. A przecież u źródeł Modern UI leżało maksymalne uproszczenie designu, pozwalające użytkownikowi na szybkie i sprawne dotarcie do informacji.

Mamy nadzieję, że nasze realizacje staną się dla Państwa inspiracją do modyfikacji Waszych witryn. Należy jednak pamiętać o tym, że każdy obiekt ma swój własny klimat i charakter, a interfejs użytkownika nie może ich zdominować.