Hur Apple har påverkat webbdesign under årens lopp

Apple är ett av de största varumärkena i världen och med den populariteten kommer stort inflytande? Kanske mer än något annat företag i världen har Apple spelat en väldigt inflytelserik roll i det sätt som produkter, applikationer och webbplatser är utformade. I den här artikeln diskuterar vi Apples övergripande designstil och hur det påverkar en massa andra.

En stor del av Apples totala marknadsföringskampanj kommer från deras mycket populära webbplats på Apple.com. Alexa rankar den här webbplatsen som # 32 i popularitet - som sätter den framför webbplatser som BBC, Craigslist och PayPal - inte dåligt för en webbplats som i grunden bara är en online butik för ett enda varumärke.

Apples webbplats har fått ett rykte för det är attraktivt varumärkesidentitet och rena layouter. Tack vare det här rykte har det påverkat en våg av andra platser att följa efter. Apples designstil är en som sträcker sig från produktdesign och förpackning hela vägen till det sätt som sidbalk widgets på deras webbplats är design?


Apple.com Time Traveling

Denna artikel kommer att fokusera mest på de senaste iterationerna på Apples webbplats? men innan vi gräver in för långt, låt oss besöka Apple.com genom åren (med tillstånd av WaybackMachine). Det viktiga att komma ihåg här är att Apple.com, precis som resten av internet, började vara ganska ful genom dagens standarder. Klicka på varje bild för att se den faktiska fångsten från wayback?

1996


Ja? jag vet?

1999

2000


2000 markerade införandet av ikoniska "bubbla" flikar? som skulle hålla fast under en lång tid.

2001

2004

2006


Vid 2006 började många av de stilar som hör samman med den moderna "Apple" -estetiken ta form på sin webbplats.

2008

Okej, nu när vi har gått igenom Apple-webbplatsen de senaste 15 åren, låt oss gräva in vad som har gjort det så otroligt inflytande i de senaste iterationerna på deras webbplats.


Mindre är mer

Den största egenskapen hos Apples inflytelserika webbdesign är dess minimalism. Apple håller det enkelt genom att använda stora områden med vitt utrymme och stora marginaler för att fokusera på enskilda innehållsområden.

Apples hemsida har normalt en stor produktskott med singel tagline och några andra sidor kopplade under veckan. Till exempel, vid skrivetiden, har Apple en stor bild av Apples andra generationens iPad med en stor titel och underrubrik.

Det antagna tänkandet bakom detta designval är att Apple inte vill driva allt på dig på en gång. I stället vill de att du klickar igenom på den enskilda produktsidan där de kan visa upp mer information. Ta detta tillvägagångssätt i motsats till Microsofts hemsida. Microsoft har också en stor bild, men sidan är trånga med flera annonser och höjdpunkterna längst ner är ännu svårare att läsa.


Organiserad information

Det finns några områden på Apples webbplats som behöver förmedla mycket information på en gång. Det skulle vara nedsättande för användbarheten om det delades upp. Men dessa områden verkar fortfarande mycket rena och organiserade tack vare att allt är begränsat till ett rutnät.

Apples nuvarande iPod-sida har en glidande hjältebild med tre mindre placerade snyggt nedanför. Denna trio bryter sedan ner i ytterligare sex saker som skapar en hierarkisk mening. Apple har den viktigaste (och tillfälligt dyra) produkten överst och visar bort de mindre produkterna nedan (som mjukvaruuppdateringar och tillbehör).

Denna pyramid effekt är uppenbar på Apples webbplats.


Konsekvent varumärke

För de flesta varumärken är detaljhandelns framträdande ett viktigt reklammedium. Människor kan hämta din produkt på en butikshylla och de ska skanna förpackningen för information. Apples detaljhandel upplevelse är väldigt annorlunda och eftersom du inte ser produkten innan du köper (i stort sett alla platser) behöver du inte fylla förpackningen med text- och annonsgrafik.

Det intressanta är emellertid att Apples hemsida är utformad på samma, minimalistiska sätt. Apples stil ses över alla dess fysiska och virtuella egenskaper så att du kan identifiera en Apple-låda (eller ens produkt) som en Apple, precis som du kan göra på en webbplats.


Produktskott

Som vi nämnde tidigare använder Apple huvudsakligen enstaka, stora bilder av sina produkter i stället för flera, mindre. När du besöker en av sina få produktsidor tar bilden bilden i centrum innan någon prissättning, funktioner eller tillgänglighet nämns. Denna speciella teknik spelar mycket bra in i den allmänna teorin om visuell hierarki genom att först och främst lyfta upp produkten.

Denna teori är väldigt enkel men mycket effektiv för att bilda en bra bild av en produkt som ett första intryck.


Animering och interaktivitet från nya webbstandarder

Som du vet vet Apple att det är en korsfarare för nya webbstandarder som HTML5. Deras egna webbplats återspeglar detta genom att erbjuda ett urval av något nyskapande interaktivitet genom användning av icke-Flash-webbteknik.

Vi vet också första hand att Flash är den främsta orsaken till Macs-kraschen.

Dessa små animationsområden verkar också vara mycket funktionella jämfört med deras Flash-motsvarigheter. Det Flash-avskyande gänget växer om dagen och min användning av Chrome visar regelbundet kraschen av Adobes populära plugin. Faktum är att de höjder som Flash erbjöd före HTML5 replikeras med bättre kompatibilitet i den femte revisionen av HTML.

Den virtuella bojkotten av Flash är något som Apple påverkar inte från deras hemsida. Istället är det en demonstration av vad som kan uppnås med endast den teknik som är kompatibel med Apples mobila enheter.

Apples iPad 2-sida visar en interaktiv demo av det är Smart Cover-tillbehör där användarna kan ändra färg på iPad och väska och svep eller dra (beroende på enhet) för att kasta omslaget. Och ingen blixt!

ikoner

När du navigerar via Apples webbplats kommer du märka att de flesta marknadsföringspunkterna har associerade bilder som ger en liten syn på den annars tråkiga marknadsföringsdribben. Till exempel använder Apples Mac OS X-webbplats (bilden nedan) en stor ikon bredvid den 64-bitars OS-sektionen. Resten av Apples poäng har var sin egen ikon också.

När du blir djupare på Apples webbplats börjar ikonerna bli tydligare. När Apple försöker visa att denna interation av deras programvara är 40% snabbare, använder de en bild för att markera detta. Detta bryter upp innehållet och lägger lite extra färg till Apples annars vanliga design.

Det finns en ikon för det.

Gränssnittet påverkar

Apples webbplats är en sak som bildar ett stort designpåverkan, men det är programvaran har en liknande effekt. IOS använder en rad unika gränssnittselement som har blivit tydliga på webapps och webbplatser. Exempelvis kan iOS växlaromkopplare ses i ett urval av webbappar som använder stilen för att växla en åtgärd till eller från.

Apple har skapat en ny ålder av användargränssnitt design, en som är ren och enkel att använda. Inflytandet från Apples UI innebär en stor erfarenhet av webbapplikationer som har tagit tanken på ett minimalistiskt, förenklat gränssnitt med nyckelfunktioner som lätt kan identifieras genom vilken typ av element som används. Om du ser en växelströmbrytare vet du att den har två nyckelfunktioner - sannolikt på och av.

Även om de faktiska användargränssnittselementen ger sitt eget inflytande på webbapplikationer kan den rena, minimalistiska stilen på UX också ses som en påverkan på designen. Allt från ikonerna till lutningen över menyer i Mac OS X ser bra ut. De subtila gradienterna som visas i bilden nedan gör att designen ser mindre ut än platt och påminner mig mycket om Chrome för Mac: s rena gradient över toppen.


Exempel på Apple-inspirerade mönster

Följande exempel är ett mycket litet urval av det stora utbudet av webbplatser som antingen direkt eller indirekt påverkats av Apples tillvägagångssätt för webbdesign.

MacRabbit

MacRabbits produktsida påverkar Apples rena, monokromatiska webbdesign och gränssnittsstilar. Observera också samma appar och supportlogotyper används här som på Mac OS X.

Tapbots

Observera thace Tapbots använder samma stora sida-dominerande hjältebild följt av tre mindre appar som visas nedan.

Pixelmator

Ikoner är en annan stor funktion i Apples webbdesign. Det finns massor av väldesignade, vackra ikoner som finns på Apple.com och Pixelmators webbplats visar några fler. Det finns några Apple-made ikoner där, men de flesta är originella och spelar bra med textskuggningen.

Symfoni

Symphony demonstrerar samma Z-layout som används på Apples enskilda produktsidor med en logotyp till vänster, följt av navigering, följt av stor hjältebild.

Kult av Mac

Som en Apple-blogg tar Cult of Mac många design-signaler från den stora A-enheten. Samma, subtila gradienter används på den presenterade efterställningen och de mörkare menyraden.

Gibson

Att bara titta på Gibson indikerar någon form av Apple-inflytande. Allt från Apple-ish-trio av utvalda bilder längst ner till det är inkludering på alla "Apple-inflenced web designs" roundup på nätet skriker Apple.

Checka ut

Checkouts app-promo-webbplats tar många av Apples designprinciper i spel som innehåller gråtoner, stora produktbilder och till och med Apples Hot News-style ticker.

versioner

Versioner är en mörk webbdesign men en som använder teorin om vitt utrymme väl. Även om utrymmet i sig inte är vitt, använder det stora mängder tomt utrymme för effekt. De anpassade ikonerna används också för att visa innehåll.