Сайты Design Killer для мобильных приложений: советы и примеры

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

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

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

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

Рекомендуемое чтение: проектирование для мобильных устройств

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

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

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

Значки App Store

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

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

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

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

Localmind работает по концепции, которая похожа на Foursquare, где вы регистрируете учетную запись и начинаете проверять локальные места. Вы можете оставлять вопросы или отвечать на вопросы других людей. Их сайт очень дружелюбный и привлекает новичков. Мне особенно нравится верхняя часть баннера, созданная с использованием собственного фона карты. Их использование градиентов и фоновой текстуры дают сайту собственную жизнь.
Минимальный обмен фотографиями
Поза Еще одна мобильная сеть с аналогичными идеалами для минималистского дизайна. Ты можешь скачать мобильное приложение для устройств 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
Банджо приложение
Everyme
Приложение Gifture
Fontain
Я игра
Воробей приложение
Вещи для iPhone
Snapguide
Whoovie
Дорожка
Повторите Таймер Pro
Симпатичная лапа для iPhone
Фисташковое приложение
Delibar для iPhone
Эскиз с друзьями
Получить приложение Билли
Приложение Peg Jump
Останови Вом
Crowdspottr
Мунк 5-в день
Travveling App
Leaflet App
Получить Galleried
Plazaa
Приложение Make Faces
Приложение Float
ткать
Ballin ’App
Forkly
MyCityWay
Нажмите Place Place App
Приложение Photo Stats
Идея Микс
Holitapp