Wijzigingen in het Apple.Com-ontwerp
Apple.com heeft de afgelopen week wat aanpassingen ondergaan aan het ontwerp, veranderingen die je misschien niet eens hebt opgemerkt als je niet genoeg aandacht besteedt.
Hoewel veel rapporten hiernaar verwijzen als een 'herontwerp', vind ik het moeilijk om het als zodanig te classificeren. Er zijn zeker een aantal belangrijke veranderingen, maar de veranderingen zijn niet echt een complete revisie zoals het geval was voor CNN.com eind 2009.
Niettemin, de veranderingen zijn significant voor webontwerpers, dus ik zal ze hier kort bekijken. Als er iets is met de veranderingen die ik heb verwaarloosd, reageer dan gerust.
Een opnieuw ontworpen navigatiebalk
De belangrijkste wijziging (zij het nog steeds een beetje subtiel) is het uiterlijk van de navigatiebalk. Apple heeft een van die navigatiebalken die, qua design, iedereen liefheeft en benijdt. Het lijkt onmogelijk dat het kan worden verbeterd. Wel, ze waren op de een of andere manier in staat om manieren te vinden om het er nog beter uit te zien en intuïtiever te maken.
Hier is de oude navigatiebalk:
Dit is het nieuwe:
Veranderingen omvatten:
- Het is donkerder
- Het verloop is vervangen door een bolder, glossy uiterlijk
- Het uiterlijk van het logo is vereenvoudigd
- Het zoekvak is kleiner (meer hieronder)
Ik denk dat er echt een geweldig team van ontwerpers nodig is om echt grote veranderingen in het uiterlijk van een zeer belangrijk UI-element aan te brengen, terwijl je toch de indruk krijgt dat er niets is veranderd. Het laat alleen maar zien dat visuele details vaak niet zo belangrijk zijn als het algemene gevoel van het ontwerp.
Het flexibele zoekvak (alleen WebKit)
Omdat het een duidelijk WebKit-vooroordeel is, heeft het ontwerpteam van Apple enkele verbeteringen in WebKit opgenomen, waarvan er een is gekoppeld aan het zoekvak.
In de meeste browsers wordt door klikken op het zoekvak de achtergrond helderder naar een leesbaarder wit. In Chrome of Safari animeert het zoekvak het gebruik van CSS3-overgangen om breder te worden en waarschijnlijk iets meer bruikbaar. De onderstaande schermcontrusie toont het zoekvak in Chrome nadat het is geanimeerd om breder te worden:
Om rekening te houden met de grootte van het zoekvak, wijzigen de andere navigatie-items en het logo zelf.
Ik vind deze functie leuk; het voegt een gevoel van intuïtiviteit toe. Maar het heeft, naar mijn mening, een kleine fout: het gaat niet terug naar de oorspronkelijke staat nadat je de focus hebt verwijderd. Natuurlijk, als er iets in het zoekvak is getypt, zou je niet willen dat het formaat teruggaat, maar ik denk dat het terug naar zijn normale status moet gaan als het de focus verliest en leeg blijft.
Natuurlijk, aangezien het uiterst onwaarschijnlijk is dat iemand in het zoekvak klikt en niets typt, neem ik aan dat dit een onbeduidende omissie is.
De geanimeerde invoer van de navigatiebalk (alleen WebKit)
Een andere kleine functie voor alleen WebKit is de geanimeerde invoer van de navigatiebalk. Ik kan me niet herinneren dat ik dit effect eerder op hun site heb gezien, dus ik ga ervan uit dat dit een nieuwe functie is. Het geanimeerde item gebeurt alleen op de startpagina en slechts één keer per browsersessie. Dit is een goede oefening en een goede les voor ontwikkelaars die geanimeerde effecten toevoegen aan hun interfaces.
Zoals te zien is in de schermgreep hierboven, gaat de navigatiebalk van buiten het scherm, waarschijnlijk met behulp van CSS3 keyframe-animatie, samen met JavaScript om te bepalen wanneer de animatie wel of niet moet plaatsvinden.
De geanimeerde productbrowsers (alleen WebKit)
Een andere recente toevoeging is het gebruik van animatie op sommige productpagina's. CSS3-gebaseerde animaties worden gebruikt op de Mac en iPod productbrowsers, waarvan er een hieronder wordt getoond:
De producten worden geanimeerd wanneer u voor het eerst op de pagina aankomt en als u tussen subcategorieën overschakelt, verdwijnen de zichtbare producten en springen nieuwe producten op hun plaats. Dit gebeurt via CSS3 keyframe-gebaseerde code, sommige daarvan wordt hieronder getoond:
In niet-WebKit-browsers schakelt de animatie van de productbrowser over naar eenvoudige op JavaScript gebaseerde fading. Hoewel dit soort dingen niet ideaal is in elke omstandigheid (aangezien het in feite neerkomt op "code forking"), is het een realistische optie voor ontwikkelaars en ontwerpers die vandaag willen coderen voor de best mogelijke browsers en voor de rest minder uitgebreide functionaliteit bieden .
Search Box Auto-Suggest
[UPDATE] Zoals opgemerkt door een aantal mensen in de opmerkingen, is de automatische suggestie geen nieuwe functie. Onze opname van dit als een 'nieuwe functie' was gebaseerd op een ander artikel dat meldde dat de automatische suggestie nieuw was. Desondanks houden we dit gedeelte bij omdat het een goede functie is die het potentieel heeft om een website iets bruikbaarder te maken en een goed voorbeeld is voor andere ontwikkelaars en ontwerpers om te volgen, als dit past bij hun project.
De door Ajax aangedreven vervolgkeuzelijst met suggesties verschijnt tijdens het typen van een zoekopdracht:
Zoals te zien is in de bovenstaande schermopname, geeft het vervolg niet alleen zoekresultaten weer die overeenkomen met de getypte tekens, maar de resultaten worden vergezeld van productfoto's en beschrijvingen. Ik denk dat de foto's op deze plek waardevoller zijn dan de beschrijvingen, maar over het algemeen heeft dit het potentieel om het zoeken naar producten en conversies te stroomlijnen.
Nog iets anders?
Dat lijkt de belangrijkste veranderingen in de recente re-tooling van het Apple.com-ontwerp te dekken. Zijn er nog andere belangrijke wijzigingen in het ontwerp of de code die ik hier niet heb genoemd?
Dit bericht is exclusief geschreven voor Webdesigner Depot door Louis Lazaris, een freelance schrijver en webontwikkelaar. Louis rent Indrukwekkende webs waar hij artikelen en tutorials over webdesign plaatst. Jij kan volg Louis op Twitter of neem contact met hem op via zijn website.
Wat denk je van de veranderingen in het ontwerp van Apple.com? Zijn er wijzigingen die we hier niet hebben genoemd?