Из-за легкой доступности и широкого использования мобильных телефонов в последнее время термин «сначала мобильные» приобрел новое значение для веб-разработчиков и дизайнеров UI / UX.
Он превратился из дополнительной особенности в существенную, поскольку использование Интернета было переключено в основном на мобильные телефоны, что имеет смысл только в том случае, если это происходит с вами. Почему кто-то решил нести вес ноутбука или боль в спине, когда сидел перед рабочим столом, когда ту же задачу можно выполнить, прокручивая портативные экраны мобильных устройств?
Компании и веб-сайты, которые не признают этого недостатка в плане аудитории, доступности и производительности.
Если вы еще не воспользовались гибким подходом к веб-дизайну, самое время. И если вам мешает идея, что это может быть дорогостоящим с точки зрения времени и ресурсов, вот 7 ярлыков для быстрой и относительно дешевой разработки адаптивного веб-сайта.
1. Составьте содержание первым
То, что занимает место текста lorem ipsum и изображений-заполнителей, оказывается наиболее важным аспектом вашего адаптивного веб-сайта (или любого другого веб-сайта в этом отношении).
Это этап, когда вы создаете изображения вашего сайта без дизайна интерфейса. Почему кому-то интересно читать ваш контент? Озадаченный ответ на этот вопрос нельзя украсить самыми эстетичными и адаптируемыми сайтами.
Структурирование контента сначала направляет ваше внимание на суть вашего сообщения, вашу историю. Если вы можете создавать последовательный, сильный, универсальный и целенаправленный контент, вы можете заставить свой сайт реагировать на любой конкретный контекст.
По словам Брэда Фроста, «… устройства будут приходить и уходить, а технологические тенденции будут расти, но контент, бизнес-цели и цели пользователей остаются». Половина работы выполняется, если ваш контент хорошо структурирован и обеспечивает ценность для пользователей.
два) Мобильный-первых
Вся концепция в основном включает в себя приоритеты мобильного контекста веб-сайта при создании пользовательского опыта. Разработка адаптивного веб-сайта с мобильным подходом сначала охватывает практически все мобильные устройства и базы, по крайней мере, на зачаточном уровне. Поэтому при создании сайта всегда начинайте с мобильного Интернета.
Передайте контент вашего веб-сайта в самом ограниченном, эклектичном и нестабильном контексте мобильного Интернета, прежде чем приступить к разработке дизайна для самого большого экрана на настольных ПК.
Первоначально разрабатывая мобильные устройства, вы предвидите и устраняете все препятствия и наихудшие сценарии, через которые может пройти ваша аудитория (меньший экран, медленная прокрутка, плохое подключение к Интернету и т. Д.). Увеличение масштаба не повредит функциональности ваш сайт.
В двух словах, начиная с mobile-first:
- Позволяет веб-сайту охватить более широкую аудиторию
- Сосредоточьте внимание дизайнера на основном содержании и функциональности, сокращая охоту
- Предоставляет дизайнеру возможность попробовать новые технологии, внедрить инновации и быть более изобретательным
После создания полнофункционального мобильного веб-сайта и прочной основы вы можете перейти к прогрессивному улучшению.
3) Отстань от компьютера
Дизайнеры склонны воспринимать это как шутку, но всемирно известные компании веб-дизайна дорожат старыми инструментами дизайна моды, ручками и бумагой так же, как современными и дорогими дизайнерскими игрушками.
Выключение Photoshop и оставление компьютера для рисования эскизов на листе бумаги может помочь вам невообразимым образом.
Возьмите шариковую ручку и обычную бумагу для принтера и свободно рисуйте свои каркасы, не опасаясь получить все, что идеально для пикселей, или тратить страницы великолепной молескины.
Вот почему обрамление на бумаге для заметок сэкономит ваше время:
- Ты не думаешь дважды о том, чтобы уничтожить бумагу и выбросить ее в мусорное ведро. Это легко одноразово.
- Вы можете набросать идеи по мере их появления, что приведет к более развитым начальным наброскам.
- Записывайте идеи быстрее, не беспокоясь о пикселях.
- Вы можете полностью подчеркнуть базовую архитектуру перед началом детализации (шрифты, границы, цветовые схемы и т. Д.)
Возможно, вам придется расслабиться, прежде чем вы готовы свободно набросать свои каркасные идеи. Это хорошо. Возьмите листок бумаги и свободно пишите, пока не утратите привычку подвергать сомнению свои идеи, прежде чем записывать их.
Оказавшись там, повторяйте, как возникают идеи. Неважно, насколько глупой или недостойной может показаться идея, обрисуйте ее в общих чертах. Спросите и пересмотрите их позже.
Не начинайте собирать комментарии. Он рисует сюжеты в их самой грубой форме, не совсем понятной для другого. Сохраните комментарии на потом.
4) Не создавайте макеты для каждой страницы
Хорошо детализированные и разработанные макеты – это хорошо, но не так рано, когда вы пытаетесь выяснить, что работает, а что нет, и повторять основы. Чем быстрее вы сможете рассчитать функциональность вашего адаптивного дизайна на минимальном количестве макетов страниц, тем лучше.
Помимо препятствий для быстрых изменений в базовом дизайне, макеты Hi-Fi не рекомендуются в первоначальных эскизах по следующим причинам:
- Привет-Fi макет дизайна в Photoshop ограничивает ваш фокус только пару выбранных размеров экрана. Макет страницы для Samsung Galaxy S так же важен, как и для iPhone 5.
- Привет-Fi макеты всегда делаются дважды; один раз в фотошопе, один раз в коде. Ожидание изменения макета в коде, основанное на обратной связи с пользователем, звучит как более эффективный по времени способ, поскольку его необходимо будет изменить в любом случае.
- Шаблоны и веб-опыт существуют по всему сайту. Разработка двух упомянутых выше макетов вместо отдельных страниц сэкономит вам много времени и усилий и сделает кривую обучения пользователей менее крутой, поскольку они будут перемещаться по узнаваемым шаблонам.
После того, как базовый дизайн был создан, время, потраченное на его применение к содержимому каждой страницы, может быть лучше потрачено на работу над уникальными аспектами каждой страницы, а не идентичными аспектам каждой страницы.
Причина, по которой мы концентрируемся на низкокачественной работе на ранних этапах разработки адаптивного веб-сайта, заключается в том, что, как только дизайн становится hi-fi, все внимание переключается на микро детали, высоту линии, границы, цвета, шрифты и т. д. У широкого пользовательского интерфейса не будет времени для устранения неполадок.
5) Ускорьте работу с помощью инструментов
Вам наверняка понадобится помощь от инструментов, если вы хотите уложиться в сроки. Существует множество инструментов и программного обеспечения, которые предлагают множество ярлыков для создания адаптивных веб-сайтов.
Давайте кратко рассмотрим некоторые из них.
Отзывчивая типография
- JS – наделяет дизайнера точным контролем над многими аспектами типографики.
- Обернуть текст – Другой плагин jQuery, который помогает вашим заголовкам реагировать и текст свободно владеет многочисленными устройствами.
Адаптивные макеты страниц
- Система сетки Fluid 960 – Это гибкая версия 960 Grid System, которую мы все использовали для экспериментов по адаптивному веб-дизайну.
- Без сетки – Проверенная временем платформа HTML5 и CSS3 для создания адаптивных и кроссбраузерных веб-сайтов. Это идеально для тех, кто считает, что сетевая система слишком ограничена.
Ответные прототипы
- UXPin – Инструмент для создания каркасов и создания прототипов, который помогает дизайнерам собирать страницы с контентом и непрерывно воспринимать поток пользователей.
Кросс-браузерное тестирование и поддержка
- Adobe Device Central – Device Central имеет широкий спектр мобильных устройств, где вы можете увидеть его адаптивный дизайн. Хотя предпочтительно проверять беглость и скорость отклика веб-сайта при просмотре его на разных мобильных устройствах, Adobe Device Central наиболее близок к тем, кто не может позволить себе покупать новые гаджеты только для этой цели.
- Веб-разработчик – Это еще более дешевая версия Adobe Device Central. Это расширение для браузера доступно для Firefox и Chrome и поставляется с несколькими дополнительными инструментами, которые могут быть полезны при разработке адаптивных веб-сайтов.
Эти инструменты будут иметь большое значение при разработке шаблонов и пользовательского опыта, описанных выше. Не стесняйтесь, чтобы получить последнюю версию и вкладывать значительные средства в инструменты, которые вы хотели бы использовать. Это только для долгосрочного блага.
6) Держите руку на пульсе современного развития
Имея в своем распоряжении так много инструментов и свободу создавать и вводить новшества в свое удовольствие, вы можете почувствовать, что адаптивная разработка веб-сайтов – это сфера вечных возможностей. Кроме того, вы можете полагать, что разработка веб-сайтов для платформы с неизвестными ограничениями позволяет вам расширить ограничения. Однако это не совсем так.
Лучший вид отзывчивого пользовательского интерфейса: дизайн пользовательского интерфейса обеспечивает пользовательскую мощь, а творческое различие одинаково на большом количестве мобильных устройств. Этот отзывчивый дизайн не реализуется неожиданно или просто.
Если вы хотите достичь такого признанного уровня дизайна, вам нужно быть в курсе последних тенденций и разработок в области дизайна, прежде чем даже приступить к мозговому штурму.
Поскольку пользовательский опыт является основным направлением адаптивного дизайна веб-сайтов, ниже перечислены тенденции дизайна, которые наилучшим образом были согласованы с целью UX:
- Изображения героя – Самый надежный способ привлечь внимание пользователя – это очень актуальное и эмоционально привлекательное изображение высокой четкости.
- Материал дизайн – Дизайн материалов Google на шаг впереди безумного плоского дизайна. Используя соответствующий свет и тень, основанные на сетке конструкции и адаптивную анимацию, плоский дизайн приобретает совершенно новую глубину с дизайном материала.
- Типография Минимализм в анимации и изображениях оставил место для типографии, чтобы быть драматичным. Это породило художественные и каллиграфические шрифты, которые добавляют больше человеческого и индивидуального подхода к веб-опыту.
- Фоновые видео и анимация – Это также может привлечь или отвлечь внимание пользователя. Если они выполнены умело и включены с правильной частотой кадров, они могут быть увлекательными и записывать содержимое страницы на них.
- Плавающие анимации Плавающие анимации работают на основе человеческого любопытства. А поскольку они предназначены для прокрутки содержимого страницы для получения необходимой информации, они, как правило, дольше остаются на странице и лучше запоминают опыт.
Развитие и тенденции в адаптивном дизайне сайтов меняются очень быстро. Отслеживание может быть сложным, но так же весело!
7) Принесите векторы, где это уместно
Несмотря на то, что мы подчеркиваем, что адаптивный дизайн, не оцифрованный в цифровом формате, вплоть до hi-fi-макетов, мы считаем, что ресурсы дизайна могут быть созданы лучше, чем преимущества Scalable Vector Graphics (SVG). Например, логотипы, световая анимация, значки и фоновые изображения лучше оформлены как SVG, чем как растровые альтернативы.
Когда представлено онлайн, векторное изображение имеет следующие преимущества:
- Легко анимируется и управляется с помощью CSS.
- Сократите время зарядки на хорошую отметку. SVG-сжатые SVG-файлы занимают на 60-80% меньше места, чем их растровые аналоги.
- SVG, конечно, проще и быстрее готовить, чем растровая графика.
- Добавление анимации и изменение цвета оживят ваши изображения.
Векторные изображения – явный победитель растровой графики. Просто убедитесь, что вы загружаете их онлайн и предоставляете растровые откаты, если ваш дизайнер требует онлайн размещения.
Нести
Проблема с адаптивным веб-дизайном, с которой большинство дизайнеров сталкиваются друг с другом, заключается в том, что они пытаются сократить существующие веб-сайты и называют их «оптимизированными для мобильных устройств». Адаптивный дизайн сначала обращается к наиболее ограничивающему и сложному контексту и нацелен на обеспечение как минимум беспроблемного взаимодействия с пользователем. Веб-дизайнеры должны понимать, что нет никаких ярлыков для пользовательского опыта.
Чем раньше мы будем придерживаться подхода к мобильным адаптивным веб-сайтам и расширять настольные веб-сайты, а не наоборот, тем лучше. Плюс, это поможет распространить шумиху и опасения, связанные с адаптивным веб-дизайном Сложно привыкнуть, но это будущее.
Биография автора: Джунаид Али Куреши является специалистом по цифровому маркетингу, который помог различным компаниям получить трафик, опередить конкурентов и привлечь прибыльных клиентов. Его текущие проекты включают Elephantation, eLabelz, Smart Leads.ae, Progos Tech и eCig.
