Whimsy-дизайн

Англійське слово whimsy перекладається як «примхливий». Щось химерне, екстравагантне, грайливий або неформальне - все це whimsy. Сучасний веб-дизайн тяжіє до стандартизації і мінімалізму, але для деяких проектів ретельно продуманий стиль на зразок Material Design не дуже підходить. Сайт дитячого садка, портфоліо художника або що-небудь подібне вимагає іншого, менш формального підходу. Саме тому виник напрямок, яке можна позначити терміном whimsy-дизайн. Поряд з веб-бруталізму цей стиль сьогодні є одним з набирають силу трендів.

Не обов`язково весь дизайн повинен бути whimsy - досить лише кілька невеликих штрихів, щоб передати потрібний настрій. Даний стиль сьогодні найчастіше асоціюється з «жіночими» проектами або сайтами для дітей, але зовсім не обов`язково обмежуватися цими двома темами. Наприклад, на сайтах з ретро-дизайном нерідко можна бачити химерні елементи, які можна однозначно визначити як whimsy. Ось кілька способів урізноманітнити зовнішнє оформлення сайту додавши йому трохи легкості і грайливості.

рукописні шрифти


рукописні шрифти 

Простий рукописний шрифт дозволить внести в дизайн трохи чарівності і тим самим почати взаємодію з користувачем в потрібному ключі. Для того, щоб вплив на користувача було помітним, рукописний шрифт повинен здаватися справжнім, тобто його накреслення має чітко асоціюватися з ручною роботою.

Багато дизайнерів сьогодні часто припускаються помилки, використовуючи надто відомі рукописні шрифти. Штампи в дизайні - це зовсім не whimsy, так що вибору підходящого шрифту варто приділити багато часу. Якщо шрифт виглядає як зроблений на комп`ютері, то навряд чи він підійде, так як йому не вистачає автентичності.

При виборі рукописної гарнітури варто звернути увагу на наступні моменти:

  • Найкраще використовувати варіанти, які мають альтернативні накреслення. Так як деякий літери можуть використовуватися кілька разів, то буде краще, якщо вони будуть трохи відрізнятися - адже коли людина пише від руки, одна і та ж буква завжди виглядає трохи по-іншому.
  • Рукописного шрифту в дизайні не повинно бути занадто багато. Ідеально, якщо їм буде набрано всього кілька слів, наприклад, заголовок.
  • Потрібно завжди пам`ятати про контекст. Легкі шрифти повинні відповідати легкому контенту. Найпотужніші шрифти краще підійдуть для серйозних проектів.
акварель


Акварельні ефекти в веб-дизайні 

Акварельними ефектами можна дуже легко зіпсувати дизайн, зробивши його невиразним і неохайним, проте акварель може стати справжньою окрасою, якщо дизайнер постарається і добре зробить свою роботу. Є багато способів використання акварельних ефектів - вони відмінно підходять для фону або невеликих елементів дизайну.

Якщо є бажання задіяти ефект акварелі, то дуже важливо знати свою мету. Акварель - примхлива штука, використовувати її потрібно дуже обачно. Найкраще вона працює, коли в дизайні немає інших візуальних ефектів, відтягують увагу на себе. Якщо на сайті багато фотографій або яскравих графічних блоків, то краще не використовувати акварель взагалі або застосовувати ці ефекти дуже обмежено. Якщо є мета додати в дизайн легкості і прозорості, акварель може виручити, але якщо раптом ефект почне «тиснути», експеримент краще завершити.

ілюстрації


 Забавні ілюстрації


Ніщо так не привертає увагу користувача, як невеликий класний малюнок. Ілюстрація являє одним з кращих способів для успішної взаємодії. Якщо відвідувач розуміє повідомлення, закодоване в зображенні, він сприймає контент так, як це потрібно творцеві сайту.

Щоб досягти поставленої мети, зовсім не обов`язково використовувати великі і складні зображення - досить лише кількох шрифтів, які зроблять дизайн більш простим або забавним. Ось як, наприклад (картинка зверху), це було зроблено на сайті компанії RGB, яка варить і продає крафтового пиво. Таке пиво виробляється маленькими партіями, багато процесів вимагають ручної роботи, тому маленька картинка, яка виглядає, як намальована від руки, виглядає тут більш ніж доречно. Вона посилає користувачеві чіткий сигнал - тут все справжнє і натуральне, ніякої хімії та конвеєрного виробництва.

Яскраві кольори

 


Відомо, що настрій в дизайні можна передати за допомогою кольору. Яскраві, сміливі, насичені відтінки візуально цікаві і допомагають створити атмосферу веселощів і безтурботності. Необов`язково при цьому наслідувати іншим дизайнерам і використовувати насичені жовті, помаранчеві або зелені відтінки. Потрібні емоції можна викликати за допомогою більш легкої кольорової палітри. Головна умова - дотримуватися позитивних квітів, вони можуть бути дуже ефективними, навіть якщо колірна схема не містить занадто яскравих кольорів.

Стиль флет і гайдлайн Material Design посприяли поширенню яскравих колірних схем, так що можна без побоювання використовувати найбільш вдалі поєднання кольорів.


Щоб палітра виглядала whimsy, необов`язково бути експертом-колористом, є більш прості способи знайти цікаве поєднання відтінків. Можна скористатися такими корисними інструментами, як Flat UI Color Picker або Material Design Color Palette Generator.

Тонкі лінії і штрихи

 

Відео: Vintage Painter in her Twirly Dress from Whimsy Design

Ще один спосіб зробити дизайн менш формальним є використання тонких ліній і штрихів. Наприклад, лінії можна використовувати в якості рамок для зображень, а штрихами внести різноманітність в типографіку. Також лініями і штрихами можна виділити основні елементи дизайну. Тонкі лінії візуально важать менше і допомагають передати легкість і простоту. До речі, лініями можна намалювати і картинку, це підкреслить оригінальність whimsy-дизайну.

Щоб посилити вплив на користувача, бажано використовувати контрастні кольори і відмовитися від занадто тонких штрихів. Якщо лінії занадто товсті, то не варто робити їх занадто яскравими, приглушені відтінки дозволять трохи знизити їх вагу. Штрихів в дизайні не повинно бути занадто багато, вони не є основними елементами, так що краще керуватися естетичними принципами і не перевантажувати сайт. Якщо елемент видно, він виглядає незвично і забавно, але при цьому ідеально вписується в конструкцію - це однозначно whimsy-дизайн.

проста анімація


 


Як правило, в веб-дизайні анімація використовується як інструмент, у неї є певні функції. Але іноді анімація може допомогти створити потрібний настрій, якщо вона цікава, легка і привертає увагу відвідувача сайту. Іноді досить, щоб який-небудь елемент почав вібрувати або підстрибувати при наведенні курсору мишки, щоб викликати у користувача позитивні емоції.

Багато дизайнерів прекрасно розуміють можливості анімації і використовують її в поєднанні з іншими whimsy-способами, додаючи в дизайн трохи веселощів. У зв`язці з яскравими квітами або ілюстраціями, анімація може розважити користувача і направити його увагу на потрібний контент.

Відмінний приклад реалізації цієї концепції - сайт Pharell Williams, де анімація присутня всюди. Яскраві кольори, пульсація елементів і паралакс відразу ж створюють потрібний настрій, при цьому користувачу дуже легко орієнтуватися, незважаючи на те, що всі елементи як би плавають в просторі і постійно змінюють свої розміри.

свідоме недосконалість

 


У whimsy-дизайні дуже важливо передати відчуття справжності. І одним з кращих способів зробити зовнішній вигляд сайту менш формальним є свідоме недосконалість елементів дизайну. Все роблять невеликі помилки і часом вони виглядають дуже мило. Тому невеликі огріхи можна використовувати в своїх цілях. Але як реалізувати це на практиці, щоб користувач зрозумів, що дизайнер зробив так навмисно?

Наприклад, можна зробити який-небудь елемент трохи товщі або тонше, ніж інші. Або використовувати невеликі відмінності в накресленнях шрифту - з боку це виглядає як помилка. Нерівні рядки або зображення неправильної форми також дозволять зробити дизайн менш формальним. Якщо елементи дизайну виглядають неузгоджено, але при цьому сайт виглядає єдиним цілим, то мета досягнута.

Відео: ImpressArt Design Stamps, 3mm, Whimsy Heart, 1-Pack

висновок

Дизайнерам, які хотіли б створити щось незвичайне або химерне, але бояться впасти в крайність і все зіпсувати, краще почати з малого. Можна спробувати додати один whimsy-елемент і подивитися, як він вписується в загальну схему. Химерні патерни проектування зазвичай найкраще працюють в невеликих творчих проектах. Для серйозних сайтів whimsy-стиль підходить погано, так як він занадто незвичайний і легковажний. Але даний напрямок має право на існування, так як є величезна кількість тем, де недосконалість дозволяє створити потрібну атмосферу.



Увага, тільки СЬОГОДНІ!


Оцініть, будь ласка статтю
Всього голосів: 70