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