Ви коли-небудь замислювалися, чому одні сайти виглядають дорого та професійно, а інші, навіть із красивими картинками, здаються хаотичним набором елементів? У чому ж їхній секрет? Довгий час для мене це залишалося справжньою загадкою, доки я не пройшов третій урок свого марафону з веб-дизайну і не провів розслідування, як справжній детектив. Сьогодні я розкрию цей секрет вам.
Виявляється, існує невидима “Модульна сітка”, на яку професіонали, немов на скелет, “навішують” дизайн. Вона створює гармонію та порядок на сторінці, допомагає створити правильну структуру сайту, розміщувати елементи не “на око”, а за чіткими правилами. Модульна сітка буквально підказує правильні місця для кожного елемента. І найпопулярніший шифр у цьому секретному коді — 12 колонкова сітка.
Тепер, коли ми вже пройшли перше знайомство з Figma для початківців, і знаємо, де знаходяться основні інструменти, настав час вивчити один із головних секретів професійного дизайну
Від теорії до практики: налаштовуємо сітку у Figma крок за кроком
Теорія — це добре, але справжній детектив перевіряє все на практиці. Я вирішив спробувати “зламати шифр” і створити своє перше креслення за цими правилами.
Крок 1. За допомогою гарячої клавіші “F” я створив Frame (Полотно). Далі на правій панелі, там, де ми визначаємо тип та розмір фрейму, я вибрав розмір “Desktop 1440×1024”.
Крок 2. На правій панелі я знайшов секцію “Layout grid” і натиснув на “+”. За замовчуванням додалася сітка в клітинку (Grid), але нам потрібна інша, вона називається “Columns”, тому обираємо саме її.
Крок 3. У вікні, що відкрилося, я задав найпопулярніші параметри для веб-дизайну:
- Count (Кількість): 12
- Type (Тип): Stretch (Розтягуватися)
- Margin (Відступи з боків): 80 (Це створює “повітря” по краях сайту)
- Gutter (Міжколонник): 24 (Це відстань між нашими колонками)
Після того, як я виконав ці три кроки, фрейм вкрився напівпрозорими червоними колонками… І вау! Я побачив гармонійну структуру. “Так ось як вони це роблять…” — подумав я. Тепер потрібно було продовжити розслідування і спробувати щось намалювати самостійно.
Крок 4: Перевіряємо докази. Я взяв інструмент Rectangle (R) і почав розставляти блоки по сітці. Моїм завданням було намалювати кілька прямокутників так, щоб вийшов макет умовного сайту, прив’язуючи кожен до меж колонок. Мета цієї вправи — відчути, як сітка “направляє руку” дизайнера.
- Header: один довгий прямокутник вгорі на всі 12 колонок.
- Картки товарів: три однакові прямокутники, кожен завширшки в 3 колонки, з відступом в одну колонку між ними.
- Стаття + бічна панель: нижче один великий прямокутник на 8 колонок і поруч із ним — менший, на 4 колонки.
Розкривши секрет веб-дизайну, я отримав нову “суперсилу”. Тепер, коли я заходжу на будь-який сайт, я інстинктивно “бачу” модульну сітку, на якій він побудований. Я бачу “фрейми” та “прямокутники”.
Сама ідея використовувати сітки в дизайні не нова, але справжня магія починається, коли ми адаптуємо її для різних пристроїв. Якщо хочете зануритися глибше, рекомендую чудовий посібник з адаптивних сіток
Таємниця порядку виявилася не в таланті, а в знанні правил. І сьогодні ми з вами зламали її код. У наступному уроці ми почнемо перетворювати наші креслення на справжні, живі дизайни, зрозуміємо що таке композиція та як за допомогою неї навчився керувати увагою глядача. Дякую, що ведете це розслідування разом зі мною!
