Зміст
- Адаптивна методологія
- Як спочатку зберегти вміст?
- Чому?
- 01. Визначте свій бізнес та цілі користувачів
- 02. Посилайтеся на них при кожному шансі
- 03. Не бійтеся відштовхуватися
- 04. Натисніть і на свою власну команду
- 05. Спершу визначте всі ваші потреби у вмісті
- Як абстрагувати вміст від презентації?
- Нам потрібно перестати думати про зміст з точки зору макета
- Примусьте своїх клієнтів планувати свій вміст незалежно від дизайну
- Допрацюйте свій вміст перед дизайном
- Використовуйте реальний вміст - кожен раз
- Так як же каркасні конструкції працюють для адаптивних дизайнерських проектів?
- Ескізи
- Внутрішній браузер
- Анотації
- Використовуйте реальний вміст у каркасах
- Як спершу спроектувати маленькі екрани?
- Абстрактні конструкції з пристроїв на початку
- Використовуйте плитки для стилів
- Створіть гармонію інтерфейсу
- Перегляньте все в браузері
- Дотримуйтесь рівноваги за допомогою статичних програм
- Висновок
Давайте зрозуміємо: дизайн є рішенням лише у тому випадку, якщо він зосереджується на глибших проблемах, чому це стоїть. Надійний процес завжди повинен керувати нашою роботою, але нам потрібно взяти щось більш гнучке. Наше середовище нарешті зарекомендувало себе як рідина, тож чи не повинен наш процес? Подумайте про дизайн системи: вам потрібно побачити як всю картину, так і крихітні деталі. Неможливо? Далеко не так!
Френк Хімеро це чудово висловлює у своїй книзі «Форма дизайну»: «Є частина, коли художник відступає від мольберта, щоб отримати новий погляд на роботу. Живопис - це рівні частини поблизу та далеко: коли поруч, художник докладає всіх зусиль, щоб зробити свій слід; коли далеко, він оцінює роботу, щоб проаналізувати її якості. Він відступає назад, щоб робота мовляла до нього ».
Нам потрібно дозволити нашій роботі, засобу масової інформації говорити з нами. Зі зростанням чуйного дизайну ми нарешті сприймаємо наш засіб, яким він мав бути: рідина. Це чудовий час, щоб відступити і оцінити роботу, проаналізувати і прийняти новий спосіб здійснення речей, новий процес. Пройшли часи статичних макетів та веб-дизайнерів, які не розуміють код. Настав час адаптивного процесу.
Адаптивна методологія
Ми збираємось відкрити великий секрет надійного процесу на початку цієї статті. Тому що ми такі божевільні. Готові? Реагуючий процес - це відповідальний процес. Нечітко? Може бути. Нерозумно? Ні. Як і рух веб-стандартів до цього, адаптивний дизайн штовхає Інтернет вперед, зручними для майбутнього методами.
Як і будь-який процес проектування, він повинен зосередитись на тому, чому все це лежить. То чому веб-сайти існують? Для доставки контенту. Це може бути завданням, соціальним, інформаційним ... неважливо. Все зводиться до цього: почніть з того, чому, добре структурований вміст та взаємодія, які мають значення.
Ось питання, які ми найчастіше чуємо про наш адаптивний процес дизайну.
Як спочатку зберегти вміст?
Ми всі настільки оптимістичні на початку проекту. "Вміст насамперед!" ми говоримо. “Цілі користувача! Пам’ятайте, що важливо! " Це правда. Але що це означає? Як ви впроваджуєте процес, що передує вмісту?
Навіть якщо ти знаєш (або думаєш, що знаєш), про це легко забути в ході проекту. Довгострокові проекти мають тенденцію затягуватись і продовжувати (і продовжувати… і продовжувати…). Ми перестаємо думати про те, чому, і починаємо концентруватися на тому, як. Ми обманюємо себе думкою, що наші проекти можна розділити на окремі фази «відкриття» та «розробки», які можуть існувати незалежно.
Правда в тому, що ми повинні постійно запитувати, чому, весь час. Скільки б ви не думали, що знаєте, незалежно від того, скільки планування ви зробили - кожного разу, коли приймаєте рішення, кожного разу, коли розробляєте кнопку або пишете заголовок, ви повинні запитати ...
Чому?
Чому я це роблю? Для кого це? Якої бізнес-мети це допоможе моєму клієнту досягти? На що це допоможе моїм користувачам? Не просто спочатку зберігайте вміст. Спершу дотримуйтесь чому.
Завдяки цьому звучить легко. Але щоб зробити це добре, вам доведеться натискати. Підштовхуйте своїх клієнтів та вашу команду до того, щоб спочатку визначити їх причини. Немає Lorem Ipsum, немає «ми до цього дійдемо пізніше». Роби своє домашнє завдання! Усі ваші хау повинні починати з твердої причини. Для Жовтого олівця це означало великі зміни в способі викладання, оцінки, бюджетування та планування проектів. Нам довелося вимагати бюджету та часу, щоб провести надійні дослідження, стратегію та планування. Ти теж можеш. Але коли ваші клієнти та ваші команди побачать величезні переваги визначення потреб у вмісті заздалегідь, вони ніколи не озирнуться назад.
І наша робота їх виховувати. (Прочитайте чудову книгу Майка Монтейро «Дизайн - це робота», якщо ви хочете дізнатись більше про взаємодію з клієнтами.) Клієнтам важко зрозуміти цінність усіх цих досліджень та роботи наперед. А чому вони повинні? В кінці вони не отримують нічого «закінченого» - і занадто часто вони просто отримують рахунок-фактуру та великий старий документ Word.
Це не їх вина - ми винні. Ми несемо відповідальність за кращу роботу з демонстрації цієї цінності. На кожному кроці нам потрібно повертати все до найважливішого, чому.
Це особливо важливо для адаптивного дизайну. Адаптивний веб-сайт не вимагає набагато більше зусиль для розробки, але це означає набагато більше планування. Насправді, це планує, що ми повинні були робити це весь час. Станьте свідком поточного редизайну проектних циклів кожні три роки. Ви хочете продовжувати це робити? Ми точно не маємо.
Отже, ось три кроки, щоб зберегти вміст першим у процесі проекту.
01. Визначте свій бізнес та цілі користувачів
Складіть пріоритетний перелік бізнес-цілей та цілей користувачів для вашого проекту. Що найбільше хочуть знати чи робити ваші користувачі? Проведіть дослідження. Робіть обґрунтовані умовиводи, а не дикі здогади. Нехай усі ваші зацікавлені сторони погоджуються.
02. Посилайтеся на них при кожному шансі
Кожного разу, коли ви приймаєте рішення, кожен раз, коли хтось пропонує нову функцію чи елемент дизайну, або сторінку вмісту, змушуйте їх зіставляти запит із ціллю бізнесу та користувача. На яку реальну потребу відповідатиме ця функція? У чому справжня причина? (Підказка: "Тому що я хочу" або "Мені дуже подобається синій" або "всі у Facebook" не враховуються.)
03. Не бійтеся відштовхуватися
Це може бути важко. Взаємовідносини з клієнтами можуть бути делікатними, і спокусливо відмовитись від битви, щоб перемогти у війні. Але пам’ятайте, ми всі в цьому разом! Це не бізнес проти користувача; нас проти них.
Задоволення потреб користувачів - найкращий спосіб задовольнити потреби бізнесу. Оскільки без наших користувачів ми не маємо бізнесу! Клієнти (хороші клієнти) не наймають вас, щоб сказати "так" усьому. Тож, якщо ваш клієнт просить щось, що не відповідає його цілям або потребам користувачів, не бійтеся кидати їм виклик. Справа не в его. Йдеться про створення найкращого можливого рішення.
04. Натисніть і на свою власну команду
Це також може бути складною справою під час роботи в творчому колективі. Поділ ролей - візуальний дизайн, користувальницький досвід, інформаційна архітектура, стратегія вмісту, виробництво контенту - може призвести до помилкового спілкування. Ми зайняті, перевантажені електронними листами. Важко залишатися з проектом від початку до кінця, особливо після того, як „ваша” робота закінчена.
Відносини вашої команди є принаймні такими ж важливими, як і стосунки з клієнтом. Ми маємо нагадати собі про те, чому, як і наші клієнти. Співпраця є ключовою. Ви не можете просто «здати» план вмісту, каркасні рамки чи конструкції. Наскільки це можливо, нам доводиться працювати рука об руку. Легко «закінчити» результат і перейти до чогось іншого. Набагато складніше залишатися з проектом, коли ситуація стає важкою.
Водоспадний підхід до творчої роботи просто не працює. Спритна, спільна робота членів команди забезпечує кращі результати.
05. Спершу визначте всі ваші потреби у вмісті
Ось у чому річ: адаптивні веб-сайти планують довше. Ми вже не просто плануємо єдиний контекст. Ми плануємо всі контексти, про які ми знаємо зараз, і деякі, які ще не існують.
Але для планування всіх цих складностей потрібно набагато менше часу, ніж для повернення та модернізації функцій та функцій, яких ви не враховували. Тож витратьте час / зусилля / бюджет. Примусьте своїх клієнтів та вашу команду визначити (і зобов’язатись!) Весь їх вміст, перш ніж займатися дизайном. Використовуйте таблиці сторінок. Використовуйте структурований вміст. Захистіть ваш вміст уже зараз! Або плакати пізніше.
Як абстрагувати вміст від презентації?
Ви багато цього чуєте в Інтернет-сфері. Але почекай, що? І почекайте - чому?
Оскільки презентація може (і буде) змінюватися. Те, як ми розробляли веб-сайти 15 років тому, майже не впізнається з того, як ми їх представляємо зараз. Але ви знаєте, що не змінилося? Слова. Ми все ще використовуємо їх. Інтернет існує переважно для (текстового) вмісту. Ми все ще використовуємо його для вирішення інформаційних проблем; для виконання завдань. Але якщо ваш вміст залежить від способу презентації (вступні сторінки Flash, хто?), Існує реальна ймовірність, що він не буде використаний через кілька років. І це відстій.
Нам потрібно перестати думати про зміст з точки зору макета
Ми (як галузь) навчили наших клієнтів думати про вміст з точки зору макета. "Покладіть це на бічну панель", - кажемо ми. "Це повинно йти в нижньому колонтитулі." стій! Зупини це. Стій. Справа не в розташуванні. Йдеться про пріоритет. Який найважливіший вміст для ваших користувачів? Тому що вгадайте: макет змінюється в різних контекстах. У вашому дизайні маленького екрану (ймовірно) не буде бічної панелі.
Гігантське супер-меню, яке хоче ваш клієнт? Не збирається літати на iPhone.
Примусьте своїх клієнтів планувати свій вміст незалежно від дизайну
Гаразд, вам не потрібно змушувати їх. Заохочуйте їх. Сильно заохочуйте. Таблиці сторінок чудово для цього підходять. Якщо ви його ще не читали, негайно перейдіть до Інтернет-стратегії вмісту Крістіни Халворсон та Меліси Рах, щоб отримати додаткову інформацію про те, як їх створити. Організуйте їх у пріоритетному порядку. Не посилайтеся на місце розташування чи макет. Це допоможе вашим клієнтам продумувати свій вміст більш продуктивно, а також сприятиме створенню процесу створення вмісту, перш ніж допрацьовувати каркасні рамки або дизайн.
Допрацюйте свій вміст перед дизайном
Гаразд, це не завжди можливо. Але чим більшу невизначеність ви можете усунути перед тим, як приступити до проектування, тим менше вам доведеться повертатися і змінювати речі пізніше.
Використовуйте реальний вміст - кожен раз
Якщо можливо, використовуйте краєвий вміст - покажіть своїм клієнтам найскладніші сторінки, зображення та меню. Це дозволить уникнути несподіванок пізніше в процесі, коли вони побачать свій найзаплутаніший вміст у готовому продукті.
Функціональні каркаси в браузері роблять щось різне. Дозвольте своїм клієнтам спостерігати, як їх вміст рухається та змінюється на різних екранах. Вказуйте на це, коли ви представляєте свої каркасні рамки (ви робите особисті презентації, так?) Продемонструйте їм, як пріоритет їхньої інформації залишається незмінним на різних розмірах екрана, поки макет змінюється.
Так як же каркасні конструкції працюють для адаптивних дизайнерських проектів?
Ми твердо впевнені, що дизайн взаємодії для RWD повинен потрапляти в браузер швидко і часто. Практично неможливо створити статичний документ, який би все описував. Звичайно, ми могли б створити документ, який демонструє три, чотири чи п’ять точок розриву, але це лише частина історії. А як щодо всіх моментів між точками зупинки? Це відбувається в браузері.
Ескізи
Тим не менше, добре мати можливість швидко накреслити свої ідеї спільно. Це не повинно відбуватися в будь-якому конкретному середовищі, але є лише щось про олівець на папері. Вся справа в тому, щоб швидко та ітеративно витягувати ідеї. Ми любимо малювати дошки, коли це можливо, і для цього існує навіть програма: UI Sketcher.
Внутрішній браузер
Ось справжній квиток для нас. Ми любимо повторно використовувати шаблони та системи, демонструючи RWD у браузері. Звичайно, ми могли б щоразу створювати власну систему з нуля, але це не допомагає ні нам, ні нашим клієнтам.
Ми також любимо використовувати фреймворки швидкого реагування на прототипування, такі як Bootstrap Twitter або Zurb’s Foundation. Ми особисто схиляємось до Фонду, оскільки він відповідає нашому робочому процесу. Було б чудово, якби хтось із них підходив до малого екрану з низькою пропускною спроможністю, але саме так ми рухаємось.
Анотації
Анотації до каркасів RWD є дуже важливими, але, як ми виявляємо, часто ігноруються. Скажіть це вголос: документація, документація, документація! Ми бачили кілька прикладів цього від друзів, і ми вважаємо, що журі все ще шукає «найкращого» способу належного коментування адаптивних каркасів у браузері. Як уже згадувалося вище, ми регулярно використовуємо Foundation by Zurb і хочемо використовувати його надбудову Reveal для відображення наших анотацій. Ці анотації з’являються лише на великих екранах і в ідеалі їх можна вмикати та вимикати.
Використовуйте реальний вміст у каркасах
Навколо Lorem Ipsum було багато суперечок щодо каркасів та дизайнерських макетів, але якщо у вашому каркасі немає реального вмісту, ви робите це неправильно. Зміст інформує про рішення щодо взаємодії та повідомляє, коли дизайн зламається. Як Лорем Іпсум може це зробити?
Як спершу спроектувати маленькі екрани?
Протягом багатьох років ми розробляли з урахуванням конкретної роздільної здатності. Це було налаштування за замовчуванням. Незалежно від того, ескізи в блокнотах, каркасне оформлення в OmniGraffle, робота в Photoshop чи проектування в браузері, ми знали, яким буде наш розмір полотна. Ті дні пройшли. Ми дуже віримо в те, що спочатку розробляємо для маленького екрану і поступово вдосконалюємо. То як дизайнер змінює свій робочий процес із фіксованого розміру полотна на плинний?
Абстрактні конструкції з пристроїв на початку
Якщо ми не розробляємо для конкретного пристрою, дуже важливо, щоб ми перестали думати про пристрої і почали думати про досвід. Усі наведені нижче методики допомагають дизайнерам розробляти свій досвід, залишаючись при цьому агностичним (до певної точки).
Використовуйте плитки для стилів
Використовуйте плитки для стилів, щоб встановити напрямок і швидко повторювати. Стильні плитки дозволяють дизайнеру визначити напрямок дизайнерської системи, не стаючи занадто конкретним. Їх творець Саманта Уоррен описує їх так:
«Плитка для стилю - це для тих випадків, коли фейсборд занадто розмитий, а комп занадто буквальний. Style Tiles встановлюють прямий зв’язок з реальними елементами інтерфейсу, не визначаючи макета ».
Створіть гармонію інтерфейсу
Уявіть собі полотно з усіма візуальними та інтерактивними елементами, зібраними разом. Не бачити певний макет інтерфейсу користувача, а бачити, як всі елементи працюють разом. Це полотно гармонії інтерфейсу. Полотно гармонії інтерфейсу дозволяє дизайнеру зберігати ідеї разом, але не фокусуючись на якомусь одному розмірі екрана. Крім того, це чудовий спосіб ефективно спілкуватися та документувати розроблені елементи, а не створювати повний посібник із стилю.
Якщо вам цікаво читати далі, дві чудові статті на тему гармонії інтерфейсу можна знайти тут і тут.
Перегляньте все в браузері
Все потрібно об’єднати в браузері. Ось де дизайн інтерфейсу дійсно оживає. Бачити, як реальний вміст взаємодіє з візуальними елементами, має вирішальне значення. Неможливо це зробити належним чином у статичному середовищі. Потрібно подивитися, як він відреагує на рідному середовищі.
Дотримуйтесь рівноваги за допомогою статичних програм
Існує потік між браузером та статичними програмами, такими як Photoshop. Повинен бути баланс, який дозволяє створювати дизайнерську систему плавно і природним чином. Звичайно, це відбуватиметься у Photoshop, але дизайнеру, який займається дизайном, потрібно навчитися креативно мислити і в браузері.
Висновок
Ще раз, з почуттями: починайте з того, чому, з добре структурованим вмістом та взаємодіями, які мають значення. Спершу зосередьтеся на маленькому екрані та низькій пропускній здатності та поступово вдосконалюйте свої чуйні концепції. Наше середовище досягає повноліття. У нас є шанс зробити все правильно і змінити світ, один веб-проект за раз.
Відкрийте для себе найкращі 20 інструментів для каркасного проектування дизайнерів
Стів Фішер координує дослідження, аналіз, дизайн та стратегію в Yellow Pencil у Канаді та виступає з такими темами, як RWD, UX та відкрите джерело. Ален Маккензі - стратег контенту Yellow Pencil.
