В этой статье я начну делать дизайн сайта в программе Figma и разработаю сетку для дизайна сайта.
Привет, друзья!
В этой статье мы с Вами начнем разработку сайта под ключ с нуля.
И в этом уроке я расскажу, как создать сетку сайта самим. Но если вам просто нужна готовая сетка сайта, то ее можно найти в конце статьи.
Для этого достаточно просто сделать ее копию в программе Figma.
Как это сделать рассказываю в этом видео:
Если же вам интересен процесс и вы хотите научиться создавать сетку самостоятельно, то читайте мою статью.
Итак, поехали.
Собственно весь процесс работы над сайтом можно разделить на несколько этапов.
Этапы разработки сайта:
Первый этап. Маркетинг сайта. Его результатом будет создание прототипа сайта.
Второй этап. Создание дизайна сайта. Делаем адаптивный дизайн сайта.
Третий этап. Верстка сайта. Получаем верстку сайта, которую теоретически можно выкладывать на хостинг.
Четвертый этап. Разработка бэкенда сайта. Получаем динамичный, а не статичный сайт.
Пятый этап. Продвижение сайта. Подключаем счетчики, настраиваем рекламу и SEO.
Однако в этот раз мы начнем разработку сайта сразу с дизайна. О причинах такого решения в следующий раз. А сейчас рассмотрим процесс создания сетки дизайна сайта.
Здесь следует обратить внимание на 2 ключевых действия:
1. Создание документа в Figma
2. Создание сетки дизайна сайта.
1. Создаем документ в программе Figma
На этапе создания документа возникает главный вопрос. Я бы сказал вездесущий: как сделать документ с кучей страниц и не связываться с платной подпиской.
Если вы не в курсе, то Figma позволяет делать бесплатно 3 документа и 3 страницы в нем. Хочешь больше - плати деньги. А любой сайт за исключением лендинга - это всегда больше 3 страниц.
И тут возникает две проблемы.
Первая - подписка стоит от 15 долларов вы месяц, если платить ежемесячно и 12 долларов если платить сразу в год.
Вторая - граждане РФ этого сделать не могут. Можно, конечно, сделать виртуальную карту через сервисы или заказать карту в Казахстане через посредников. Но это в любом случае не 12-15 долларов в месяц. А значительно дороже.
Ну и не стоит забывать, что компании из США и ЕС любят финансировать украинских нацистов, что является преступлением в России.
Но, как говорилось в фильме "Айболит-66": "Нормальные герои всегда идут в обход". А потому мы пойдем другим путем, чтобы не тратить деньги зря.
По умолчанию, когда вы создаете новый документ, то он размещается в облаке в папке Design System
У меня имя аккаунта advertisemedia и там в папке Design System мне создается новый документ.
Если оставить как есть, то следующим шагом вам нужно выбрать тип документа:
Мы выбираем тот, что слева в голубом прямоугольнике так как нам нужно будет делать дизайн и прототип.
Но нас ждет сюрприз, если документов больше 3 (трех). А у меня их значительно больше 3 (трех).
Меня просят заплатить деньги и обновиться.
Возникает вопрос: как этого избежать. Всё очень просто.
Еще на этапе создания документа мы меняем место его хранения с папки Design System на Drafts:
Далее также выбираем тип документа для дизайна и создания прототипа и получаем документ Untitled в папке Drafts:
В результате можем делать сколько хотим документов с неограниченным количеством страниц в них.
А вот если бы мы создали документ в папке Design System, то получили бы ограничения.
Итог:
Создаем новый документ в папке Drafts и не забиваем себе голову. Я рекомендую назвать его Adaptive Design Template, чтобы потом можно было пользоваться им при создании дизайна сайтов просто создавая его дупликаты.
2. Создаем модульную сетку в Figma
На данном этапе существует два вопроса:
1. Какого размера холсты делать при разработке дизайна
2. Делать разметку для сохранения вертикального ритма при дизайне сайта.
Начну с ответа на второй вопрос. Я для себя решил не делать сетку для строк, чтобы сохранить вертикальный ритм.
Раньше я его использовал, но потом мне надоело с ним мучаться потому что получается откровенная лажа.
В общем сетка Rows отправляется в топку. Но в учебных целях показываю как она делается.
Вертикальная сетка
Итак, вертикальная сетка нужна для поддержания вертикального ритма. Иными словами, чтобы контент располагался не только аккуратно по горизонтали, но и по вертикали.
Здесь есть свои правила и связаны оны с типографикой.
Я в макетах использую размер базового шрифта 16px, а line-height - 24px.
Иными словами line-height у меня +8px от размера шрифта.
В этом случае Height (высота ячейки) должна быть 8px, а Gutter (Расстояние между ячейками) тоже 8px
В ряде случаев line-height делают не в пикселях, а в соотношении размера к размеру базового шрифта. Например, 1.70. В Figma прописываете в line-height 170%
Тогда height и gutter при настройке сетки должны быть по 13px.
Некоторые дизайнеры делают размеры height и gutter кратными 10px.
Кроме того мы выставляем Count в значении Auto чтобы количество строк автоматически растягивалось по размеру фрейма.
А Type делаем Top.
И как и в случае с колонками меняем значение Grid. Но в этот раз на Rows
Прозрачность делаем 5% Чтобы сетка не сливались с цветом сетки Columns. О ней поговорим далее.
В итоге мы получили такую вертикальную сетку для размера XXL
Сетка Rows статична и не меняется на разных размерах холста. Но, как я уже говорил, я от нее отказался так как могу сохранить вертикальный ритм и без нее.
Горизонтальная сетка или колонки
Современный дизайн строится на использовании колонок. Разметка бывает разная: 12, 16, 24 колонок.
Самая популярная разметка - это 12 колонок. Ее используют чаще всего.
Далее возникает вопрос: какого размера должны быть холсты?
Размеры холстов в веб-дизайне выбирают от брейк-поинтов в фреймворке Bootstrap или от самых популярных размеров экранов девайсов.
Но в случае с самыми популярными размерами экранов девайсов есть нюанс. Они могут существенно отличаться в разных странах. В США - одни, в странах Европы другие, в России - третьи.
Если нужна универсальная сетка, то это нужно обращаться к брейк-поинтам в фреймворке Bootstrap.
Но Bootstrap предлагает 6 брейк-поинтов. То есть это 6 вариантов отображения одной страницы сайта. А если у вас 5 или 6 типов страниц? 36 вариантов.
Дизайнеры чаще всего делают 3 варианта: мобильный c шириной - 320px, планшет - 768px, десктоп - ширина 1280 px или 1440px.
Но размеры могут варьироваться поэтому покажу как сделать сетку для всех 6 брейк-поинтов Bootstrap
Брейк-поинты в фреймворке Bootstrap
Таким образом, в Figma нам нужно сделать 6 размеров. Однако мои размеры, а имнно ширина экрана будут немного отличаться. Я не люблю маленькие "уши" в дизайне. К тому же так проще делать мокапы и презентации работ
Мои размеры:
- xs - 320px
- sm - 576px
- md - 768px
- lg - 992px
- xl - 1280px
- xxl - 1920px
Вы можете использовать размеры, которые предлагает Bootstrap 1:1.
Относительно высоты, то здесь все субъективно и определяется высотой макета.
Начнем создание сеток.
Extra Extra Large или XXL
Нажимаем кнопку F на клавиатуре и создаем Фрейм (Frame) любого размера. После чего на панели свойств задаем необходимые размеры:
Следующим шагом нажимаем значок "+" в параметре Layout Grid:
И получаем следующий результат:
Нажимаем кнопку с точками (выделена красным):
И указываем следующие значения:
Мы меняем Grid на Columns и Type cо Stretch на Center.
Count (Количество колонок) делаем 12
Width (Ширину колонки) - 80px
Gutter (Расстояние между колонками) делаем 30px
Прозрачность делаем 10%.
Color (Цвет) оставляем красным. С цетом и прозрачностью можно потом будет играть в зависимости от цвета макета. Главный критерий, чтобы для вас все было наглядно.
Если колонки не видны, то:
Или просто жмем Shift + G.
Смотрим документпцию Bootstrap. Для ширины экрана свыше 1400 px поле ширина поля верстки должна составлять 1320px.
У нас ширина всех колонок 1290px.
Но нужно учитывать, что в СSS справа и слева остаются отступы по 15px. В итоге получаем 1290 + 30 = 1320px.
Откуда взялись 1290px.
12 колонок по 80px = 960 px
11 расстояний между колонками (Gutter) по 30px - 11х30 = 330px
960+330px = 1290px
Итак, мы сделали вертикальные ряды (колонки) в модульной сетке.
Extra Large или XL
Чтобы не потворять процедуру с нуля. Мы выделяем сетку XXL, копируем ее и вставляем в документ. В Windows это делается нажатием кнопок Ctrl+C и Ctrl + V
Либо делаем это простым перетаскиванием фрейма и созданием его копии. В Windows зажимаем Alt и зажав левую клавишу мыши перетаскиваем фрейм.
Теперь у нас два фрейма XXL. Переименовываем второй в Extra Large.
И меняем параметры фрейма (Frame) на width - 1280px и height - 700px.
В параметрах сетки Columns меняем width на 65px.
Остальные значения оставляем как есть.
Large или Lg
Как с сеткой XL делаем дупликат сетки и переименовываем ее в Large. Удобнее всего будет сделать копию именно сетки XL.
В этот раз изменений будет немного больше. Мы меняем размер фрейма на width - 992px и height - 768px.
Изменяем в сетке Columns количество колонок (Count) на 10, а их ширину (width) на 60px.
В остальном параметры не меняются.
Medium или md
Как и в предыдущих случаях делаем копию фрейма. В этот раз делаем копию фрейма Large.
И вносим следующие изменения: Width - 768px, Height - 1024px.
Кроме того, вносим изменения в сетку Columns. Здесь только меняем количество колонок на 8.
В остальном параметры не меняются.
Small или sm
Делаем копию сетки Medium и вносим коррективы.
Изменяем размеры фрейма: width - 576px и height - 720px.
И меняем количество колонок (Count) в сетке Columns на 6.
В остальном параметры не меняются.
Extra Small или xs
Делаем копию сетки Small и вносим коррективы.
Изменяем размеры фрейма: width - 320px и height - 480px.
И меняем количество колонок (Count) в сетке Columns на 4, а также ширину колонок (Width) на 50px
Остальные параметры не меняем.
Таким образом, мы создали сетки для всех размеров и можем на основе этих шаблонов делать прототип и дизайн сайта.
На тот случай, если вы не хотите проделывать работу самостоятельно, у меня для вас подарок.
Вы можете открыть созданный нами шаблон.
Ссылка на шаблон для открытия в Figma - Bootstrap Grid
Чтобы его использовать Вам достаточно будет сделать его дупликат.
Либо вы можете скачать файл фигмы с шаблоном с моего сайта и открыть его в Фигме. Нор прежде его Вам нужно будет его импортировать.
Ссылка на файл c шаблоном для скачивания - > Bootstrap Grid
На сегодня всё. Спасибо за внимание и что дочитали до конца.
В следующей статье мы начнем непосредственно разработку дизайна сайта.
Обязательно подписывайтесь на мой блог. Ставьте лайки, пишите комментарии, делайте репосты.
