Flat Design, do widzenia!
Lubiłem minimalizm, nawet lubiłem flat design... dopóki Google się za to nie zabrał. Podczas gdy wszyscy jarali się jak pochodnie Material Designem, ja miałem wręcz odwrotnie. Było zbyt płaskie, bez życia. Ten wszechobecny font Roboto, apki podobne do siebie, no i crème de la crème – ta fala (ripple) na przyciskach po najechaniu na nie. Urgh.
Do mnie przemawiał inny rodzaj minimalizmu.
Koniec minimalizmu jest bliski
Jak to w modzie, lubi się powtarzać cykl. Więc czasy płaskich, nudnych designów mijają, a trendy idą w kierunku krzykliwych, dziwacznych fontów i kolorów. Gdy programowałem sobie stronę mikirobi.ai, jednym z pierwszych patentów był delikatny noise na całej stronie – chciałem przełamać tę monotonię i wrócić do czasów, kiedy faktury miały znaczenie.
Kiedyś mikrowzory były hitem netu – dodanie tej faktury było ukłonem w stronę tamtych czasów.
Od skeumorfizmu do płaskości i z powrotem
Jeżeli przypomnimy sobie pierwsze iPhone'y, ich punktem wyróżniającym był między innymi skeumorfizm. Czyli takie udawanie rzeczywistości w cyfrowej apce. Np. okładki książek zapisanych na iPhone'ie były wystawione na drewnianej półeczce. Fajnie, znajomo – opisywałem to w innym poście, jak chcesz wiedzieć więcej o skeumorfizmie.
Ten design szybko został wypłaszczony przez flat design. Kolejne wersje iOS były płaskie.
Teraz najnowszy iOS ma szkło. Co można podciągnąć pod neumorfizm.
Czym jest neumorfizm i dlaczego wraca?
W skrócie – to w połowie drogi między skeumorfizmem a minimalizmem. Tutaj dużo ma do powiedzenia światło i cień. Są mocne cienie, wgłębienia, odblaski oraz świecące elementy. Neumorfizm wraca, bo ludzie stęsknili się za interfejsami, które czują się namacalne, realnie – które nie są tylko płaskimi prostokątami na ekranie.
Zwykle elementy składają się z wielu części, bo mamy zewnętrzne cienie i wewnętrzne, gradienty itp. To właśnie te warstwy sprawiają, że interfejs wygląda jak fizyczny obiekt, do którego chce się sięgnąć.
Jak zrobić neumorfizm? Praktyczny poradnik
Wiecie co, najprostszy neumorficzny design to „tłoczony separator" – czyli po prostu kreska, która ma odblask i cień. Ten efekt tłoczenia to poziom 0 neumorfizmu. Następnie należy zainwestować w gradienty, ale bardzo subtelne, i z bardzo precyzyjnym zestawem kolorów. Bardzo łatwo zepsuć immersję neumorfizmu.
Jak już ogarniesz kolory w gradientach, wystarczy teraz na przemian je stosować. Co druga warstwa ma gradient odwrócony – to sprawia wrażenie głębi. Jak do tego jeszcze dodasz highlight i shadow (zwykle dwa cienie: jeden ciemny, jeden jasny po przeciwnych stronach), to efekt jest sprzedany. Dodatkowym bajerem jest dodanie poświaty, a level pro – jeżeli światło odbija się prawidłowo od rantów.
Moje doświadczenie
Ostatnio na swojej stronie chciałem wypróbować neumorfizm, ale tak mi się spodobało, że zacząłem coraz więcej zmieniać. Powoli strona zaczyna przypominać radyjko z fizycznymi przyciskami do klikania – aż chce się dotykać ekranu i naciskać te elementy, żeby zobaczyć te wszystkie efekty świateł i cieni w akcji.