[Наука Дизайна] Роман Горелик - Композиция и сетки (2022)
Для чего
Вечный вопрос о композиции и построении макета. Как сделать, чтобы торкало и запоминалось. По каким принципам устроена композиция, из чего она состоит , как делать крутые макеты, не глядя на референсы.
Для кого
Дизайнерам, которые сталкиваются с композиционными поисками и хотят поднять уровень кейсов, а с ними и ценник за работу
Мы дадим ответы на вопросы:
— Как делать так же, как в крутых кейсах Behance самому?
— Как легко находить композиционное решение, выглядящее уникально и интересно?
— Какую сетку выбрать под проект?
— Как устроена композиция?
— Как раскрыть свой потенциал и сделать так, как ты видишь у себя в голове?
Содержание:
1 модуль - Типографика
Больше никаких жёстких правил типа «так можно, а так никогда не делайте». Нет, теперь ты узнаешь, на что влияет каждая крутилка в типографике, и в какой ситуации выбрать тот или иной приём.
Мы пройдем такие темы:
— Шрифты
— Сочетания шрифтов
— Элементы типографики
— Размер шрифта
— Длина строки
— Интерлиньяж
— Абзац
— Трекинг
— Выключка
— Чистота полотна
Что это даст:
Знание, как обходясь только одной типографикой, сделать уникальный и стильный дизайн.
Понимание, как защищать свой проект перед
2 модуль - Основы композиции
Ты узнаешь, из чего всё состоит, и как композицией передать нужные эмоции и настроение темы. Теперь дизайн будет уникальным, исходя из твоей темы, а не из-за того, что ты подобрал референсы.
Мы пройдем такие темы:
— Как мозг читает композицию
— Силовые линии
— Точка, линия, плоскость, ёмкость
— Симметрия и асимметрия
— Движение в композиции
3 модуль - Контраст
Научимся управлять вниманием пользователя с помощью контрастов. Разберёмся с видами контраста, и как создать понятную и красивую иерархию. Переработаем макеты из прошлого задания с новыми знаниями.
Мы пройдем такие темы:
— Как мозг читает композицию
— Почему нам так нравится контраст
— Нюансы в композиции
— Тождественность элементов
4 модуль - Контрформа и Ритм
Научимся видеть и ощущать пустоту в макете. Теперь это не пустое место, а свободное. Как, ощущая и формируя воздух вокруг элементов, сделать дизайн привлекательней.
Поработаем с ритмом. В дизайне ошибка в ритме не так заметна, нежели в музыке, поэтому мы применим музыкальные принципы в дизайне, и наш макет заиграет и запоёт.
Мы пройдем такие темы:
— Форма и контрформа
— Активный и пассивный воздух
— Ритм формы и контрформы
Мы сделаем дизайн страницы портфолио
5 модуль - Сетки
Вечный вопрос: какую сетку выбрать. Разоблачение всех мифов про сетки. 90% информации в интернете - догматизм, отживший своё.
Мы пройдем такие темы:
— Задача сеток
— Виды сеток
— Как делать свою сетку
— Как передать её разработчику
Сделаем редизайн странички отеля
var ytcsi={gt:function
{n=(n||"")+"data_";return ytcsi[n]||(ytcsi[n]={tick:{},info:{},gel:{preLoggedGelInfos:[]}})},now:window.performance&&window.performance.timing&&window.performance.now&&window.performance.timing.navigationStart?function(){return window.performance.timing.navigationStart+window.performance.now()}:function(){return(new Date).getTime()},tick:function(l,t,n){var ticks=ytcsi.gt.tick;var v=t||ytcsi.now();if(ticks[l]){ticks["_"+l]=ticks["_"+l]||[ticks[l]];ticks["_"+l].push(v)}ticks[l]= v},info:function(k,v,n){ytcsi.gt.info[k]=v},infoGel:function(p,n){ytcsi.gt.gel.preLoggedGelInfos.push(p)},setStart:function(t,n){ytcsi.tick("_start",t,n)}}; (function(w,d){function isGecko(){if(!w.navigator)return false;try{if(w.navigator.userAgentData&&w.navigator.userAgentData.brands&&w.navigator.userAgentData.brands.length){var brands=w.navigator.userAgentData.brands;var i=0;for(;i0&&ua.toLowerCase().indexOf("webkit")<0&&ua.indexOf("Edge")< 0&&ua.indexOf("Trident")<0&&ua.indexOf("MSIE")<0}ytcsi.setStart(w.performance?w.performance.timing.responseStart:null);var isPrerender=(d.visibilityState||d.webkitVisibilityState)=="prerender";var vName=!d.visibilityState&&d.webkitVisibilityState?"webkitvisibilitychange":"visibilitychange";if(isPrerender){var startTick=function(){ytcsi.setStart();d.removeEventListener(vName,startTick)};d.addEventListener(vName,startTick,false)}if(d.addEventListener)d.addEventListener(vName,function(){ytcsi.tick("vc")}, false);if(isGecko()){var isHidden=(d.visibilityState||d.webkitVisibilityState)=="hidden";if(isHidden)ytcsi.tick("vc")}var slt=function(el,t){setTimeout(function(){var n=ytcsi.now();el.loadTime=n;if(el.slt)el.slt()},t)};w.__ytRIL=function(el){if(!el.getAttribute("data-thumb"))if(w.requestAnimationFrame)w.requestAnimationFrame(function(){slt(el,0)});else slt(el,16)}})(window,document);