10 webontwerpregels die u kunt doorbreken
Naarmate webontwerp en -ontwerp in het algemeen zijn geëvolueerd, zijn er regels opgesteld om te zorgen voor consistente en bruikbare ontwerpen.
Sommige van deze regels zijn gemaakt omdat makers van websites bepaalde principes hebben misbruikt zonder rekening te houden met hun gebruikers.
Maar deze regels worden door niemand afgedwongen en moeten indien nodig worden verbroken, vooral wanneer het overtreden ervan zou leiden tot een verbluffend ontwerp.
In dit artikel presenteren we 10 regels die u kunt verbreken als deze voldoet aan uw ontwerpbehoeften.
Regel # 1: de horizontale schuifbalk niet weergeven
Een aanzienlijk aantal muizen heeft geen horizontaal muiswiel. Dit maakt het lastig om naar links of rechts te scrollen wanneer de inhoud van een webpagina langs de zijkanten van de browser reikt.
Het kan vervelend zijn om de muiscursor omlaag te brengen naar de onderkant van het venster en de schuifbalk naar boven te slepen om een woord of twee te zien die buiten het zichtbare gedeelte van de pagina ligt. Dat gezegd hebbende, hier zijn enkele goed ontworpen sites die de schuifbalk op effectieve manieren laten werken.
Benek
Benek gebruikt JavaScript om de schuifrichting van het muiswiel van verticaal naar horizontaal te wijzigen. Elk item in de portefeuille van Benek is gescheiden in een eigen kolom. De site heeft een verrassend fris gevoel en vloeit soepel.
Schoengoeroe
Schoengoeroe komt weg met horizontaal scrollen omdat het profiteert van de manier waarop mensen naar schoenen kijken. Mensen kijken de meeste producten van boven naar beneden, maar schoenen zijn anders. De ogen van mensen bewegen meestal over de lengte van de schoen. Door deze gewoonte in zijn voordeel te gebruiken, maakt Shoe Guru het ontwerp van zijn website in dezelfde richting, waardoor de beweging natuurlijk aanvoelt.
Stephane Tartelin
Stephane Tartelin gebruikt de horizontale schuifbalk om zijn illustraties eruit te laten zien alsof het in een kunstgalerij is. Hoewel het verticale muiswiel niet werkt zoals in de bovenstaande voorbeelden, werkt het effect verrassend goed. Je zou zelfs kunnen beweren dat het effect zou verminderen als het muiswiel opnieuw zou worden gecodeerd om horizontaal te scrollen.
Grafische therapie
Terwijl Grafische therapie toont geen horizontale schuifbalk op de pagina, maar toch kunt u horizontaal scrollen door op het scherm te klikken en te slepen. De grafische theorie gebruikte horizontale navigatie omdat alle afbeeldingen dezelfde hoogte maar niet dezelfde breedte hebben. De horizontale navigatie helpt de site soepel te laten stromen.
De horizontale manier
De horizontale manier is een showcase van websites die horizontaal scrollen gebruiken. De grungy graphics zijn prachtig, en deze site is uniek voor wat betreft CSS-galerijen.
Regel # 2: gebruik een minimaal aantal lettertype-gezichten
Te veel lettertypen conflicteren meestal met elkaar en overweldigen de kijker. Elk lettertype heeft een persoonlijkheid en te veel persoonlijkheden kunnen tot wanorde leiden.
Om effectief meer dan alleen een paar lettertypen te kunnen gebruiken, moet een ontwerp zeer tekstgeoriënteerd zijn en moet de rest van het ontwerp relatief rustig zijn. Hier zijn enkele voorbeelden van sites die dit gevoel van conflicten en wanorde gebruiken om de gebruiker te betrekken.
Links LA
Links LA gebruikt veel lettertypen in een niet-lineaire lay-out om een gevoel van energie te creëren. De pagina is moeilijk om snel te lezen, maar trekt de gebruiker naar binnen. Het is ook vermeldenswaard dat geen van de lettertypen overdreven decoratief is; elk woord is leesbaar, waardoor het ontwerp helder en schoon blijft.
Geo Elements Design Studio
Het gebruik van verschillende lettertypen geeft meestal een gevoel van energie en chaos, maar Geo Elements Design Studio De website is heel open en schoon. Elk lettertype krijgt een eigen spatie zodat de kijker het niet aan een ander lettertype koppelt. Het beeld van de lucht op de achtergrond helpt het gevoel van openheid te versterken.
Richard Stelmach
In tegenstelling tot het laatste voorbeeld, Richard Stelmach duwt zijn verschillende lettertypen dicht bij elkaar. Het ontwerp werkt omdat slechts één lettertype er niet handgetekend uitziet, en de andere twee werken goed met de afbeelding. Handgetekende lettertypen werken meestal goed samen, zelfs als er veel verschillende lettertypen zijn.
Satsu
Satsu lijkt veel verschillende lettertypen te hebben, maar heeft er eigenlijk maar drie (exclusief het portfolio-item Sportraad). Door alles zorgvuldig te verdelen, koppelt Satsu bepaalde tekstregels aan elkaar, ook al is de tekst in verschillende lettertypen.
De logo-titel is in één lettertype en de twee ondertitels hebben elk een eigen lettertype, maar de kijker groepeert deze drie tekstitems natuurlijk samen. Satsu kan energie creëren zonder de pagina met persoonlijkheden te overweldigen.
Regel # 3: gebruik niet te veel kleuren
De angst om te ver te gaan met een ontwerp is wat professionals scheidt van rookies en rookies van onbewusten. De onbewuste proberen hun ontwerpen zo extreem mogelijk te maken, met woorden in vuur en vlam, knipperende tekst en zoveel mogelijk kleuren.
Rookies willen hun ontwerpen subtiel en gemakkelijk houden, maar uiteindelijk kunnen hun ontwerpen er soms levenloos uitzien. De volgende oogstrelende ontwerpen zijn van sommige echte professionals die grenzen verleggen.
Matt Mullenweg
Matt Mullenweg's prachtig gekleurd ontwerp ziet eruit als een aquarel (de site is bijgewerkt sinds dit artikel is geschreven). Alle kleuren op de achtergrond zouden de aandacht van iedereen trekken.
Over het algemeen hebben goede ontwerpen met een heleboel kleuren deze kleuren op de achtergrond, met een eenvoudiger palet vooraan. Het lezen van tekst is erg moeilijk wanneer er te veel dingen aan de hand zijn.
Travic Isaacs
Travis Isaacs's ontwerp heeft een kleurrijk verticaal verloop op de achtergrond waardoor het ontwerp overal kleurrijk lijkt. Deze website heeft felroze als verbindingskleur, wat een geweldige keuze is voor ontwerpers die een kleurrijk effect willen creëren.
James De Angelis
James De Angelis ' website laat zien dat tekst kleurrijk kan zijn zonder dat hij als rookie-achtig overkomt. Het ontwerp is erg reserve en de slogan staat zeker centraal.
Regel # 4: maak het doel van je site duidelijk
Iets wat echt in de oren van jonge ontwerpers zit, is dat een ontwerp de kijkers meteen moet vertellen waar ze naar kijken voordat ze een tekst lezen.
Merkherkenning is belangrijk voor grote bedrijven, maar soms moeten de kleinere jongens een beetje slimmer zijn om de aandacht van de kijker te trekken. Het achterhouden van informatie kan de kijker intrigeren en mensen "plagen" om meer te willen leren.
Als u deze techniek toepast op webontwerp, kan dit de tijd die gebruikers op uw site hebben, aanzienlijk vergroten.
Cetrotrees
Op de meeste portefeuilles introduceert de freelancer of het bedrijf zichzelf meestal en legt hun werk uit. Cerotreees in plaats daarvan plaatst u een paar vaag gelabelde links aan de linkerkant en voorbeelden van zijn werk aan de rechterkant, maar niets verklaart het idee of de persoon erachter.
De lucht van het mysterie rond de site verleidt de gebruiker om te blijven.
The Last Mixtape
The Last Mixtape is een andere portfolio die zijn werk laat zien en niets meer. Dergelijke ontwerpen stralen een gevoel van extreem vertrouwen uit. Ze proberen nooit zichzelf te verkopen; ze verwachten gewoon dat de gebruiker wordt weggeblazen en smeken om een contract.
Peter Pearson
Het gebruik van een startscherm is een goede manier om het denkproces van de gebruiker te vertragen en hen te inspireren dieper te graven. Het doel van de splash-pagina is meestal om de site snel uit te leggen met foto's of een klein stukje tekst.
Maar in Peter Pearson's geval, het doel is om een gevoel op te roepen. De grote lucht en het spetterde teksteffect doen geweldig werk bij het oproepen van nieuwsgierigheid, omdat deze dingen meestal niet samen voorkomen. Deze site doet ook uitstekend werk om de emotie die door de splash-pagina wordt gecreëerd, voort te zetten in de daadwerkelijke inhoud.
De zijwaartse beweging en geanimeerde lijnen die de gebruiker volgen, zijn echt effectief.
Piepmatzel
Een geweldige manier om de taalbarrière te omzeilen, is door geen woorden te gebruiken. Piepmatzel is een CSS-galerij en mensen die eerder een CSS-galerij hebben gezien, zullen deze waarschijnlijk meteen herkennen.
Degenen die dat nog niet zijn, kunnen genoeg geïntrigeerd zijn om een paar thumbnails een klik te geven in de hoop het patroon uit te vinden. De kleine hoeveelheid tekst onderaan de pagina helpt bij het sorteren en is overbodig.
Regel # 5: navigatie zou gemakkelijk moeten zijn om uit te zoeken
Navigatie zou niet het knelpunt van een site moeten zijn. Gebruikers moeten snel kunnen vinden wat ze willen. Soms kan een niet-intuïtieve maar boeiende navigatie de gebruiker helpen zich verbonden te voelen met de site en wat hij promoot.
Alvin Tang
Zoals vermeld in het vorige gedeelte, wordt een air of confidence weergegeven wanneer een portfolio niet duidelijk is. Dit is het geval in Alvin Tang's fotografie portfolio. Wanneer de gebruiker voor het eerst op de site aankomt, herkent hij de woorden die ze als links zien niet onmiddellijk.
Deze onzekerheid zou hen ertoe moeten aanzetten een beetje rond te snuffelen. Als je de muis over een woord beweegt, zie je dat het inderdaad een link is en als je erop klikt, wordt een prachtige foto geladen. De foto zal gebruikers verleiden door te gaan met browsen.
Om meer foto's te zien, moeten gebruikers op de "Terug" -knop in hun browser klikken (iets wat de meeste mensen begrijpen) en vervolgens op een andere link klikken. Er zit geen hand vast in het ontwerp en het werkt buitengewoon goed. Dit is geen conventioneel "prachtig ontwerp", maar het levert precies wat het nodig heeft.
Kasulo
Kasulo 's navigatie is niet erg moeilijk om te achterhalen, maar de gemiddelde gebruiker weet misschien niet precies wat hij moet doen bij aankomst op de site. Na de eerste klik wordt echter alles duidelijk.
De gebruiker navigeert de portfolio-stukken in 3D-stijl en de nieuwste items lijken het dichtst bij het begin. Het muiswiel gebruiken is nog leuker.
Marcio Kogan
Marcio Kogan's site is een ander voorbeeld van geweldige navigatie dat niet meteen voor de hand ligt. De instructie "Drag me" is moeilijk te weerstaan, en zodra de gebruiker dat doet, zijn ze op weg om de portfolio-items te cruisen. De mouseover-voorbeelden zijn een klein detail maar echt indrukwekkend.
Ceranco
Als een klant een ontwerper zou vragen om hun site in 3D te maken, zoals een first-person shooter-videogame, dan zouden de meeste ontwerpers stilletjes voor zichzelf lachen, diep ademhalen en dan langzaam uitleggen waarom dat een slecht idee zou zijn. .
Terwijl de website voor Ceranco is niet echt een 3D-shooter, het kan gemakkelijk worden verward voor een indie-computerspel. Sites zoals deze zijn geweldig in het aanspreken van gebruikers. Hoewel de lange laadtijd en slechte zoekmachineoptimalisatie dit voor de meeste projecten minder dan ideaal maken, is het zeker de moeite waard om een tweede gedachte te overwegen.
Regel # 6: gebruik verschillende kleuren voor de tekst en achtergrond
Deze regel is misschien niet overal geschreven, maar veel rookies zijn zo bang om tekst onleesbaar te maken dat ze niet overwegen dezelfde basiskleur te gebruiken voor zowel de achtergrond als het lettertype zelf. U kunt enkele eenvoudige technieken volgen om dezelfde kleuren te laten werken.
Linksys
De Linksys site is netjes vanwege de manier waarop deze één blauw heeft voor al zijn links, ook al is de achtergrondkleur verschillende tinten blauw. Hoewel het een risico is en misschien niet de grootste kleurbeslissing, werkt het wel.
Brad Colbow
Brad Colbow's ontwerp lijkt op Linksys 'vanwege de blauwe tekst op een blauwe achtergrond. Blauw op blauw is moeilijk goed te trekken, vooral met zoveel verschillende blues op de hele site.
Powerset
Tot nu toe hebben we in deze sectie alleen blauwe websites gezien, omdat blauwe tekst het moeilijkst is voor het menselijk oog om te lezen, en dus is het leesbare blauwe type altijd indrukwekkend. Als een teksteffect in het blauw werkt, werkt het waarschijnlijk in elke kleur.
Powerset gebruikt een letterstijl voor zijn lettertype om een 3D-effect te creëren dat de tekst effectief van de achtergrond scheidt.
Kunstenaar in ontwerp
Kunstenaar in ontwerp niet alleen heeft groene tekst op een groene achtergrond en geel / beige tekst op een gele achtergrond, maar heeft tekst direct op de top van een foto.
Hoewel sommige afzonderlijke letters misschien moeilijk te lezen zijn, blijven de woorden in hun geheel leesbaar. Dit type effect moet bijna altijd centraal staan in een ontwerp.
Horacio Bella
Horacio Bella gebruikt een ander 3D-effect op zijn portfolio. In dit geval lijken de letters eruit te springen in plaats van naar binnen gedeukt te zijn. Zonder dit effect zou de leesbaarheid sterk verminderd zijn. Een ander goed effect dat hier wordt gebruikt, is de strakke kerning van letters, die de leesbaarheid verder verbetert.
Regel # 7: Plaats geen animatie op de manier van uw inhoud
Doe serieus geen kleine Flash-advertenties op de plaats waar de gebruiker aan het lezen is. Hetzelfde geldt voor de enquêteboxen die worden weergegeven wanneer de gebruiker zich in het midden van een zin bevindt. Gebruikers vinden het niet leuk om afgeleid te worden als ze halverwege een zin zitten. Tenzij…
Het is echt moeilijk om niet geboeid te zijn door de kleine spin ABA site. Het ontwerp is schoon en hoewel de spin een afleiding is, is het goed. Tot nu toe is deze site volgens mij de enige uitzondering op de regel.
Regel 8: blijf bij Web-Safe-lettertypen
Hoewel technieken voor het vervangen van lettertypen nog jong zijn, maken ze al grote sprongen. sIFR was de eerste en recentelijk Cufón en Typefasce.js zijn naar voren gekomen.
Diseñorama
Op de Diseñorama website, de rode tekst "Recientemente" kan worden geselecteerd. Een nadeel is dat als de site niet meteen wordt geladen, de gebruiker het originele gewone lettertype kort zal zien.
Een ander nadeel is dat als de gebruiker JavaScript of Flash heeft uitgeschakeld, ze alleen het originele lettertype zouden zien. Alles bij elkaar genomen, het is nog steeds best cool. Hopelijk is het een voorproefje van wat er de komende jaren zal komen.
Cactuslab
Cactuslab maakt ook gebruik van sIFR voor de blauwe subkopjes (zoals 'Winterwerk'). Hoewel sIFR de meest gecompliceerde lettertypevervangingstechnieken is, kan tekst worden gekopieerd en geplakt, waardoor het een groot voordeel is ten opzichte van de twee andere technieken.
Regel # 9: Heb geen Splash / Landing-pagina
Veel ontwerpers hebben diezelfde oude discussie gehad met hun klanten over waarom een splash-pagina geen goed idee is. Google heeft de neiging om dergelijke pagina's lager te rangschikken, en ze vertragen de gebruiker van het krijgen van de inhoud die ze zoeken. Maar ze kunnen ongelooflijk mooi en inspirerend zijn als ze goed worden gedaan.
Glans postproductie
Het doel van het portfolio-voorbeeld dat wordt weergegeven op de splash-pagina van Glans postproductie De website is bedoeld om een emotionele reactie van de gebruiker op te wekken.
Bij elk bezoek wordt een willekeurige foto uit de portfolio geladen. Door te klikken op de foto wordt het verkleind en wordt het op zijn plaats geplaatst tussen de andere portfoliostukken op de site. Het schaal- en bewegingseffect biedt continuïteit en helpt de emotie van de gebruiker over te dragen naar de rest van het werk van het bedrijf.
Issa Londen
Wanneer een site volledig in Flash is voltooid, kan de laadbalk als een splash-pagina worden gebruikt. Wanneer een gebruiker een laadbalk ziet, sluiten ze de pagina en gaan ze ergens anders naartoe of schakelen ze naar een ander tabblad en bladeren ze ergens anders terwijl ze wachten.
Nadat de pagina is geladen, kunt u het beste wachten tot de gebruiker terugkeert voordat hij wordt opgestart. In Issa Londen In het geval, de poort is een perfecte metafoor om te zeggen dat de site klaar is en de gebruiker kan binnengaan.
Wanneer de gebruiker op de poort klikt, wordt de poort geopend en verschijnen er verschillende geïllustreerde modellen. Het gebruik van de poort op de splash-pagina is een geweldig ontwerpidee, omdat de gebruiker zich bij het betreden verloofd voelt.
Regel # 10: gebruik geen tabellen
Elke webontwerper die tabellen in zijn ontwerpen gebruikt, wordt door ervaren ontwerpers meteen een rookie genoemd. Tabellen worden niet in alle browsers hetzelfde weergegeven en ze kunnen de broncode er rommelig doen uitzien, maar u zult op zijn minst weten wat u ermee krijgt. Hier zijn enkele voorbeelden van ontwerpen die tabellen bevatten.
Deze tafel is enigszins moeilijk te zien, maar zit daar tussen de twee stoelen verscholen. Het is een leuk bijzettafeltje maar helaas draagt het niet veel bij aan het ontwerp van deze site.
Tafels zijn veel in de achtergrond van dit ontwerp Werk bij Play , maar ze houden de laptops van de werknemers en andere items binnen handbereik. Zonder deze tafels zou de kamer veel leger aanvoelen en zou de achtergrondfoto niet hetzelfde effect hebben.
Hoewel dit ontwerp voornamelijk stoelen bevat, verschijnt een leuk tafeltje in de rechterbovenhoek van de miniatuur. Het lijkt erop dat er een pot op zit.
Wat ontwerpen met tabellen betreft, is dit een van de beste. Met twee tabellen in deze Flash-animatie, geeft het ontwerp veel aandacht. Deze site zou op de lijst van elke designer moeten staan met geweldige ontwerpen die tabellen gebruiken.
De regels overtreden!
Het verbreken van de regels is goed als een ontwerp daarom vraagt. Veel van de hier besproken ontwerpkeuzes worden door de gemiddelde ontwerper niet in overweging genomen. Dit is wat geweldige ontwerpers onderscheidt van gemiddelde ontwerpers.
Degenen die dapper genoeg zijn om in te gaan tegen wat ze zijn geleerd, vallen altijd op.
Exclusief geschreven voor WDD bt Eli Penner. Hij runt zijn eigen website op SleepyHero.com
Breek je regels in je webdesign? Waarom of waarom niet? Deel uw mening met ons ...