Web Design Critique # 25: Highwire
Welkom bij onze 25e ontwerpkritiek! Elke week bekijken we een nieuwe website en analyseren we het ontwerp. We zullen wijzen op zowel de gebieden die goed worden gedaan als de gebieden die wat werk kunnen gebruiken. Ten slotte vragen we je om mee te doen en je eigen feedback te geven. Stem in de poll onderaan deze pagina en / of laat een reactie achter met je gedachten!
De site van vandaag is Highwire.com, een gepersonaliseerd online winkelplatform.
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We rekenen $ 24 voor het bekritiseren van uw ontwerp - aanzienlijk minder dan u zou betalen voor een consultant om uw site te bekijken! Meer informatie vind je hier.
Over Highwire
“Het creëren van je eigen eCommerce-winkel was nog nooit zo eenvoudig en betaalbaar. Meld u vandaag nog aan voor een gratis proefperiode en begin binnen enkele minuten met het bouwen van uw winkel! ”
Hier is een screenshot van de homepage:
Algemene indruk
Als je vandaag langskomt om me te horen scheuren over slecht ontwerp, zul je teleurgesteld zijn. Ik denk dat dit misschien wel het beste websiteontwerp is dat tot nu toe is ingediend voor een ontwerpkritiek.
Highwire is gewoon een prachtige site en het is zo goed gedaan dat we het gedwongen zullen worden om het meer als een positieve leermethode te gebruiken dan als een negatieve. Blijf lezen, want er is een hoop dat we kunnen leren door dit ontwerp te analyseren. En maak je geen zorgen, er zijn een paar kleine dingen die ik onderweg zou willen verbeteren.
Kleurenpalet
De meest gewaagde uitspraak op deze site is kleur. De kwaliteit van de afbeeldingen is uitstekend, maar het is de kleur die echt je aandacht trekt zodra je de pagina laadt. De basiskleuren die hier worden gebruikt, breken niet bepaald de mal: groen, rood, blauw, grijs en een beetje oranje, maar ze worden op een zeer aantrekkelijke manier gemengd.
Merk echter op dat ze een superfelle tint van elke kleur hebben gekozen die echt van de pagina springt. Door een mix van radiale en lineaire gradiënten lijken de kleuren veel levendiger en levendiger, terwijl ze een subtiele suggestie van textuur geven.
Lay-out en uitlijning
De lay-out van deze site is ijzersterk en maakt echt gebruik van het juiste gebruik van witruimte en visuele gewichtsverdeling. Merk op in de aangepaste afbeelding hieronder hoe sterke verticale lijnen zijn vastgesteld om ervoor te zorgen dat alles mooi en strak is.
Merk ook op dat de ontwerper een linkeruitlijning koos en eraan vasthield. Alle tekst is links gelijnd en zelfs de knoppen onder de miniaturen volgen deze trend. Uw ontwerpen zien er vaak veel samenhangender en consistenter uit als u tijdens het ontwerp niet wilt dat de uitlijning willekeurig wordt gewijzigd.
Ondanks dat het verschillende secties van de code zijn, gebruiken de koptekst en de voettekst hetzelfde verloop, zodat u de illusie krijgt van een continue achtergrond waar de inhoud boven zweeft. Dit voelt alsof ze alleen de body-tag hebben gestileerd, maar het semantische voordeel heeft dat ze eigenlijk een sterke kop- en voettekst behouden.
Schaduwen en reflecties
Reflecties, verlopen en zachte schaduwen maken de laatste tijd plaats voor effen kleuren en vaak harde, niet-gevederde schaduwen. Terwijl we beginnen met het achterlaten van de verslagen en misbruikte web 2.0-look en naar ons volgende slachtoffer gaan, is het nog steeds leuk om te zien hoe iemand de stijl trekt zoals het bedoeld is.
Zowel de schaduwen als reflecties zijn hier vrij subtiel en zijn met zorg gestructureerd om er realistisch en gewoon mooi uit te zien. Als je visuele flair aan een element gaat toevoegen, is het de moeite waard om de tijd te nemen om te tweaken en te experimenteren totdat je iets krijgt dat echt finesse en glans toevoegt aan een pagina, in tegenstelling tot een slordige laag make-up.
The Burst: Evolved
Een ding dat u leert wanneer u ontwerpt voor een groot marketingbedrijf, is dat marketeers absoluut dol zijn op bursts. Iets groots en puntigs dat het ontwerp schendt en daarom de aandacht van de klant trekt. Als marketingafdelingen en inderdaad veel ontwerpers hun zin hadden, zou alles er als volgt uitzien:
Zodat je weet, vanuit een ontwerpperspectief, is dit cliché, lelijk, overdreven, verouderd en elk ander negatief bijvoeglijk naamwoord dat je je kunt voorstellen. Als algemene vuistregel mag je nooit een starburst op iets zetten.
Deze ontwerper begreep deze regel gelukkig en kwam met een veel modernere en aantrekkelijkere oplossing, hieronder weergegeven. Dit 3D-lint wikkelt zich rond een balk die de nieuwe functie beschrijft. Het schendt het ontwerp aanzienlijk genoeg om uw aandacht te trekken, maar niet genoeg om het uiterlijk van de hele pagina te verminderen.
Voorgestelde verbetering
Zoals ik al meerdere keren heb gezegd, is dit zo'n geweldig ontwerp dat het moeilijk is om er iets mis mee te vinden. Er zijn echter een paar dingen die ik zou willen verbeteren.
Om te beginnen gebruikt de site Cufon voor de aangepaste typografie. Ik heb hierover geklaagd in onze laatste kritiek en zal hetzelfde argument blijven gebruiken waar ik Cufon zie worden gebruikt. @ font-face is een betere oplossing, punt. @ font-face text is volledig selecteerbaar, Cufon niet. @ font-face gebruikt pure CSS, Cufon vereist dat JavaScript is ingeschakeld. Zoals ik de vorige keer opmerkte, wanneer de Cufon-website suggereert in plaats daarvan @ font-face te gebruiken, weet je dat het tijd is om de handdoek in de ring te gooien en aan boord te springen.
Het andere dat me irriteert, is de Facebook-balk bovenaan. Als je een lijn trekt door het midden van de tekst in deze balk, zoals ik hieronder heb gedaan, kun je zien dat het Facebook-logo ongemakkelijk uit het midden is. Ik weet niet zeker of dit opzettelijk was of een ongeluk, hoe dan ook, ik zou het dicht bij het centrum stoten.
Andere pagina's
We sluiten af met een korte blik op enkele van de andere pagina's op de site. Zoals je kunt zien, zijn ze even aantrekkelijk en allemaal heel goed ontworpen. Ik hou vooral van de prijstabellen!
Jouw beurt!
Nu je mijn opmerkingen hebt gelezen, kun je meedoen en helpen door de ontwerper wat verder advies te geven. Laat ons weten wat je geweldig vindt aan het ontwerp en wat je denkt dat sterker zou kunnen zijn. Zoals altijd vragen we u ook respect te hebben voor de ontwerper van de site en duidelijk constructief advies te geven, zonder harde beledigingen.
