СЕТКИ В ВЕБ ДИЗАЙНЕ // КАК ПОСТРОИТЬ СЕТКУ ДЛЯ САЙТА // СОЗДАНИЕ СЕТКИ ДЛЯ САЙТА

❤️ Поддержи канал:

Как обычно видео большое и основательное. Надеюсь, что тему сеток раскрыл для тебя

Калькуляторы:

Видео на русском по отзывчивому веб-дизайну: Responsive Web Design

00:00 - Вступление
00:10 - Сетка?
00:25 - Сетка - каркас
00:40 - Где она важна?
00:50 - Сайты, которые презентуют
01:12 - Сайты, которые дают контент
01:27 - Сайты, для работы
01:55 - Три простые мысли о сетках
02:05 - Сетки может и не быть
02:50 - Она важна, если контента много
03:21 - Она важна для работы
04:32 - Они нужны для удобства
05:00 - Они нужны для единства
05:23 - Они нужны для разнообразия
06:06 - Они нужны для адаптивности
06:14 - Из чего состоит?
06:25 - Колонки, гаттеры и поля
06:35 - Колонки для контента
06:45 - Гаттеры - зазор между колонок
07:09 - Контент не для гаттеров
07:20 - Как не надо и надо
07:43 - Отступ до строки равный гаттеру
08:25 - Поля - это пространство между сеткой
09:05 - Делай поля больше размером, чем гаттер
09:50 - Как видеть сетки?
10:44 - Фан-сайт о Ghostbusters
12:55 - Лендинг
14:45 - Сайт продукта
19:19 - Сайт другого продукта
19:55 - Пример адаптива без сетки
20:27 - Второй пример адаптива
20:53 - Сайты с контентом - сложнее и по структуре и сеткам
21:12 - Сетка агрегатора новостей Яндекса
23:46 - Разбор bbc
29:56 - Везде ли лепить одинаково?
30:57 - Руслан, ты втираешь какую-то дичь что ли?
32:00 - А может быть всё не верно?
32:18 - А вот что!
33:00 - Разбираем снова!
33:50 - Дизайнеры bbc шарят за сетки
34:52 - Ох уж этот гугл!
35:50 - Что учитывают дизайнеры при создании сеток?
36:00 - Контент, устройства, пользователи и бизнес
36:24 - Прежде чем строить, подумай
36:53 - Про монетизацию
37:07 - Для медийных порталов учитывай форматы рекламы
38:25 - Либо можно включить подписку
39:02 - Социальные сети могут внедрять рекламные посты
40:35 - Для сайтов с презентацией - важно "продать" продукт
40:50 - Для продуктов продумать как показать блоки с доп. функциональностью
41:20 - Пример Webflow
42:18 - Какой метод выбрать
42:30 - Если мобилки - mobile first
42:44 - Почему мобилки важны!
43:11 - Как это учитывать?
44:27 - Если десктопы - desktop first
45:21 - Сложный продукт? всегда desktop
46:38 - Пару слов перед построением
47:12 - Строим 12 колоночную сетку и почему
47:28 - Легко делить и адаптировать
48:05 - Панель Layout Grid
48:23 - Игнорируем: Grid и Rows
48:33 - Rows игнорируем и не парим никому мозги этим!
48:51 - Сложно, дорого, тупо, веб так не работает
49:07 - Ссылки на эту проблему
49:14 - О чем речь?
50:22 - Строим сетку Stretch
51:45 - Адаптируем ее
52:27 - Правило для оплей
53:17 - Думай о контенте и сценарии
53:36 - Об адаптиве
53:53 - Уточняй когда тебя просят в адаптив или отзывчивость :)
54:03 - Видео по ссылке в описании
54:23 - Брейкпоинт?
54:48 - Учитывай устройства
54:58 - Учитывай каждую ситуацию
55:15 - Учитывай чем пользуется аудитория
55:49 - Общайся с разработчиками
56:08 - Как адаптировать не меняя количество?
56:32 - Как размещать?
56:49 - Заметка о колоноках Stretch
58:10 - Stretch+Constraints
58:42 - Как в этом случае быть с устройствами?
59:12 - Сетки типа Center
59:22 - Считать вручную
59:34 - Считай по модулю
59:54 - Модуль любой
01:00:10 - НО… 8px
01:00:38 - Как работают сетки Center
01:01:52 - Сетки типа Left для сайдбаров
01:02:47 - Примеры
01:03:25 - Left для сдвига
01:03:50 - Без пиксель перфекта!
01:04:32 - При уменьшении фреймма - сетка не меняется
01:05:22 - Как стать плохим
01:05:32 - Для других также
01:06:33 - Меняем положение элементов и центрируем
01:07:18 - А что с продуктами?
01:07:32 - Больше внимания компонентам
01:07:59 - 8 ПИКСЕЛЕЙ
01:08:40 - Важно - кратность модулей
01:08:55 - 8, 16, 24…
01:09:44 - Изи
01:10:04 - Пример
01:10:59 - Забиваем и выравниваем по 8px на глазок
01:11:20 - Или 8px внутри компонентов
01:13:25 - Сетку нельзя построить в autolayout
01:13:32 - Продолжаем
01:17:05 - Про айфон
01:17:26 - Я делаю отступы
01:19:54 - Сервисы

Музыка:
You & I by Soyb & Amine Maxwell
Creative Commons — Attribution 3.0 Unported — CC BY 3.0

[proximo]

Я со стрима itpedia, ты заплатил косарь и получил меня (не лучшее вложение))))

[donbotdonbot]

Ты рассказываешь о том как надо думать и возможные варианты мыслей и это ооооооочень круто!

[bphcqut]

Спасибо большое, очень полезный курс, многое встаёт на место, хотя я в дизайне уже давно

[skwhite]

Видео очень класное, продолжай в том же духе!

[edhaha]

блин сижу смотрю почему то, так обратно и не пошел на стрим Лехи. Интересно завтра досмотрю

[rodionkrotov]

Кто со стрима? Кстати Руслан были проблемы с поиском твоего канала, ютуб выдавал какую-то музыку, я бы на твоем месте сделал больше тегов или поменял название канала.

[CeMaiFacill]

Руслан, оч крутой материал. я уже давно все про сетку знаю и большая часть инфы мне была и так понятна, но все равно посмотрел увлеченно видос. спасибо! не останавливайся. подписался, буду смотреть)

[panzerjagerkanone]

найс видео, у тебя голос приятный, круто было бы если делал текст для видео . На мой взгяд очень круто было бы)

[PixMixManga]

Бооольшое спасибо за видео! Благодаря твоим видео только в 4 часа утра получил ответы на свои вопросы. Но не все. Вот вопросы без ответа: 1. как должен вести себя контент (картинки и текст) при изменении ширины окна браузера в меньшую сторону (например при ширине окна в 1440px), если мы выбрали тип сетки center и следующий брейкпоинт при ширине окна в 1024px? ☝🏼

[donbotdonbot]

Спасибо за крутые Научи придумыватькрутые композиции, что бы промо сайты делать или кейс оформлять, уверен это всем будет спасибо. Будет подобное

[ALEXChannelKREILEX]

Реклама топ ! Хочу открывать интернет магазин, какие из своих роликов можешь посоветовать и вообще что изучать

[untermensch]

Здравствуйте Руслан! Мы хотели бы пригласить вас в наше PR агентства

[llainad]

Привет! Хотел спросить, умеешь ли ты верстать сайты: программировать на html, java script и тд, или же ты занимаешься исключительно дизайном и затем передаешь дизайн верстальщикам? Мне как начинающему дизайнеру очень интересно)