Apple website analyse webdesign ontwerp design

Een analyse van de Apple website. Meer over webdesign, ontwerp van de Mac website en voorbeelden van kleur en design

IN DEZE HANDLEIDING:

1 Analyse Apple website 2021
2 Analyse homepage van de Apple website 2020
3 Analyse iPhone pagina van de Apple website 2020
4 Webpagina’s van de Apple website 2020
5 Voorbeeld: iMac webpagina
6 Voorbeeld: iPad webpagina
7 Voorbeeld: iPad webpagina
8 Voorbeeld: iPhone webpagina
9 Voorbeeld: MacBook webpagina
10 Voorbeeld: Support webpagina
11 Voorbeeld: MacBook webpagina
12 Meer voorbeelden van de Apple website 2020
13 Voorbeeld: iPad webpagina
14 Voorbeeld: iPhone webpagina
15 Voorbeeld: MacPro webpagina
16 Voorbeeld: Apple Music webpagina
17 Voorbeeld: Apple TV webpagina
18 Voorbeeld: AppleWatch webpagina

Analyse Apple website 2021

Apple, wie kent het niet, bekend van de iPhone, iMac en iPad, is een van de grootste multinationale technologiebedrijven ter wereld. Het is dan ook noodzakelijk dat hun website voldoet aan de hedendaagse normen. Je zou verwachten dat een technologiebedrijf een goed ontworpen en responsieve website heeft, anders, hoe kun je hun producten vertrouwen? Ik denk zeker niet dat Apple zichzelf in de steek heeft gelaten met het ontwerp van hun website.

Analyse homepage van de Apple website 2020

De homepage is clean, modern, eenvoudig en schoon, zodat het merk zijn producten echt kan laten zien en er de nadruk op kan leggen. Dit is eigenlijk het belangrijkste doel van hun website, om hun producten te verkopen en te adverteren. Niemand gaat op de Apple site om te weten te komen wie ze zijn. Hun wereldwijde status betekent dat ze populairder zijn dan de appel die je in je fruitschaal zou vinden.

Het ontwerp van hun homepage heeft een zeer effectief gebruik van de witte ruimte die ervoor zorgt dat je als klant, je oog wordt getrokken naar het product op de image slider. De homepage is relatief kort, vooral als je de voettekst negeert en dit voorkomt dat bezoekers moeten scrollen om te vinden wat ze zoeken. Als de pagina die u wilt niet in de menubalk staat, staat deze waarschijnlijk in de voettekst of als link in de inhoud van de pagina.

Het pagina-ontwerp zelf spreidt de volledige breedte van uw browservenster en er is geen kans dat het responsieve ontwerp de inhoud afsnijdt als productbeelden in de hoofdschuifbalk, zodat de grootte ervan centraal blijft staan in het ontwerp. Interessant is dat de vier gedeelten onder de schuifregelaar niet zijn samengesteld uit een afbeelding en tekst, en dat er ook geen gebruik wordt gemaakt van een knop. Elk vakje bevat een afbeelding met de tekst als onderdeel van de afbeelding en de hele sectie kan worden aangeklikt om de link te activeren. Net als het Nike ontwerp dat ik eerder analyseerde, blijkt de inhoud van de website net zo belangrijk te zijn als het ontwerp van de website zelf.

Het ontwerp van de hele site heeft zeker een moderne en professionele uitstraling en dit is te danken aan de neutrale kleuren, minimalistische iconen en het lichte schreefloze lettertype. Het topmenu is relatief klein als je bedenkt dat ze in sommige andere siteontwerpen een prominente plaats innemen. De witte tekst en de pictogrammen zijn duidelijk leesbaar en steken af tegen de zwarte koptekst die ze bevatten. Iconen kunnen vaak helpen bij het opbouwen van een merkidentiteit en Apple gebruikt eenvoudige contourpictogrammen die gemakkelijk te herkennen en te begrijpen zijn. Het bedrijfslogo staat links uitgelijnd in de menubalk en wordt vanaf subpagina’s de link terug naar de homepage. Vaak zit er een logo boven de navigatiebalk, maar met Apple is het een kenmerk van het logo geworden. Alleen door een uitstekende branding is Apple in staat om dit te doen. Als het merk niet de wereldwijde aanwezigheid had die het wel heeft, kan het nodig zijn om het logo groter te hebben dan de menutekst.

Hoewel het ontwerp voornamelijk zwart-wit gebruikt, samen met grijs in het voettekstgebied en donkergrijze tekst, is er ook een complimenterend blauw gebruikt zodat het duidelijk is waar links kunnen worden geactiveerd, en als het niet anders kan, voegt het een subtiele hint van kleur toe aan het ontwerp en geeft het Apple’s branding team ook iets anders om mee te werken. Als je alle beelden van de pagina zou verwijderen, maar alle tekst en kleuren hetzelfde zou houden, zou je de website waarschijnlijk nog steeds kunnen identificeren als die van Apple.

Beeldmateriaal en gebruikerservaring helpen de website van Apple zeker aantrekkelijk en modern te maken. Hun gebruik van fotografie is spot on, en trekt ons naar hun producten die er gladjes en nieuw uitzien, iets waar velen van ons naar hunkeren in een telefoon of tablet. Schaduwen onder een hoek van 45 graden verschijnen vrij vaak op de hele site, waardoor producten lijken te zitten en in sommige gevallen boven hun neutrale achtergrond zweven. Deze schaduwen geven niet alleen de indruk dat het product voor je zit, maar ze helpen het product ook om zich te onderscheiden van andere inhoud. En ik weet niet hoe het met u zit, maar ik heb zeker meer kans om op een product te klikken dat er goed uitziet en mijn aandacht trekt.

Analyse iPhone pagina van de Apple website 2020

Neem de iPhone pagina als voorbeeld. Nu toont deze screenshot alleen de inhoud bovenaan de pagina, maar je ogen worden al naar de productafbeeldingen getrokken. En bij deze producten staan de bekende bijschriften en blauwe links. Het ontwerp geeft deze producten de ruimte en hoewel het te beargumenteren valt, te veel ruimte, heb ik het gevoel dat de ontwerper het precies goed heeft. Niet alleen krijgen de producten ademruimte van elkaar, maar door het grote formaat van de onderdelen is het ontwerp ook minder geplet. Als de secties kleiner waren, zou je de indruk kunnen krijgen dat je naar rijen geplette reclamebanners kijkt.

Op het eerste gezicht lijkt het alsof alle productafbeeldingen op de Apple website hetzelfde zijn, een uitgesneden product met een schaduw. Dit is niet het geval. Wanneer je naar beneden scrollt op de iPhone pagina vind je al snel secties die zich over de volle breedte uitstrekken waar een foto de achtergrond is, maar ook de container van een product.

Deze screenshot op de onderstaande afbeeldingen een goed voorbeeld. Het gebruik van een geringe scherptediepte die de fotograaf met een groot diafragma bereikt, zorgt voor een neutrale achtergrond, terwijl ook het product in detail wordt getoond.