Як оживити flat дизайн сайтів точковим шаблоном (приклади)

32

Від автора: у даній статті ми розглянемо приклади та способи того, як оживити flat дизайн ваших сайтів точковим шаблоном. Але перед тим як перейти до справи, маленька передісторія…

Близько п’яти років тому у веб-дизайні сталася революція. І, як і у всіх революціях, у цій теж були переможці і переможені. В таборі переможених виявилися округлені краю, злиплі кордону, відображення і тіні. А переможцем став flat або плоский дизайн.

Спочатку Microsoft застосувала плоский дизайн, а потім Android і iOS стали плоскими і спрощеними. І врешті-решт, все це об’єдналося під однією теорією Material дизайну.

І в цілому, це правильний шлях розвитку веб-дизайну. Вага графічних файлів знизився, що прискорило їх завантаження, інтерфейс став простіше і менш захаращеним. Однак ви можете заперечити, що вже в нашому 2015 році безліч сайтів стали «однаковими».
Адже завжди приємно надати дизайну ту теплоту (логотипи, UI, ілюстрації тощо), не захаращуючи візуальний ряд?

Надягаємо ретро очки

Технологія друку протягом більш ніж 400 років тільки поліпшувалася, також як і використовується для цих цілей папір, чорнило і технологія друку.

Забавно, але ми донині зачаровані дрібними недоліками, нерівностями в оригінальних і низько технологічних методах друку. Ми бачили ці одноразові принти на банках з їжею, в старих газетах і на стінах залізничних станцій.

Скажіть привіт Mr. Retro

Творець плагіна Mr Retro для фотошопа заробив собі на життя своїм дітищем. Кожен з фільтрів імітує природні нерівності і шорсткості, як в старих паперових документах. Дефекти, що використовуються у фільтрах:

Паперове волокно

Точки півтони

Зміщення

Чорнильні краплі і патьоки

Всі фільтри тонко налаштовуються і можуть здивувати вас отриманим ламповим ефектом плоского дизайну. Більше немає потреби додавати купу малюнків. Тим не менш, це задоволення не з дешевих, варто даний плагін 99$. Є й інші більш дешеві кошти, з допомогою яких можна домогтися схожого плоского ефекту.

Півтони в Adobe Illustrator

Цей малюнок я зробив для статті чи Потрібна користувачам іконка гамбургера на настільних комп’ютерах?. Я хотів домогтися простоти від зображення, і щоб воно було зручно для тачскріна.

Chris Spooner (Spoon Graphics) за кілька років зібрав чудову колекцію ресурсів – в тому числі і ці точкові шаблони. Можете завантажити його абсолютно безкоштовно.

Давайте додамо ці точки в мою ілюстрацію.

1). Відкрийте півтони в AI, виділіть всі шаблони і вставити їх на новий порожній шар, поки що можете приховати цей шар. В вашій панелі зразків повинні з’явитися нові шаблони, як на малюнку нижче:

2). Скопіюйте задній фоновий малюнок на самий верх.

3). Клікніть по кожному зразку, і ваше зображення отримає ефект півтони. Перегляньте всі шаблони і виберіть сподобалася.

4). Точки в шаблоні чорного кольору, тому я зменшую непрозорість шару, щоб вони не кидалися в очі.

5). Повторіть ці дії з усіма потрібними вам зображеннями.

От і все, от і весь метод додавання півтонів зображення. Пам’ятайте про нього, коли наступного разу вам знадобиться домогтися такого ефекту.