Hoe Apple het webontwerp de afgelopen jaren heeft beïnvloed

Apple is een van de grootste merken ter wereld en heeft die populariteit grote invloed? Wellicht meer dan welk ander bedrijf in de wereld heeft Apple een enorm invloedrijke rol gespeeld in de manier waarop producten, applicaties en websites worden ontworpen. In dit artikel bespreken we de algehele ontwerpstijl van Apple en hoe deze een aantal anderen heeft beïnvloed.

Een groot deel van de algehele marketingcampagne van Apple is afkomstig van hun zeer populaire website op Apple.com. Alexa rangschikt deze site als # 32 in populariteit - wat het voorloopt op sites als de BBC, Craigslist en PayPal - niet slecht voor een site die in feite slechts een online storefront is voor een enkel merk.

Apple's site heeft een reputatie opgebouwd vanwege de aantrekkelijke merkidentiteit en de overzichtelijke lay-outs. Dankzij deze reputatie heeft het een golf van andere sites beïnvloed om het voorbeeld te volgen. De ontwerpstijl van Apple is er een die zich uitstrekt van productontwerp en verpakking helemaal tot aan de manier waarop de zijbalk-widgets op hun site ontwerpen zijn?


Tijdreizen door Apple.com

Dit artikel gaat zich vooral richten op de meer recente herhalingen van de website van Apple? maar voordat we te ver ingaan, laten we een bezoek brengen aan Apple.com door de jaren heen (met dank aan de WaybackMachine). Het belangrijkste om te onthouden is dat Apple.com, net als de rest van het internet, behoorlijk lelijk begon volgens de normen van vandaag. Klik op elke afbeelding om de daadwerkelijke capture vanuit wayback te zien?

1996


Ja? ik weet?

1999

2000


2000 markeerde de introductie van de iconische "bubble" -tabs? die lang zou blijven hangen.

2001

2004

2006


Tegen 2006 begonnen veel van de stijlen geassocieerd met de moderne "Apple" esthetiek vorm te krijgen op hun site.

2008

Oké, nu we je de afgelopen 15 jaar door de Apple-site hebben geleid, laten we ingaan op wat het zo ongelooflijk invloedrijk heeft gemaakt in de recentere iteraties van hun site.


Minder is meer

Het grootste kenmerk van het invloedrijke webontwerp van Apple is het minimalisme. Apple houdt het eenvoudig door grote gebieden met witte ruimte en grote marges te gebruiken om zich te concentreren op afzonderlijke inhoudsgebieden.

De startpagina van Apple bevat normaal gesproken een grote productfoto met enkele slogan en enkele andere pagina's die onder de vouw zijn gekoppeld. Op het moment van schrijven heeft Apple bijvoorbeeld een groot beeld van Apple's tweede generatie iPad met een grote titel en subkop.

Het veronderstelde denken achter deze ontwerpkeuze is dat de Apple niet alles in één keer op je wil duwen. In plaats daarvan willen ze dat u doorklikt naar de afzonderlijke productpagina waar ze met meer informatie kunnen pronken. Neem deze aanpak in tegenstelling tot de startpagina van Microsoft. Microsoft heeft ook een grote afbeelding, maar de pagina is vol met meerdere advertenties en de hoogtepunten onderaan zijn nog moeilijker te lezen.


Georganiseerde informatie

Er zijn een aantal delen van de Apple-site die veel informatie tegelijkertijd moeten overbrengen. Het zou denigrerend zijn voor de bruikbaarheid als het werd opgesplitst. Deze gebieden lijken echter nog steeds erg schoon en georganiseerd, omdat het allemaal beperkt is tot een raster.

Op de huidige iPod-site van Apple staat een glijdend hero-afbeelding met drie kleinere die netjes eronder zijn geplaatst. Dit trio wordt vervolgens opgedeeld in nog eens zes items die een hiërarchische betekenis creëert. Apple biedt het belangrijkste (en toevallig dure) product aan de bovenkant en pronkt met de mindere onderstaande producten (zoals software-updates en accessoires).

Dit piramide-effect is duidelijk zichtbaar op de site van Apple.


Consistent merk

Voor de meeste merken is de prominentie van de retail een vitaal reclamemedium. Mensen kunnen uw product op een winkelplank ophalen en ze zullen de verpakking scannen voor informatie. De winkelervaring van Apple is heel anders en aangezien je het product niet ziet voordat je het koopt (op vrijwel elke locatie), hoef je de verpakking niet te vullen met tekst en grafische afbeeldingen..

Het interessante is echter dat de website van Apple op dezelfde, minimalistische manier is ontworpen. De stijl van Apple is te zien in al zijn fysieke en virtuele eigenschappen, zodat je een Apple-doos (of zelfs een product) als een Apple-doosje kunt identificeren, net zoals je zou kunnen doen met een website.


Productfoto's

Zoals we eerder vermeldden, gebruikt Apple voornamelijk enkelvoudige, grote foto's van haar producten in plaats van meerdere, kleinere. Als u een van hun weinige productpagina's bezoekt, staat de afbeelding centraal voordat prijs, functies of beschikbaarheid worden genoemd. Deze specifieke techniek speelt heel goed in de algemene theorie van visuele hiërarchie door het product eerst en vooral op de voorgrond te brengen.

Deze theorie is heel eenvoudig, maar zeer effectief in het vormen van een goed beeld van een product als een eerste indruk.


Animatie en interactiviteit van nieuwe webstandaarden

Zoals je weet, is Apple een kruisvaarder voor nieuwe webstandaarden zoals HTML5. Hun eigen site weerspiegelt dit door een selectie van enigszins nieuwe interactiviteit aan te bieden door het gebruik van niet-Flash-webtechnologieën.

We weten ook uit de eerste hand dat Flash de nummer 1 reden is waarom Macs crashen.

Deze kleine animatiegebieden lijken ook extreem functioneel in vergelijking met hun Flash-tegenhangers. De Flash-afkeerende bende groeit met de dag en mijn gebruik van Chrome toont regelmatig het crashen van Adobe's populaire plug-in. Het is een feit dat de hoogten die Flash vóór HTML5 aanbood, worden gerepliceerd met betere compatibiliteit in de vijfde versie van HTML.

De virtuele boycot van Flash is iets dat Apple beïnvloedt, niet van hun website. In plaats daarvan is het een demonstratie van wat kan worden bereikt met alleen de technologieën die compatibel zijn met de mobiele apparaten van Apple.

De iPad 2-site van Apple laat een interactieve demo zien van zijn Smart Cover-accessoire, waar gebruikers de kleur van de iPad en de behuizing kunnen veranderen en vegen of slepen (afhankelijk van het apparaat) om de hoes te vouwen. En geen flits!

Icons

Als je door de site van Apple navigeert, zul je merken dat de meeste marketingpunten gekoppelde afbeeldingen hebben die een beetje visie geven op de anders saaie marketing-dribbel. De Apple Mac OS X-site (hieronder afgebeeld) gebruikt bijvoorbeeld een groot pictogram naast de 64-bits OS-sectie. De overige Apple-punten hebben elk ook een eigen pictogram.

Naarmate je dieper doordringt in de site van Apple, worden de pictogrammen steeds duidelijker. Wanneer Apple probeert aan te tonen dat deze interactie van hun software 40% sneller is, gebruiken ze een afbeelding om dit te benadrukken. Dit breekt de inhoud en voegt een beetje extra kleur toe aan het verder eenvoudige ontwerp van Apple.

Daar is een pictogram voor.

Interface-invloed

De website van Apple is één ding dat een grote invloed op het ontwerp vormt, maar de software heeft een vergelijkbaar effect. iOS maakt gebruik van een reeks unieke interface-elementen die zowel op webapps als op websites duidelijk zijn geworden. De schakelknopschakelaar van iOS kan bijvoorbeeld worden gezien in een selectie webapps die de stijl gebruiken om een ​​actie in of uit te schakelen.

Apple is een pionier in een nieuw tijdperk van gebruikersinterfaceontwerp, een ontwerp dat schoon en eenvoudig te gebruiken is. De invloed van de gebruikersinterface van Apple vertaalt zich in een geweldige ervaring met webtoepassingen die het idee hebben opgevat van een minimalistische, simplistische interface met sleutelfuncties die gemakkelijk kunnen worden geïdentificeerd door het type element dat wordt gebruikt. Als je een tuimelschakelaar ziet, weet je dat deze twee belangrijke functies heeft - waarschijnlijk aan en uit.

Hoewel de feitelijke gebruikersinterface-elementen hun eigen invloed op webtoepassingen genereren, kan de schone, minimalistische stijl van de UX ook worden beschouwd als een invloed op het ontwerp. Alles, van de pictogrammen tot het verloop over menu's in Mac OS X ziet er geweldig uit. De subtiele verlopen die in de onderstaande afbeelding worden weergegeven, maken het ontwerp minder goed dan vlak en herinneren me veel aan het schone verloop van Chrome voor Mac aan de bovenkant.


Voorbeelden van door Apple geïnspireerde ontwerpen

De volgende voorbeelden zijn een zeer kleine steekproef van de grote verscheidenheid aan sites die direct of indirect zijn beïnvloed door de benadering van Apple van webontwerp.

MacRabbit

De MacRabbit-productpagina heeft invloed van de strakke, monochrome webdesign- en interface-stijlen van Apple. Merk ook op dat dezelfde apps en ondersteunende logo's hier worden gebruikt als in Mac OS X..

Tapbots

Merk op dat Thace Tapbots dezelfde grote, pagina-dominerende hero-afbeelding gebruikt, gevolgd door drie minder gebruikte apps hieronder.

Pixelmator

Pictogrammen zijn een andere grote functie in het webontwerp van Apple. Er zijn een heleboel goed ontworpen, mooie pictogrammen te vinden op Apple.com en de site van Pixelmator laat nog een paar zien. Er zijn enkele door Apple gemaakte pictogrammen, maar de meesten zijn origineel en spelen mooi met de tekstschaduw.

Symfonie

Symphony toont dezelfde Z-lay-out als gebruikt op de afzonderlijke productpagina's van Apple met een logo aan de linkerkant, gevolgd door navigatie, gevolgd door een groot heldenafbeelding.

Cult van Mac

Als een blog van Apple neemt Cult of Mac veel ontwerpelementen van de grote A zelf. Dezelfde, subtiele verlopen worden gebruikt op de gekenmerkte postset en de donkere de menubalk.

Gibson

Kijken naar Gibson wijst op een soort invloed van Apple. Alles van het Apple-achtige trio van uitgelichte afbeeldingen aan de onderkant tot de opname op elke "Apple-geïnfecteerde webontwerpen" -routine op het net schreeuwt Apple.

Uitchecken

De app-promo-site van Checkout neemt veel van de ontwerpprincipes van Apple in beslag, waaronder grijze gradinten, grote productshots en zelfs de Hot News-stijlticker van Apple.

versies

Versies is een donker webontwerp maar dan een die de theorie van de witte ruimte goed gebruikt. Hoewel de ruimte zelf niet wit is, gebruikt deze wel grote hoeveelheden lege ruimte. De aangepaste pictogrammen worden ook gebruikt om inhoud te demonstreren.