Design Killer Mobile App Websites Tips og eksempler

Den mobile scenen har vokst eksponentielt de siste par årene. IOS App Store sammen med Android Apps på Google Play har blitt de to hotspots for smartphone-entusiaster. Etter hvert som antall smarttelefonbrukere øker, ser vi hundrevis av mobilapputviklere som lanserer nye ideer inn i markedet.

Mest populære apps ledsages av deres eget nettsted. Dette kan være nyttig med markedsføring og få navnet ditt der ute. Det er også en mye finere nettadresser enn noen av App Stores. Jeg føler at enhver vellykket mobilapplikasjon nesten krever en tilstedeværelse på nettet.

I denne artikkelen vil jeg gå over noen av mest vanlige designtrender for mobilappwebsteder. Det er ingen streng regelbok du må følge for å bygge en slik layout. I stedet er det noen unike retningslinjer og trender som webdesignere har funnet å fungere godt i å få et publikum. I kombinasjon med min iOS Development Guide kan du sette sammen en fantastisk mobilapp og bygge opp sin nettside også.

Ta en titt på disse konseptene nedenfor, og prøv å implementere noen i ditt eget applikasjons nettsideoppsett.

Enhetsskjermbilder

Et stifteenhet for alle mobilappwebsites må være skjermbilder av programmet. Besøkende er bare interessert i appen din, og hvilken raskere måte å demonstrere sin hensikt enn gjennom skjermbilder? Du kan tilpasse enhetsspor i hvilken som helst layoutstil, så det er ikke en begrensende faktor.

Easy Chef er en spansk iOS-app som bruker mange enheter. Den aller øverste delen av oppsettet har en forhåndsvisningsvisning av forskjellige visninger. Men når du ruller ned, vil du legge merke til andre diagrammer ved hjelp av iPhone-skjermer. Disse panelene inneholder detaljerte etiketter og upclose, forstørrede skjermvisninger. Jeg har faktisk skrevet om å designe informativ produktgrafikk i et eldre innlegg.

Et annet interessant oppsett finnes på Tweetbot galleri siden. Dette er en svært populær Twitter-klient for iPhone, og utviklerne har satt sammen en skyvefremvisning av skjermbilder. Hvis du prøver å lagre rom i oppsettet ditt, kan dette være en enklere løsning. Besøkende trenger ikke å bla ned og se etter en bestemt visning. jQuery er enkelt å implementere, og du kan raskt sette sammen en skjermbilde for iPhone-skjerm. Det kan være vanskelig å ta med ekstra detaljer, men dette kan legges til i en annen seksjon.

App Store-merker

Denne teknikken virker også veldig uklart når du er ferdig med å bygge applikasjonen. Merker blir raskt gjenkjent som nedlastingskoblinger til appmarkedet. Både Android og IOS-brukere har muligheten til å se apper rett fra nettleseren, eller dette vil omdirigere når de vises på en smarttelefon.

Jeg liker å bruke Instagram som et eksempel siden nettstedet hadde oppdatert til et nyere layout. De har merker som støtter Android Marketplace (Google Play) og iOS App Store. Begge merkene er svært enkle i design, men kan lett gjenkjennes med et blikk. Hvis du leter etter mer komplekse design, anbefaler jeg et raskt dribblesøk. Talenterte designere deler ofte sine appbutikkemblemkonsept for konstruktiv kritikk.

Mobil sosiale nettverk

Facebook og Twitter har byttet til mobil, men dette har ikke stoppet andre nettverk fra å spire opp. Vi ser mobilnettapplikasjoner for sosiale nettverk for å tillate en helt ny plattform for kommunikasjon.

Localmind kjører på et konsept som ligner Foursquare, hvor du registrerer en konto og begynner å sjekke inn på lokale steder. Du kan legge igjen spørsmål, eller svare på andres spørsmål. Deres hjemmeside er meget vennlig og innbydende til nykommere. Jeg elsker spesielt toppen banner delen designet med et tilpasset kart bakgrunn. Deres bruk av gradienter og bakgrunnstekstur gir nettstedet et eget liv.

Minimal fotodeling

Pose er et annet mobilnettverk med lignende idealer for minimalistisk design. Du kan laste ned mobilappen for både iOS og Android-enheter. Følelsen ligner weheartit, men det er for mobile mote elskere. Hele appen er fokusert på mote, hår, sminke og glamour.

Brukere kan ta bilder av antrekk, klær eller tilbehør og dele dem rundt nettverket. En ting å legge merke til om Pose er hvor raskt du kan bla gjennom nettstedet. Det er lett å finne bedriftens blogg, kontaktdetaljer, etc. Andre app-nettsteder overser ofte disse bedriftens funksjoner som kan være et berøkt tema.

Hvis du vil trekke oppmerksomhet fra media, er det viktig å få nettstedet til å se ut som et ekte sosiale nettverk. Du prøver ikke bare å selge appen din (ved annonser eller betalt abonnement), men selger også selve nettverket. Sosiale apper kan definitivt være vanskeligere enn å designe vanlige app-nettsteder. Men de gir også mye flere nedlastinger fra brukere, og det er et spennende nytt felt for mobil.

Fra ydmyke begynnelser

Webdesignere er ikke alltid i stand til å sette sammen opprørende grafikk og ikoner. Heldigvis er app-nettsteder ikke kritiske mot hvor mye Adobe Photoshop du har. Jeg føler faktisk at minimalisme kan fungere mye bedre for denne layout stilen.

Leef App er en nylig utgitt Forrst-klient for iPhone. Deres nettsted inneholder et vakkert app skjermbilde sammen med en stor fet nedlastningsknapp. Alle sideteksten er forenklet på samme måte som Apples skrifttyper og fargeskjemaer.

Det som gjør Leef-nettsiden stor, er den oppriktige naturen til hvert sideelement. Det er blatant og på forhånd med ingenting skjult eller presset til side. Jeg anbefaler å prøve denne stilen som din første mobilappwebside, hvis noe bare er for øvelse. Du kan lære mye ved å minimere mindre tidbits og konsentrere seg om hva som tar hensyn til oppmerksomheten.

Nydelig Whitespace

Også så briljant enkelt er nettstedet Wood Camera App. Deres layout inneholder ingenting annet enn en vanlig hvit bakgrunn og sentrert innhold. Dette innholdet inneholder noen vanlige skjermbilder, et appbutikkmerke og noen flere viktige funksjoner.

Hvis du føler at minimalisme og hvitt plass er viktig for utformingen din, hold deg så god! Wood Camera er ikke et spesielt mindblowing nettsted layout, men det er veldig enkelt å navigere. Deres nettsted kobler ikke engang til noe annet innhold bortsett fra utviklerens offisielle side. Dette holder fokus på appen og hva den kan tilby, noe som er mye viktigere enn prangende grafikk. Selv om det ikke er å si prangende kunstverk er en dårlig idé - det krever bare en riktig implementering.

Fargerike Illustrasjoner

Tvert imot den minimalistiske tilnærmingen er et arbeid med unike illustrasjoner, som jeg helt elsker. Ofte vil denne ekstra detaljen helt selge meg appen. Et eksempel jeg kan forholde seg til er Barista App for iPhone. Deres nettsted header er riddled med små vektor cappuccinos og espresso drinker.

Men legg merke til hvordan det ikke er noen andre bilder når du ruller nedover siden. Hele toppen delen ble designet spesielt for iPhone-appen, som ligner på a destinasjonsside. Vektorene fanger øynene dine med en gang, og også hint mot hva appen handler om.

Kitchenator er en lignende iOS-app som konverterer måleenheter til matlaging og baking. Deres topptekstutforming bruker rike tre teksturer, en rutet duk og mini skjeer med vann. Dette bildet viser til formålet med denne appen før du skinner innholdet enda.

Denne design stilen gjennomsyrer gjennom hele oppsettet. Foten området samsvarer med en lignende trebakgrunn og mye av de samme skriftvalgene. Dette er et eksempel på en veldig enkel nettside layout med noen svært kraftig grafikk.

App nettsteder: Premium Showcase

Hvilken artikkel ville være komplett uten litt øye candy? Sammen med teknikkene ovenfor har jeg også satt sammen dette vakre galleriet av mobil app nettsteder; Legg merke til logoen og navigasjonsordninger, samt domenenes nettadresser. Ved å studere hva fagpersonene gjør, kan du forstå designtrender og bruke dem i dine egne prosjekter.

Bosett App