Что делать как жить
Шаблоны фреймов и сетки
Для дизайна сайта мы пользуемся фигмой, где обязательно создаем фреймы с сеткой. То есть все фреймы должны быть размечены гридом - это колонки, которые задают контейнер и помогают конструировать блоки.
В нашей фигме-саппорте есть (будут вот-вот, оставлю тут ссыль) шаблоны экранов с сетками для тильды и других платформ с комментариями, какой для чего подходит. Поэтому не стесняйтесь спрашивать, на чем сайт будет верстаться, чтобы сделать самый разумный выбор.
В нашей фигме-саппорте есть (будут вот-вот, оставлю тут ссыль) шаблоны экранов с сетками для тильды и других платформ с комментариями, какой для чего подходит. Поэтому не стесняйтесь спрашивать, на чем сайт будет верстаться, чтобы сделать самый разумный выбор.
Включать и выключать отображение сетки можно с помощью горячих клавиш Shift+G (G - потому што грид, не потому што Govno)
Основное
- Каждый блок - отдельный фрейм с названием (по смыслу - main, about и тд или цифрой). Меню, подвал и тд - все отдельные фреймы. Длинные колбасы не создаем.
- Сразу учитываем верстку, держим в голове, что это не картинка, а сайт. Там будет действия типа наведение (на десктопе), скролл, клик. Осторожничаем с использованием разных типов наложения, если их нельзя слить в один слой и выгрузить, например, изображением для фона.
- Рисуя дизайн, проверяем его в натуральном размере экрана. Например, свой дизайн для телефона открываем с телефона и смотрим ведьмачьим чутьем, похоже ли это на сайт или кнопки кажутся крупноватыми, или текст чересчур бисерный. Десктоп разворачиваем на свой экран и смотрим. Превью в фигме, когда видишь сразу весь длинный серпантин на удалении, искажает восприятие.
- Помним также про закрепленные элементы - наверху скорее всего вечно будет торчать меню, внизу какая-нибудь кнопка, типа "назад" или "связаться". Они будут всегда закрывать какую-то часть экрана, учитываем это при размещении контента
- Обязательно рисуем мобильную версию дизайна либо первой, либо, если топят за десктоп, все время держим ее в голове - адаптацию будет нужно отрисовать обязательно. С телефонов 80% заходов, там все должно быть самое охеренное
Компоненты
Мы еще не величайшие вебщики, чтобы полноценно использовать этот инструмент фигмы, но он облегчит работу. Например, делать компонентами кнопки или заголовки на сайте очень полезно - легко изменить сразу все.
Референсы
Не поняли, как делать меню - открываем чужой сайт, зырим. Не можем придумать композицию блока с тарифами - ищем чужой сайт курса, зырим. Вообще в любой непонятной ситуации смотрим уже существующие решения других людей. Тут важно гуглить и смотреть именно работающие сайты, не только дизайны на пинтересте.
Чем изобретать кривой велосипед, лучше спиздить мини купер с открытым верхом.
— Альберт Эйнштейн, 1879-1955, веб-дизайнер
Чек-лист
По этому чек-листу нужно проверить все перед сдачей в верстку.
- Подготовка дизайна всего фронтенда (все слайды слайдеров, контент разворачивающихся блоков, попапы и формы, выпадающие меню, фавикон, бейдж)
- Проверка дизайна на натуральном размере экрана. Как это смотрится - не слишком ли здоровый текст, не слишком ли писюлечные кнопки
- Группировка элементов - от меньшего к большему. Например, если у нас есть 4 условные карточки - каждая из них является отдельной группой + вся пачка карточек тоже группа
- Нейминг слоев и групп, rectangle 239587345 copy (1) - не круто, slider, bullets и тд - круто
- Удаление скрытых или ненужных слоев. Чем легче сайт, тем легче жизнь
- Комментарии к верстке - где подразумевался слайдер, попап, параллакс и т.д. - любая мысль, которую вы хотите выразить, но пока не можете сделать работающий интерактивный прототип
- Иконки всегда суются во фрейм, иконки одного порядка должны быть засунуты во фреймы одного размера. Все круги по факту должны быть квадратами, просто очень скругленными (верстальщик будет сильно вас любить за это)