Як зробити мудборд за 7 простих кроків
Мудборд — це колекція референсів та інших даних, які задають певний стиль або концепцію для вашого проекту. Дизайнери, ілюстратори, фотографи створюють мудборди, щоб зібрати концепцію ідеї в одному місці.
Наприклад, веб-дизайнеру треба створити сайт для інтернет-магазину квітів. Він починає збирати приклади сайтів конкурентів, підбирати дизайн подібних проектів з Behance. Після вибору найкращих варіантів, дизайнер поглиблюється в ідею і підбирає: колірні схеми сайту, типографику й елементи сайту. Тільки після цього починає працювати над створенням прототипу сайту.
Чим мудборди допомагають при розробці сайту :
- Задають стиль сайту
- Прискорюють створення сайту завдяки референсам
- Якщо ви робите сайти на замовлення, то це застереже вас від непорозуміння із замовником
Де створювати мудборд
Створити мудборд можна і у Word, але краще використовувати спеціальні сервіси, які вирішують це завдання. Сервіси зручніші, бо там є вбудовані бібліотеки зображень та шрифтів.
Обирайте сервіс, з яким працюватимете, і розпочнемо з першого кроку.
1. Визначте напрям вашого проекту
Мудборди можуть бути буквальними і практичними (з шрифтами, колірними схемами і зображеннями), або ж вони можуть бути спрямовані на вивчення тону і настрою.
Ці два типи можна робити паралельно. На одній дошці ви вказуєте, які будуть кольори, патерни і зображення. А на другій — в якому стилі буде створений сайт.
Коли перша версія готова — зробіть невеликий опис на мудборді. Це допоможе обмежити політ фантазії і продовжити рухатися в одному напрямі.
2. Зберіть існуючий матеріал
Тепер, коли ви визначили напрям для вашого мудборда, додайте на дошку: цінності бренду, позиціонування, будь-які логотипи, елементи дизайну і фотографії. Можливо, вони не увійдуть до остаточного варіанту мудборда, але все ж ці дані допоможуть розпочати роботу.
3. Додайте образи
Зображення, які ви вирішите включити у свій мудборд, можуть вплинути на зовнішній вигляд вашого сайту. Вони допоможуть визначити такі речі, як тон, кадрування, стилістику і колірну схему.
Якщо ви не можете згадати сайти, які вам сподобалися, то приклади можна знайти на Dribbble, Behance і Designspiration. Тут різні дизайнери діляться своїми роботами, які можна відсортувати за типом проекту, колірній схемі й іншими важливими параметрами.
Не турбуйтеся про організацію зображень, ми це зробимо пізніше, зараз їх можна додавати в хаотичному порядку.
4. Додайте приклади анімацій
Анімація на сайтах може бути абсолютно різна: від найпростішої, яка практично непомітна для користувача, до складної з wow-ефектом, як, наприклад, parallax.
Цим ви розширите розуміння, які анімації потрібні на сайті, і вже під них будете розробляти дизайн.
5. Додайте кольори і шрифти
Колір може бути гарним варіантом виразити певні почуття і індивідуальність. Наприклад, сайт аптеки краще створювати у світлих кольорах, а сторінку нічного клубу в темних і яскравих. Але для кожного з цих сайтів будуть один-два кольори, які покажуть індивідуальність конкретного сайту.
Сервіс Kuler допоможе знайти кольори, які доповнюють бренд. Ще один лайфхак — обирати кольори безпосередньо із зображень і фотографій, які ви додали на мудборд.
А для підбору шрифтів використайте дизайнерський сайт Typewolf. Це відмінний спосіб вивчити різні комбінації шрифтів і те, як вони взаємодіють один з одним.
6. Час навести лад
Після того як ви зібрали усі свої ідеї в одному місці, наступний крок — впорядкувати їх, щоб створити ідеальну композицію.
Цей процес може зайняти деякий час, і часто виникає відчуття, що ви уявлення не маєте, як виглядатиме мудборд. Найімовірніше, у вас буде більше матеріалу, ніж треба, до того ж він може виглядати розрізненим. Це нормально!
Розпочніть з вивчення композиції і введення ієрархії. Помістіть ключовий елемент, наприклад, логотип, щоб закріпити вашу дошку, і змініть розмір і положення інших елементів, щоб показати їх важливість і взаємозв'язок.
7. Опишіть свої думки
Якщо ви маєте візуальне мислення, то мудборд — це безцінний інструмент, що дозволяє передати образ і настрій вашого проекту так, як іноді не можуть слова. Але для клієнта або його дизайнерів треба додати опис ваших думок. Це допоможе пояснити ваші ідеї і зберегти все в контексті. Не обов'язково вдаватися до подробиць — просто напишіть декількома словами, що ви хотіли передати конкретним зображенням.
І готово!
Тепер, коли ваша дошка з референсами готова, у вас є візуальне представлення, як виглядатиме дизайн сайту. Можете приступати до розробки дизайну.
На Weblium легко створювати власні сайти, адже ви лише обираєте потрібні блоки контенту: текст, відео, слайдер, гелерея та інші, і додаєте їх на сторінку. А якщо у вас не так багато часу, то можна використати 300+ готових шаблонів, які підійдуть під десятки різних сфер бізнесу. Автоматична система допомагає правильно підібрати кольори для вашого сайту, а ще буде використовувати ці кольори на всіх обраних елементах. Вам буде не потрібно кожен раз усе налаштовувати з самого початку, достатньо це зробити одного разу. Легко і швидко створюйте власний сайт на Weblium.