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

Задонанить: Поддержать на бусти: Как обычно видео большое и основательное Калькуляторы: Сетки: Адаптив: 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