Design Killer Mobile App -sivustojen vinkit ja esimerkit

Mobiili-kohtaus on kasvanut eksponentiaalisesti viimeisten parin vuoden aikana. IOS App Storesta ja Android-sovelluksista Google Playssa on tullut älypuhelinten harrastajien kaksi hotspotia. Kun älypuhelinten käyttäjien määrä kasvaa, näemme satoja mobiilisovellusten kehittäjiä, jotka tuovat markkinoille uusia ideoita.

Suosituimpien sovellusten mukana on oma verkkosivusto. Tämä voi olla hyödyllistä markkinoinnissa ja nimesi saamisessa. Se on myös paljon kauniimpi online-URL-osoite kuin jompikumpi App Storista. Mielestäni mikä tahansa onnistunut mobiilisovellus vaatii lähes web-läsnäolon.

Tässä artikkelissa haluan käydä läpi joitakin mobiilisovellusten sivustojen yleisimmät suunnittelusuunnitelmat. Tällaista ulkoasua varten ei tarvitse noudattaa tiukkaa sääntöjä. Pikemminkin on olemassa joitakin ainutlaatuisia ohjeita ja suuntauksia, joita web-suunnittelijat ovat havainneet toimivan hyvin yleisön saamiseksi. Yhdessä iOS-kehitysoppaasi kanssa voit koota upean mobiilisovelluksen ja rakentaa myös sen verkkosivuston.

Tutustu alla oleviin käsitteisiin ja yritä toteuttaa jotkin omasta sovellussivustosi ulkoasusta.

Laitteen kuvakaappaukset

Kaikkien mobiilisovellusten verkkosivustojen katkottujen kappaleiden on oltava sovelluksen kuvakaappauksia. Vierailijat ovat kiinnostuneita vain sovelluksesta ja mitä nopeampi tapa osoittaa sen tarkoitusta kuin kuvakaappausten avulla? Laitekuvat voidaan asentaa mihin tahansa ulkoasutyyliin, joten se ei ole rajoittava tekijä.

Easy Chef on espanjalainen iOS-sovellus, joka käyttää monia laitteiden laukauksia. Ulkoasun yläosassa on diaesityksen esikatselu eri näkymistä. Mutta kun selaat alas, huomaat muita kaavioita iPhonen näytöllä. Näihin paneeleihin sisältyy yksityiskohtaisia tarroja ja upclose, suurennettuja näkymiä. Olen itse kirjoittanut informatiivisen grafiikan suunnittelusta vanhemmalla postilla.

Toinen mielenkiintoinen asennus löytyy Tweetbot-galleriasivulta. Tämä on erittäin suosittu Twitter-asiakas iPhonelle ja kehittäjät ovat koonneet liukuvan esityksen kuvakaappauksista. Jos yrität säästää tilaa ulkoasussa, tämä voi olla helpompi ratkaisu. Vierailijoiden ei tarvitse vierittää alaspäin etsimään tiettyä näkymää. jQuery on helppo toteuttaa ja voit nopeasti koota liukuvan iPhone-näytön esikatselun. Saattaa olla vaikeaa sisällyttää lisätietoja, mutta tämä voidaan lisätä toiseen osaan.

App Store -merkit

Tämä tekniikka tuntuu myös hyvin hämärältä, kun olet lopettanut sovelluksen rakentamisen. Merkit tunnistetaan nopeasti latauslinkeiksi sovellusmarkkinoille. Sekä Android- että iOS-käyttäjillä on mahdollisuus katsella sovelluksia selaimelta tai tämä ohjataan älypuhelimessa.

Haluan käyttää Instagramia esimerkkinä, koska verkkosivusto oli päivitetty uudemmalle asettelulle. Heillä on merkit, jotka tukevat Android Marketplace -palvelun (Google Play) ja iOS App Storea. Molemmat merkit ovat hyvin yksinkertaisia ja helposti tunnistettavissa yhdellä silmäyksellä. Jos etsit entistä monimutkaisempia malleja, suosittelen nopeaa hakua. Lahjakkaat suunnittelijat jakavat usein sovellusmyymälän käsitteensä rakentavaan kritiikkiin.

Mobile Social Networks

Facebook ja Twitter ovat siirtyneet mobiiliin, mutta tämä ei ole estänyt muita verkkoja itämästä. Näemme, että sosiaalinen verkostoituminen käyttää mobiilisovelluksia täysin uudenlaisen viestintäalustan sallimiseksi.

Localmind toimii konseptilla, joka on samanlainen kuin Foursquare, jossa rekisteröit tilin ja alat tarkistaa paikallisille paikoille. Voit jättää kysymyksiä tai vastata muiden ihmisten kysymyksiin. Heidän verkkosivustonsa ovat erittäin ystävällisiä ja kutsuvat uusille tulokkaille. Rakastan erityisesti ylhäältä bannerin osaa, joka on suunniteltu mukautetun kartan taustalla. Niiden käyttö kaltevuudet ja taustakuvio antavat verkkosivustolle oman elämänsä.

Minimi valokuvien jakaminen

Pose on toinen mobiiliverkko, jolla on samanlaiset ihanteet minimalistiseen suunnitteluun. Voit ladata mobiilisovelluksen sekä iOS- että Android-laitteille. Tunne on samanlainen kuin weheartit, mutta se on mobiilien muotin ystäville. Koko sovellus keskittyy muotiin, hiuksiin, meikkiin ja glamouriin.

Käyttäjät voivat ottaa valokuvia heidän asustaan, vaatteistaan tai lisävarusteistaan ja jakaa ne ympäri verkkoa. Yksi asia huomata Pose on, kuinka nopeasti voit selata sivustoa. Yrityksen blogin, yhteystietojen jne. Löytäminen on helppoa. Muut app-sivustot unohtavat usein nämä yritysominaisuudet, jotka voivat olla herkkä aihe.

Jos haluat kiinnittää huomiota mediasta, on tärkeää, että sivustosi näyttää ja tuntuu todellisena sosiaalisen verkostoitumisen tuotteena. Yrität vain myydä sovelluksesi (mainosten tai maksullisten tilausten perusteella), mutta myös myydä verkoston itse. Sosiaaliset sovellukset voivat varmasti olla hankalampia kuin tavallisten sovellusohjelmien suunnittelu. Mutta he myös keräävät paljon enemmän latauksia käyttäjiltä ja se on jännittävä uusi kenttä mobiililaitteille.

Humble Beginningsista

Web-suunnittelijat eivät aina pysty yhdistämään törkeää grafiikkaa ja kuvakkeita. Onneksi app-sivustot eivät ole kriittisiä sen suhteen, kuinka paljon Adobe Photoshop -ominaisuutta sinulla on. Minusta tuntuu, että minimalismi voi työskennellä paljon paremmin tämän ulkoasun tyyliin.

Leef App on äskettäin julkaistu Forrst-asiakas iPhoneen. Niiden verkkosivuilla on kaunis sovelluskuva sekä iso rohkea latauspainike. Kaikki sivun teksti yksinkertaistetaan samalla tavalla kuin Applen fontit ja värit.

Mikä tekee Leef-sivustosta suuren, on jokaisen sivuelementin rehellinen luonne. Se on räikeä ja etukäteen, eikä mitään piilotettu tai työnnetty syrjään. Suosittelen kokeilla tätä tyyliä ensimmäisenä mobiilisovellusverkostona, jos vain käytännössä. Voit oppia paljon vähentämällä pienempiä tidbittejä ja keskittymällä siihen, mikä kiinnittää huomion.

Lovely Whitespace

Myös loistavasti yksinkertainen on Wood Camera App -sivusto. Niiden ulkoasu ei sisällä muuta kuin pelkkää valkoista taustaa ja keskitettyä sisältöä. Tämä sisältö sisältää joitakin oletuskuvia, sovellusmyymälän merkin ja joitakin muita keskeisiä ominaisuuksia.

Jos sinusta tuntuu, että minimalismi ja valkoinen tila ovat tärkeitä asettelulle, pidä se kiinni! Puunkamera ei ole erityisen mielenkiintoinen verkkosivujen asettelu, mutta se on erittäin helppo navigoida. Niiden sivusto ei edes viittaa mihinkään vaihtoehtoiseen sisältöön kehittäjän virallisella sivulla. Tämä keskittyy sovellukseen ja siihen, mitä se voi tarjota, mikä on paljon tärkeämpää kuin räikeä grafiikka. Vaikka se ei tarkoita, että räikeä kuvamateriaali on huono idea, se edellyttää vain asianmukaista toteutusta.

Värikkäät kuvitukset

Aivan päinvastainen kuin minimalistinen lähestymistapa on teos, jossa on ainutlaatuisia piirroksia, joita olen täysin ihastunut. Usein tämän ylimääräisen yksityiskohdan myötä minulle app. Yksi esimerkki voin liittyä Barista-sovellukseen iPhonelle. Niiden sivustojen otsikko on täynnä pieniä cappuccinos- ja espresso-juomia.

Mutta huomaa, miten sivuja ei ole, kun selaat sivua. Tämä koko yläosa on suunniteltu erityisesti iPhone-sovellukseen, joka on samanlainen kuin a aloitussivu. Vektorit tarttavat silmäsi heti ja viittaavat myös siihen, mitä sovellus on.

Keittiölaite on samanlainen iOS-sovellus, joka muuntaa mittausyksiköt ruoanlaittoon ja leivontaan. Niiden otsikkorakenteessa käytetään runsaasti puisia kuvioita, ruudullinen pöytäliina ja minilusikoita vettä. Tämä kuva viittaa tämän sovelluksen tarkoituksiin ennen kuin edes ohitat sisältöä.

Tämä muotoilu vaikuttaa läpi koko ulkoasun. Alatunnistealue vastaa samanlaista puutaustaa ja paljon samoja fonttivalintoja. Tämä on esimerkki hyvin yksinkertaisesta verkkosivujen asettelusta, jossa on erittäin tehokkaita grafiikoita.

App-sivustot: Premium Showcase

Mikä artikkeli olisi täydellinen ilman vähän silmäkarkkia? Edellä mainittujen tekniikoiden ohella olen myös koonnut tämän kauniin mobiilisovellussivustojen gallerian; huomaa logon ja navigointijärjestelmät sekä verkkotunnuksen URL-osoitteet. Tutkimalla, mitä ammattilaiset tekevät, voit ymmärtää suunnittelusuunnitelmia ja käyttää niitä omissa projekteissasi.

Bosquet App