Design Killer Mobile App Hemsidor Tips och exempel

Den mobila scenen har ökat exponentiellt de senaste åren. IOS App Store tillsammans med Android Apps på Google Play har blivit de två hotspotsna för smartphoneentusiaster. När antalet användare av smarttelefoner ökar ser vi hundratals mobilapputvecklare att lansera nya idéer till marknaden.

Mest populära apps åtföljs av deras egna hemsida. Detta kan vara till hjälp med marknadsföring och få ditt namn där ute. Det är också en mycket snällare webbadress än någon av App Stores. Jag anser att alla framgångsrika mobila applikationer nästan kräver en närvaro på nätet.

I denna artikel vill jag gå över några av vanligaste designtrender för mobila appwebbplatser. Det finns ingen strikt regelbok som du måste följa för att bygga en sådan layout. Snarare finns det några unika riktlinjer och trender som webbdesigners har funnit bra för att få en publik. I kombination med min iOS Development Guide kan du sammanställa en fantastisk mobil app och bygga dess hemsida också.

Kolla in dessa koncept nedan och försök att implementera några i din egen applikationswebbsidayout.

Enhetsskärmbilder

En häftklammer för vilken mobilappwebbplats som helst måste vara skärmdumpar av programmet. Besökare är bara intresserade av din app, och hur snabbare sätt att visa sitt syfte än genom skärmdumpar? Du kan passa enhetsbilder i någon layoutstil så det är inte en begränsande faktor.

Easy Chef är en spansk iOS-app som använder många enhetsbilder. Den allra högsta delen av layouten har ett bildspel förhandsgranskning av olika visningar. Men när du rullar ner märker du andra diagram med hjälp av iPhone-skärmar. Dessa paneler inkluderar detaljerade etiketter och upclose, förstorade skärmvyer. Jag har faktiskt skrivit om att utforma informativ produktgrafik i en äldre post.

En annan intressant inställning finns på Tweetbot galleri sidan. Det här är en väldigt populär Twitter-klient för iPhone och utvecklarna har satt ihop en glidande showcase av skärmdumpar. Om du försöker spara utrymme i din layout kan det här vara en enklare lösning. Besökare behöver inte rulla ner och leta efter en viss vy. jQuery är lätt att implementera och du kan snabbt sätta ihop en glidande iPhone-skärmförhandsgranskning. Det kan vara svårt att ta med extra detaljer, men det kan läggas till i ett annat avsnitt.

App Store-märken

Denna teknik verkar också mycket nonsens när du har slutat bygga applikationen. Spåren känns igen snabbt som nedladdningslänkar till appmarknaden. Både Android och IOS-användare har möjlighet att visa appar direkt från webbläsaren, eller omdirigeras den när den ses på en smartphone.

Jag gillar att använda Instagram som exempel eftersom webbplatsen hade uppdaterats till en nyare layout. De har märken som stöder Android Marketplace (Google Play) och iOS App Store. Båda märkena är väldigt enkla i designen men är lätt igenkända vid en blick. Om du letar efter mer komplexa design rekommenderar jag en snabb dribblesökning. Talangade designers delar ofta sina appbutikemblemkoncept för konstruktiv kritik.

Mobila sociala nätverk

Facebook och Twitter har bytt till mobil, men det har inte hindrat andra nätverk från att spridas upp. Vi ser mobilnät som använder sociala nätverk för att tillåta en helt ny kommunikationsplattform.

Localmind körs på ett koncept som liknar Foursquare, där du registrerar ett konto och börjar kolla in på lokala platser. Du kan lämna frågor, eller svara på andras frågor. Deras webbplats är mycket vänlig och inbjudande till nykomlingar. Jag älskar särskilt toppen bannersektionen designad med en anpassad kartbakgrund. Deras användning av gradienter och bakgrundsstruktur ger webbplatsen ett eget liv.

Minimal fotodelning

Pose är ett annat mobilnät med liknande idealer för minimalistisk design. Du kan ladda ner mobilappen för både iOS och Android-enheter. Känslan liknar väldigt men det är för mobila modeälskare. Hela appen är inriktad på mode, hår, smink och glamour.

Användare kan ta bilder av deras kläder, kläder eller tillbehör och dela dem runt nätverket. En sak att märka om Pose är hur snabbt du kan bläddra på webbplatsen. Det är lätt att hitta företagets blogg, kontaktuppgifter etc. Annan app-hemsida förbiser ofta dessa företagsfunktioner som kan vara ett noggrannt ämne.

Om du vill dra uppmärksamhet från media är det viktigt att din webbplats ser ut som en riktig social nätverksprodukt. Du försöker inte bara sälja din app (med annonser eller betalda prenumerationer) utan säljer även nätverket själv. Sociala appar kan definitivt vara knepigare än att utforma vanliga appwebbplatser. Men de får också mycket mer nedladdningar från användare och det är ett spännande nytt fält för mobilen.

Från Humble Beginnings

Webbdesigners är inte alltid kapabla att sätta ihop skrämmande grafik och ikoner. Tack och lov är appwebbplatser inte kritiska mot hur mycket Adobe Photoshop du har. Jag känner faktiskt att minimalism kan fungera mycket bättre för denna layoutstil.

Leef App är en nyutgivet Forrst-klient för iPhone. Deras webbplats innehåller en vacker app skärmdump tillsammans med en stor fet nedladdningsknapp. Hela sidtexten förenklas på samma sätt som Apples teckensnitt och färgscheman.

Det som gör Leefs hemsida bra är den uppriktiga naturen hos varje sidelement. Det är blatant och på förhand med ingenting dolt eller dämpat åt sidan. Jag rekommenderar att du pratar den här stilen som din första mobilappwebbplats, om något bara för att träna. Du kan lära dig mycket genom att minimera de mindre tidbitarna och koncentrera dig på vad som tar uppmärksamhet.

Härlig Whitespace

Också så briljant enkelt är Wood Camera App-webbplatsen. Deras layout rymmer ingenting annat än en vanlig vit bakgrund och centrerad innehåll. Det här innehållet innehåller några vanliga skärmdumpar, ett appbutikmärke och några ytterligare nyckelfunktioner.

Om du känner för minimalism och vitt utrymme är viktiga för din layout, håll dig fast! Träkamera är inte en speciellt mindblowing webbplats layout, men det är super lätt att navigera. Deras webbplats kopplar inte ens till något annat innehåll bortsett från utvecklarens officiella sida. Detta håller fokus på appen och vad den kan erbjuda, vilket är mycket viktigare än flashig grafik. Även om det inte är att säga flashig konstverk är en dålig idé - det kräver bara en korrekt implementering.

Färgglada Illustrationer

Tvärtom mot det minimalistiska tillvägagångssättet är ett arbete med unika illustrationer, som jag helt älskar. Ofta säljer denna extra detalj helt och hållet appen. Ett exempel jag kan relatera till är Barista App för iPhone. Deras webbplatshuvud är riddled med små vektorcappuccinos och espressodrycker.

Men märk hur det inte finns några andra bilder när du rullar ner sidan. Hela toppsektionen designades speciellt för iPhone-appen, som liknar en landningssida. Vektorerna fångar dina ögon direkt och också tips till vad appen handlar om.

Kitchenator är en liknande iOS-app som konverterar måttenheter för matlagning och bakning. Deras huvudlayout använder rika trästrukturer, en rutad bordsduk och minskedar med vatten. Den här bilden antyder syftet med den här appen innan du skämmer bort innehållet.

Denna design stil genomsyrar genom hela layouten. Footer-området matchar en liknande träbakgrund och mycket av samma typsnitt. Detta är ett exempel på ett mycket enkelt webbdesign med mycket kraftfull grafik.

Appwebbplatser: Premium Showcase

Vilken artikel skulle vara komplett utan lite ögonkock? Tillsammans med teknikerna ovan har jag också satt ihop detta vackra galleri av mobilappwebbplatser; märka logotyperna och navigeringssystemen samt domänadresserna. Genom att studera vad de professionella gör kan du förstå designtrender och använda dem i dina egna projekt.

Bosquet App