Alles wat u moet weten over HD-ontwerp
Als je er nog geen nota van hebt genomen, gaat het web zeker de hoogte in. Van afbeeldingen tot achtergronden tot gebruikersinterface-elementen, high definition is het nieuwe normaal.
Het begon met een aantal van het netvlies en schermen met hoge resolutie, maar de toegang tot snellere verbindingen heeft dit fenomeen ook benadrukt, waardoor het vanaf elk apparaat betere toegang tot HD-websites biedt. Denkt u na over en ontwerpt u in hoge definitie? Hier zijn een paar dingen waar u rekening mee moet houden.
Wat is HD echt?
De meest voorkomende aanwijzing voor HD is de term retina-weergave. Populair geworden door Apple-apparaten is de term synoniem geworden voor schermen met hoge definitie. Dit heeft betrekking op een behoorlijk specifieke technologie voor apparaten.
Paula Borowska voor Designmodo heeft een van de gemakkelijkst te begrijpen beschrijvingen:
- Apparaatpixel is de kleinste fysieke eenheid die wordt weergegeven.
- Pixeldichtheid is het aantal pixels dat in een bepaalde ruimte wordt weergegeven.
- Resolutie is het aantal pixels over de gehele breedte of hoogte van de zichtbare ruimte.
- Pixels per inch, ook wel ppi of dpi genoemd, verwijst naar het aantal pixels dat u krijgt als u de fysieke breedte van het scherm deelt door het aantal weergegeven horizontale pixels.
- Hoge DPI is een weergavedichtheid van 200 pixels per inch of meer.
De meeste apparaten die u vandaag koopt, van mobiele telefoons tot tablets tot laptops, hebben waarschijnlijk een high-definition display. (En de realiteit is dat zelfs als je een apparaat hebt zonder een HD-scherm, een high-definition website geen kwaad kan.)
Afbeeldingen
De plek waar je misschien eerst aan high definition wilt denken, is als het gaat om afbeeldingen. De tijd dat elke afbeelding met een resolutie van 600 pixels breed en 72 ppi wordt opgeslagen, is voorbij. Dat is gewoon niet genoeg op de schermen van vandaag.
De basisstandaard voor HD is 200 ppi. Dat is meer dan het dubbele van wat u eerder had kunnen besparen. Voeg daaraan toe dat schermen in een snel tempo groter worden met 1920 bij 1080. Volgens W3Schools.com zijn de meest voorkomende schermen 1024 bij 768 pixels of hoger, waarbij meer dan 30 procent van de gebruikers op een high-definition scherm werkt.
Hetzelfde geldt ook voor kleine schermen. Populaire apparaten zoals de iPhone 6 (401 ppi) en Samsung Galaxy S5 (577 ppi) beschikken ook over HD-mogelijkheden.
Dus als het om afbeeldingen gaat, moeten ze scherp zijn. U komt niet weg met wazige of korrelige afbeeldingen. Als u opslaat met de oude "standaardresolutie", ziet uw ontwerp er plat uit, terwijl afbeeldingen met een hoge resolutie er gepolijst uitzien. De keerzijde van dit type afbeelding is snelheid; hogere kwaliteit staat gelijk aan langere laadtijden. Bewaar zo dicht mogelijk bij de specificaties en upload beeldbestanden niet te veel.
Leuke truc: overweeg de wazige afbeeldingstrend hier in je voordeel te gebruiken als je je zorgen maakt over laadtijden. Er zijn minder gegevens te lezen en u kunt een beetje kleiner besparen en toch de gewenste scherpte krijgen van andere kleinere elementen met hoge resolutie.
Video
Video is de visuele trend van 2016 die je moet hebben. Het lijkt erop dat overal waar je komt, er beweging is op de homepages van de website. Net als bij afbeeldingen moet het van hoge kwaliteit zijn.
Voor de meeste ontwerpers en websites betekent dit dat ze zich moeten houden aan een vrij korte lusvideo om te voorkomen dat de hik wordt geladen. Anderen kiezen voor langere video's en leiden gebruikers af van het wachten met een laadanimatie. Video van hoge kwaliteit vereist opname, compressie en opslag van hoge kwaliteit.
Het vergt ook veel planning als het gaat om hoe de video wordt afgespeeld en eruitziet in het ontwerp van de site. Een heldenvideo op volledig scherm moet bijvoorbeeld horizontaal worden opgenomen zodat deze op het scherm past. Voor gebruiksgemak helpen eenvoudige video-editors u de frames aan te passen op aspectverhouding; kies 16: 9 voor een breedbeeldgevoel of 4: 3 voor een meer vierkante look.
Leuke truc: gebruik 'stilstaande video' voor een groot drama-effect. Hier is het idee: film iets dat voornamelijk statisch is met slechts een klein beetje beweging op de achtergrond. U krijgt een coole gebruikerservaring zonder uw ontwerp te verzwaren.
Illustraties en achtergronden
Als het gaat om illustraties en achtergronden, is HD hier ook van belang. Onthoud dat elk detail (of gebrek daaraan) zichtbaar is in de hoge-definitieruimte, dus zorg ervoor dat elk onderdeel van het ontwerp bijdraagt aan de algehele esthetiek.
Als het gaat om illustraties of achtergronden, zijn details belangrijk. Focus op het maken van een ontwerp dat praktisch pixel perfect is, past bij het ontwerp en niet uit elkaar valt wanneer het omhoog of omlaag wordt geschaald. De eenvoudigste manier om dit te doen, is door te focussen op eenvoud.
Hoewel het gemakkelijk kan zijn om te worden betrokken bij het maken van een gecompliceerde illustratie of gestructureerde achtergrond, is eenvoudig waarschijnlijk een betere optie. Als je meer interesse wilt toevoegen, overweeg dan om een klein geanimeerd element onderdeel van het ontwerp te maken, of maak het extra pittig met kleuropties die je normaal gesproken zou gebruiken.
En dan is er de technische component: u moet een schaalbaar beeldformaat gebruiken, zodat alles inderdaad schaalt zoals bedoeld en naar het volledige HD-potentieel.
Leuke truc: voeg een vleugje animatie toe aan de achtergrond in een lange lus. Bezoekers die snel browsen, zullen het misschien missen, maar de kleine beloning zal zeker terugkerende gebruikers en degenen die voor een langere periode blijven rondhangen, verrassen.
Pictogrammen en elementen
Als het gaat om alle pictogrammen en gebruikersinterface-elementen op uw website, zijn er zes letters die u moet kennen: SVG en CSS. En al deze elementen worden waarschijnlijk geclassificeerd als een van deze twee typen.
SVG of schaalbare vectorafbeeldingen zijn essentiële vector voor het web. U kunt SVG gebruiken om vormen, pictogrammen en tal van andere gebruikersinterface-elementen op te slaan. Afbeeldingen worden gelezen door moderne browsers - er zijn enkele oudere die niet werken (we praten met enkelen van jullie die aan Internet Explorer werken) - als tekst en worden op vrijwel dezelfde manier weergegeven als HTML. Scott Murray heeft een behoorlijk goede inleiding op zijn blog als je de kern van SVG wilt leren kennen.
CSS-elementen zijn pure code en passen zich aan bij het ontwerp. (U hoeft waarschijnlijk geen knoppen in Photoshop te tekenen en ze in uw site te plakken.) W3Schools.com heeft een basishandleiding over het maken en gebruiken van CSS-elementen.
Hier gaat het om zowel SVG als CSS: de elementen bewegen met uw site mee. Dit is wat je nodig hebt in een responsief raamwerk. Niets zal uw high-definition websiteontwerp sneller doden dan een stel gepixelde knoppen.
Leuke truc: je hoeft het wiel niet opnieuw uit te vinden om een aantal handige SVG- of CSS-elementen te vinden. Bekijk deze SVG-knoppen van Tympanus of de CSS-knopgenerator.
Gevolgtrekking
Hoge definitie onderscheidt uw website van iedereen die het niet doet. Gebruikers beginnen een HD-ervaring te verwachten op elk van hun schermen, van televisies tot computers tot telefoons. Uw website moet aan die verwachtingen voldoen.
Het goede nieuws is dat je kleine veranderingen kunt aanbrengen op de weg om daar te komen. Besteed aandacht aan uw afbeeldingen, video's en andere elementen van de gebruikersinterface om ervoor te zorgen dat u pixels laat zien en dat elk beeld naadloos en van hoge kwaliteit is.
