Design

Думки та замітки | Основний сайт

Flat

Flat повсюди. Flat — це просто. Flat — це модно.

Приклади робіт:

Інші статті про flat можна знайти і почитати самостійно.

Рекомендую почитати і подивитись: MAD RABBIT та Flatingo.

 
Перший розділ In Flat:

Колір

Колір використовується завжди і всюди. Він відіграє важливу роль в кожній роботі, в кожній ілюстрації.
Саме завдяки ньому формується певне відношення до логотипу, айдентики чи чогось іншого.

(робив ілюстрацію по туторіалу)

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

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

Кольори компаній/брендів:
Atlassian
Carto
Tailwind
Apple
Google
IBM
Clarity
Oracle
Ant Design
Microsoft Fabric

СloudFlare

Палітри:
ColorKitty
Scale
ColorBox
Pigment
ColorDrop
Material
LOL Colors

Градієнти:
Egg gradients
uiGradients
WebGradients

Сервіси:
Color Hex
Color Picker

Статті на рахунок того, як вибирати колір:
Color wheel
How to color

Ізометрія

Що таке ізометрія можна глянути тут.

Я ж в свою чергу хочу лише показати прості приклади того, які роботи можна отримувати за допомогою ізометрії:

На YouTube є багато відеоуроків про те, як створювати ізометрію в Adobe Illustrator. Також раджу почитати, подивитися і послухати ілюстратора Mad Rabbit.

P.S. Навчився створювати ізометрію тут:

Створювати ізометрію за допомогою вбудованого інструменту 3D не варто, тому що будуть проміжки:

Розмиття для блока

Це просто прекрасно. Отримуємо блок, у якого розмитий фон.


index.html

<html>
	<head> 
		<title> Blur </title>
		<link rel="stylesheet" href="style.css">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<main>
			<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt architecto possimus nihil quo facilis harum, assumenda illo corporis repudiandae rem provident error qui fuga et porro laboriosam atque est debitis?
			<footer><cite>Unnamed</cite></footer>
			</blockquote>
		</main>
	</body>
</html>


style.css

body {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  font: 150%/1.6 Baskerville, Palatino, serif;
  height: 200vh;
}

main::before {
  background: url("https://avatanplus.com/files/resources/original/57526cb3cfeab15519f89e8c.jpg") 0 / cover fixed;
  background: url("http://hwork.net/files/bg.jpg") 0 / cover fixed;
}

body{
  background: url("http://hwork.net/files/bg.jpg") 0 / cover fixed; 
}

main {
  position: relative;
  margin: 0 auto;
  padding: 1em;
  max-width: 23em;
  background: hsla(0, 0%, 100%, .25) border-box;
  overflow: hidden;
  border-radius: .3em;

}

main::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -30px;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

Сирцеві файли:
index.html
style.css

Повторюємо дизайн JetBrains

Дана компанія створює не лише прекрасні IDE, а й представлення та дизайн своїх продуктів, елементів фірмового стилю.

Приклади дизайну:

Прекрасно. Все засновано на градієнтах та переходах. Можна спробувати повторити.
Для того, щоб вибрати самі смачні кольори, я скористуюсь кольоровою системою Material Design.

Повторити першу роботу не важко:

Спочатку створюємо еліпси різних кольорів і розмірів. Далі виділяємо їх всіх, вибираємо інструмент Перехід (w) і по черзі з'єднуємо. На наступному кроці додаємо чорний квадрат і центруємо все відносно монтажної області.

Тепер спробуємо зробити і так, як у другій роботі:

Суть така ж сама, як і у попередньому прикладі, але еліпси потрібно витягнути за межі монтажної області. Треба ще додати еліпс і радіальним градієнтом, який іде від жовтого кольору до прозорого.

Далі по списку різноманітні переходи з незвичайними формами:

Нічого складного. Потрібно просто визначити форму за допомогою контура, потім створити перехід. Далі в меню Об'єкт > Перехід > Замінити траєкторію.

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

Мої кольори можуть відрізнятися від оригінальних, тому що я створював все в іншій кольоровій палітрі.Не все могло зійтись на 100%, але у мене і не було мети скопіювати все.

Худнемо

Лого для тих, хто хоче схуднути.

На лого зображений явно повний чоловік, який біжить до своєї мети:

Поки що рівень не Альбіни, але я стараюсь.
Будемо рости.

Градієнти та переходи

За допомогою Adobe Illustrator можна творити дива. Сьогоднішня тема по дизайну — градієнти та переходи.

Мабуть, всі зможу створити перехід від одного кольору до іншого, як тут:

(завантажити зображення для робочого столу)

Такий підхід і я часто використовую. Плавний перехід від кольору до кольору — це прекрасно. Багато таких же прикладів можна побачити в природі. Деякі митці черпають звідти свої ідеї.

А що, якщо трішки погратися з формою?

Або ж зовсім її змінити і використати у власних творчих цілях?

(реальний приклад splash screen, який я створив пару років назад)

Інструменти Adobe Illustrator дозволяють робити градієнти різними методами.
Можна створити градієнт за допомогою інструмента Gradient Tool, а можна створити градієнт за допомогою інструмента Blend.

Тоді можна отримати щось більш цікаве:

(створено по інструкції, по відеоуроку)

Або щось таке:

На мою думку, ефективність використання того чи іншого інструмента визначається тим, на скільки красиво створена робота.

Не треба забувати й за Gradient Mesh Tool. Зараз доволі популярно створювати подібні фони:

(робота на 8 березня)

Вершиною всього вищенаписаного являється використання градієнту і переходу разом, щоб можна було добитися взагалі непередбачуваних результатів:

Можна використовувати такий прийом: градієнт для основних форм в переході + сам перехід.
В результаті можна отримати прекрасну форму і яскраві кольори.

Дизайн айдентики для компанії

Нещодавно закінчив роботу над айдентикою для компанії EMT Express.
Вийшло доволі яскраво, динамічно та красиво.

Що таке айдентика можна глянути тут.

Facebook

Логотип компанії в фірмових кольорах:

Обкладинка для групи на Facebook:

Доречі, групу можна знайти тут.

Прайс компанії

Перша сторінка:

Вміст прайсу показати не можу, але там класний дизайн. Просто повірте. =)

Остання сторінка:

Візитка

На жаль, візитки були надруковані ще до ребрендингу компанії. Але я підготував редизайн візитки:

Це ще не все. Далі — більше.