СЕТКИ В ВЕБ ДИЗАЙНЕ // КАК ПОСТРОИТЬ СЕТКУ ДЛЯ САЙТА // СОЗДАНИЕ СЕТКИ ДЛЯ САЙТА
HTML-код
- Опубликовано: 10 сен 2024
- Задонанить: www.donational...
Поддержать на бусти: boosty.to/easy...
Как обычно видео большое и основательное. Надеюсь, что тему сеток раскрыл для тебя
Калькуляторы:
grid.guide
gridcalculator.dk
archetypeapp.com
hihayk.github....
Сетки: deadsign.ru/de...
Адаптив: ux.pub/rukovod...
9 принципов: bit.ly/32OLTF6
Лучшие практики по теме: bit.ly/36MlskG
по отзывчивому веб-дизайну: Responsive Web Design
отзывчивость(eng): uxplanet.org/r...
в продуктах(eng): bit.ly/3kBEdfx
по экранам(eng): gs.statcounter...
по трафику(eng): bit.ly/2H6DZPL
еще статистика(eng): bit.ly/3kAKUyq
От material (eng): material.io/de...
Про мобилки (eng): 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
/ soybmusic
/ aminemaxwell
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/l-you-and-i
Music promoted by Audio Library • You & I - Soyb & Amine...
Я со стрима itpedia, ты заплатил косарь и получил меня (не лучшее вложение))))
Ты рассказываешь о том как надо думать и возможные варианты мыслей и это ооооооочень круто!
Хай, я со стрима Лехи Itpedia
Спасибо большое, очень полезный курс, многое встаёт на место, хотя я в дизайне уже давно
Шалом от Лёхи!
Спасибо за видео!
Кто со стрима? Кстати Руслан были проблемы с поиском твоего канала, ютуб выдавал какую-то музыку, я бы на твоем месте сделал больше тегов или поменял название канала.
Хорошее замечание!
Видео очень класное, продолжай в том же духе!
Руслан, оч крутой материал. я уже давно все про сетку знаю и большая часть инфы мне была и так понятна, но все равно посмотрел увлеченно видос. спасибо! не останавливайся. подписался, буду смотреть)
Спасибо, приятно!
красава вставил рекламку)))
блин сижу смотрю почему то , так обратно и не пошел на стрим Лехи. Интересно завтра досмотрю
Хорошая подводка к рекламе на стриме!
со стрима лехи айтипедии)
Привет от Лехи
Хорошая реклама Руслан
Красава! Четкая подача материала
Бооольшое спасибо за видео! Благодаря твоим видео только в 4 часа утра получил ответы на свои вопросы. Но не все. Вот вопросы без ответа: 1. как должен вести себя контент (картинки и текст) при изменении ширины окна браузера в меньшую сторону (например при ширине окна в 1440px), если мы выбрали тип сетки center и следующий брейкпоинт при ширине окна в 1024px? ☝🏼
найс видео, у тебя голос приятный, круто было бы если делал текст для видео . На мой взгяд очень круто было бы)
Реклама топ ! Хочу открывать интернет магазин, какие из своих роликов можешь посоветовать и вообще что изучать
Я бы сказал посмотреть ролики про: юнит-экономику и пиратские метрики (aarrr) и вообще две темы эти погуглить. Просто под "открывать интернет-магазин" можно многое понимать многое, но сперва надо понимать и просчитать экономику. Я же вещаю за дизайн, а не открытие бизнеса, поэтому что касается дизайна - все ролики, они поделены на плейлисты ux, ui и посмотрев их можно освоиться и начать думать за удобство и красоту интерфейсов
@@ruslansharipovuxui я и спрашиваю по поводу дизайна, но все равно благодарен !
кто от лёхи?
Здравствуйте Руслан! Мы хотели бы пригласить вас в наше PR агентства
Спасибо за крутые видео.....ты супер!!!!!! Научи придумыватькрутые композиции, что бы промо сайты делать или кейс оформлять, уверен это всем будет важно.....заранее спасибо. Будет подобное видео?????????????????
Привет! Хотел спросить, умеешь ли ты верстать сайты: программировать на html, java script и тд, или же ты занимаешься исключительно дизайном и затем передаешь дизайн верстальщикам? Мне как начинающему дизайнеру очень интересно)
Привет, я работаю исключительно как дизайнер и передаю все в разработку. Если время позволяет, то я могу ребятам подкинуть какой-либо вариант вёрстки компонента. Недавно карточки метрик сверстал и показал как адаптивно оно должно себя вести. Мелочь, но было полезно и быстро для передачи в разработку.
Верстать на html/css я умею, однако что касается полноценного программирования и создания интерактивности и логики на JavaScript то тут мои полномочия как говорится все. Основы есть, но их не хватит для создания продуктов.
Я готовлю сейчас последнее видео для плейлиста по UI: как быстро развить навыки в UI дизайне. Во второй части видео я покажу процесс как можно нарисовать простой лендинг и сверстать его на html/css чтобы было понимание что это такое и тд