Share
Ontwerpers hebben een enorme invloed op de prestaties van de site op basis van hoe ze ontwerpen voor het web, voordat een enkele regel code wordt geschreven. Dit artikel gaat over hoe prestaties kunnen zijn ontworpen en wat er nodig is om het te laten gebeuren.
Toch wordt de performance vaak genegeerd door de meeste ontwerpers. Dit gebeurt om vele redenen, maar het komt vaak neer op het feit dat ontwerpers rekening houden met laadtijden iemand anders baan.
Er zijn veel artikelen over hoe je een website sneller kunt maken en ze bieden bijna altijd tips, zoals het verkleinen van je CSS en het optimaliseren van je afbeeldingen. Deze tips zijn nuttig en belangrijk, maar lossen het onderliggende probleem niet op.
De meer essentiële stap is minder tastbaar - het vereist een verandering in denken. Het maken van snelle websites vereist terughoudendheid en focus. Ongeacht hoeveel tijd je aan optimalisatie besteedt, een website met drieduizend regels CSS, tien jQuery-plug-ins en vijf full-bleed-afbeeldingen zal worden langzaam. De prestaties kunnen worden verbeterd, maar u zult geen geweldige resultaten zien totdat u er een kernontwerp van maakt.
Ontwerpen voor prestaties vereist een toewijding om de benodigdheden te maximaliseren en overtollige luxe weg te halen. Een meer utilitaire benadering van ontwerp is nodig wanneer elk element een tastbare en netto-positieve impact heeft op het eindresultaat. Dit doet niets af aan het belang van esthetiek, maar het betekent dat het geen blanco cheque mag geven.
Het spreekt voor zich dat ontwerpers het belang van eenvoud kennen. Efficiëntie wordt echter vaak over het hoofd gezien in het lexicon van de ontwerper. Eenvoudig en efficiënt zijn niet noodzakelijk gerelateerd. Veel "goed ontworpen" sites zijn mooi, duidelijk, intuïtief en absoluut opgeblazen.
Als ontwerpers willen we iets maken dat een beroep doet op onze visuele zintuigen. We zien veel sites met behulp van high-fidelity fotografie, texturen en spit-afwerking details om dat doel te bereiken. Het is vaak moeilijk om de resultaten op een strikt visuele basis te beargumenteren. We moeten ons echter afvragen of deze zwaargewicht elementen werken aan het oplossen van feitelijke ervaringsproblemen of gewoon er goed uitzien in het belang van er goed uitzien..
Efficiënt ontwerpen dwingt je om een even zinvolle ervaring mee op te bouwen minder. Kun jij de interesse en de verbeeldingskracht van je publiek vastleggen zonder een full-bleed-afbeelding te gebruiken? Ik zou zeggen dat je het kunt en dat het het waard is.
Een voorbeeld van een eenvoudig, maar inefficiënt ontwerp is de startpagina van Karma. Karma's ontwerp is prachtig en duidelijk, maar weegt ongeveer 45 Mb op 45 aanvragen. Begrijp me niet verkeerd, ik ben dol op hoe de Karma-website eruitziet, hij schiet gewoon tekort in de prestatietest en mist daarom als succesvol ontwerp.
Een efficiënt ontwerp is niet van nature grimmig en zonder persoonlijkheid. Integendeel, het bestaan van elk element is doorgelicht en gerechtvaardigd. Efficiënte ontwerpen hebben geen gebrek aan stijl, er is slechts een zeer goede reden waarom die stijl is toegevoegd. Het is gemakkelijk om iets op Dribbble te vinden en het aan onze ontwerpen toe te voegen omdat het er goed uitziet. Een nonchalante benadering van ontwerp creëert inefficiëntie.
Er is veel gesproken over plat ontwerp. Het lijkt erop dat een minimalistische stijl snelheid zou helpen, maar dat is niet noodzakelijk het geval. Plat ontwerp kan maak pagina voetafdrukken kleiner, maar het is geen garantie. Het bovenstaande voorbeeld van Karma's website is een bewijs.
Er zijn zeker visuele stijlen die gepredisponeerd zijn voor betere prestaties, maar het gaat om de uitvoering en de manifestatie van de stijl in het uiteindelijke ontwerp. Esthetiek is geen substituut voor het tot een kerndoel maken van prestaties.
Nu ik het in het kort heb besproken, is het misschien tijd om enkele voorbeelden te bespreken van hoe je het kunt toepassen. Hieronder zijn enkele tips:
Probeer een ontwerp te starten zonder te vertrouwen op eenvoudige oplossingen. Ik begin het ontwerpproces zonder gebruik van afbeeldingen, aangepaste typografie en drie lettertypegewichten (normaal, vet, cursief). Kijk hoe ver je kunt komen door kleur, contrast en vorm te gebruiken. U kunt later altijd andere lettertypen, afbeeldingen en texturen toevoegen.
Het belangrijkste doel van een ontwerper is communiceren. Er zijn weinig betere manieren om een idee over te brengen dan het geschreven woord. Woorden kunnen een lange weg gaan - veel te vaak voegen we visuele elementen toe wanneer een duidelijke zin volstaat. Probeer een visueel beeld te vervangen door een sterk copywriting en goed ontworpen typografie.
Het is gemakkelijk om in de nuances van het ontwerp te worden gezogen. Ik doe het de hele tijd. Het is belangrijk om te onthouden dat de rol van de ontwerper is om problemen op te lossen, niet om dingen er mooi uit te laten zien. Ik ben er vast van overtuigd dat een sterke esthetiek het vertrouwen opbouwt bij een gebruiker en helpt bij het creëren van een emotionele reactie. Esthetiek zou dat echter wel moeten zijn altijd ondersteuning van de problemen die we moeten oplossen (bijv. verbeterde bruikbaarheid, hogere taakafronding, enz.). Door met deze lens naar ontwerp te kijken, kunnen we een doelgerichte aanpak ontwikkelen en ons denken concentreren .
De beste manier om de invloed van uw ontwerp op de prestaties te begrijpen, is om een algemeen idee te hebben van wat voor soort code nodig is om het te maken. Moderne browsers hebben veel verborgen trucjes die uw site leaner kunnen maken en maak je leven gemakkelijker. Door te weten hoe u een site kunt bouwen, weet u wat u moet vermijden.
Afbeeldingen (zowel raster als vector) kunnen kleiner worden geproduceerd. We zouden moeten denken aan het creëren van een afbeelding, zoals we denken aan het creëren van een CSS-bestand - de klus klaren met zo min mogelijk voetafdruk. Dit onderwerp zou een geheel ander artikel kunnen zijn, maar de essentie is om pixelartefacten in uw rasterafbeeldingen en onnodige vectorpunten in uw SVG's te voorkomen. Dit zal een aanzienlijke invloed hebben op de bestandsgrootte.
Websnelheid valt niet in de categorie sexy. Prestaties winnen geen designprijzen en uw portfolio wordt niet geprezen door uw collega's. Het heeft echter wel invloed op de mensen die er toe doen - degenen die de site gebruiken die je hebt gemaakt. Als je niet ontwerpt voor prestaties, doe je niet je werk.
Ten slotte is prestatie het enige element van UX (dat ik ken) dat volledig objectief en kwantificeerbaar is. Ik vind het verfrissend in een bedrijf dat zo amorf en subjectief kan zijn dat er ten minste één meetwaarde bestaat, waarbij ik door het aantal te verlagen naar beneden kan garanderen dat iemand daar een beter dag.
Accentsconagua