Какую сетку использовать?
Первое, что нужно понять – в работе мы можем использовать сетки любых параметров. Все будет зависеть от ваших предпочтений или, если вы работаете с верстальщиком и он использует какие-либо готовые форматы сеток, то мы подстраиваемся под него.
Второе — самое частое количество колонок — 12. Самое удобное и универсальное число колонок для ваших дизайн-макетов. Я в своей работе использую систему сеток Bootstrap.
Правила работы с сеткой
Далее разберем три основных правила, которых мы должны придерживаться при работе с сетками:
- Крупные блоки мы всегда размечаем по сетке или по крайним точкам экрана (например когда работаем с фоновыми изображениями)
- Средние блоки желательно встроить в сетку, чтобы сохранять ритм композиций и верстальщику было легче работать с макетом
- Мелкие блоки и мелкую разметку не нужно размечать по сетке. Заведите себе это как правило. Не ограничивайте себя в работе с небольшими элементами. Это даст вам больше свободы, а также позволит размечать сложные блоки гармонично.
Примеры разметки блоков
В примере выше мы видим:
- Крупный блок «Отзывы» он будет всегда размещен в сетку
- Средний блок — отдельный отзыв, который желательно встроить в сетку
- Мелкие блоки — логотип и тексты. Их необязательно встраиваться в сетке, так как разметка слишком мелкая
Или другой пример: раздел «Преимущества компании».
- Общий раздел по сетке
- Каждое преимущества тоже встроено в систему сеток
- Внутри иконки и текст могут быть не по сетке
Виды адаптивных разрешений
Существуют три основных вида: компьютер, планшет и смартфон. Но я вам крайне рекомендую охватывать больше конкретных разрешений экрана, так как бывают: ноутбуки и десктопные компьютеры; айфоны и старые Android; планшеты 15 дюймов и 8 дюймов. Ситуаций много и мы, как специалисты, должны закрывать эти проблемы. Поэтому я советую вам:
- 1400px (компьютеры и ноутбуки)
- 1200px (старые ноутбуки и современные планшеты)
- 992px (планшеты)
- 768px (старые планшеты)
- 576px (новые смартфоны)
- 375px (старые смартфоны)
Это самое надежное количество разрешений, которые вам позволят создавать очень адаптивные дизайн макеты. Размер веб страницы для веб-дизайна может быть разным, но данные разрешения покрывают большинство проблем.
Данный материал является частью этапа прототипирования дизайна сайта. Чтобы подробнее узнать об этом — читайте статью.
