Dizajn ubojica Mobile App web stranice Savjeti i primjeri

Mobilna scena rasla je eksponencijalno tijekom proteklih nekoliko godina. IOS App Store i Android Apps na Google Playu postali su dvije vruće točke za ljubitelje pametnih telefona. Kako se broj korisnika pametnih telefona povećava vidimo stotine razvojnih inženjera za mobilne aplikacije koji lansiraju nove ideje na tržište.

Najpopularnije aplikacije prate vlastite web-lokacije. Ovo može biti korisno s marketing i uzimajući svoje ime tamo. Također je mnogo ljepši online URL od bilo koje od App Stores. Osjećam da bilo koja uspješna mobilna aplikacija gotovo zahtijeva web prisutnost.

U ovom članku želim preći neke od njih najčešći trendovi dizajna za web-lokacije za mobilne aplikacije. Ne postoji strogi pravilnik koji morate slijediti za izgradnju takvog rasporeda. Umjesto toga postoje neke jedinstvene smjernice i trendovi koje su web dizajneri pronašli da dobro rade u stjecanju publike. Zajedno s mojim iOS Vodič za razvoj možete staviti zajedno fantastičan mobilnu aplikaciju i izgraditi svoje web stranice, previše.

Pogledajte ove pojmove u nastavku i pokušajte ih implementirati u svoj izgled web-lokacije aplikacije.

Snimke zaslona uređaja

Jedinica za bilo koju web-lokaciju za mobilne aplikacije mora biti snimka zaslona aplikacije. Posjetitelji su zainteresirani samo za vašu aplikaciju i koji je brži način pokazati svoju svrhu nego kroz snimke zaslona? Snimke uređaja možete smjestiti u bilo koji stil izgleda tako da to nije ograničavajući faktor.

Easy Chef je španjolska iOS aplikacija koja koristi mnoge snimke uređaja. U samom gornjem dijelu izgleda prikazan je pregled različitih prikaza slajdova. Ali dok se pomičete prema dolje, primijetit ćete druge dijagrame pomoću iPhone zaslona. Ovi paneli sadrže detaljne oznake i povećane, uvećane prikaze zaslona. Zapravo sam pisao o dizajniranju informativne grafike proizvoda u starijem postu.

Još jedna zanimljiva postava nalazi se na stranici galerije Tweetbot. Ovo je vrlo popularan Twitter klijent za iPhone i programeri su sastavili kliznu vitrinu screenshotova. Ako pokušavate uštedjeti sobu u svom rasporedu, to može biti lakše rješenje. Posjetitelji neće morati pomicati se prema dolje tražeći određeni prikaz. jQuery je jednostavan za implementaciju i možete brzo sastaviti klizni iPhone pregled zaslona. Možda će biti teško uključiti dodatne pojedinosti, ali to se može dodati u drugom odjeljku.

Značke trgovine App Store

Ova tehnika se također čini vrlo besmislenom kada završite s izradom aplikacije. Značke se brzo prepoznaju kao veze za preuzimanje na tržište aplikacija. Korisnici sustava Android i iOS mogu pregledavati aplikacije izravno iz svog preglednika ili će se preusmjeriti kada ih pregledate na pametnom telefonu.

Volim koristiti Instagram kao primjer budući da je web-lokacija ažurirana na noviji izgled. Imaju značke koje podržavaju Android Marketplace (Google Play) i iOS App Store. Obje značke su vrlo jednostavne u dizajnu i lako se prepoznaju na prvi pogled. Ako ste u potrazi za složenijim dizajnom, preporučujem vam brzo pretraživanje. Talentirani dizajneri često dijele koncepte značaka za pohranu aplikacija za konstruktivne kritike.

Mobilne društvene mreže

Facebook i Twitter prebacili su se na mobitel, ali to nije spriječilo pojavu drugih mreža. Vidimo da društvene mreže koriste mobilne aplikacije kako bi omogućile novu platformu komunikacije.

Localmind radi na konceptu koji je sličan Foursquareu, gdje registrirate račun i počnete provjeravati lokalna mjesta. Možete ostavljati pitanja ili odgovarati na pitanja drugih ljudi. Njihova web stranica je vrlo prijateljska i poziva na nove članove. Posebno mi se sviđa gornja sekcija dizajnirana s prilagođenom pozadinom karte. Njihova upotreba gradijenta i pozadinske teksture daje web-mjestu vlastiti život.

Minimalna razmjena fotografija

Pose je još jedna mobilna mreža sa sličnim idealima za minimalistički dizajn. Možete preuzeti mobilnu aplikaciju za uređaje iOS i Android. Osjećaj je sličan onom u srcu, ali je za ljubitelje mobilne mode. Cijela aplikacija usmjerena je oko mode, kose, šminke i glamura.

Korisnici mogu fotografirati svoju odjeću, odjeću ili dodatke i dijeliti ih po mreži. Jedna stvar koju treba primijetiti o Pose je kako brzo možete pregledavati web stranicu. Lako je pronaći blog tvrtke, podatke za kontakt, itd. Druge web-lokacije aplikacija često previđaju ove korporativne značajke koje mogu biti osjetljiva tema.

Ako želite privući pozornost s medija, važno je da vaša web-lokacija izgleda i osjeća se kao pravi proizvod društvenog umrežavanja. Vi ne samo pokušavate prodati svoju aplikaciju (oglasima ili plaćenom pretplatom), nego i prodati samu mrežu. Društvene aplikacije definitivno mogu biti teže od dizajniranja uobičajenih web-lokacija aplikacija. Ali oni također prikupljaju puno više preuzimanja od korisnika i to je uzbudljivo novo polje za mobilne uređaje.

Od skromnih početaka

Web dizajneri nisu uvijek sposobni sastaviti nečuvenu grafiku i ikone. Srećom, web-lokacije aplikacija nisu kritične prema tome koliko imate Adobe Photoshop. Ja zapravo osjećam da minimalizam može raditi puno bolje za ovaj stil izgleda.

Leef App je nedavno objavljeni Forrst klijent za iPhone. Njihova web stranica uključuje prekrasan screenshot aplikacije zajedno s velikim bold gumbom za preuzimanje. Sav tekst stranice pojednostavljen je na sličan način kao i Appleovi fontovi i sheme boja.

Ono što čini web stranicu Leef velikim je iskrena priroda svakog elementa stranice. To je očito i unaprijed s ničim skrivenim ili gurnutim u stranu. Preporučujem da isprobate ovaj stil kao svoju prvu web-lokaciju za mobilne aplikacije, ako želite nešto drugo. Možete mnogo naučiti tako što ćete smanjiti manje slastice i koncentrirati se na ono što privlači pozornost.

Lovely Whitespace

Također kao briljantno jednostavna je web kamera App kamere. Njihov izgled ne sadrži ništa osim obične bijele pozadine i usredotočenog sadržaja. Ovaj sadržaj uključuje neke zadane snimke zaslona, značku trgovine aplikacija i neke dodatne ključne značajke.

Ako se osjećate kao minimalizam i bijeli prostor važni su za vaš raspored, a onda ga držite! Kamera za drvo nije posebno upečatljiva web stranica, ali je super jednostavna za navigaciju. Njihova web-lokacija ne povezuje čak ni s alternativnim sadržajem, osim na službenoj stranici razvojnog programera. To drži fokus na aplikaciju i što ona može ponuditi, što je mnogo važnije od nevjerojatne grafike. Iako to ne znači da je nevjerojatna umjetnička slika loša ideja - ona samo zahtijeva pravilnu implementaciju.

Šarene ilustracije

Upravo suprotno od minimalističkog pristupa je djelo s jedinstvenim ilustracijama koje potpuno obožavam. Često će mi taj dodatni detalj u potpunosti prodati aplikaciju. Jedan primjer na koji se mogu odnositi je aplikacija Barista za iPhone. Njihova zaglavlja na mjestu je prožeta malim vektorskim cappuccinom i espresso pićima.

Ali primijetite kako nema drugih slika prilikom pomicanja po stranici. Ovaj cijeli gornji dio dizajniran je posebno za iPhone aplikaciju, sličnu a odredišna stranica. Vektori odmah hvataju vaše oči i ukazuju na to o čemu se radi.

Kitchenator je slična iOS aplikacija koja pretvara mjerne jedinice za kuhanje i pečenje. U njihovom rasporedu zaglavlja koriste se bogate drvene teksture, karirani stolnjak i mini žlice vode. Ove slike upućuju na svrhu ove aplikacije prije nego što čak prelistate sadržaj.

Ovaj stil dizajna zapravo prožima cijeli raspored. Područje podnožja odgovara sličnoj drvenoj pozadini i većini istih izbora fontova. Ovo je primjer vrlo jednostavnog izgleda web-stranice s vrlo moćnom grafikom.

Web-lokacije aplikacija: Premium Showcase

Koji bi članak bio potpun bez malo slatkiša? Uz gore navedene tehnike također sam sastavio ovu prekrasnu galeriju web-lokacija za mobilne aplikacije; primijetite logotip i sheme za navigaciju, kao i URL-ove domene. Proučavanjem onoga što rade profesionalci, možete razumjeti trendove dizajna i koristiti ih u vlastitim projektima.

Bosquet App