Дизайн Вбивця Mobile App веб-сайти Поради та приклади

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

Найбільш популярні програми супроводжуються власним веб-сайтом. Це може бути корисним для маркетингу та отримання вашого імені. Це також набагато привабливіша онлайн-адреса, ніж будь-який з магазинів App. Я відчуваю, що будь-яке успішне мобільне додаток майже вимагає присутності у мережі.

У цій статті я хочу перейти на деякі з найпоширеніші тенденції розробки веб-сайтів для мобільних програм. Для побудови такого макету немає чітких правил. Скоріше є деякі унікальні рекомендації та тенденції, які веб-дизайнери добре знайшли роботу в отриманні аудиторії. У поєднанні з моїм керівництвом для розробки iOS ви можете зібрати фантастичне мобільне додаток і побудувати його веб-сайт.

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

Скріншоти пристроїв

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

Easy Chef - іспанська програма iOS, яка використовує безліч знімків пристрою. У самій верхній частині макета передбачено попередній перегляд слайд-шоу різних переглядів. Але коли ви прокручуєте вниз, ви помітите інші діаграми, використовуючи дисплеї iPhone. Ці панелі містять детальні мітки та збільшені вікна екрана. Насправді я написав про розробку інформативної графіки продуктів у старій посаді.

Іншу цікаву установку можна знайти на сторінці галереї Tweetbot. Це дуже популярний клієнт Twitter для iPhone, і розробники зібрали слайд-вітрину скріншотів. Якщо ви намагаєтеся заощадити приміщення у своєму макеті, це може бути простішим рішенням. Відвідувачі не повинні прокручувати вниз, шукаючи певний вигляд. jQuery легко реалізовується, і ви можете швидко зібрати пересувний екран попереднього перегляду iPhone. Можливо, складно включити додаткові деталі, але це можна додати в іншому розділі.

Значки App Store

Ця методика також здається дуже безглуздою після того, як ви закінчите побудову програми. Значки швидко розпізнаються як посилання для завантаження на ринок програм. Користувачі Android і iOS мають можливість переглядати програми безпосередньо зі свого веб-переглядача, або це перенаправлятиметься на смартфоні.

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

Мобільні соціальні мережі

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

Localmind працює за концепцією, подібною до Foursquare, де ви реєструєте обліковий запис і починаєте перевірку в місцевих місцях. Ви можете залишати запитання або відповідати на запитання інших людей. Їхній сайт дуже доброзичливий і запрошує до новачків. Я особливо люблю верхній розділ банера розроблений з користувальницьким фоном карти. Їх використання градієнтів і фонової текстури надають сайту власне життя.

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

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

Користувачі можуть робити фотографії свого одягу, одягу або аксесуарів і ділитися ними по мережі. Одна річ, яку слід помітити, - як швидко ви можете переглядати веб-сайт. Легко знайти блог компанії, контактні дані та ін. Інші веб-сайти додатків часто випускають з уваги ці корпоративні функції, які можуть бути привабливими.

Якщо ви хочете привернути увагу з боку засобів масової інформації, важливо, щоб ваш сайт виглядав і відчувався як справжній продукт соціальної мережі. Ви не тільки намагаєтеся продати свою програму (за оголошеннями або платною підпискою), але й продати мережу. Соціальні програми, безумовно, можуть бути складнішими, ніж створення звичайних веб-сайтів із додатками. Але вони також заробляють набагато більше завантажень від користувачів, і це захоплююче нове поле для мобільних пристроїв.

З скромного початку

Веб-дизайнери не завжди здатні об'єднати обурливу графіку та ікони. На щастя, веб-сайти додатків не є критичними щодо того, наскільки ви маєте майстерність Adobe Photoshop. Я дійсно відчуваю, що мінімалізм може працювати набагато краще для цього стилю макета.

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

Що робить веб-сайт Leef великим, є відверта природа кожного елемента сторінки. Це кричуще і авансово, нічого не приховано або відсунуте. Я рекомендую спробувати цей стиль як ваш перший веб-сайт для мобільних програм, якщо що-небудь на практиці. Ви можете багато чому навчитися, мінімізуючи менші ласощі і зосередившись на тому, що привертає увагу.

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

Крім того, як блискуче простий веб-сайт деревини камери App. Їх макет не містить нічого, крім простого білого тла та центрування вмісту. Цей вміст містить деякі знімки екрана за умовчанням, значок магазину додатків і деякі додаткові ключові функції.

Якщо ви відчуваєте, як мінімалізм і білий простір важливі для вашого макета, то дотримуйтеся його! Дерев'яні камери не є особливо mindblowing макет сайту, але це супер легко орієнтуватися. Їхній сайт навіть не посилається на будь-який альтернативний вміст, окрім офіційної сторінки розробника. Це робить акцент на додаток і те, що він може запропонувати, що набагато важливіше, ніж яскрава графіка. Хоча це не означає, що кричуща робота є поганою ідеєю - вона просто вимагає належної реалізації.

Барвисті ілюстрації

Навпаки мінімалістському підходу - робота з унікальними ілюстраціями, які я повністю обожнюю. Часто ця додаткова деталь повністю продасть мені додаток. Одним з прикладів, які я можу стосуватися, є додаток Баріста для iPhone. Їхній заголовок сайту пронизаний маленькими капучинами та еспресо.

Але зверніть увагу на те, що під час прокручування сторінки немає інших зображень. Вся ця верхня секція була розроблена спеціально для iPhone, подібного до a цільової сторінки. Вектори зараз ловлять очі, а також натякають на те, що таке додаток.

Kitchenator є аналогічним iOS-додатком, який перетворює одиниці вимірювання для приготування їжі та випічки. Їх розкладка заголовка використовує багаті дерев'яні текстури, картату скатертини і міні-ложки води. Це зображення натякає на мету цього додатка, перш ніж пропустити вміст.

Цей стиль дизайну фактично пронизує весь макет. Область нижнього колонтитула збігається з подібним дерев'яним фоном і більшою мірою з тими ж шрифтами. Це приклад дуже простого макета сайту з дуже потужною графікою.

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

Яка стаття буде повною без трохи цукерок? Поряд з вищезазначеними методами я також зібрав цю прекрасну галерею веб-сайтів для мобільних додатків; зверніть увагу на логотип і схеми навігації, а також URL-адреси домену. Вивчаючи, що роблять професіонали, ви можете зрозуміти тенденції дизайну і використовувати їх у своїх власних проектах.

Bosquet App