Apples designteam anses allmänt som en av de mest begåvade designgrupperna i branschen idag. De trender som de ställer följs av inte bara alla andra stora tekniska företag, utan av webbdesigners i alla tänkbara produkter och service nischer.
Följ med när vi påbörjar en spännande resa genom tiden och bevittnar utvecklingen av Apples designstil. Du får flera fantastiska glimt på Apple.com som går hela vägen tillbaka till 1997, eftersom vi bevittnar uppkomsten och fallet av flera viktiga designtrender.
Apple och Design
Bilden ovan är en ögonblicksbild av Apples webbplats som den för närvarande står. Det är en perfekt bild av allt vi älskar om Apples designdesign. Det är rent och minimalt med en stark tonvikt på produktens skönhet.
Det finns inte en miljon olika banners eller mega drop-down menyer för att sortera igenom, bara ett enkelt navigationsschema, en utrustad produkt och fyra distinkta innehållslådor längst ner som tjänar som ett universellt sätt att lyfta fram andra viktiga produkter och information.
Lägg märke till kopian också: Kort och till rätta med en touch av hyperbole (var skulle Apple vara utan det?). Trots det faktum att iPhone 4S har hundratals funktioner som ska vara bragged om, har de dunit ner till fyra grundläggande punktpunkter, bara tillräckligt för att häva ditt intresse och uppmuntra dig att titta längre.
Var det alltid så här?
Apple har länge varit känt för sin känsla av stil och överlägsen design. Oslagbar innovation ligger i framkant av deras framgång, men det har varit en tätt integrerad varumärkesbild som är oåterkallelig inblandad i sina produkter, reklamfilmer, webbsidor och till och med dess butiker.
När vi tittar på Apple.com som kanske den mest framträdande och ofta uppdaterade puls för Apples visuella varumärke, kan jag inte låta bli att undra över resan. Hur utvecklades detta varumärke? Vad såg tidiga versioner av Apple.com ut? Var de liknande? Delade de samma enkla estetiska eller var de mer benägna att reflektera de upptagna webbdesignerna från ett decennium sedan?
Apple i Print
För att få en känsla för Apples varumärkesutveckling bör vi kortfattat överväga tiden innan Apple.com ens existerade. Från bolagets grund lägger Jobs alltid stor vikt vid enkelhet. Men den termen hade en väldigt annorlunda visuell översättning då. Mac Mothership har en härlig samling vintage Apple-annonser som ger oss en inblick i Apples varumärkesbild på slutet av 70-talet, vilket du kan se, det är långt ifrån Apple.com idag.
Dessa annonser är fyllda med försäljningsplatser och informativ kopia. Detta kan vara ett nödvändigt ont för nya produktkategorier, men det går längre än detta. Även logotyperna visar en utveckling av Apples definition av sig själv. Originalen till vänster är en väldigt komplex illustration av Newton under ett träd. Den uppdaterade versionen till höger är en färgstark regnbågskytte över hela sidan. Båda är mycket mer komplexa än den enkla och allestädes närvarande symbolen vi ser idag.
Under de närmaste tjugo åren skulle Apple flirta med generösa mängder av blankutrymme, men bara kort mellan annonser som följde samma grundläggande kopiera tunga tillvägagångssätt som vi ser ovan.
Det kan sägas att det viktigaste hoppet mot det enkla Apple-märket som vi känner idag kom från TBWA \ Chiat \ Day, byrån bakom den ursprungliga Macintosh-kommersiella 1984 och därefter en av de mest kända annonskampanjerna hela tiden: Tänk Annorlunda.
Vid 1997 hade Apple funnit sin identitet. I över ett decennium har Think Different-kampanjen inte åldrats en dag. Det känns inte föråldrat som de ursprungliga Apple-annonserna, det är istället tidlöst och kraftfullt nog för att påverka många efterföljande generationer.
Tillbaka till webben
Tänk Olika ändrade allt för Apple (den här avgiften ledde naturligtvis av att Jobb återvände 1996-1997). Det gav en fantastisk identitet inte bara till Apple, men till sina kunder. Visuellt rockade det Apples varumärkesstil i vad vi känner idag.
Ingenstans är detta tydligare än på Apple.com. Med hjälp av den underbara tidsmaskinen i Internet Archive kan vi resa tillbaka till de tidiga dagarna på Apples webbplats. Tänk Olika träff i 1997, så om vår förutsättning visar sig sant, bör vi se detta som ett år för förändring för webbplatsen. Här är en titt på Apple.com runt mitten av 1997:
Inte riktigt vad du förväntar dig av Apple är det? Liksom de tidiga utskriftsannonserna ser vi typ och mycket av det. För att vara rättvis, jämfört med det allmänna läget för webbdesign då, var det faktiskt en ganska minimal design. Faktum är att allt är trevligt, men det finns massor av innehåll. Faktum är att det som du inte ser på skärmdumpen är att de här nyheterna går vidare för miles (klicka här för liveversionen).
Tänk på att denna design är pre-Think-Different. De tidigare Apple.com-mönsterna delade denna estetiska. Låt oss nu hoppa till maj 1998, den första in-tact post-Think-Different Apple-webbplatsen jag kunde hitta.
Skillnaden mellan de två estetikerna är otroligt, de verkar inte ens vara från samma företag (låt oss möta det, de är verkligen inte). Där vi brukade hitta skräp och en överflöd av information hittar vi nu blankutrymme; ton och massor av vitt utrymme. Där vi brukade hitta en sida som rullade i miles hitta vi nu korthet.
Den enkla rubriken säger bara? Apple ,? produktskottet har gjort sin upplevelse till hjälten och det finns till och med en imponerande animation av iMac-spolen på plats via det animerade GIF-undret.
Tänk samma
Den mest fantastiska delen av 1998 års design till mig är precis hur likartat det är vad Apple använder för att gå in 2012! Typografi, logotyp och stänk av färg fungerar som en viktig designlektion i vilken typ av element du kan förvänta dig att åldras över tiden i din design, men den grundläggande layouten här är chockerande nära det vi ser på Apple.com idag.
Den övre delen av webbplatsen är reserverad för huvudproduktfunktionen (i detta fall den ursprungliga iMac), och botten är uppdelad i några horisontella rektanglar som har andra viktiga produkter.
Viktiga skillnader
Som jag nämnde är typografi ett huvudelement som står upp i denna utveckling. Det finns en anledning som vi hänvisar till sans-serif typsnitt som "moderna"? Du kan tydligt se hur Apples nuvarande typsnitt ger sina mönster framåt i tiden jämfört med den klassiska gammala stilserifen från 1998.
En av de viktigaste förändringarna jag ser här är navigeringen, märka hur långt ner på sidan det är. Dessa dagar är vi så vana vid navigation på toppen att den här designen säkert skulle kasta många användare för en loop (kanske till och med en oändlig). Apple har uppenbarligen lärt sig att det hjälper dig att komma till var du vill gå på webbplatsen, och det är bokstavligen en topprioritet.
En mycket viktig komponent i layouten som du inte kommer från den beskurna skärmbilden ovan är att innehållet med fast bredd sitter på vänster sida av din skärm. Nuvarande moderna webbplatser brukar centrera sina layouter så att ursprunget är mitt i webbläsarfönstret.
Också värt att nämna är Apple-nyhetsflödet, som förblivit en häftning på platsen i flera år och avlägsnades bara tidigare i år.
Flytta framåt: 1999
I oktober 1999 använde Apple fortfarande samma design. Produkterna utvecklas, men siddesignen är nästan exakt som året innan. Lägg märke till shouten till Pixars Toy Story 2 direkt på Apple.com, kan du berätta att Steve är till rätta för båda företagen?
Notera också en stor förändring i logotypen, nu har Apple dödat regnbågen till förmån för en fast vit Apple. Apple skulle visa sig vara en stark ledare i en logotypförenklingsrörelse som fortfarande pågår idag. Du kan läsa mer om detta i vår artikel, Pepsi vs Coke: Power of a Brand.
2000
När vi träffar maj 2000 ser vi några stora förändringar på plats. Till att börja med är hela layouten nu centrerad i webbläsaren. Vidare har navigeringen äntligen flyttats till toppen och liknar det aqua-stilgränssnitt som Apple berömde med OS X. Notera hur komplicerat navigationen är med de två länkarna.
Glänsande knappar och flikar var en stor rörelse i webbdesign och var standard? Cool? för några år. Den nuvarande webbdesignerens obsession med enkla, minimala knappar med plana färger eller subtila gradienter är ett direkt svar på denna mer utsmyckade stil
2001
Snabbspolning fram till november 2001 och vi ser några mer viktiga hopp. Aquastilen har gått ner till nyhetsflödet, sans-serif-typen börjar ta tag i (märka underrubriken) och innehållsrutorna har utvecklats dramatiskt. Vi har gjort hoppet till fyra istället för tre och lådorna är nu helt olika former med rundade hörn som de vi ser i flikarna högst upp. De är fortfarande avrundade idag, men Apple har dragit tillbaka dramatiskt på gränsen radie.
Även om Adobe tar det centrala steget i denna skärmdump, 2001 var ett monumentalt år för Apple på grund av att iTunes och iPod släpptes. Detta markerar sin första fördjupning i en generation av icke-traditionella enheter som helt skulle omdefiniera företaget. Detta var också året som de gjorde hoppet till OS X, ett avgörande drag till ett mycket mer vänligt och intuitivt system som skulle kunna vara till hjälp för att vinna över Windows-användare som dras till Mac genom sin kärlek till iPod.
2004
I slutet av 2004 hade Apple börjat experimentera med att lyfta fram sitt huvudinnehåll med en solidfärgad runda hörnlåda. Mer typiskt skulle du se den här rutan i svart, vilket gjorde en vacker kontrast till den vita bakgrunden, men iPods färgstarka annonsering markerade ett tillfälle att få lite liv på sidan.
En annan väldigt viktig aspekt av 2004-designen: De har gjort hoppet till alla sans-serif-typer. Detta är en viktig milstolpe i utvecklingen av designtrender.
2005
Flört med svart 2004 ledde till ett stort experiment för utgåva av Tiger 2005. Här ser vi att de flesta av Apple.com-hemsidan översvämmade i svart. En trend som fördes till många av produktsidorna.
Också en mycket stor sak sen 2005 var produktreflektioner, synliga längst ner på den här sidan med iPods. Jag kommer helt ihåg att se dessa och omedelbart rippa dem för de projekt jag arbetade på vid den tiden.
2007
Apples trender var ganska statiska de närmaste åren, det var inte förrän slutet av 2007 att de äntligen gjorde ett stort och mycket välkommet steg mot den webbplats som vi känner till idag.
Webbplatsens hemsida har blivit helt omarbetad. De har utvidgat innehållet avsevärt och dödat den gamla vattennavigeringen, ersatt den med en mycket förenklad version med hjälp av de släta gradienterna som jag redan nämnde skulle följa aquadrenden för de flesta designers. Den expanderade innehållsbredden kan definitivt hänföras till bredbildsskärmarna som nu var närvarande på de flesta skrivbord och bärbara datorer. Det är väldigt viktigt att vara medveten om maskinvaruutvecklingar som kan och bör påverka UI-designtrender.
Observera också att sökfältet äntligen ligger högst upp på sidan. Detta var en eftertanke som kastades i botten för alldeles för länge och det var fantastiskt att se det äntligen få den uppmärksamhet och framträdande som den förtjänade.
2011
Apple hittade sin strid med den tidigare designen och fastnade i stort sett oförändrad till januari 2011, en imponerande körning av vilken standard som helst!
I början av året såg vi Apple ta ett steg tillbaka och återvända navigeringen till ett glansigt utseende, om än en uppdaterad mörk finish. De började också experimentera med lite subtil bakgrundsstruktur, en smärtsam rörelse enligt min åsikt som gjorde att deras typiskt ledande designteam verkar som om de hoppade på populära trender som ställts av otaliga andra framför dem. Klicka på bilden nedan för att se texturen på nära håll.
Vad kommer härnäst?
Det är svårt att förutsäga var Apples hemsida kommer att gå, men vi ser några intressanta experiment som äger rum vidare på webbplatsen. Trots att hemsidan har tappat bort bruskonstruktionen har den nuvarande iPhone-sidan introducerat en mycket tyngre implementering av en texturerad bakgrund med ett insatsproduktområde.
Det finns också några riktigt imponerande animeringar av iPhone som flyger in och ur synhåll.Dessa ersätter de animerade GIF-filerna från 1998 med modern webbteknologi, men hjärtat av idén är definitivt detsamma.
Kommer vi att se Apple återvända till gamla knep som animerade produkter och glansiga knappar? Och kommer de att införa sig i deras genomförande av texturerad bakgrund, kanske att införa mer av de texturer som vi ser i IOS? Din gissning är lika bra som min!
Slutsats
Den här studien av utvecklingen av Apple.com är så mycket mer än en titt på ett enda företags ögon. Det fungerar som en viktig lektion om flera stora webbdesigntrender för alla företag under det senaste decenniet. Vi bevittnade förenkling av layouter och minskning av text, uppkomsten av sans-serif-typen och flera års kärleksaffär med glans som vi fortfarande leker med idag trots den resulterande återfödelsen av minimalism.
Vi kan också enkelt hitta andra trender, såsom ökad betydelse för sökfält, insikten att navigering ska vara framträdande och lätt att hitta och den rikedom som nya webbteknologier tar med till webbdesign i en efter-Flash-era. Apple har varit ansvarigt för att driva HTMl5 och CSS3 kanske öppetare än något större tekniskt företag i ett direkt angrepp mot Adobes regeringstid.
Ett stort tack beror på folket på Internet Archive för att bevara dessa och otaliga andra viktiga delar av designhistoria. Jag ser mycket fram emot att se om Apple kommer att fungera som ledare eller följare i webbdesigntrender under de kommande åren.