Вчимося використовувати каркаси при створенні сайту
Проектування каркаса є дуже важливим кроком при розробці дизайну сайту. В першу чергу каркас дозволяє визначити ієрархію інформації, завдяки йому вам буде простіше планувати розташування елементів так, щоб користувач відразу звернув увагу на потрібну інформацію. Якщо ви до цих пір не використовуєте каркаси, прийшов час навчитися.
Каркас - це як архітектурний проект: ви повинні побачити все в двовимірної чорно-білій гамі перш, ніж почати будувати будинки. Точно так само і для дизайну: ви не можете почати будувати пікселі верств в Фотошопі, не знаючи, як і структура проекту.
Каркаси важливі, оскільки вони дозволяють розробнику планувати розташування і взаємодія елементів інтерфейсу, не відволікаючись на колір, вибір шрифту і т.д. Якщо користувач не може зрозуміти начначеніе елементів на чорно-білому каркасі, не має значення, які кольори ви в кінцевому підсумку будете використовувати.
Як і фундамент будівлі, він повинен бути фундаментально сильним, перш ніж вирішити, чи слід фарбувати його дорогою фарбою.
Крок 1: Натхнення
Перед тим, як ми зануримося в подробиці, завітайте на сайт I ♥ wirefames. Тут ви зможете отримати візуальне уявлення про те, як інші дизайнери створюють каркаси для сайтів.
Можете також використовувати відмінний додаток Wirify. яке дозволить вам побачити каркасну версію будь-якого сайту.
Якщо ви постійно спостерігаєте за роботою інших дизайнерів або дивіться на каркаси інших сайтів, ви поступово зрозумієте призначення каркасів і то, як вони допомагають організувати інформацію на екрані.
Крок 2: Планування процесу
Дизайнери підходять до створення каркаса сайту по-різному. Ви повинні самі вибрати найбільш зручний для вас спосіб. Деякі люди дуже добре малюють ескізи і вважають за краще не використовувати ніяких інструменти крім олівця і блокнота для створення каркаса. Інші дизайнери продумують каркаси аж до дрібниць, хтось створює каркаси самостійно, хтось використовує спеціальні сервіси і інструменти для цієї мети.
Крок 3: Вибір інструментів
Axure - один з перших професійних інструментів для створення каркасів сайтів. До недавнього часу він був доступний тільки для Windows.
Каркаси Balsamiq нагадують ескізи, завдяки чому відразу видно, що каркаси не є закінченим продуктом. Balsamiq має величезну бібліотеку повторно використовуваних компонентів, які можна перетягувати і з їх допомогою легко створити свої каркаси.
Moqups - приголомшливе додаток для створення каркасів. На даний момент проект перебуває в стадії розробки
Sketchy Illustrator wireframes - готові ескізи для створення каркаса сайту
Багато дизайнерів вважають за краще використовувати для цієї мети саме Illustrator, так як він дає можливість експортувати файли в PSD з редагованими шарами, а також без праці трансформувати і переміщати об'єкти.
Крок 4: Використання сітки
* Про те, що таке сітки і з чим їх їдять можете прочитати в цій статті
Щоб показати, як можна самостійно створити каркас сайту, ми будемо використовувати Illustrator, але ви можете вибрати будь-які інші інструменти, зараз головне - зрозуміти техніку створення.
По-перше, встановити розмір документа.
Помістіть завантажений шаблон сітки в документ.
Є багато шаблонів сіток, доступних для скачування, але якщо ви зацікавлені в тому, щоб самостійно налаштувати параметри і створити адаптивний шаблон, використовуйте responsify.it.
Крок 5: Визначення положення блоків
Іноді, в залежності від мети і призначення сайту, який ви розробляєте, можете додати більше творчих ідей в свою роботу, але при цьому не забувайте зберігати ієрархію інформації в пам'яті. Ось приклад незвичайного каркаса сайту для технологічної компанії:
Крок 6: Визначення ієрархії інформації і типографіка
Після того як ви розташували контейнери, почніть потроху додавати контент, щоб краще структурувати інформацію. Правило те саме: інформація, яку ви хочете донести до аудиторії повинна бути ясною, навіть в чорно-білому каркасі.
Використання різних розмірів шрифту на початку - відмінний спосіб провести грань між різними рівнями інформації.
Не бійтеся експериментувати на даному етапі. Можливо, коли ви будете працювати над каркасом більш детально, ви зрозумієте, в чому його недоліки.
Крок 7: Деталізація за допомогою градації сірого
Використання повного спектру відтінків сірого може допомогти вам визначити візуально силу ваших елементи без допомоги кольорової палітри і може допомогти вам при створенні дизайну в подальшому.
Крок 8: Чорно-білий макет
Це необов'язковий крок, але ви можете його спробувати. Додайте більше деталей в ваш каркас. На цьому етапі ви можете підібрати сімейства шрифтів і визначити їх ідеальні розміри.
Крок 9: Переклад чорно-білого каркаса в макет сайту
Як згадувалося раніше, причина, по якій багато хто воліє використовувати Illustrator для створення каркасів в тому, що можна експортувати файли в PSD з редагованими шарами:
Експортуйте і почніть працювати над макетом. Ось приклад реалізації цього сайту: