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

Ми обґрунтовували цю методологію полягаючи в тому, щоб негайно розпочати проектування, щоб дати час для перегляду.

Через деякий час ми зрозуміли, що витратили багато часу на дизайн, чому? Перегляди займали весь час. Ревізії були складними; нам довелося налаштувати макети, графіку та типографіку. Усе було розчаровуючим, катастрофічним для термінів проекту, тривожним для клієнтів і виснажливим для нас. Минув деякий час, перш ніж ми зрозуміли, що нам потрібен інший підхід. Ми вирішили повернутися до початкового процесу «Square One», який ми ігнорували раніше «Wire-framing». Ми почали з каркасів сірих коробок, включили їх у наш процес проектування, потім перейшли до іншого процесу та додали його до процесу проектування. Наприкінці модель стала на місце, завдяки «дротяному каркасу», це заощадило наш час і допоміг нам вирішити проблеми раніше. Тому я голосую за каркасні конструкції як за «перші ворота» в процесі проектування.

Каркасні дизайни взаємодії з користувачем

Хто знає, на самому ранньому етапі ви можете розпізнати потенційну проблему зручності використання у своїх проектах. Іноді чудова концепція проекту із суворими (URS) вимогами до користувача, але під час початкового процесу вони, здається, стають на свої місця. Ще гірше трапляється, коли ми починаємо складати плани для паперів: «Що сталося?» ми проігнорували дротяний каркас, який займає лише кілька хвилин, щоб накреслити план, ніж барвистий Photoshop. Краще почати пристосовуватися раніше, ніж пізніше.

Wire-framing як інструмент управління часом

Управління часом є важливою технікою для кожного успішного проекту, якщо проект має жорсткий графік; Ви могли б подумати: «Навіщо витрачати свій час на фреймінг, тому я краще перейду до барвистого Photoshop». Спочатку ми припустилися цієї помилки, але натомість переглянули всю концепцію, що забрало багато часу та витратило ресурси. Переглядати сірі коробки та ескізи набагато легше, ніж переглядати повнокольорові проекти, об’єднані кількома складними елементами.

Каркас використовується для створення фактичних і правильних розмірів сторінки. Після схвалення клієнтом нам потрібен лише графічний засіб для покращення його зовнішнього вигляду. Фокус у тому, що якщо каркаси, ескізи та сірі коробки в порядку, то ми не матимемо часу на перегляд. Замість цього ми перейдемо до наступної «візуальної» частини процесу.

Каркас для зв’язку клієнтів

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

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

7 захоплюючих речей про каркаси

1 Підвищує досвід командної роботи

Процес створення каркаса об’єднує різні групи людей з різними навичками; кожен є частиною процесу проекту. Менеджери проектів, дизайнери, розробники об’єднуються для досягнення мети. Це цінно, оскільки покращує роботу в команді та допомагає товаришам краще розуміти один одного. З моделлю «водоспад» проекти можуть бути фактично зламані.

2 Прозоре спілкування

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

3 Залучайте клієнтів

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

4 різні підходи

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

Різноманітні підходи включають технічний підхід — нові та актуальні технологічні функції, досвід користувачів і тестування зручності використання, як користувачі збираються досягти мети та завдання швидко, перш ніж їм набридне, що призводить до переривання завдання, знову ж таки екологічний підхід — хто є зацікавленими сторонами? На які поля ми орієнтуємося? Які функції є важливими, щоб легко вписатися в певну зацікавлену сторону та цілеспрямовану сферу?

5 Основа для тестування

Маючи 3 або 5 прототипів, ви можете протестувати ескіз проекту з реальними користувачами. Існує думка, що ми можемо тестувати лише за допомогою завершеного прототипу HTML, але це не так. Крім того, намальовані вручну каркаси можна використовувати для тестування. Ви можете запитати пропозицію користувача щодо кнопок, які вони хотіли б натиснути; вони також можуть отримати відгук про теги імен і, нарешті, вони можуть допомогти перевірити, чи вони мають правильну візуальну ієрархію. Тестування за допомогою каркасу допомагає раніше виявляти проблеми.

6 Швидший проект

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

Каркаси за допомогою Photoshop

Сірі коробки та ескізи з фотошопом.

Крок 1: Зберіть додаткові вимоги від клієнтів, а потім «запустіть» розфарбовування повного фотошопу та почніть каркас.

Крок 2. Створіть документ на основі системи сіток 960 (1100 пікселів у ширину та 760 у висоту). Про це можна дізнатися в розділі «Налаштування сітки у Photoshop».

Крок 3: інструмент Paint Bucket (G) використовується для заповнення фону світло-сірим кольором, щоб пояснити, що буде фоновий колір або зображення.

Крок 4. Виберіть інструмент «Прямокутник» на панелі інструментів і намалюйте рамку, яка символізує область вмісту. Ми використовуємо систему сітки 960; моє намальоване поле матиме ширину 940 пікселів. Зробіть колір переднього плану білим за допомогою інструмента «Paint Bucket Tool», щоб він виднівся на нашому сірому тлі.

Крок 5: Щоб зробити процес набагато швидшим, просто (введіть літеру D), щоб встановити для переднього плану чорний або будь-який колір, який вам підходить, а для фону – білий або будь-який колір. Потім намалюйте чорні прямокутники для відображення областей вмісту. Знову ж таки, ви можете змінити прозорість фону, щоб зробити його сірим або будь-яким кольором.

Крок 6: Додайте в сітку прямокутник, щоб відобразити будь-що. У цьому випадку «Кнопка входу» введіть значення непрозорості («30»), щоб зменшити непрозорість прямокутника («30») після того, як прямокутник буде намальовано. Ви можете додати текст за допомогою інструмента «Текст» (T) на панелі інструментів тексту, щоб додати над полем текст «ВХІД». Додайте ще один прямокутник, щоб створити область навігації, знову зменште значення непрозорості, щоб зробити її сірою.

Крок 7: додайте прямокутники, створіть області стовпців вмісту. Використовуйте макет із двома стовпцями з трохи більшим стовпцем основного вмісту та меншим стовпцем для зображення домашньої сторінки. Встановіть непрозорість для стовпців на 10%, а також додайте ще один прямокутник для представлення нижнього колонтитула внизу сторінки.

Сторінка 8: В області вмісту додайте фіктивні тексти за допомогою команди Photoshop «Текст» > «Вставити Lorem Ipsum».

Інші програми

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

OmniGraffle

Він схожий на Micro-Visio, він має дуже гарні трафарети, які можна використовувати для високотехнологічного проектування, і функції вражаючі. Це найкраще.

Ніндзя Мок

Мій улюблений, БЕЗКОШТОВНИЙ для використання, він має дуже гарні функції та шаблони, які можна використовувати для створення концепції інтерактивного проекту. Це дозволяє користувачам працювати офлайн і онлайн.

Чудові діаграми

Це добре для початківців, це БЕЗКОШТОВНО, а інтерфейси прості для розуміння.

Бальзамік

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

Малюнок Google Drive

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

Гліффі

Gliffy простіше у використанні, він зручний і пропонує такі функції діаграм, як блок-схеми та плани, він має діаграми Венна з мережевими процесами та UML, який експортує у SVG, PNG і JPEG.

Лумзи

Це флеш-додаток, він забезпечує платформу для співпраці, він безкоштовний, швидкий і, нарешті, має різні типи елементів керування, які прості у використанні.

Moqups

Безкоштовний, швидкий і простий у використанні, мені не потрібен плагін для браузера, зв’язок екрана та кнопки виконано бездоганно, тому користувач може опублікувати демонстрацію для перегляду та використання клієнтами. Допускається експорт зображень згідно специфікації. Окрім цього, стандартні HTML5 і JavaScript були інтегровані в Moqups.

Джерело запису: instantshift.com