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

❤️ Поддержи канал:
https://www.donationalerts.com/r/ruslan_uxui

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

Калькуляторы:
http://grid.guide
http://gridcalculator.dk
https://archetypeapp.com
https://hihayk.github.io/modulator

Сетки: https://deadsign.ru/design/grids_in_web_design/
Адаптив: https://ux.pub/rukovodstvo-po-proektirovaniyu-adaptivnyh-setok/
9 принципов: https://bit.ly/32OLTF6
Лучшие практики по теме: https://bit.ly/36MlskG
Видео на русском по отзывчивому веб-дизайну: Responsive Web Design
Про отзывчивость(eng): https://uxplanet.org/responsive-design-best-practices-c6d3f5fd163b
Сетки в продуктах(eng): http://bit.ly/3kBEdfx
Статистика по экранам(eng): https://gs.statcounter.com/screen-resolution-stats
Статья по трафику(eng): http://bit.ly/2H6DZPL
И еще одна статистика(eng): https://bit.ly/3kAKUyq
От material Google (eng): https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
Про мобилки (eng): http://bit.ly/2Kd8Zie

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
https://soundcloud.com/soybmusic
https://soundcloud.com/aminemaxwell
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: http://bit.ly/l-you-and-i
Music promoted by Audio Library https://youtu.be/NS71HLgd9q4

Видео СЕТКИ В ВЕБ ДИЗАЙНЕ // КАК ПОСТРОИТЬ СЕТКУ ДЛЯ САЙТА // СОЗДАНИЕ СЕТКИ ДЛЯ САЙТА канала Ruslan Sharipov