Designstudie på Mac OS X App-webbplatser (layouter)

Apple har alltid krävt den högsta kaliberarbetet från sina anställda redan sedan starten 1970-talet. Många designers har nyligen flyttat in i OS X-miljön, och de flesta blir kär vid första ögonkastet. Mac OS X Lion erbjuder så många funktioner som du bara inte kan hitta någon annanstans - mest av vilka kan App Store vara.

Härifrån får du tillgång till en rad applikationer både gratis och betalt. Dessa är alla byggda för OS X Lion och kan laddas ner direkt till Launchpad. I denna fallstudie ska jag titta på designtrender för Mac-appwebbplatser. Dessa är specifikt inriktade på OS X och inkluderar inte iOS-appar? stilar är väldigt olika. Tillsammans med de här tipsen har jag också sammanställt ett litet galleri av mina favoritprogram för Mac-apper för att dela lite inspiration.

Förstora dina nyckelpunkter

När människor landar på någon appwebbplats hoppas de kunna räkna ut syftet med ansökan mycket snabbt. Det enklaste sättet att göra detta är att omedelbart ta tag i besökarnas uppmärksamhet och vägleda dem genom hela layouten. Och från tidigare erfarenheter verkar det som om jumbo-stor text / grafik ofta gör tricket.

Alfred App är ett sådant exempel som integrerar hela skärmen i en glidande layout. Både applogotypen och nedladdningsknappen hoppa av sidan vid en blick, tillsammans med den monströsa appikonen! Användare som är bekanta med Alfred-appen känner igen den unika hatten och förstoringsglaset. Och det är inte bara toppsidan, heller.

När du rullar ner du bör märka varje sida sektion är också bruten i bitar. Demon skärmdump området har en liten kolumn för miniatyrer med en vacker visning av appen. Bara genom att kolla in de få demonstrationsbilderna är det allmänt förstått vad appen kan göra. När du hittar fler applikationswebbplatser, håll dina ögon öppna för den stora bilden? saker som är tänkt att sticka ut. Håll dig också och tänka på vad som ska hoppa av din egen appwebbplats.

Rena egenskaper

De mer populära webbdesignerna innehåller ofta samma typ av element. Detta kan vara en mer färdigställd och detaljerad ikondesign, snygg logotyp och annan rolig grafik. Men du borde följa Apples exempel och klippa ut de utbytbara grejerna. Ren och förenklad gränssnitt kommer att hålla dina besökares fokus genomflyttande genom fler nedladdningar och inköp.

Jag är ett stort fan av Instagram som har tagit mycket tid på iOS. Och Mac app Carousel är en vacker syster service på skrivbordet. Om du märker att deras webbplatslayout har ett mindre logotypområde med mer utrymme för skärmdumpar. Dessutom verkar typografi mer raffinerad för att matcha den stilfulla, exklusiva teman.

Du bör också märka att det inte finns någon huvudnavigering här. Överväga att duplicera detta för din egen appwebbplats, det tar bort mycket användarfrustration. Denna idé går dubbelt för mobila användare att hitta din webbplats för första gången på iPhone eller Android. Om du kan skildra din apps meddelande på en enda sida säger jag ge järnet!

Inkludera Standard App Store-ikoner

Att fånga din besökares uppmärksamhet är ett viktigt krav, men du vill också få sitt förtroende. Och folk som använder Mac OS är allmänt beroende av Apples utvecklare. Du bör inkludera märken och / eller knappar på din webbplats för att låta folk veta att du har publicerats i appbutiken. Det kan tyckas litet, men det kan vara av stor betydelse för nya potentiella kunder.

Riktlinjerna för marknadsföring av Mac App Store (PDF) går lite om detaljer om App Store-märket som du ser på de flesta populära Mac-appar. Jag gillar också att slå upp dribbles skott för att se om någon har coola designsätt eller ikoner i förhållande till temat.

Ge en demo där det är möjligt

Kom ihåg hela meningen med att skicka ditt meddelande snabbt? Detta kan lättast uppnås genom bilder eller video - ingen stor överraskning där. Men även miniatyrbilder eller bildspel är ibland inte tillräckligt.

Du bör försöka inkludera en demo av din tjänst i en slags arbetsflöde infographic Det finns massor av gratis PSD-filer att ladda ner som passar in i MacBooks, iPhone, iPad och allt annat. Här är ett vackert exempel på en gratis iMac PSD-mall för nedladdning. Nu kan du ta skärmdumpar av din ansökan och bygga små demonstrationsbilder.

Detta fungerar riktigt bra i exemplet ovan för Meddela mig. Appen är öppen och utvecklad för alla 3 plattformar på iOS / iPad och OSX. Vid första anblicken kan du anta att appen är ett system för meddelandetyp. Genom en liten demo grafik och ytterligare en förklaring kan du sammanställa de utökade funktionerna för att komponera din åsikt på appen.

Dynamiska animationer & jQuery

Apple är också känt för att ha vackra övergångs animeringar. Deras uppmärksamhet på detaljer i både design och funktion är otrolig - spänner över hela hela programvaruportföljen. Och som webbdesigner publicering under Apple kan du hitta din app webbplats kan använda en magisk touch.

Reeder for Mac är vacker och demo-platsen passar lika bra. Observera att sidadresserna är extremt enkla och enkla att vidarebefordra till vänner eller via sociala nätverk. Dessutom hålls navigeringen i en sidokolumn, medan sidinnehållet sänks ner till det minsta läget.

Även om Reeder har snabba sidhastigheter är det bara ett exempel på många appwebbplatser. Om du njuter av dessa dynamiska animeringar anser du att du tittar på jQuery-biblioteket och även jQuery-gränssnittet. Det här är två mycket populära JavaScript-bibliotek med förbyggda funktioner för sidoeffekter? och du kan bygga mycket! För en ide kan du njuta av denna lilla handledning i Apple-stil med jQuery för att bygga en splash-skärmdämpning.

Inspiration Gallery

Som tidigare nämnts skulle ingen fallstudie vara komplett utan en liten designutställning.Nedan är några exempel på mina personliga favoriter OS X app webbsidor. Kolla in dem och låt oss veta vad du tycker! Och om vi saknade några fantastiska applayoutar så tycker du verkligen om att låta oss veta i kommentarerna.