Basix veelgemaakte fouten in webontwerp

We maken allemaal fouten. Het is de menselijke natuur. In de webontwerpindustrie kunnen echter veel elementen verkeerd worden geplaatst met slechts enkele aanpassingen die nodig zijn om ze stellair te maken. Deze variëren van typografie tot opvulling, waarbij een enkel cijfer uw webontwerp drastisch kan beschadigen. Gelukkig kun je, als je eenmaal in staat bent om te achterhalen wat de meest voorkomende fouten zijn, met een paar klikken en een paar tikken op je toetsenbord een zinkend ontwerp redden. Vandaag gaan we enkele webontwerpfouten bekijken waar elke ontwerper op moet letten.


We maken allemaal fouten? sommige zijn rommeliger dan andere.

Over Basix

Onze Basix-berichten gaan helemaal over beginnen met webdesign. Of je nu helemaal nieuw bent voor webdesign of al een tijdje ontwerpt op het web en geïnteresseerd bent in een of andere 'formele' training, de artikelen en tutorials in deze bibliotheek zijn er op gericht je te helpen een beetje ervaring op te doen. riem, zodat je later op moeilijkere projecten kunt rocken!


Typografie

Typografie is een van de belangrijkste kenmerken van een ontwerp. In de meeste ontwerpen domineert tekst het grootste deel van de pagina, zodat een schone, goed toegesneden typografie de sleutel kan zijn om het potentieel van uw thema te ontsluiten. Er zijn veel fouten die nieuwe of ervaren ontwerpers kunnen maken die de anders aantrekkelijke aantrekkingskracht van de typografie van een pagina kunnen aantasten.

Sans Serif vs Serif

In het belang van dit artikel, neem ik aan dat de lezer weet wat een serif-lettertype is. Er is een zekere elegantie in serif-lettertypen die op een webpagina worden gebruikt, en een modernere uitstraling wanneer een ontwerper het brede scala aan schreefloze lettertypen gebruikt. Deze twee effecten vermengen zich echter niet om de belichaming te worden van goede typografie wanneer ze tegelijkertijd worden gebruikt. In feite kan het mengen van de twee onder normale omstandigheden hybride resultaten opleveren die, om eerlijk te zijn, er gewoon niet goed uitzien.

Dat wil niet zeggen dat het mengen van schreef- en schreefloze lettertypen samen gaat nooit werken. In sommige gevallen werkt het zelfs goed, vooral wanneer de lettertypen op verschillende niveaus van een hiërarchie worden gebruikt. A List Apart gebruikt bijvoorbeeld een serif-lettertype voor een titel, terwijl een sans-serif-lettertype wordt gebruikt voor de hoofdtekstinhoud.

Aantal lettertypen

Een andere enorme fout die sommige ontwerpers tegenkomen, is het gebruik van veel verschillende lettertype families, in plaats van een select paar. Als u meerdere lettertypen gebruikt, kan dit leiden tot een niet-verbonden ontwerp dat de leesbaarheid van uw inhoud verstoort. In plaats van inhoud met meerdere lettertypen, maakt een poging om één lettertypefamilie per niveau van de visuele hiërarchie van het ontwerp te gebruiken over het algemeen een mooier lettertypeschema dat er veel meer verenigd uitziet dan een aantal willekeurige stijlen hier en daar.

Evenzo kan te veel variëren in lettergrootte en regelafstand tussen letters en letters een niet-verbonden leeservaring en een algehele slechte eindgebruikerservaring creëren. Houd het constant en vertrouwd.

Gebrek aan contrast

Een groot probleem dat zich kan voordoen is een gebrek aan contrast tussen de typografie en de achtergrond. Dit kan problemen met de leesbaarheid veroorzaken, omdat sommige gebruikers het moeilijk zullen vinden om onderscheid te maken tussen de twee sets kleuren. Neem bijvoorbeeld het voorbeeld. Welke is gemakkelijker te lezen, links of rechts? Rechts, links!

Er is geen complexe theorie achter contrast. Je zou zwart schrijven niet op een zwarte achtergrond zetten, omdat je niet kunt bepalen wat er wordt geschreven en wat de achtergrond is. De enige suggestie is om de tekstkleur zo dicht mogelijk bij het tegenovergestelde uiterste van de achtergrond te krijgen, zonder andere esthetische kwaliteiten te schaden, om frustratie bij de eindgebruiker te voorkomen. Het Ellipsis-thema laat een goed contrast zien in het bovenste kopgebied. Zou daar in plaats daarvan een lichtroze of paars werken?


Vulling, marges en afstand

We worstelen niet langer met piepkleine monitoren (we denken hier voornamelijk aan desktop browsing, niet aan smartphone). In plaats daarvan leven we op 21 "+ schermen en browsen we op resoluties hoger dan HD, waardoor ontwerpers veel meer ruimte hebben om in te werken. Daarom zou je je helemaal niet geplet moeten voelen en meer ruimte moeten geven aan opvulling en marges om de esthetiek van jouw ontwerp Neem bijvoorbeeld het ontwerp van Apple, het gebruikt veel witruimte en concentreert alle kleuren en acties op de inhoud waar het om geeft. Dat wil niet zeggen dat je veel zou moeten hebben wit ruimte, maar uw ontwerpen kunnen baat hebben bij een grotere zichtbaarheid zodat ze gemakkelijk van elkaar te onderscheiden zijn.

Het is belangrijk om de tussenruimte consistent en gelijk te houden in uw ontwerp zo goed mogelijk in zowel interne opvulling als externe marges. Bekijk bijvoorbeeld het onderstaande schema. De tweede helft ziet er veel beter uit omdat alle marges dezelfde 18px-ruimte zijn. Alles is afgestemd op dezelfde rasterlay-out. Het is duidelijk en elk gebied is te onderscheiden van een ander gebied, maar het verspilt niet noodzakelijk ruimte.

Grid Systems

Evenzo is het raster een belangrijk kenmerk van de meeste succesvolle webontwerpers. Het gebruik van een raster houdt alles op orde en ruimt ontwerpen op met consistente dakgoten om te gebruiken. Op grid gebaseerd ontwerp maakt alles zo veel meer georganiseerd. Dit gedeelte staat niet in dit artikel omdat het een vergissing is om er geen gebruik van te maken, door het als een oplossing te beschouwen als u denkt dat uw ontwerpen falen in een gebied dat bijdraagt ​​tot.


Oude waarden behouden

De industrie van webdesign is snel, met nieuwe ontwikkelingen die consequent verschijnen. Een van de ergste dingen die uw ontwerp kunnen beschadigen, is doorgaan met het ontwikkelen en ontwerpen van de populaire jaren geleden. In 2003 had Microsoft Frontpage een hulpmiddel voor "lay-outtabellen", maar geen goede ontwikkelaar zou ooit een tafellabel in de naam van de lay-out durven openen. Evenzo zijn de verbazingwekkende geanimeerde GIF's en achtergrondmuziek van het afgelopen decennium een ​​enorm nee-nee. Oh, en denk niet aan het gebruik van frames als onderdeel van uw webdesign. Al deze presenteren bruikbaarheid en andere problemen en het is gewoon niet hoe we dingen meer doen.

Speider Schneider heeft een geweldig artikel over "The Stone Age of Web Design" hier bij Tuts +. Zorg ervoor dat je een tutorial over je website bezoekt moet niet ziet eruit als.


Oudere technieken zoals het gebruik van tabellen of iFrames lijken misschien verleidelijk, maar er is vaak een meer sierlijke manier om dingen voor elkaar te krijgen als je kijkt naar modernere benaderingen.

Aandeel en grootte

Je ontwerpen moeten altijd vasthouden aan een soort hiërarchie waaraan wordt bijgedragen door hun grootte en hun verhoudingen. In eenvoudige bewoordingen zijn uw belangrijkste elementen de grootste en laten ze in omvang afnemen. Dat betekent niet dat het minst belangrijke item 4 px groot moet zijn, maar het moet je routekaart zijn naar de schaal van elementen op een pagina. Ze moeten nog steeds in verhouding staan ​​tot de invoerprecisie van welk apparaat je ook ontwerpt en gemakkelijk genoeg om te zien. Als ze er al zijn, zullen ze daar met een reden zijn.

Dit komt allemaal voort uit een bruikbaarheidsperspectief dat suggereert dat alle elementen gemakkelijk toegankelijk moeten zijn en geen rechtvaardiging behoeven: laat de gebruiker niets anders doen dan alleen naar iets kijken. Geen loensen, niet zoomen, geen overdreven pogingen om iets te klikken dat kleiner is dan een grassprietje.

Je hebt waarschijnlijk ook gehoord van goddelijke proporties, of "De Gulden snede". Hoewel niet elk ontwerp zich aan dit principe hoeft te houden, zouden de meeste standaardontwerpen waarschijnlijk tot elke prijs moeten proberen. De verhouding van 1 tot 1,62 (in een afgeronde vorm) is algemeen bekend als de gulden snede en wordt niet alleen gebruikt in webdesign, hoewel we wel wat lof verdienen voor het gebruik ervan.

The Golden Ratio presenteert balans in een webontwerp omdat wij mensen eraan gewend zijn; de verhouding van de onderarm tot de hand is 1 tot 1,62, net als de menselijke glimlach. Iemand aantrekkelijk vinden kan ook gebaseerd zijn op de Gulden Snede. Daarom voelen we dat de Gulden Snede "natuurlijk" is. Alles net zo in balans houden, kan het gevoel en geluk van een webontwerp verbeteren, omdat het voor de gebruiker natuurlijker is.

U kunt meer lezen over de gulden snede en hoe wiskunde webdesign hier beïnvloedt.


Vergeten waarom je dit doet

Het vergeten van het hoofddoel van je ontwerp is altijd slecht. Als je ontwerpt voor e-commerce en je hebt dit briljante idee voor een kick-ass-schuifregelaar die gewoon niet in het huidige project past, integreer het dan niet alleen omwille van het. Evenzo, als je de gewoonte hebt om dit geweldige vervolgkeuzemenu te gebruiken waaraan je talloze uren hebt gewerkt, maar het degradeert de bruikbaarheid van die bepaalde site, gebruik het niet. Laat je niet afleiden door iets anders, anders dan waar je ontwerp uiteindelijk voor zal worden gebruikt. Ga op geregelde tijdstippen achteruit en overweeg of het doel overeenkomt met het huidige ontwerp en manipuleer het als dat niet het geval is.


Voor de geneutraliseerde ThemeForest

Natuurlijk is er een grotere kans dat je een auteur van ThemeForest bent als je dit artikel leest. Daarom heb ik een paar tips om met u te delen, op basis van de algemene afwijzingsfactoren waarmee het evaluatieteam regelmatig te maken heeft.

  • Lijnhoogte - de wiki suggereert dat veel ingediende ontwerpsjablonen een goede hoeveelheid lijnhoogte en / of spatiëring missen. Een ruime lijnhoogte van ongeveer 1,3-1,6em draagt ​​bij aan de betere bruikbaarheid van uw ontwerp, maar maakt het ook schoner. Het gebruik van de "em" -waarde voor het meten van de lijnhoogte helpt ook om het in verhouding te houden met uw tekst.
  • Visuele hiërarchie - Zoals eerder vermeld, kan het hebben van een sterke, onderscheidbare visuele hiërarchie ook voordelig zijn, omdat het uw gebruiker helpt te bepalen wat hij eerst moet lezen en hem vervolgens de genoemde hiërarchie moet laten doorwerken. Dit kan vooral handig zijn op sites die iets willen verkopen, omdat het de aandacht van de lezer op een specifiek element op de pagina trekt, zoals de geweldige dingen die een product kan doen, of het zorgvuldig gemaakte shot, terwijl de minder aantrekkelijke dingen behouden blijven - zoals prijs - iets meer verborgen.
  • Browsercompatibiliteit - Een van de ergste dingen die u kunt doen, is een deel van het potentiële publiek van uw website vervreemden door een website niet in de door u gekozen browser te laten werken. De kans is groot dat de gebruiker de site verlaat in plaats van gefrustreerd tijd te besteden aan het doorlopen van het ontwerp. Ervoor zorgen dat alle belangrijke browsers op zijn minst worden gedekt, is altijd aan te raden en de juiste tests moeten worden uitgevoerd. Als je geen Mac hebt, neem je mee naar een Apple Store en probeer je site daar als het bijdraagt ​​aan je uiteindelijke ontwerp er beter uitziet.

Hopelijk heb je wat stof tot nadenken over wat je niet zou moeten doen. Ga nu terug naar de startpagina en ontdek wat jij moeten doen!