СЕТКИ В ВЕБ ДИЗАЙНЕ // КАК ПОСТРОИТЬ СЕТКУ ДЛЯ САЙТА // СОЗДАНИЕ СЕТКИ ДЛЯ САЙТА
Задонанить:
Поддержать на бусти:
Как обычно видео большое и основательное
Калькуляторы:
Сетки:
Адаптив:
9 принципов:
Лучшие практики по теме:
по отзывчивому веб-дизайну: Responsive Web Design
отзывчивость(eng):
в продуктах(eng):
по экранам(eng):
по трафику(eng):
еще статистика(eng):
От material (eng): #columns-gutters-and-margins
Про мобилки (eng):
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
Free Download / Stream:
Music promoted by Audio Library
1 view
1226
372
2 months ago 00:01:22 1
Магнитные решетки и теневые магнитные решетки (диффузоры) для натяжных потолков
2 months ago 00:01:52 1
Собирайте ребенка в школу в гипермаркетах ОФИСМАГ!
2 months ago 00:01:26 1
Коляска модульная 3в1 Baby Shell
2 months ago 00:01:00 4
Комфортный, высококачественный рецепт матраса от Ателье LS.
2 months ago 00:09:26 1
Провал ФСБ – в сеть слили данные о Кабаевой и дочерях Путина
2 months ago 00:03:18 2
Печь для коммерческой бани и большой парной — Эверест Steam Master 60 на Баняфест | Народный камин
2 months ago 00:11:13 1
Камеру забыли накрыть и видео попало в сеть! -Как Курск? -Да нормально. Маркетплейс вынесли
2 months ago 00:36:45 1
NAVI vs HEROIC. МАТЧ НА ВЫЛЕТ! BLAST Premier_ World Final 2021. ЛУЧШИЕ МОМЕНТЫ КС ГО. NAVI CSGO
2 months ago 00:17:37 434
Шелкография - печатать на бумаге, ткани и других материалах
2 months ago 00:01:18 198
Силовики накрыли сеть VIP-салонов БДСМ в Екатеринбурге
2 months ago 00:00:26 5
Крымские аграрии приступили к массовой уборке яблок
2 months ago 00:02:15 3
Новый обзор на сверхпрочный карповый подсак PB Products CONTROLLER Round Carp Landing Net!
2 months ago 00:00:26 40
Видео от М3 | Сеть автомоек в СПБ
2 months ago 00:09:58 5
Нашли мастера по ремонту в ЖК Тринити-2 от Гранель
2 months ago 00:02:10 62
Зус в Чувашии
2 months ago 00:40:20 1
Как выбрать МОСКИТНЫЕ СЕТКИ в 2024? Сетка АНТИКОШКА, АНТИПЫЛЬ и ДРУГИЕ ВИДЫ для окон, дверей балкона
2 months ago 00:14:23 2
Воздушный узор с ажурными бабочками
2 months ago 00:00:35 184
Live: БАНЗАЙ - сеть салонов цифровой техники
2 months ago 00:00:31 65
Видео от “Унидом“ сеть гипермаркетов для дома и дачи
2 months ago 00:01:31 1
Апартаменты Пхукет 47м2
2 months ago 00:12:53 1.5K
Ежегодный масштабный розыгрыш призов от АЗС IRBIS - «Заправляйся с умом».
2 months ago 00:00:22 1
Больше нет листьев в вентиляторе печки Honda Partner
2 months ago 00:23:55 1
пароочиститель плюсы и минусы ЧТО ВАЖНО ЗНАТЬ
2 months ago 00:00:17 1
Перед копчение Кальмар разложим на решётке для заветривания / Копчёный кальмар / Hanhi 4