СЕТКИ В ВЕБ ДИЗАЙНЕ // КАК ПОСТРОИТЬ СЕТКУ ДЛЯ САЙТА // СОЗДАНИЕ СЕТКИ ДЛЯ САЙТА
Задонанить:
Поддержать на бусти:
Как обычно видео большое и основательное
Калькуляторы:
Сетки:
Адаптив:
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
60 views
1561
470
2 weeks ago 00:00:10 1
️ Событие вечера: преждевременный слив в сеть мощнейшей нейросети для генерации видео Sora от OpenAI Тестировщики
2 weeks ago 00:01:11 1
Украсить дом к новому году снаружи гирляндой ⚫ Магазин гирлянд в калуге ☑
2 weeks ago 00:01:11 1
✔ Гирлянда на окна
2 weeks ago 00:30:38 1
Рецепт - Печень в жировой сетке и аджапсандал на гриле - Как полюбить печёнку.
2 weeks ago 00:01:10 1
Trokot тонировка нового поколения 😎 Каркасные шторки отзывы владельцев ⛔
2 weeks ago 00:01:10 1
🚗 ШТОРКИ ТРОКОТ КУПИТЬ В ТЮМЕНИ 🚦
2 weeks ago 00:00:09 1
Волонтёры Ленинградской области осуществили сбор и отправку дополнительного имущества на передовую
2 weeks ago 00:01:43 1
104.9. Агафонова. Профилактика диабета
2 weeks ago 00:02:17 1
. Агафонова. Эмоции от работы
2 weeks ago 00:01:59 1
. Агафонова. Как пациент понимает, к кому обратиться
2 weeks ago 00:00:33 3
️ Самую хайповую модель OpenAI слили в сеть — попробовать Sora уже может КАЖДЫЙ
2 weeks ago 00:00:10 1
Пользователи массово делятся своими генерацииями в Sora — полчаса назад главный релиз Альтмана слили в сеть обиженные работяги
2 weeks ago 00:00:10 7
В сеть слили Sora — ТОПОВУЮ нейросеть для генерации видео от OpenAI Возможно, это фейк, но генерации идут с домена openai
2 weeks ago 00:21:06 1
Может ли нарушение дыхания стать причиной боли?
2 weeks ago 00:01:10 1
🚖 Экраны для автомобиля на передние стекла 🚥
2 weeks ago 00:01:10 1
🚔 Каркасная тонировка трокот 🔥 Шторы в камаз своими руками
2 weeks ago 00:04:10 2
. Агафонова. Разговор по душам
2 weeks ago 00:00:47 2
Live: Клуб настольного тенниса Сетка и Ракетка
2 weeks ago 00:00:44 36
Видео от “Вятские улочки“ • Сеть отелей в Кирове
2 weeks ago 00:02:55 4
Акции/Газпром/Покупка Газпрома/Стратегия Сетка/ Фондовый рынок /Московская биржа
2 weeks ago 00:00:18 102
Видео от WARPOINT | сеть VR-арен в Липецке
2 weeks ago 00:33:24 2
[Nirber] Беспроводная МЕ СЕТЬ с Nirber и All the Mods 10!
2 weeks ago 00:00:10 3.3K
В Шебекино многоквартирный дом покрыли специальной сеткой от дронов
2 weeks ago 00:41:10 274
ЖИЛКИН АЛЕКСЕЙ V СТАРОСЕЛЬСКИЙ ИЛЬЯ | IX МЕЖДУНАРОДНЫЙ ТУРНИР “КУБОК ТРЕСТФОМ“ 2024