Design Killer Mobile App Websites Tips og eksempler

Den mobile scene er vokset eksponentielt i løbet af de sidste par år. IOS App Store sammen med Android Apps på Google Play er blevet de to hotspots for smartphone-entusiaster. Da antallet af smartphone-brugere øges, ser vi hundredvis af mobilappudviklere, der lancerer nye ideer på markedet.

Mest populære apps ledsages af deres eget websted. Dette kan være nyttigt med markedsføring og få dit navn derude. Det er også en meget skønnere online-URL end nogen af App Stores. Jeg føler, at enhver vellykket mobilapplikation næsten kræver en tilstedeværelse på internettet.

I denne artikel vil jeg gå over nogle af de mest almindelige designtendenser til mobilappwebsites. Der er ingen streng regelbog, du skal følge for at opbygge et sådant layout. Der er snarere nogle unikke retningslinjer og tendenser, som webdesignere har fundet det godt at arbejde med at få et publikum. Sammen med min iOS Development Guide kan du sammensætte en fantastisk mobil app og konstruere dens hjemmeside også.

Tjek disse koncepter nedenfor og prøv at implementere nogle i dit eget applikations website layout.

Enheds skærmbilleder

Et hæftestykke til enhver mobilwebsite skal være skærmbilleder af applikationen. Besøgende er kun interesseret i din app, og hvilken hurtigere måde at demonstrere sit formål end gennem skærmbilleder? Du kan tilpasse enhedsbilleder til enhver layoutstil, så det er ikke en begrænsende faktor.

Easy Chef er en spansk iOS-app, der bruger mange enhedsbilleder. Den øverste del af layoutet har et diasshow eksempelvis af forskellige visninger. Men mens du ruller ned, vil du bemærke andre diagrammer ved hjælp af iPhone-skærme. Disse paneler omfatter detaljerede etiketter og upclose, forstørrede skærmvisninger. Jeg har faktisk skrevet om at designe informativ produktgrafik i en ældre post.

En anden interessant opsætning findes på Tweetbot galleri siden. Dette er en meget populær Twitter-klient til iPhone, og udviklerne har sammensat et glidende showcase af screenshots. Hvis du forsøger at spare plads i dit layout, kan det være en nemmere løsning. Besøgende behøver ikke at rulle ned og kigge efter en bestemt visning. jQuery er let at implementere, og du kan hurtigt sammensætte et glidende iPhone-skærmbillede. Det kan være svært at medtage ekstra detaljer, men det kan tilføjes i et andet afsnit.

App Store-mærker

Denne teknik virker også meget nonsens, når du er færdig med at opbygge applikationen. Badges genkendes hurtigt som download links til app markedspladsen. Både Android og iOS-brugere har evnen til at se apps lige fra deres browser, eller det omdirigeres, når de ses på en smartphone.

Jeg kan godt lide at bruge Instagram som et eksempel, da hjemmesiden var opdateret til et nyere layout. De har badges, der understøtter Android Marketplace (Google Play) og iOS App Store. Begge mærker er meget enkle i design, men er let genkendt med et overblik. Hvis du leder efter mere komplekse designs, anbefaler jeg en hurtig dribblesøgning. Talenterede designere deler ofte deres app store badge begreber til konstruktiv kritik.

Mobile sociale netværk

Facebook og Twitter har skiftet til mobil, men det har ikke stoppet andre netværk fra at spire op. Vi ser, at mobilnetværk bruger sociale netværk til at tillade en helt ny platform for kommunikation.

Localmind kører på et koncept, der ligner Foursquare, hvor du registrerer en konto og begynder at tjekke ind på lokale steder. Du kan efterlade spørgsmål eller besvare andres spørgsmål. Deres hjemmeside er meget venligt og indbydende til nykommere. Jeg elsker især toppen banner sektion designet med en brugerdefineret kort baggrund. Deres brug af gradienter og baggrundsstruktur giver hjemmesiden et liv i sig selv.

Minimal fotodeling

Pose er et andet mobilnetværk med lignende idealer til minimalistisk design. Du kan downloade mobilappen til både iOS og Android-enheder. Følelsen ligner den slags, men det er til mobile modeelskere. Hele appen er fokuseret på mode, hår, makeup og glamour.

Brugere kan tage billeder af deres outfit, tøj eller tilbehør og dele dem rundt i netværket. En ting at bemærke om Pose er, hvor hurtigt du kan gennemse hjemmesiden. Det er nemt at finde firmaets blog, kontaktoplysninger osv. Andre appwebsites overser ofte disse virksomhedsfunktioner, som kan være et berøringsfuldt emne.

Hvis du vil henlede opmærksomheden fra medierne, er det vigtigt at få dit websted til at virke som et rigtigt socialt netværk. Du forsøger ikke kun at sælge din app (ved annoncer eller betalt abonnement), men sælger også netværket selv. Sociale apps kan helt sikkert være vanskeligere end at designe almindelige appwebsites. Men de giver også mange flere downloads fra brugere, og det er et spændende nyt felt til mobil.

Fra ydmyge begyndelser

Webdesignere er ikke altid i stand til at sammensætte uhyrlige grafik og ikoner. Heldigvis er appwebsites ikke kritiske over for hvor meget Adobe Photoshop du har. Jeg føler faktisk, at minimalisme kan fungere meget bedre for denne layout stil.

Leef App er en nyudgivet Forrst-klient til iPhone. Deres hjemmeside indeholder en smuk app screenshot sammen med en stor fed download-knap. Hele siden tekst er forenklet på samme måde som Apples skrifttyper og farveskemaer.

Hvad der gør Leef-hjemmesiden stor, er hver sideelements oprigtige karakter. Det er åbenlyst og på forhånd med intet skjult eller skubbet til side. Jeg anbefaler at prøve denne stil som din første mobilwebsite, hvis noget bare for at øve dig. Du kan lære meget ved at minimere de mindre tidbits og koncentrere dig om, hvad der tager fat på opmærksomheden.

Dejlige Whitespace

Også så glimrende simpelt er Wood Camera App-webstedet. Deres layout indeholder intet andet end en almindelig hvid baggrund og centreret indhold. Dette indhold indeholder nogle standard skærmbilleder, et appbutikskilt og nogle yderligere nøglefunktioner.

Hvis du har lyst til minimalisme og hvidt rum er vigtige for dit layout, så hold dig til det! Wood Camera er ikke et særligt mindblowing hjemmeside layout, men det er super nemt at navigere. Deres websted linker ikke engang til noget andet indhold bortset fra udviklerens officielle side. Dette holder fokus på appen og hvad den kan tilbyde, hvilket er meget vigtigere end prangende grafik. Selvom det ikke er at sige prangende kunstværker er en dårlig ide - det kræver bare en ordentlig implementering.

Farverige Illustrationer

Tværtimod den minimalistiske tilgang er et arbejde med unikke illustrationer, som jeg helt elsker. Ofte sælger denne ekstra detaljer helt mig appen. Et eksempel jeg kan forholde mig til er Barista App til iPhone. Deres site header er riddled med lidt vektor cappuccinos og espresso drinks.

Men bemærk, hvordan der ikke er andre billeder, når du ruller ned på siden. Hele hele sektionen blev designet specielt til iPhone app, svarende til a destinationsside. Vektorerne fanger dine øjne med det samme og også hint til, hvad appen handler om.

Kitchenator er en lignende iOS app, der konverterer måleenheder til madlavning og bagning. Deres overskrift layout bruger rige træ teksturer, en rutet duge og mini skeer vand. Dette billedvalg tyder på formålet med denne app, før du endda skimmer indholdet.

Denne design stil genomsyres gennem hele layoutet. Fodboldområdet matcher en lignende træbakgrund og mange af de samme skrifttypevalg. Dette er et eksempel på et meget simpelt website layout med nogle meget kraftfulde grafik.

App Websites: Premium Showcase

Hvilken artikel ville være komplet uden en smule øjengods? Sammen med teknikkerne ovenfor har jeg også sammensat dette smukke galleri af mobilappwebsites; læg mærke til logoet og navigeringsordningerne samt domænewebadresserne. Ved at studere hvad fagfolkene gør, kan du forstå designtendenser og bruge dem i dine egne projekter.

Bosquet App