Design Killer Mobile App Websites Tips en voorbeelden

De mobiele scene is de afgelopen jaren exponentieel gegroeid. De iOS App Store en Android-apps op Google Play zijn de twee hotspots geworden voor smartphonefanaten. Naarmate het aantal smartphonegebruikers toeneemt, zien we honderden ontwikkelaars van mobiele apps nieuwe ideeën op de markt brengen.

De meeste populaire apps worden vergezeld door een eigen website. Dit kan handig zijn bij marketing en het verkrijgen van je naam. Het is ook een veel mooier online URL dan een van de App Stores. Ik heb het gevoel dat elke succesvolle mobiele applicatie bijna een aanwezigheid op het web vereist.

In dit artikel wil ik enkele van de meest voorkomende ontwerptrends voor websites van mobiele apps. Er is geen strikt rulebook dat u moet volgen om een dergelijke lay-out te bouwen. Eerder zijn er enkele unieke richtlijnen en trends die webontwerpers hebben gevonden om goed te werken in het verkrijgen van een publiek. In combinatie met mijn iOS-ontwikkelingsgids kun je een fantastische mobiele app samenstellen en zijn website bouwen.

Bekijk onderstaande concepten en probeer enkele te implementeren in de lay-out van uw eigen applicatie-website.

Schermafbeeldingen van apparaten

Een nietje voor elke mobiele app-website moet een screenshot van de applicatie zijn. Bezoekers zijn alleen geïnteresseerd in uw app en wat is een snellere manier om het doel aan te tonen dan met schermafbeeldingen? U kunt apparaatopnames in elke lay-outstijl passen, dus dit is geen beperkende factor.

Easy Chef is een Spaanse iOS-app die veel apparaatfoto's gebruikt. Het bovenste deel van de lay-out bevat een voorbeeldweergave van verschillende weergaven. Maar terwijl u naar beneden scrolt, ziet u andere diagrammen met iPhone-schermen. Deze panelen bevatten gedetailleerde labels en upclose, vergrote schermweergaven. Ik heb eigenlijk geschreven over het ontwerpen van informatieve productafbeeldingen in een oudere post.

Een andere interessante setup is te vinden op de Tweetbot galerijpagina. Dit is een zeer populaire Twitter-client voor iPhone en de ontwikkelaars hebben een glijdende showcase van screenshots samengesteld. Als u ruimte probeert te besparen in uw lay-out, kan dit een eenvoudigere oplossing zijn. Bezoekers hoeven niet naar beneden te scrollen op zoek naar een specifieke weergave. jQuery is eenvoudig te implementeren en u kunt snel een glijdend voorbeeld van een iPhone-scherm samenstellen. Het kan moeilijk zijn om extra details te vermelden, maar dit kan in een andere sectie worden toegevoegd.

App Store-badges

Deze techniek lijkt ook erg no-nonsense als je klaar bent met het bouwen van de applicatie. Badges worden snel herkend als downloadlinks naar de app-marktplaats. Zowel Android- als iOS-gebruikers hebben de mogelijkheid om apps rechtstreeks vanuit hun browser te bekijken, of deze zullen doorsturen wanneer ze op een smartphone worden bekeken.

Ik gebruik Instagram graag als een voorbeeld, omdat de website is bijgewerkt naar een nieuwere lay-out. Ze hebben badges ter ondersteuning van de Android Marketplace (Google Play) en de iOS App Store. Beide badges zijn zeer eenvoudig van opzet en toch gemakkelijk herkenbaar in een oogopslag. Als u op zoek bent naar meer complexe ontwerpen, raad ik u aan om snel te dribbelen. Getalenteerde ontwerpers delen hun app-store-badgeconcepten vaak voor opbouwende kritieken.

Mobiele sociale netwerken

Facebook en Twitter zijn overgestapt op mobiel, maar dit heeft niet voorkomen dat andere netwerken opduiken. We zien dat sociale netwerken mobiele apps gebruiken om een heel nieuw communicatieplatform mogelijk te maken.

Localmind werkt op een concept dat vergelijkbaar is met Foursquare, waar u een account registreert en begint met inchecken op lokale plaatsen. Je kunt vragen achterlaten of vragen van anderen beantwoorden. Hun website is heel vriendelijk en uitnodigend voor nieuwkomers. Ik ben vooral dol op de bovenste bannersectie die is ontworpen met een aangepaste kaartachtergrond. Het gebruik van hellingen en achtergrondstructuur geeft de website een eigen leven.

Minimale foto's delen

Pose is een ander mobiel netwerk met vergelijkbare idealen voor een minimalistisch ontwerp. U kunt de mobiele app downloaden voor zowel iOS- als Android-apparaten. Het gevoel is vergelijkbaar met weheartit, maar het is voor mobiele modeliefhebbers. De hele app is gericht op mode, haar, make-up en glamour.

Gebruikers kunnen foto's maken van hun outfit, kleding of accessoires en deze delen op het netwerk. Een ding om op te letten over Pose is hoe snel je op de website kunt bladeren. Het is gemakkelijk om de bedrijfsblog, contactgegevens, enz. Te vinden. Andere app-websites zien deze bedrijfskenmerken vaak over het hoofd, wat een gevoelig onderwerp kan zijn.

Als u de aandacht van de media wilt trekken, is het belangrijk dat uw website eruitziet en aanvoelt als een echt sociaal netwerkproduct. U probeert niet alleen uw app te verkopen (via advertenties of betaald abonnement), maar verkoopt ook het netwerk zelf. Sociale apps kunnen zeker lastiger zijn dan het ontwerpen van reguliere app-websites. Maar ze verzamelen ook veel meer downloads van gebruikers en het is een opwindend nieuw veld voor mobiel.

Van nederig begin

Webontwerpers zijn niet altijd in staat om schandalige afbeeldingen en pictogrammen samen te stellen. Gelukkig zijn websites niet kritisch ten aanzien van hoeveel Adobe Photoshop-vaardigheden u heeft. Ik heb echt het gevoel dat minimalisme veel beter kan werken voor deze lay-outstijl.

Leef App is een nieuw uitgebrachte Forrst-client voor iPhone. Hun website bevat een prachtig screenshot van een app en een grote, gedurfde downloadknop. Alle paginatekst is op een vergelijkbare manier vereenvoudigd als Apple's lettertypen en kleurenschema's.

Wat de Leef-website geweldig maakt, is het openhartige karakter van elk pagina-element. Het is flagrant en vooruitziend met niets verborgen of opzij geschoven. Ik raad aan deze stijl als je eerste mobiele app-website te proberen, als er al iets is om te oefenen. Je kunt veel leren door de mindere weetjes te minimaliseren en je te concentreren op wat de aandacht trekt.

Mooie Whitespace

Ook zo eenvoudig is de website van de Wood Camera-app. Hun lay-out bevat niets anders dan een eenvoudige witte achtergrond en gecentreerde inhoud. Deze inhoud bevat een aantal standaard screenshots, een app store-badge en enkele extra belangrijke functies.

Als je het gevoel hebt dat minimalisme en witruimte belangrijk zijn voor je lay-out, blijf er dan bij! Wood Camera is geen bijzonder indringende website-indeling, maar het is super eenvoudig om te navigeren. Hun site linkt niet eens naar andere content, behalve de officiële pagina van de ontwikkelaar. Dit houdt de focus op de app en wat deze kan bieden, wat veel belangrijker is dan flitsende graphics. Hoewel dat niet wil zeggen dat opzichtige illustraties een slecht idee zijn - het vereist alleen een juiste implementatie.

Kleurrijke illustraties

Het tegenovergestelde van de minimalistische benadering is een werk met unieke illustraties, waar ik helemaal dol op ben. Vaak zal dit extra detail me de app volledig verkopen. Een voorbeeld dat ik kan bevatten, is de Barista-app voor iPhone. Hun site header is bezaaid met kleine vector cappuccino's en espressodranken.

Maar merk op dat er geen andere afbeeldingen zijn wanneer u de pagina afrolt. Dit hele bovenste gedeelte is speciaal ontworpen voor de iPhone-app, vergelijkbaar met een bestemmingspagina. De vectoren vangen meteen je ogen op en laten ook zien waar de app over gaat.

Kitchenator is een vergelijkbare iOS-app die maateenheden converteert voor koken en bakken. Hun koplay-out maakt gebruik van rijke houten texturen, een geruit tafelkleed en mini-lepels water. Deze afbeelding verwijst naar het doel van deze app voordat u de inhoud even doorsnijdt.

Deze ontwerpstijl doordringt eigenlijk door de volledige lay-out. Het voettekstgebied komt overeen met een vergelijkbare houten achtergrond en veel van dezelfde lettertype-opties. Dit is een voorbeeld van een zeer eenvoudige website-indeling met enkele zeer krachtige grafische afbeeldingen.

App-websites: Premium-showcase

Welk artikel zou compleet zijn zonder een beetje eye candy? Naast de bovenstaande technieken heb ik ook deze prachtige galerij met mobiele app-websites samengesteld; let op het logo en navigatieschema's, evenals de domein-URL's. Door te bestuderen wat de professionals doen, kunt u ontwerptrends begrijpen en deze gebruiken in uw eigen projecten.

Bosquet App