Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Дизайн для мобильных устройств: основные тенденции

19 июля 2013 | Опубликовано в статьюшечки | 6 Комментариев »

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

 

Интенсивный рост адаптивного дизайна

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

Нужно также заметить интересный факт — 67% покупателей делают свои онлайн-заказы именно со смартфонов. Так что, если вы являетесь владельцем интернет- магазина, возможно, есть смысл потрать время и деньги на адаптацию вашего сайта.

Небольшая загроможденность сайтов

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

Сайты приложений

Согласно статистике Wall Street Journal,  в июне прошлого года было скачано более 650,000 приложений для  Apple, а с Google Play Store сделано более  500,000 загрузок. Пользователи iPhone скачали 30 миллиардов приложений, а пользователи Android  — более 15.

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

Динамичная навигация

Такая навигация реализуется c помощью css. Здесь нету ничего нового — навигация должна обеспечить быстрый переход на любую часть веб-сайта, поддерживать быстрый поиск. На сайте, в свою очередь, нужно осуществить сужение контента, чтобы облегчить восприятия пользователем и дать возможность посетителю уловить основное.

Большие размеры изображений

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

QR-коды

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

 

Социальные сети

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

Видео-интеграция

Вы уже не раз замечали, что в результате поиска Google выбивает также видео с YouTube. Причины разные. Первая — YouTube  является собственностью  Google, вторая — видео дают возможность пользователям понимать о продуктах, услугах или программном обеспечении, которое ищет посетитель.

Большая типографика

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

DIY или сделай сам

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

Меньше Flash, больше HTML5 и JS

Флеш теряет свою популярность. Причина этому — развитие html5 и javascript, что в свою очередь дало возможность разработчикам создавать так званные RIA-приложения (Rich Internet application) и делать свои сайты более интересными.

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

Автор - Emma Jones 

Перевод — Дежурка

Читайте также:

 

 




Комментарии

  1. dzebski
    Thumb up Thumb down +9

    Казалось бы, причем тут адаптивная верстка и дизайн для мобильных устройств.

  2. Роман
    Thumb up Thumb down 0

    Ага, да и сами советы из середины 2012-ого.

  3. SkyHobbit
    Thumb up Thumb down 0

    Примерно полтора года назад пришел ко мне заказчик и начал рассказывать, что надо сделать сделать сайт в стиле windows 8. Я подумал что о не прав и не понял к чему все это надо. Теперь понимаю что он имел в виду и немного обидно. Сейчас есть много хороших адаптивных сайтов, а тогда я даже примерно не представлял что это такое. Всего лишь полтора года прошло.

  4. Артем
    Thumb up Thumb down 0

    вот хороший ресурс для тестирования адаптивных сайтов: plastilin5.com/tools/)