Зміст
- Чому б не перейти прямо до Photoshop?
- Будова та форма
- Каркасні дроти
- Наскільки детально слід скласти каркас?
Після того, як все планування сайту буде завершено і початкові думки змиті, ми повинні почати збирати конкретні ідеї щодо дизайну та структури. Врешті-решт ми дійдемо до того моменту, коли ми будемо працювати в Photoshop (або браузері, якщо це вас влаштовує) і делікатно розробляти ідеально підходящі піксельні конструкції, але спочатку нам потрібно визначити, що ми розробляємо.
У цій статті ми обговоримо ескізи, каркаси та сірі рамки. Ми побачимо, як вони вписуються в наш робочий процес і яким цілям служать. Стаття повинна послужити вступом до процесу каркасного проектування та оглядом ключових рішень, які він передбачає.
Чому б не перейти прямо до Photoshop?
Чесно кажучи, це залежить від того, як ви віддаєте перевагу роботі. Жоден окремий процес не підходить для всіх, і ви можете довіряти своїм інстинктам, щоб просто піти на це і вибити свої задуми за один прийом. Вам більше влади, якщо це так, але я б сумнівався. Більшості з нас потрібна невелика структура, щоб упорядкувати свої ідеї, перш ніж ми зможемо з ними працювати.
Я знаю багатьох дизайнерів, які, по суті, пропускають фазу попереднього проектування і переходять безпосередньо до подібних Photoshop CS6 для своїх макетів. Вони стискають пікселі, поки не знаходять дизайн, який їм подобається, і подають його клієнту. Іноді це працює, і дизайн приймається, розмічається та відправляється. Іноді це не так.
Найчастіше дизайнери, які можуть зробити чудовий дизайн без ескізів чи каркасних конструкцій, мають швидкий внутрішній процес прийняття рішень. Дизайнер або іде з першою ідеєю, або вони мають можливість швидко і рішуче приймати або відхиляти ідеї на льоту. Дійсно, вони проходять той самий процес, який я окреслюю, вони просто роблять це внутрішньо. У будь-якому випадку, процес все одно має місце, коли вони атакують це порожнє полотно Photoshop.
Будьте застережені: зазвичай здатність вирішувати ці проблеми внутрішньо потребує великого досвіду. Я вважаю, що структура, надана певним процесом, може допомогти забезпечити, щоб ви приділяли кожному аспекту дизайну необхідну увагу.
Будова та форма
Коли я маю на увазі структуру дизайну, я кажу про дві речі. Дизайн повинен бути структурований візуально, на основі кожної сторінки. Макет повинен бути легким для синтаксичного аналізу, а вміст повинен бути організований таким чином, щоб користувач знав, що важливо, а що допоміжне.
Але на додаток до організації вмісту сторінки, наші дизайни повинні зробити решту сайту доступними та легкими для аналізу. Вони повинні надати користувачеві відгук про те, де вони перебувають, що вони щойно зробили та як вони можуть отримати наступну інформацію, яку хочуть.
Я думаю, що це надає структуру інформації, яка бачиться (видима інформація на сторінці) і прихована (весь вміст не на поточній сторінці). Обидва вони однаково важливі, і найкращі конструкції знаходять спосіб поєднати ці два.
Каркасні дроти
«Із послугами для клієнтів іноді потрібно розробити каркас, який є результатом для клієнта, а іноді - ні. Коли цього не робите, іноді ви все одно будете його розробляти, але для себе ... Я думаю, що не повинно бути одного способу робити все щоразу ". - Ден Рубін
Гаразд. Зараз нам час зайнятися хорошими речами.
Wireframes - це надзвичайно низька точність (що означає прості: рядки, рамки, текст) конструкції, що зосереджуються на ієрархії вмісту, загальному макеті та функціональності. Каркас повинен виключати колір, текстуру або зображення. Натомість це суто структурний документ, який намагається організувати зміст та взаємодію без усього візуального безладу, який можуть створити елементи дизайну.
У деяких фірмах дизайнер UX та дизайнер інтерфейсів - одна людина, але це не завжди так. Якщо ви працюєте в агентстві або в команді, завдання, пов’язане з каркасною програмою, напевно, впаде на іншу людину. Той, хто робить UX, швидше за все, передасть вам стос каркасів для роботи, тому я рекомендую відверто поговорити з цією людиною, щоб гарантувати, що ви отримаєте каркаси такого рівня деталізації, який вам підходить.
Наскільки детально слід скласти каркас?
Рівень деталізації, що входить до каркасу, є суб’єктивним рішенням. Глибина каркасного каркасу часто залежить від того, скільки процесу прийняття рішень залишається дизайнеру інтерфейсу і скільки контролюється дизайнером UX. Детальний каркас означає, що дизайнер UX вже робить рішучий вибір щодо макета та ієрархії вмісту. Але часто каркаси не закріплені в документах, тому дизайнер інтерфейсу має достатньо широти для переміщення вмісту під час створення остаточного макету.
На деталізацію каркасу також може впливати кількість вмісту на сторінці або тип вмісту, як свідчить зображення нижче. Домашня сторінка з кількома рядками тексту та кількома великими зображеннями не вимагатиме детального каркасу. Оскільки елементів на сторінці дуже мало, ретельна їх ієрархічна організація зайва.
На відміну від цього, домашня сторінка сайту новин з кількома колонками вмісту, пропонованими історіями, стрічками соціальних мереж та відеокліпами потребуватиме попереднього планування. На зайнятому веб-сайті каркасу слід приділяти більше уваги через необхідність у структурі.
Найчастіше якість каркаса залежить від того, як використовується каркас. У деяких випадках каркасний каркас може бути використаний для вироблення цілком конкретних рішень щодо планування та ієрархії. В інших випадках каркасний каркас служить загальним керівництвом для дизайнера, на який слід посилатись при розробці конструкцій.
Дуже низька точність каркасних конструкцій може надати вам велику гнучкість при розробці вашого макета, але часто надає мало підказок про деталі функціональності та структурні потреби дизайну. Високоякісні каркасні мережі можуть надати багато інформації про деталі сторінки, але можуть змусити вас почувати себе сповненими вибору дизайну. Як свідчить приклад нижче, ваші проекти також не повинні точно слідувати каркасам.
Дріт-каркаси - це свого роду скорочення для кінцевих проектів. Таким чином, загальні елементи мають спрощене представлення. Зображення представлені у вигляді квадрата з перекресленими через нього лініями. Форми - це поля з заголовками над верхнім рядком. Горизонтальні навігаційні елементи - це довгі рамки з рівномірно розміщеними заголовками. Текст - це ... ну, текст. Але наголошу: нічого вигадливого! Каркас не може мати майже нічого спільного з тим, як буде виглядати остаточний дизайн, як показано на малюнку нижче.
Складаючи каркасний каркас, ви повинні задати собі чотири запитання:
- Який вміст повинен бути на сторінці?
- Як різні частини вмісту співвідносяться між собою?
- Як вони можуть бути влаштовані?
- Як користувач повинен взаємодіяти із вмістом?
Це воно. Якщо ви думаєте про шрифти та зображення, швидше за все, ви випереджаєте себе. Просто зосередьтеся на змісті та структурі.
Ця стаття є ексклюзивним уривком із "Дорожньої карти" веб-дизайнера Джованні Діфетерічі, опублікованої SitePoint. Ця повнокольорова книга на 192 сторінки охоплює всі етапи від початкового натхнення до закінченого дизайну, допомагаючи зробити вас більш професійним веб-дизайнером.
Ви можете зареєструватися, щоб отримати безкоштовний зразок глави перед тим, як замовити книгу.
