Що таке каркасний каркас? Цей підручник з дизайну UX покаже вам.

Перший крок до проектування веб-сайту: підключіть його.

Хороший каркасний каркас може дати вам уявлення про весь макет та функціональність вашого веб-сайту. Це також може служити першим етапом проектування.

Каркасні мережі дають вам уявлення про загальну структуру сторінок та про те, як рухатиметься навігація.

Якщо ви плануєте створити веб-сайт, ви можете швидко і легко зробити каркас. Для цього навіть не обов’язково бути графічним дизайнером.

Для початку вам знадобиться лише олівець і трохи паперу. (Або якщо ви хочете отримати фантазії, iPad та iPencil, як я використовую у своєму відеоуроці вище.)

Ми збираємося створити каркасний каркас і показати, як це дозволяє швидко, повторюваний процес проектування. Це створить живу документацію, яку ви зможете використовувати для себе та для клієнта. І ви можете використовувати це для обґрунтування свого планування - і все це до того, як ви будь-коли витратите час на власне кодування.

Ось декілька кроків, які ми розглянемо у цій статті (та у відеоуроці, що додається):

  1. Планування мапи сайту
  2. Створення каркаса домашньої сторінки
  3. Використання розмітки в каркасах
  4. Компоненти каркасу (верхній, меню, нижній колонтитул)
  5. Кадрове оформлення сторінки функцій та сторінки контактів
  6. Мобільний адаптивний каркас

Крок 1. Планування мапи сайту

Початок роботи з каркасною структурою починається з хорошої карти сайту. Перш ніж створювати каркас сторінки, карта сайту надасть вам певну структуру. Таким чином, ви зрозумієте, які сторінки ви збираєтеся будувати, і як вони всі з’єднаються між собою.

Для більшості невеликих сайтів карта сайту може не знадобитися. Зазвичай вони мають лише одну цільову сторінку або кілька загальних сторінок, таких як Функції, Про мене та Зв’язатися з нами.

При цьому, як тільки ваш веб-сайт або додаток стане більшим і складнішим, ви захочете карту сайту.

Карти сайту надають короткий огляд того, де існують елементи та як вони взаємозв’язані.

У нашому прикладі ми створимо просту мапу сайту, яка буде містити лише домашню сторінку, сторінку функцій та сторінку зв’язку з нами.

Не потрібно витрачати на це занадто багато часу. Просто додайте кілька вікон, щоб показати кожну сторінку, рядки внизу, щоб показати підсторінки, і все.

Крок 2. Створення каркасу домашньої сторінки

Ми збираємося створити нашу першу каркасну сторінку. Якщо ви раніше не каркасні, цей процес досить простий. Кожен аспект веб-сайту представлений фігурою або простою графікою, наприклад:

  • коробки з діагональними лініями через них для представлення зображень
  • горизонтальні лінії для подання абзаців тексту
  • і коло з буквою L для представлення вашого логотипу.

Для домашньої сторінки ми створимо повзунок, меню та логотип. Ми також дамо йому кілька міток, щоб показати, що таке кожен предмет.

Це також корисно для упорядкування кожного розділу у прямокутники, які ми можемо згодом скопіювати та вставити на інші сторінки (особливо для верхнього та нижнього колонтитула).

Давайте також створимо ще один розділ для ознайомлення з компанією (Про нас) та розділ про спонсорів (з логотипами та зображеннями наших спонсорів).

По мірі просування дизайну ми також можемо впроваджувати інші елементи на домашню сторінку, як-от кнопки із закликом до дії у відповідних областях.

Ми доопрацьовуємо дизайн за допомогою розділу нижнього колонтитула, куди ми додаємо такі загальні елементи, як контактна форма, контактна інформація та ще раз використовуємо логотип.

Крок No3: Використання розмітки в каркасах

Каркас часто переглядають не тільки дизайнери, а розробники, клієнти та керівництво. Тому корисно додати трохи розмітки до кожної частини вмісту. Це може допомогти людям переглядати ваш каркас вперше. Зазвичай я роблю це в кінці заповнення сторінки.

У нашому прикладі давайте розмічимо домашню сторінку та позначимо кожну частину вмісту червоним текстом.

Аспекти, які ви хочете розмітити, включають такі елементи, як розділи, заголовки, контактні форми та те, які можуть бути зображення.

Зверніть увагу, що розмітка не повинна буквально пояснювати, яким буде зрештою вміст - а лише те, що він представляє. Отже, замість того, щоб вводити власне "Приклад вступного заголовка", ви можете позначити його як "Вступний заголовок".

Крок No4: Додайте інші компоненти каркасу, такі як верхній колонтитул, меню та нижній колонтитул

Тепер, коли ми вже створили верхній і нижній колонтитули, ми можемо використовувати їх повторно для додаткових сторінок. Якщо ви працюєте в цифровій формі, ви можете скопіювати та вставити колонтитули та інші повторювані елементи в нові каркаси сторінки. (А якщо ви просто використовуєте папір та ручку, ви завжди можете скористатися бритвою та ксероксом, щоб досягти того самого ефекту.)

Це дозволяє конструкції каркасу залишатися незмінною. Такі інструменти, як Figma, дозволять вам створювати компоненти активів, які ви також можете скопіювати та вставити у весь дизайн. Ви навіть можете налаштувати їх на динамічне оновлення інших частин вашого каркасу при зміні кореневого компонента.

У нашому прикладі ми збираємося повторно використовувати компоненти для створення сторінки функцій. Створивши наш перший компонент розділу функцій, ми можемо скопіювати та вставити його нижче кілька разів, щоб створити всю нашу сторінку функцій всього за кілька хвилин.

Крок No5: Сторінка функцій та Сторінка контактів

Створювати додаткові сторінки стає простіше і легше, як тільки ви почнете працювати з каркасною структурою та будуєте деякі компоненти. Після закінчення сторінки функцій ми можемо створити сторінку зв’язатися з нами. Все, що нам дійсно потрібно зробити, - це додати кілька загальних елементів, таких як Карта Google, форма для зв’язку з нами та деякі основні контактні дані, такі як номер телефону та електронна адреса.

У цьому прикладі я маю невеликі логотипи для телефону та електронної пошти та великі блоки, які представляють, де вони будуть розташовані на сторінці.

Контактна форма буде розташована внизу (без контуру), а також карта Google праворуч.

Крок 6: Створіть мобільний адаптивний каркас

Жоден хороший каркасний каркас не може існувати в наші дні без мобільної версії. Це пов’язано з тим, що сьогодні велика частина Інтернету переглядається на мобільних пристроях.

Добре знати, як дизайн може зруйнуватися до менших вікон. Якщо у вас більше часу на руках, ви також можете створити планшетну версію адаптивного каркаса.

У нашому прикладі ми будуємо розділ за розділом дизайну каркасу домашньої сторінки. Більшість рядків і стовпців згорнуті. І оскільки ми працюємо на мобільному вікні перегляду, багато зображень, текстів та блоків зменшуються в розмірі.

Через це деякі розділи можуть мати таку саму висоту, що і відповідні версії настільних ПК. З іншого боку, деякі розділи з великою кількістю зображень (наприклад, розділ про спонсорів) можуть мати набагато більшу висоту прокрутки.

Завдяки цьому я часто також додаю додаткову розмітку, щоб показати, які розділи настільної версії відповідають яким адаптивним еквівалентам для мобільної версії.

Висновок

Каркасне проектування - це швидкий спосіб наочно отримати краще уявлення про свій веб-сайт або програму. Я рекомендую спробувати його для наступного проекту, щоб допомогти вам спланувати, як він може функціонувати та виглядати.

Ідеальним підходом для цього є каркасне підключення, оскільки на це потрібно набагато менше часу, ніж у дизайнера, який робить повномасштабний прототип інтерфейсу користувача.

Як розробник я роками створював каркаси для своїх веб-сайтів. Я майже ніколи не розробляю веб-сайт, не намічаючи хоча б деяких своїх ідей щодо того, як він буде виглядати візуально.

Щасливі каркасні.

Сподіваюся, вам сподобалась ця стаття. Якщо ви не знаєте, хто я, я Адріан з Австралії? У мене є крихітний канал у Twitter та YouTube, тож якщо ви хочете дізнатись більше про мене або насолодитися моїм вмістом, завітайте колись?

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog