Один из лучших подходов к улучшению процесса разработки адаптивного веб-дизайна на 2016 год

Posted on by riasevastopol

Разработка дизайна для девайсов с фиксированным размером экрана была актуальна в течении многих лет, но этот процесс «зашел в тупик», в то время, когда показались устройства с экранами самых различных размеров, что стало причиной появлению Адаптивного веб-дизайна.

Если вы желаете разрабатывать адаптивный дизайн для веб-сайтов, вот нужные трансформации, каковые стоит внести в данный рабочий процесс до нового 2016 года. Эти рекомендации основаны на моем 15-летнем стаже работы в качестве веб-дизайнера, Арт-директора агентства, инструктора по дизайну в Университете Род-Айленда.

Переосмысление процесса проектирования

Обновление рабочего процесса под адаптивный веб-дизайн начинается с переосмысления процесса проектирования.

Создавать статические, ориентированные на дектоп компьютер, композиции в Photoshop, вставлять в макет страницы какой-либо тщетный текст-заполнитель, а после этого воображать эти композиции клиенту для просмотра, не отлично трудится в адаптивной среде, по причине того, что те статические работы по дизайну не показывают интерактивность либо то, каким методом пользовательский опыт будет изменяться при применении экранов различных размеров.

Как поясняют в бесплатном управлении «Лучшие техники Адаптивного дизайна», хороший адаптивный дизайн требует современного подхода, как к примеру:

  • Подход «Content-First» и «Mobile-First»;
  • Предоставлять черновые либо еще не усовершенствованные варианты дизайна на начальной стадии работы;
  • Показывать адаптивные прототипы вместо статических композиций;
  • Трудиться с самыми сложными случаями, каковые видятся в вашем дизайн-проекте.

Один из лучших подходов к улучшению процесса разработки адаптивного веб-дизайна на 2016 годContent-First дизайн

В то время, когда дизайнер формирует упаковку для самой материальной продукции, у него довольно часто имеется всецело созданный прототип (либо кроме того настоящий продукт), дабы создать контекст для собственного дизайна.

Форма продукции, вес, и все случаи применения – это только немногие из тех факторов, над которыми дизайнер будет думать на протяжении проектирования. Без ясного и полного представления о том, что является продуктом, дизайнеру нужно будет приложить много упрочнений, дабы создать соответствующую упаковку, не смотря на то, что веб-дизайнерам было нужно бы заниматься лишь этим в течение нескольких лет.

Затевать проект по веб-дизайну без контента все равно, что создавать дизайн упаковки без продукта. Вы имеете возможность приложить все усилия, но кто знает, будет ли конечный контент либо продукт вправду соответствовать тому, что вы создадите?

Дизайн сайта – это не просто шаблон, в который клиенты будут «впихивать» содержание. Начиная работу с контента, вы сможете решить, как наилучшим образом представить его пользователям. В сфере адаптивного веб-дизайна, начиная работу с содержания, вы сможете выяснить, что есть самые важным в проекте.

Эта контентная иерархия окажет помощь вам скомпоновать материал и тем самым принять верные ответы, касающиеся точек прерывания сайта.

Потребовать содержание в начале процесса проектирования сайта, звучит, само собой разумеется, здорово, но действительность такова, что у клиентов редко имеется представление о конечном содержании в начале разработки проекта. Это естественно. Вам не нужна окончательная, готовая к производству копия. Вам легко необходимо представление о том, каким контент будет и кое-какие текущие образцы первых чертежей проекта.

Это похоже на то, как дизайнер упаковки трудится с прототипом.

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

Mobile-First дизайн

С фактическим, продуманным содержанием на руках (в отличие от некоторых тщетных текстовых материалов), вы на данный момент настроены на то, дабы думать о том, как это содержание должно быть представлено и как должны быть расставлены приоритеты. оптимальнееэто сделать посредством подхода «mobile-first».

Подход «Mobile-First» – это «отклонение» от классического веб-дизайна, где процесс начинается с макета дизайна, ориентированного на дектоп компьютер. Начиная работу с малого экрана, вы сможете выяснить, какой тип и какие элементы содержания есть самые важными. Он вам кроме этого окажет помощь осознать, какой контент не нужен по большому счету, и исходя из этого возможно исключен из всех вариантов дизайна.

3 mage002

В следствии, вы увеличивайте масштаб опыта, что ощущается на все 100%, а не ухудшаете опыт до меньших размеров экрана.

В ходе «Mobile-First», начните работу со схемы содержания сайта. После этого, вы имеете возможность создать приоритетную иерархию для каждой схемы раздела либо содержания. Приоритетная иерархия разделов окажет помощь вам выяснить, как и где представить их на точках прерывания.

Применение дизайна в стиле плитки

Дизайнеры традиционно применяют графические редакторы, такие как Photoshop, дабы создать внешний вид веб-элементов. Неприятность с этим подходом пребывает в том то, что Photoshop формирует образцы дизайна с высокой точностью, в случае если в начале процесса, вы должны быть сосредоточены на работе с элементами громадных изображений, такими как шрифты, цвета, и интерфейсные элементы, такие как кнопки, меню и кнопки управления вводом.

Применение стиля плитки – наилучший метод представить и урегулировать вопросы, касающиеся этих элементов дизайна. Как сообщила Саманта Уоррен: «Стиль Плитки устанавливает прямую сообщение с настоящими элементами интерфейса без определения схемы».

Процесс применения этих плиток несложен:

  1. Послушайтекакие потребности у каковы требования и клиента их брендовой идентичности
  2. Используйтеэти потребности в ответах, каковые вы применяйте в собственном проекте
  3. Определитевизуальный язык для сайта
  4. Переберитеэти решения, и осознайте, что вы имеете возможность сделать значительно стремительнее, применяя стиль Плитка, а не если бы вы трудились с серией отличных Photoshop файлов.

Эти элементы дизайна большого уровня окажут помощь вам принять более обоснованные дизайнерские ответы. Вы имеете возможность создать стиль плитки параллельно со схемой, поскольку оба процесса будут использованы в вашем прототипе и более поздних отличных дизайнерских работах.

Прототипы Адаптивного дизайна

Представленные статические дизайнерские компоновки не трудятся на адаптивных веб-сайтах. Статические компоновки не показывают подлинный дизайнерский опыт пользователя, по причине того, что они не смогут поменять собственную схему, зависимую от размера экрана, что будет иметь настоящий сайт.

Дабы решить эту задачу, многие дизайнеры создают серию компоновок, показывающие разные вероятные точки прерывания. Но это может существенно расширить время, которое они выполняют за процессом проектирования, и это не продемонстрирует полную адаптивность либо интерактивность сайта.

Для адаптивных сайтов, вы должны представить фактические, адаптивные примеры на рассмотрение клиента. Вот где адаптивные прототипы смогут оказать незаменимую помощь вашему процессу.

Применение адаптивных прототипов не то же самое, что проектирование в браузере, процесс, что, как вычисляют многие веб-дизайнеры, душит их творческий потенциал. Вы так же, как и прежде имеете возможность применять графическую программу выбора, дабы установить кое-какие визуальные направления и схему, но вы должны после этого перевести данный «выбор» на интерактивную презентацию.

Давайте разглядим рабочий процесс, что включает в себя адаптивное прототипирование «mobile-first»:

1. Не имеет значения контент и какие образцы уже существует в проекте (в случае если, само собой разумеется, это не шаблонный текст), разработайте замысел содержания по всему сайту.Вы имеете возможность перечислить его на странице, либо применять таблицу, предложенную Maadmob.

2. Сейчас, в то время, когда у вас имеется «сырой материал», начните расставлять иерархию приоритетности содержания на каждой странице для мобильного просмотра.Как ваша визуальная иерархия выглядит? Поразмыслите о 5 неспециализированных адаптивных макетах, как рекомендовал Люк Вроблевски.
3. Держа в уме иерархию контента, начните совмещать дизайн со схемой контента.Если вы используете UXPin, выбирать среди 320 областей просмотров. Как продемонстрировано ниже, цель пребывает в том, дабы прежде всего спланировать блоки контента. После этого, добавить еще ??пара подробностей (стрелки и стандартные кнопки), дабы засунуть их в еще недоработанную схему.

4. Сейчас вы имеете возможность добавить главные сотрудничества, дабы ваш адаптивный прототип отразил главные потоки пользователей. Кнопки и меню должны показывать на соответствующие им страницы. Подключая ваши страницы к главным сотрудничествам, вы создали недоработанный прототип, что возможно сразу же начать тестировать, по крайней мере с 5-ю пользователями.
5. Дабы проверить прототип, вы имеете возможность применять или встроенный инструмент, предлагаемый UXPin либо применять внешний сервис, как, к примеру,UserTesting.
6. Повторите шаги 1-5, по мере того, как станете масштабировать до громадных областей просмотра.Повторите на базе обратной связи с пользователями.
7. Расставив визуальный дизайн в стиле Плитка, сейчас вы имеете возможность совершенствовать визуальный дизайн помощью Sketch, Photoshop, либо еще какого-либо инструмента по вашему выбору.

Трудимся с «очень сложными» случаями

При проектировании веб-страниц, имеется соблазн трудиться на самых несложных страницах, дабы сперва у вас были результаты, каковые возможно продемонстрировать заинтересованным сторонам. Данный стремительный поворот возможно приятным, само собой разумеется, но в ходе проектирования вы должны сосредоточиться, первым делом, на самых непростых и экстремальных обстановках.

Вот обычный пример проектирования страницы, отображающую статьи (блоги, пресс-релизы, тематические изучения и т.д.). Это страница в обязательном порядке имеет наименование в верхней части. Что происходит с дизайном, в то время, когда это наименование в два либо три раза дольше, чем то, для чего вы делали дизайн?

Наименование, которое гласит:

«Советы по Адаптивному веб-дизайну»

Будет отображаться в шаблоне макета совсем по-второму, чем то, которое гласит:

«10 крайне важных советов и методов для более действенного и успешного адаптивного дизайна сайта»

Составляйте замысел для очень сложных случаев, и под любой размер экрана. Не достаточно обеспечивать, что «очень сложный случай» будет трудиться прекрасно на громадных экранах дисплеев, каковые имеют хватает места. Они кроме этого должны трудиться надлежащим образом на экранах маленьких устройств и на всех других кроме этого.

Следующие шаги

Люди сейчас ожидают, что веб-сайты, будут трудиться на многих самых различных устройствах. Адаптивный веб-дизайн прошел путь от вопроса «в случае если» мы должны к вопросу «как» мы должны, и это тот процесс, что отличает успешные сайты от остальных.

Неотъемлемая часть этого процесса – это то, что вы применяли для статического сайта, и свойство совершенствовать собственные способы, дабы воображать результаты проектов, каковые находятся в унисон с потребностями адаптивного, многофункционального Интернета.

В случае если это управление показалось вам нужным, вы имеете возможность начать совершенствовать собственный ??адаптивное прототипирование в UXPin безвозмездно.

Случайные статьи:

Видео-урок: Адаптивный макет сайта


Подборка похожих статей:

riasevastopol

More Posts