Skeumorfizm | Blog X-Coding
skeumorfizm

Skeumorfizm

13.05.2015 / / E-Commerce

Skeumorfizm jest odmianą projektowania, polegającą na odwzorowaniu wyglądu jednej rzeczy w innym przedmiocie. To rozwiązanie stosuje się, by podpowiedzieć użytkownikom do czego służy dany element, tak by spotykając się z czymś nowym nie musieli zgadywać jak to działa. Przykładem jest czajnik elektryczny, zamieszczony poniżej. Aby nie było wątpliwości, że to właśnie czajnik, zaprojektowano go tak, aby wyglądał jak stare, znane ludzkości od lat egzemplarze.

Czajnik - skeumorfizm

Skeumorfizm zyskał popularność również w projektowaniu stron internetowych. Najczęściej stosowano go, gdy internet był jeszcze nowością i nie wszystkie możliwe operacje były czymś oczywistym. Z tego powodu wiele przycisków na stronach internetowych wygląda na wypukłe – by przypominały fizyczne obiekty, możliwe do naciśnięcia.

Aktualnie coraz większą popularnością cieszy się Flat design (o którym pisałem w artykule Flat design, czyli aktualny trend w projektowaniu). Polega on na odejściu od skeumorfizmu, na korzyść prostych interfejsów i minimalistycznego stylu. Głównym argumentem przemawiającym za tą zmianą kierunku projektowania jest fakt, iż użytkownicy internetu czy urządzeń mobilnych przywykli już do dostępnych funkcjonalności i nie potrzebują dodatkowych wskazówek, jak z nich korzystać.

Wiele osób wróży koniec projektowania skeumorficznego. Moim zdaniem jest to duża przesada i jeszcze wiele lat będziemy mieli do czynienia ze stronami zaprojektowanymi z odwzorowaniem fizycznych obiektów. Wciąż dla wielu osób takie rzeczy jak Internet czy smartfony to nowość, a dodatkowo wiele takich elementów stało się rzeczami oczekiwanymi od użytkowników (np. wygląd kalkulatora na smartfonach do złudzenia przypominający wyglądem kalkulatory znane ze świata rzeczywistego). Dobrze wykonane elementy skeumorficzne wyglądają bardzo profesjonalnie i świadczą o wysokim poziomie umiejętności twórcy.

Na dowód tego, że skeumorfizm jest wciąż popularnym trendem, poniżej zamieszczam kilka przykładów.

Apple Watch

Apple jest firmą znaną z kreowania trendów w świecie designu. Kiedyś wiele ich interfejsów powstało korzystając ze skumorfizmu, jednak od pewnego czasu widać wyraźne odejście od tego podejścia na korzyść flat designu. Jednak nie jest to całkowite odejście. Wciąż są elementy, zwłaszcza innowacyjne, które odwzorowują klasyczne produkty. Przykładem tego jest Apple Watch. Jest to produkt innowacyjny, posiadający bardzo szeroki wachlarz opcji, a mimo wszystko – wciąż zegarek, i aby mógł służyć jako taki, na wyświetlaczu prezentuje bardzo standardową tarczę. Jak widać, nawet gigant z Cupertino nie jest w stanie zupełnie zrezygnować ze skumorfizmu.

Apple - skeumorfizm

Team Fannypack

Strona Teamu Fannypack jest klasycznym przykładem skumorfizmu. Została ona przedstawiona w formie gazety leżącej na biurku. Są tu jej wszystkie elementy – jako tytuł gazety jest nazwa strony, jako główny artykuł przedstawione są powody do dołączenia do teamu Fannypacka, a po lewej stronie, w formie zakładek, znajduje się menu. Wszystko przedstawione z dużą dozą realizmu, włącznie z przetarciami papieru i zagiętymi rogami. Team Funnypack to strona, która jest zarówno przyjemna dla oka, jak i wyróżniająca się spośród innych tego typu.

Team Fannypack

Sovietsky Boutique

Sovietsky Boutiqe to kino interaktywne. Umożliwia obejrzenie historii miłosnej rozgrywającej się w różnych latach, z możliwością kontroli który fragment historii jest prezentowany. Celem istnienia strony jest prezentacja przedmiotów stylizowanych na pochodzące z danych czasów.

Projekt strony nie pozostawia wątpliwości, że chodzi o oglądanie filmu. Po jej otworzeniu od razu widać telewizor z roku, który aktualnie jest wyświetlany. Domyślnie jest to 1957 rok, można jednak zmienić go (i telewizor) na 1970 oraz 1990. Cała dostępna funkcjonalność znajduje się pod przyciskami telewizora, dlatego intuicyjnie wiadomo co można wcisnąć. Nie ma też wątpliwości, że ta strona długo pozostaje w pamięci.

Sovietsky Boutique - skeumorfizm

Form Follows Function

Form Follows Function to prezentacja unikatowych projektów. Menu jest w formie obracającego się koła, a każda pozycja wygląda jak książka. Po kliknięciu książka powiększa się i prezentowany jest dany projekt, np. wędrujące owce i deszcz liter, które użytkownik może zetrzeć korzystając z wycieraczki, czy puszka którą można dokładnie obejrzeć z każdej strony. Wszystkie są ciekawym odwzorowaniem w mniejszym lub większym stopniu elementów rzeczywistych.

Form Follows Function - skeumorfizm

Sickdesigner.com

Sickdesigner.com to portfolio projektanta stron internetowych. Całość wygląda jak biurko, na którym znajdują się poszczególne elementy (i trampki, jako że w nazwie jest „sick”). Na iPhonie prezentowany jest stworzony przez autora strony „Html5 Starter Pack”, który można pobrać, by zacząć tworzyć stronę internetową samemu. U góry skoroszytu znajduje się menu – po kliknięciu w tę sekcję zmienia się trochę wygląd strony, ale utrzymany jest w tej samej stylistyce – jako biurko, ale z różnymi kartkami papieru, prezentującymi menu kontekstowe. Całość wygląda bardzo profesjonalnie i świadczy o wysokich umiejętnościach twórcy.

Sickdesigner.com - skeumorfizm

Handy Test

Strona Handy Test, mająca określić w jakim stopniu użytkownik zna się na majsterkowaniu została stworzona tak, aby nie było wątpliwości jakiego tematu dotyczy. Wygląda jak stół w warsztacie, z ułożonymi na nim różnymi narzędziami, jak młotek czy piłka. Element który najbardziej przyciąga uwagę to kartka papieru z napisem „Handy Test”. Można się więc domyślić, że to ona skrywa główną funkcjonalność strony.

Handy Test - skeumorfizm

Aldiko Reader

Aldiko Reader to jedna z popularniejszych aplikacji do czytania książek na urządzeniach mobilnych. Aby nie było wątpliwości, że jest ona swego rodzaju biblioteką, zaprojektowano ją w formie regału z książkami. Każdy wiersz to osobna półka, a na niej znajdują się kolejne pozycje, odwrócone okładką do użytkownika.

Aldiko Reader - skeumorfizm

Podsumowanie

Jak widać na powyższych przykładach skeumorfizm wciąz nie został całkiem porzucony na rzecz flat designu. Precyzyjnie przygotowana strona skeumorficzna świadczy o wysokich umiejętnościach twórcy, a dodatkowo pomaga wyróżnić się na tle konkurencji. Ja tego stylu jeszcze nie skreślam.