10 webdesign regler, som du kan bryde
Da webdesign og design generelt er udviklet, er der etableret regler for at sikre konsekvente og brugbare designs.
Nogle af disse regler blev oprettet simpelthen fordi hjemmesideskabere misbrugte visse principper uden hensyntagen til deres brugere.
Men disse regler håndhæves ikke af nogen, og bør brydes når det er nødvendigt, især når de bryder dem, ville det føre til et fantastisk design.
I denne artikel præsenterer vi 10 regler, som du kan bryde, hvis det passer til dine designbehov.
Regel nr. 1: Vis ikke den vandrette rulningslinje
Et betydeligt antal mus har ikke et vandret mushjul. Dette gør det akavet at rulle til venstre eller højre, når en websides indhold strækker sig forbi siderne af browseren.
Det kan være irriterende at bringe musemarkøren ned til bunden af vinduet, og træk rullelinjen over for at se et ord eller to, der ligger uden for det synlige område på siden. Når det er sagt, her er nogle veldesignede websteder, der sætter rullepanelet på arbejde på effektive måder.
benek
benek bruger JavaScript til at ændre rulle retningen af musehjulet fra lodret til vandret. Hver vare i Beneks portefølje er adskilt i sin egen kolonne. Webstedet har en overraskende frisk følelse og strømmer glat.
Sko Guru
Sko Guru kommer væk med vandret rulning, fordi det udnytter den måde folk ser på sko. Folk ser mest på produkter fra top til bund, men sko er anderledes. Folkets øjne bevæger sig sædvanligvis over skoens længde. Ved hjælp af denne vane til sin fordel gør Shoe Guru sin hjemmeside designstrøm i samme retning, hvilket gør bevægelsen til at føle sig naturlig.
Stephane Tartelin
Stephane Tartelin bruger den vandrette rullebjælke til at gøre hans kunst ser ud som om det er i et kunstgalleri. Selv om det vertikale mushjul ikke virker som det gør i eksemplerne ovenfor virker effekten overraskende godt. Du kan endda hævde, at effekten ville blive reduceret, hvis mushjulet blev omkodet for at rulle horisontalt.
Grafisk terapi
Mens Grafisk terapi viser ikke en vandret rullepanel på siden, det tillader stadig vandretrulle ved at klikke og trække rundt på skærmen. Grafisk teori brugt vandret navigation, fordi alle dens billeder er af samme højde, men ikke i samme bredde. Den vandrette navigation hjælper webstedets strømning jævnt.
Den horisontale vej
Den horisontale vej er et udstillingsvindue af hjemmesider, der bruger vandret rulning. Den grungy grafik er smuk, og dette websted er unikt, så vidt CSS gallerier går.
Regel nr. 2: Brug et minimalt antal skriftfaser
For mange skrifttyper er normalt i konflikt med hinanden og overvælder seeren. Hver skrifttype har en personlighed, og for mange personligheder kan skabe lidelse.
For effektivt at bruge mere end blot et par skrifttyper, skal et design være meget tekstorienteret, og resten af designet skal være relativt stille. Her er nogle eksempler på websteder, der bruger denne følelse af konflikt og lidelse for at engagere brugeren.
Links LA
Links LA bruger mange skrifttyper i et ikke-lineært layout for at skabe en følelse af energi. Siden er vanskelig at læse hurtigt, men trækker brugeren ind. Det er også værd at bemærke, at ingen af skrifttyperne er alt for dekorative; hvert ord er læseligt og holder designet skarpt og rent.
Geo Elements Design Studio
Brug af en række skrifttyper giver normalt en følelse af energi og kaos, men Geo Elements Design Studio s hjemmeside er meget åben og ren. Hver skrifttype gives sin egen plads, så betragteren ikke associerer den med en anden skrifttype. Billede af himlen i baggrunden hjælper med at styrke åbenheden.
Richard Stelmach
I modsætning til det sidste eksempel, Richard Stelmach skubber sine forskellige skrifttyper tæt sammen. Designet virker, fordi kun en skrifttype ikke ser håndtegnet, og de to andre fungerer godt med illustrationen. Håndtegnede skrifttyper fungerer normalt godt sammen, selv når der er mange forskellige skrifttypeflader.
satsu
satsu ser ud til at have mange forskellige skrifttyper, men har faktisk kun tre (ikke sportsporteføljen). Ved at adskille alt omhyggeligt forbinder Satsu visse tekstlinjer med hinanden, selv om teksten kan være i forskellige skrifttyper.
Logo-titlen er i en skrifttype, og de to undertitler har hver deres egen skrifttype, men seeren sammensætter naturligvis disse tre tekstelementer sammen. Satsu kan skabe energi uden at overbelaste siden med personligheder.
Regel nr. 3: Brug ikke for mange farver
Frygten for at gå for langt med et design er, hvad der adskiller fagfolk fra rookies og rookies fra den uvidende. De uvidende forsøger at gøre deres designs så ekstreme som muligt, med ord i brand, blinkende tekst og så mange farver som muligt.
Rookies ønsker at holde deres designs subtile og lette på øjet, men i sidste ende kan deres designs undertiden se livløs. Følgende øjenværende design er af nogle sande fagfolk, der presser grænser.
Matt Mullenweg
Matt Mullenweg er smukt farvet design ligner et akvarelmaleri (siden er blevet opdateret siden denne artikel blev skrevet). Alle farverne i baggrunden ville få fat i alles opmærksomhed.
Generelt vil gode design med et ton farver have disse farver i baggrunden, med en enklere palette foran. Læsning af tekst er meget svært, når der er for mange ting der foregår.
Travic Isaacs
Travis Isaacs design har en farverig lodret gradient i baggrunden, der gør designet til at synes farverigt hele vejen igennem. Denne hjemmeside har lyserød som dens linkfarve, hvilket er et godt valg for designere, der ønsker at skabe en farverig effekt.
James De Angelis
James De Angelis ' Webstedet viser, at teksten kan være farverig uden at komme over som rookie-lignende. Designet er meget ledigt, og tagline er bestemt givet midtstadiet.
Regel # 4: Gør dit websteds mål klart
Noget der virkelig bliver smurt i ørerne hos unge designere er, at et design straks skal fortælle seerne, hvad de ser på, før de læser enhver tekst.
Brand anerkendelse er vigtigt for store virksomheder, men nogle gange skal de mindre fyre være mere kloge for at få seeren til at se. At holde tilbage information kan intrigere seeren og "retfærdige" folk til at ønske at lære mere.
Anvendelse af denne teknik til webdesign kan i høj grad øge den tid, brugerne forbliver på dit websted.
Cetrotrees
På de fleste porteføljer i dag introducerer freelanceren eller firmaet sig selv og forklarer deres arbejde. Cerotreees i stedet sætter nogle vagt mærkede links til venstre og prøver af sit arbejde til højre, men intet forklarer ideen eller personen bag den.
Luften af mysterium omkring webstedet lokker brugeren til at blive.
Den sidste Mixtape
Den sidste Mixtape er en anden portefølje, der viser sit arbejde og ikke mere. Sådanne designs udstråler en følelse af ekstrem tillid. De forsøger aldrig at sælge sig selv; de forventer bare, at brugeren blæses væk og kommer til at tigge om en kontrakt.
Peter Pearson
Brug af en stænkskærm er en god måde at bremse brugerens tankeproces på og inspirere dem til at grave dybere. Pladssideens mål er normalt at forklare stedet hurtigt med fotos eller en lille smule tekst.
Men i Peter Pearson's sagen er dens mål at fremkalde en følelse. Den store himmel og splattered tekst effekt gør et godt stykke arbejde for at fremkalde nysgerrighed, fordi disse ting normalt ikke vises sammen. Dette websted gør også et godt stykke arbejde ved at fortsætte følelser skabt af stænksiden i det aktuelle indhold.
Side-scrolling og animerede linjer, der følger brugeren, er virkelig effektive.
Piepmatzel
En god måde at komme rundt på sprogbarrieren er at ikke bruge nogle ord. Piepmatzel er et CSS galleri, og folk der har set et CSS galleri før vil sandsynligvis genkende det som en med det samme.
De, der ikke har det, kan være fascinerede nok til at give et par miniaturebilleder et klik i håbet om at finde ud af mønsteret. Den lille mængde tekst nederst på siden hjælper med sortering og er overflødig.
Regel # 5: Navigation skal være let at finde ud af
Navigation bør ikke være flaskehalsen på et websted. Brugere skal kunne finde det, de ønsker hurtigt. Nogle gange kan det dog være uintentivt, men engagerende navigation, der hjælper brugeren med at føle sig tilsluttet til webstedet, og hvad den fremmer.
Alvin Tang
Som nævnt i det foregående afsnit er en luft af tillid overført, når en portefølje ikke staver sig ud. Dette er tilfældet i Alvin Tang's fotografiportefølje. Når først ankommer på webstedet, genkender brugeren ikke straks de ord, de ser som links.
Denne usikkerhed bør bede dem om at kaste lidt rundt. Flytter musen over et ord afslører, at det faktisk er et link, og når du klikker på det, lægges et smukt billede. Fotoet vil lokke brugerne til at fortsætte browsing.
For at se flere billeder skal brugerne klikke på knappen "Tilbage" i deres browser (noget de fleste forstår at gøre) og derefter klikke på et andet link. Der er ingen håndhold i designet, og det virker meget godt. Dette er ikke et konventionelt "smukt design", men det leverer præcis, hvad det skal.
Kasulo
Kasulo 's Navigering er ikke frygtelig svært at finde ud af, men den gennemsnitlige bruger kan ikke vide præcis hvad man skal gøre, når man ankommer på stedet. Efter det første klik bliver alting imidlertid klart.
Brugeren navigerer porteføljestykker i 3-D-stil, og de nyeste elementer vises nærmest begyndelsen. Brug af musehjulet er endnu mere sjovt.
Marcio Kogan
Marcio Kogan s site er et andet eksempel på stor navigation, der ikke umiddelbart er indlysende. Undervisningen "Træk mig" er svært at modstå, og når brugeren gør det, er de på vej til at krydse porteføljen. Forhåndsvisning af musen er en lille detalje, men virkelig imponerende.
Ceranco
Hvis en kunde skulle bede en designer om at gøre deres site i 3-D, som et første person skydespil, ville de fleste designere stille grine til sig selv, tage et dybt indånding og derefter langsomt forklare hvorfor det ville være en dårlig idé .
Mens hjemmesiden for Ceranco er ikke ligefrem en 3-D shooter, det kunne let forveksles med en slags indie computerspil. Sites som dette er gode til engagerende brugere. Mens den lange belastningstid og den dårlige søgemaskineoptimering gør dette mindre end ideel til de fleste projekter, er det absolut værd at tænke igen.
Regel # 6: Brug forskellige farver til tekst og baggrund
Denne regel er måske ikke skrevet overalt, men mange rookies er så bange for at gøre tekst ulæselige, at de ikke overvejer at bruge samme basisfarve til både baggrunden og skrifttypen selv. Du kan følge nogle enkle teknikker for at få de samme farver til at fungere.
Linksys
Det Linksys site er pænt på grund af, hvordan det har en blå for alle sine links, selv om baggrundsfarven er forskellige nuancer af blå. Mens en risiko og måske ikke den største farvebeslutning, det virker.
Brad Colbow
Brad Colbow's design ligner Linksys 'på grund af den blå tekst på blå baggrund. Blå på blå er svært at trække af pænt, især med så mange forskellige blues på hele stedet.
Powerset
Hidtil i dette afsnit har vi kun set blå websites, fordi blå tekst er sværest for det menneskelige øje at læse, og så læselig blå type er altid imponerende. Hvis en teksteffekt virker i blå, vil det højst sandsynligt fungere i en hvilken som helst farve.
Powerset bruger en letterpress stil til dens skrifttype til at skabe en 3-D effekt, der effektivt adskiller teksten fra baggrunden.
Kunstner I Design
Kunstner I Design har ikke kun grøn tekst på en grøn baggrund og gul / beige tekst på en gul baggrund, men har tekst direkte oven på et billede.
Mens nogle individuelle bogstaver kan være svære at læse, forbliver ordene som helhed læselige. Denne type effekt bør næsten altid være et centralt stadium i et design.
Horacio Bella
Horacio Bella bruger en anden 3-D effekt på sin portefølje. I dette tilfælde ser bogstaverne ud til at springe frem i stedet for at blive bukket indad. Uden denne effekt ville læsbarheden have været stærkt reduceret. En anden god effekt, der bruges her, er den stramme bogstavning af bogstaver, hvilket yderligere forbedrer læsbarheden.
Regel nr. 7: Sæt ikke animation i vejen for dit indhold
Alvorligt, ikke pop op små Flash-annoncer lige hvor brugeren læser. Det samme gælder for de undersøgelseskasser, der vises, når brugeren er midt i en sætning. Brugere kan ikke lide at blive distraheret, når de er halvvejs gennem en sætning. Med mindre…
Det er virkelig svært at ikke blive forvirret af den lille edderkop på ABA s websted. Designet er rent, og selv om edderkoppen er en distraktion, er det okay. Indtil videre er dette websted den eneste undtagelse fra reglen.
Regel nr. 8: Hold dig til web-sikre skrifttyper
Selv om skriftsygeudskiftningsteknikker stadig er unge, er de allerede i gang med et stort skænk. sIFR var den første og for nylig cufon og Typefasce.js er opstået.
Diseñorama
På den Diseñorama websted, den røde "Recientemente" -tekst er valgbar. En ulempe er, at hvis webstedet ikke indlæses øjeblikkeligt, vil brugeren se den oprindelige almindelige skrifttype kort.
En anden ulempe er, at hvis brugeren enten har JavaScript eller Flash deaktiveret, ville de kun se den oprindelige skrifttype. Alt taget i betragtning er det stadig ret cool. Forhåbentlig er det et eksempel på, hvad der skal komme i de kommende år.
Cactuslab
Cactuslab bruger også sIFR til de blå underoverskrifter (f.eks. "Winter Work"). Selv om sIFR er den mest komplicerede af skrifttypeskiftningsteknikkerne, kan teksten kopieres og indsættes, hvilket giver den en stor fordel i forhold til de to andre teknikker.
Regel nr. 9: Har ikke en splash / destinationsside
Mange designere har haft den samme gamle diskussion med deres kunder om, hvorfor en stænkside ikke er en god idé. Google har tendens til at rangere sådanne sider lavere, og de bremser brugeren fra at få det indhold, de er efter. Men de kan være utroligt smukke og inspirerende, hvis de gøres rigtigt.
Gloss Postproduktion
Formålet med porteføljeprøven, der vises på stænksiden af Gloss Postproduktion s hjemmeside er at fremkalde en følelsesmæssig reaktion fra brugeren.
Ved hvert besøg er et tilfældigt billede fra porteføljen indlæst. Ved at klikke på billedet skaleres det ned og sætter det på plads blandt de øvrige portefølje stykker på hjemmesiden. Skalering og bevægelse effekten giver videreførelse og hjælper med at overføre brugerens følelser til resten af virksomhedens arbejde.
Issa London
Når et websted er færdigt færdigt i Flash, kan indlæsningsbjælken fungere som en stænkside. Når en bruger ser en indlæsningsbjælke, lukker de enten siden og går et andet sted eller skifter til en anden fane og gennemsøger andre steder, mens de venter.
Når siden er indlæst, er det bedst at vente på, at brugeren vender tilbage før opstart. I Issa London s port er porten en perfekt metafor for at sige, at webstedet er klar og brugeren kan komme ind.
Når brugeren klikker på porten, åbnes porten, og forskellige illustrerede modeller vises. Brug af porten på stænksiden er en god designidee, fordi brugeren føler sig engageret ved indtastning.
Regel nr. 10: Brug ikke tabeller
Enhver webdesigner, der bruger tabeller i deres designs, bliver straks kaldt en rookie af erfarne designere. Tabeller viser ikke det samme i alle browsere, og de kan få kildekoden til at se rodet ud, men i det mindste ved du hvad du får med dem. Her er nogle eksempler på design, der indeholder tabeller.
Denne tabel er lidt svært at se, men er gemt i der mellem de to stole. Det er et dejligt lille sidebord, men desværre bidrager det ikke meget til dette websteds design.
Tabeller er måde i baggrunden for dette design på Arbejde på spil , men de holder arbejdstagerne laptops og andre ting inden for rækkevidde. Uden disse tabeller ville rummet føle sig meget emptier, og baggrundsbilledet ville ikke have samme effekt.
Selvom dette design hovedsagelig har stole, vises et dejligt lille bord øverst til højre på miniaturebilledet. Det ser ud som om en krukke sidder på den.
Så vidt design med tabeller går, er dette en af de bedste. Med to tabeller i denne Flash-animation giver designet dem meget opmærksomhed. Dette websted skal være på hver designerens liste over flotte design, der bruger tabeller.
Bryde reglerne!
At bryde reglerne er okay, når et design kræver det. Mange af de designvalg, der blev gennemgået her, ville ikke blive betragtet af den gennemsnitlige designer. Dette adskiller store designere fra de gennemsnitlige.
De modige nok til at gå imod det, de har været undervist, skiller sig altid ud.
Skrevet udelukkende til WDD bt Eli Penner. Han driver sin egen hjemmeside på SleepyHero.com
Bryder du nogen regler i dine webdesign? Hvorfor eller hvorfor ikke? Del venligst dine synspunkter med os ...