Gorzko Gorzko
Identyfikacja i strona dla fikcyjnej apteki Gorzko Gorzko
Idea
Trenując swoje umiejętności namingowe (wymyślania nazw marek i produktów), wpadłem na pomysł apteki nazywającej się „gorzko gorzko”, posiadającej logo składające się z dwóch pigułek układających się w kształt przypominający serce. Jak wiadomo leki są przeważnie gorzkie. Jak również wiadomo okrzyk „gorzko gorzko” kojarzy się z pocałunkiem. Pocałunek; miłość; troska; zdrowie; leki; gorzko. Tak wygląda ciąg asocjacji, składający się na ów brand.
Postawiłem stronę w kolorach bardzo kobiecych, kojarzących się z markami kosmetycznymi. Ponadto była to świetna okazja by urządzić sobie studium z światłocienia – stylu zwanego claymorphism, w którym obiekty na stronie imitują kształty i tekstury obiektów z realnego świata. Starałem się używać „kolorów ziemi” i unikać idealnej czerni i bieli, które bardzo rzadko występują w naturze.
Studium porównawcze
W załączonych przykładach pokazuję różnice pomiędzy:
- „Suchym” zdjęciem a zdjęciem, które jest włożone w kilka silnie wystylizowanych Div Blocks, które imitują światłocień.
- Wypełnieniem obiektu jednolitym kolorem i zastosowaniem delikatnego gradientu, który ma imitować większy realizm światłocienia.
- Typografią bez cienia i z delikatnym cieniem. Odkryłem, że zastosowanie ledwo widocznego, bardzo niewielkiego cienia, niejako „rozmiękcza” litery, nadając im bardziej organicznego, naturalnego efektu. Litery te przypominają bardziej druk, którego krawędzie nigdy nie są perfekcyjnie ostre – jak na monitorze.
Kliknij i przesuwaj, by porównać przed/po:
Całość layoutu
Projektowanie stron można potraktować na dwa różne sposoby (czego zrozumienie zajęło mi dobrych parę lat). Jako jednolitą kompozycję, po której porusza się okno przeglądarki; tu projektujemy gównie przestrzeń. Lub jako doświadczenie interaktywnych animacji i narracji video; tutaj projektujemy czasoprzestrzeń.
W pierwszym przypadku pokazanie całości layoutu i jego logiki ma pewien sens poznawczy. Najedź myszką:
