10 webontwerpelementen die u niet mag overzien
Als het aankomt op het ontwerpen en bouwen van websites, lijkt het nooit snel genoeg te gebeuren.
Gezien dit snelle tempo worden veel kleine details die uiteindelijk nodig zijn om de website te bouwen vaak buiten het ontwerpproces gelaten. Hoewel deze details misschien klein zijn, zijn ze wat een website van leuk tot echt geweldig maakt.
Deze details zijn vaak gemakkelijk te missen omdat ze niet het algemene uiterlijk van de website beïnvloeden. Het probleem is dat terwijl je ontwikkelteam door het ontwerp werkt, het gedwongen zal moeten worden om deze elementen toch voor jou te ontwerpen en te maken.
Je zou de productiecyclus kunnen aanpassen, zodat de ontwikkelaars voldoende tijd hebben om deze bezittingen aan je terug te geven, maar waarom zou je het niet allemaal van tevoren doen, zodat het proces zoveel schoner is?
Erger nog, het ontwikkelteam kan besluiten om verder te gaan en de assets gewoon te maken.
Hoewel veel ontwikkelaars een scherp oog hebben voor ontwerp, moet de maker die belast is met het ontwerpen van de website uiteindelijk degene zijn die voor deze elementen van plan is. Vooruit plannen voor de subtielste nuances kan van grote invloed zijn op de kwaliteit van het eindproduct.
Elk element dat in dit artikel wordt behandeld, komt voort uit de vraag die een ontwikkelaar de ontwerper zou stellen als een element in het ontwerp ontbreekt.
Laten we ingaan op de 10 belangrijkste elementen om in gedachten te houden terwijl u uw website oppoetst.
1. Links
Terwijl het stylen van de verschillende toestanden van een link inderdaad vrij eenvoudig is, zult u misschien verrast zijn door hoe vaak alle extra details over het hoofd worden gezien. Neem de volgende statussen op voor alle links op de pagina:
- normaal
Dit is de standaardstatus van een link; dat wil zeggen een die niet wordt bewogen over of wordt geklikt of wijst naar een URL die de gebruiker al heeft bezocht. Dit is het link-formaat dat de meeste ontwerpers altijd gebruiken. - Bezocht
Dit is een koppeling waar niet overheen wordt geklikt of waarop wordt geklikt, maar waarvan het doel door de gebruiker is bezocht. - Actief
Een actieve link is er een waarop momenteel door de gebruiker wordt geklikt. De meeste ontwikkelaars repliceren de hover-status hier als er geen stijl aan hen wordt verstrekt. - Zweven
Ten slotte is de hover-status hoe de link eruit ziet wanneer de gebruiker eroverheen migreert. Dit en de normale toestanden zijn waar de meeste ontwerpers zich op voorbereiden.
Een detail dat vaak over het hoofd wordt gezien, is dat deze verschillende staten moeten worden gepland voor alle regio's van een website. Veel websites hebben bijvoorbeeld een donkere body-kopie tegen een lichte achtergrond, maar het contrast is omgekeerd in de voettekst. U moet plannen voor alle verschillende contexten van links die op de hele pagina worden gevonden.
Op Volle maan BBQ we zien bijvoorbeeld de basis rode koppelingen in het inhoudsgebied en de standaard witte links in het onderstaande voetgedeelte. Nogmaals, een klein detail maar toch belangrijk.
2. Formulieren
Voor veel ontwerpers is de configuratie van vormen kritisch en onmogelijk om over het hoofd te zien. Toch lijkt het, voor vele anderen, te komen als een verre bijzaak.
Het probleem met de laatstgenoemde houding is dat vormen vaak de enige echte manier zijn om bezoekers om te zetten in klanten. En zonder de juiste planning en ontwerp, zou de bruikbaarheid van deze formulieren plat kunnen uitvallen, wat het enige conversiepunt van de website zou schaden. Voorbereiding op deze elementen is essentieel, zelfs als ze voor klanten veel minder urgent lijken dan kleur, branding en afbeeldingen.
Twee van de belangrijkste overwegingen bij het opmaken van een formulier zijn:
- Formulierlabel
Formulieren verzamelen meestal persoonlijke gegevens die gebruikers niet willen geven. Als zodanig is het verstandig om gebruikers goed te informeren over het exacte doel van het formulier. - Invoervelden en labels
Ten tweede, plan hoe de invoervelden van het formulier op de pagina worden uitgelegd en hoe de labels voor die velden worden gestileerd en georiënteerd ten opzichte van de velden.
Wanneer ze worden overgelaten aan hun standaardwaarden, kunnen formulieren er vreemd uitzien. Maar met de juiste voorbereiding zal de website er naadloos uitzien en veel effectiever zijn. Laten we eens kijken naar een goed voorbeeld dat moet zijn begonnen met een goede planning:
Deze bedrijfskritieke vorm is ingeschakeld Geweldig was duidelijk goed doordacht. De volledige missie en het doel van de pagina is zorgvuldig overwogen. Van de titel en inleiding tot de lay-out van elke reeks velden, met hun labels en controlestijlen, deze vorm is een model van planning.
Het plannen van formulieren leidt ons eigenlijk naar een aantal andere overwegingen ...
3. Knopgedrag
Knoppen kunnen voor verschillende doeleinden in een website worden gebruikt, maar ook zij lijken vaak te worden verwaarloosd, net als de verschillende standen van een knop. De vier toestanden van een knop zijn:
- Standaard
Dit is de standaardstatus van een knop, wachtend om te worden aangeklikt. De meeste ontwerpers dekken deze, maar missen de anderen. - Zweven
De zweefstand wordt weergegeven wanneer de gebruiker de muisknop overhaalt. Deze status is nuttig om aan de gebruiker aan te geven dat de knop een actiepunt is. - Klik
Zodra de gebruiker op de knop klikt, geeft deze status visueel aan dat ze erop hebben geklikt. Het bieden van deze visuele keu helpt de frustratie van gebruikers te minimaliseren. - invalide
De uitgeschakelde status van een knop is misschien de minst gebruikte, maar kan zeer nuttig zijn voor ontwikkelaars. Zelden is deze staat gepland tenzij de ontwerper een validatieproces voor het formulier heeft voorbereid (zie de volgende sectie).
Net zoals de verschillende staten van links, moet u rekening houden met de verschillende toestanden van de knoppen die op uw website worden gebruikt. Van pop-upaanmeldingsformulieren tot zoekvelden tot aanmeldingsformulieren voor nieuwsbrieven, al deze knoppen hebben overeenkomstige stijlen nodig.
4. Formuliervalidatie
Een belangrijk gerelateerd detail is formuliervalidatie. Dit is het kritieke punt waarop de website de gebruikerseisen en -fouten in een vorm communiceert. Er zijn drie belangrijke dingen om te overwegen:
- Verplichte velden
Alle verplichte velden moeten worden aangegeven. Meestal gebeurt dit met een asterisk, zoals te zien is Begin alsjeblieft vanaf het begin :
- Realtime validatie
Sommige validaties kunnen in realtime worden uitgevoerd terwijl de gebruiker het formulier invult. Dit soort validatie informeert de gebruiker zo snel mogelijk over eventuele problemen met de gegevens die ze hebben ingevoerd. Dit kan hier heel goed mee worden bereikt jQuery-validatie plug-in :
- Validatie achteraf
Dit soort validatie gebeurt nadat de gebruiker het formulier heeft verzonden. De stijl die wordt gebruikt voor real-time validatie wordt hier vaak herhaald, maar een andere optie is om alle fouten te groeperen in één bericht, zoals te zien op Loeien :
5. Statusmeldingen: fouten, waarschuwingen, bevestigingen, etc.
Gebruikers hebben meestal een soort feedback nodig na het uitvoeren van een actie op uw website. Het meest waarschijnlijke scenario is na het indienen van een formulier, maar er kunnen ook veel andere gebeurtenissen plaatsvinden. Overweeg zorgvuldig uw website en de acties die gebruikers kunnen ondernemen, en plan de berichten die de website nodig heeft om te communiceren.
Op Leven vandaag , we zien een validatiebericht dat gemakkelijk kan dienen als een globale stijl voor foutmeldingen. En met een kleine verandering in kleuren en pictogrammen, kan het ook worden gebruikt voor subtielere waarschuwings- of zelfs bevestigingsberichten:
6. De achtergrond uitbreiden op grotere schermen
Afhankelijk van de stijl van de website kunnen de achtergrondelementen een probleemplek zijn voor uw ontwikkelaars. De meeste achtergronden zijn eenvoudig en vereisen niet veel voorbereiding, maar sommige worden gecompliceerd door hellingen, patronen en afbeeldingen.
Gezien het feit dat grote monitoren steeds normaler worden en dat de meeste ontwerpen zijn gepland voor een 960-pixel-brede baseline, blijft veel schermruimte open. Als je achtergrond alles bevat dat op afstand ingewikkeld is, moet je plannen hoe het wordt uitgebreid om grotere schermen te vullen.
In het voorbeeld dat ik hieronder heb gebouwd, moest ik rekening houden met een houtstructuur die zich in alle richtingen uitstrekte. Niet het soort ding dat je een hardhandige ontwikkelaar wilt laten aanpakken.
7. Base HTML-elementen
Voor websites met kopieerbeveiliging zijn het ontwerp en de vormgeving van HTML-basiselementen fundamenteel en mogen niet over het hoofd worden gezien. Maar op veel marketinggerichte websites met een drukke lay-out en een andere visuele stijl, zijn de basiselementen vergeten. En natuurlijk komt de ontwikkelaar nooit ver in het maken van een website voordat hij toch een standaard paginasjabloon moet maken.
Dit zijn de basiselementen om altijd in te plannen: alinea's, kopjes 1 tot en met 6, ongeordende en geordende lijsten, tabelgegevens, formuliervelden, afbeeldingen en vetgedrukte en cursieve tekst.
Op veel websites waar ik aan werk, heb ik een stijlgids samengesteld om de ontwikkelaars te helpen, zoiets als dit:
8. E-mails van de website
Een ding waar ik geen designerplan voor zie zijn door de website gegenereerde e-mails. Zo'n basiselement is gemakkelijk te missen omdat het niet typisch de kern van de website is. En toch is e-mail een krachtige tool die een service kan promoten en uitbreiden.
Mijn suggestie is om de inhoud van de website in de planningsfase zorgvuldig te bekijken om te zien welke e-mails mogelijk worden verzonden. Enkele van de meest voorkomende zijn:
- Bevestiging bevestiging mailinglijst,
- Registratie Bevestiging,
- Bevestiging bevestiging formulier (zoals voor een contactformulier),
- Orderverificatie na een aankoop.
Als u echt wilt denken aan uw klanten en ontwikkelaars, bereidt u ook een e-mailmarketingsjabloon voor op de website. U geeft gebruikers een naadloze overgang van de website naar de inbox en u behoudt de controle over de branding in zijn verschillende vormen.
9. Pagina strekken
De vraag hoe een ontwerp zich zal uitstrekken om aan veranderende inhoud tegemoet te komen, wordt ook zelden behandeld, maar kan van cruciaal belang zijn, afhankelijk van de stijl van de website. Laten we eens kijken naar een voorbeeld waar dit verkeerd zou kunnen zijn:
Volle maan BBQ heeft een strakke startpagina. Dit ontwerp laat niet veel beweging of verandering toe in de inhoud. Alles heeft een specifieke grootte en plaatsing. Wat gebeurt er als de eigenaren besluiten het welkomstbericht echt te verlengen of een afbeelding toe te voegen? Gelukkig hebben ze dit gepland. Zoals je in deze mock-up kunt zien, heb ik de pagina bewerkt met het dubbele van de tekst. De pagina strekt zich perfect uit en biedt plaats aan:
Alternatieve versies van een lay-out voorbereiden met veel meer inhoud kan zeer nuttig zijn om te laten zien hoe u een dergelijk scenario kunt plannen.
10. Animaties: pop-ups, tooltips, overgangen, etc.
Op een standaard HTML- en CSS-website (dus zonder Flash) zijn animaties en overgangen zo gemakkelijk over het hoofd te zien. En wanneer ze over het hoofd worden gezien, zullen ze vaak helemaal niet worden ondergebracht. Dus, als animaties cruciaal zijn, is het het beste om ontwikkelaars een voorbeeld te geven van hoe ze moeten werken, zodat het product naar behoren functioneert.
Enkele van de meest voorkomende plaatsen die animaties opduiken zijn:
- tooltips
Die kleine pop-ups wanneer gebruikers over elementen bewegen. - Afbeelding rotators
Diavoorstellingen op de homepage zijn allemaal rage en er is een breed scala aan opties beschikbaar voor overgangen en stijlen. - Lichtbak
Je kunt niet alleen de lightbox zelf stylen, maar ook de overgang ernaar.
Elk van deze geanimeerde elementen heeft een aparte visuele stijl die op zichzelf moet worden ondergebracht.
Waarom zou ik erom geven?
Veel van de hier gepresenteerde elementen lijken de ontwikkelaars meer van pas dan de ontwerpers. Om eerlijk te zijn, dit is gedeeltelijk waar: als je al deze elementen van tevoren voorbereidt, zullen de ontwikkelaars van je houden. Dit zijn de dingen die ontwikkelaars moe worden van het vragen om of van het zelf moeten uitvogelen.
Toch, door al dit werk van tevoren te doen, voorkom je dat ontwikkelaars het raden, en behoud je dus de controle over het ontwerp. En door de controle over het ontwerp te behouden, hebt u een veel grotere kans om het soort polish toe te voegen dat een gewone website in een uitstekende website verandert. Sommige ontwerpers noemen dit de geheime saus die hun ontwerpen laat zingen.
En als dat niet genoeg motivatie is, overweeg dan dit. Ontwerpers die dit goed vooruit plannen en een compleet pakket leveren, zijn gewoon fundamenteel waardevoller. Ze creëren niet alleen een product van hogere kwaliteit, maar ze verlagen ook de productiekosten. Dit betekent dat er meer ruimte is voor winst, wat iedereen gelukkig maakt.
Houd dus al deze fijnere details in het achterhoofd en heb plezier bij het plannen van uw website. Eerlijk gezegd zijn deze details het halve werkplezier van ontwerpen voor het web, het steeds veranderende medium dat gebruikersinteractie en veranderende inhoud accommodeert.
Patrick McNeil is een freelance schrijver, ontwikkelaar en ontwerper. In het bijzonder houdt hij van schrijven over webdesign, mensen trainen in webontwikkeling en websites bouwen. Patrick's nieuwste boekproject is Het handboek van de ontwerper ; het bevat veel aanvullende onderwerpen in de trant van dit artikel. U kunt er meer over te weten komen TheWebDesignersIdeaBook.com . Volg Patrick op Twitter @designmeltdown .
Wat ontwerp je voor dat iedereen lijkt te vergeten? Heb je ooit extra's zoals deze gepresenteerd aan je klanten? Wat voor soort dingen vind je dat ontwikkelaars je altijd vragen om toe te voegen aan een ontwerp?