Советы и примеры сайтов по мобильному приложению Design Killer

За последние пару лет мобильная сцена выросла в геометрической прогрессии. IOS App Store вместе с Android-приложениями в Google Play стали двумя горячими точками для любителей смартфонов. По мере увеличения числа пользователей смартфонов мы видим, как сотни разработчиков мобильных приложений выпускают новые идеи на рынок..

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

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

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

Скриншоты устройства

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

Easy Chef - это испанское приложение для iOS, которое использует множество снимков с устройства. В самой верхней части макета есть предварительный просмотр слайд-шоу различных видов. Но когда вы прокрутите вниз, вы увидите другие диаграммы с использованием дисплеев iPhone. Эти панели содержат подробные метки и увеличенные изображения экрана. На самом деле я писал о разработке информативной графики продукта в старом посте.

Еще одна интересная настройка может быть найдена на странице галереи Tweetbot. Это очень популярный Твиттер-клиент для iPhone, и разработчики составили скользящую витрину со скриншотами. Если вы пытаетесь сэкономить место в макете, это может быть более простым решением. Посетителям не нужно прокручивать страницу в поисках определенного вида. JQuery прост в реализации, и вы можете быстро собрать скользящий предварительный просмотр экрана iPhone. Может быть трудно включить дополнительные детали, но это может быть добавлено в другом разделе.

Значки App Store

Этот метод также кажется очень легкомысленным, когда вы закончите сборку приложения. Значки быстро распознаются как ссылки для скачивания на рынок приложений. Пользователи Android и iOS имеют возможность просматривать приложения прямо из браузера, или они будут перенаправлены при просмотре на смартфоне.

Мне нравится использовать Instagram в качестве примера, поскольку веб-сайт обновился до более нового макета. У них есть значки, поддерживающие Android Marketplace (Google Play) и iOS App Store. Оба значка очень просты по дизайну, но легко узнаваемы. Если вы ищете более сложные проекты, я рекомендую быстрый поиск дриблинг. Талантливые дизайнеры часто делятся своими концепциями значков в магазине приложений для конструктивной критики.

Мобильные социальные сети

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

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

Минимальный обмен фотографиями

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

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

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

От скромного начала

Веб-дизайнеры не всегда способны собрать скандальную графику и иконки. К счастью, веб-сайты приложений не имеют решающего значения для того, насколько у вас есть Adobe Photoshop. Я на самом деле чувствую, что минимализм может работать намного лучше для этого стиля макета.

Leef App - недавно выпущенный клиент Forrst для iPhone. Их веб-сайт включает в себя красивый скриншот приложения и большую жирную кнопку загрузки. Весь текст страницы упрощен аналогично шрифтам и цветовым схемам Apple..

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

Прекрасный пробел

Также невероятно простым является веб-сайт приложения Wood Camera App. Их макет содержит только белый фон и центрированный контент. Этот контент включает в себя некоторые скриншоты по умолчанию, значок магазина приложений и некоторые дополнительные ключевые функции.

Если вы чувствуете, что минимализм и пустое пространство важны для вашего макета, то придерживайтесь его! Wood Camera - это не особенно впечатляющий дизайн сайта, но с ним очень легко ориентироваться. Их сайт даже не ссылается на какой-либо альтернативный контент, кроме официальной страницы разработчика. Это позволяет сосредоточиться на приложении и на том, что оно может предложить, что гораздо важнее, чем броская графика. Хотя это не значит, что кричащие художественные работы - плохая идея - просто требуется правильная реализация.

Красочные иллюстрации

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

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

Kitchenator - это похожее приложение для iOS, которое конвертирует единицы измерения для приготовления и выпечки. Их макет заголовка использует богатые деревянные текстуры, клетчатую скатерть и мини-ложки воды. Это изображение намекает на цель этого приложения, прежде чем вы даже просматриваете контент.

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

Сайты приложений: Премиум Витрина

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

Bosquet App