9 Belangrike Beginsels vir Goeie Webontwerp
Webontwerp kan baie moeilik wees, aangesien dit behels 'n werkbare en prettige ontwerp, die verskaffing van inligting en die bou van 'n handelsmerk, tegnies gesond en samehangend visueel.
Voeg hierby die feit dat baie webontwerpers (myself ingesluit) selfonderrig is, dat webontwerp nog steeds nuut genoeg is om net 'n syvak in baie ontwerpagentskappe te wees, en dat die media so dikwels verander as die onderliggende tegnologie.
So vandag het ek my 9 beginsels vir good Web design. Hierdie is net my menings en ek het probeer om te skakel na meer lees oor vakke sodat jou nie net my stem hoor nie. Natuurlik, Ek het baie verwerping: reëls word gebreek, verskillende tipes ontwerp werk anders, en ek voldoen nie altyd aan my eie voorstelle nie. Lees dit asseblief soos hulle bedoel is - net 'n paar waarnemings wat ek deel ...
Vang die vallei gebruik kleurstroke om jou oog deur middel van afdelings van bo na onder te lei.
1. Voorkoms (Leiding van die Oog)
Goeie Webontwerp, miskien selfs meer as ander tipe ontwerp, gaan oor inligting. Een van die grootste gereedskap in jou arsenaal om dit te doen is hoër regte Wanneer u 'n goeie ontwerp navigeer, moet die gebruiker deur die ontwerper om die skerm gelei word. Ek noem hierdie voorrang, en dit gaan oor hoeveel visuele gewig verskillende dele van jou ontwerp het.
'N eenvoudige voorbeeld van voorrang is dat in die meeste plekke, die eerste ding wat jou sien is die logo. Dit is dikwels omdat dit groot is en ingestel is op wat in studies getoon is om die eerste plek te wees wat mense kyk (die boonste linkerkant). Hy is 'n goeie ding omdat jy waarskynlik 'n gebruiker wil hê om dadelik te weet watter webwerf hulle besigtig.
Maar voorrang moet veel verder gaan. Jou moet die gebruiker se oë deur 'n reeks stappe rig. Byvoorbeeld, jou wil dalk hê dat jou gebruiker van log/handelsmerk na 'n primêre posisionering stelling gaan, langs 'n pragtige prent (om die perseel persoonlikheid te gee), dan na die hoofliggaam teks, met navigasie en 'n sidebar wat 'n sekondêre posisie inneem. die volgorde.
Wat jou gebruikers moet sien is aan jou, web ontwerper, om uit te vind.
Om voorrang te kry, het jou baie gereedskap tot jou beskikking:
Posisie - Waar iets op 'n bladsy is, beïnvloed dit duidelik in watter volgorde die gebruiker dit sien.
Kleur - Gebruik vet en subtiele kleure is 'n eenvoudige manier om jou gebruiker te vertel waar om te kyk.
Kontras - Om anders te wees, laat dinge uitstaan, terwyl hulle dieselfde is, maak hulle sekondêr.
Grootte - Groot het voorrang bo klein (tensy alles groot is, in welke geval min kan uitstaan danksy Kontras)
Design Elemen - as daar 'n reuse pyl is wat na iets wys, raai waar die gebruiker sal kyk?
U kan meer lees oor my gedagtes oor Teenwoordigheid in die sogenaamde ou Psdtuts + poste Elements of Great Web Design - the polish. Joshua David McClurg-Genevese bespreek die beginsels good web design en design at Digital-Web. Josua het ook die langste naam ooit :-)
Marius het 'n baie skoon, baie eenvoudige webwerf met baie spasie
Toe ek die eerste keer begin ontwerp het, wou ek elke beskikbare spasie vol dinge vul. Leë spasie was verkwistend. Die feit is heeltemal die teenoorgestelde.
Spasie maak dinge duideliker. In Webontwerp is daar drie aspekte van die ruimte wat jou moet oorweeg:
Wanneer jou teks uitlê, beïnvloed die spasie tussen die lyne direk hoe leesbaar dit voorkom. Te min spasie maak dit maklik vir jou oog om van een lyn na die volgende te spoel. Te veel spasie beteken dat wanneer jou een reël teks voltooi en na die volgende gaan, jou oog kan verdwaal. So moet jou 'n gelukkige medium vind. Jou kan lynspasiëring in CSS beheer met die "lynhoogte" selector. Oor die algemeen vind ek die verstekwaarde is gewoonlik te min spasiëring. Line Spacing word tegnies bekend as leidende (uitgesproke ledding), wat voortspruit uit die proses wat drukkers gebruik het om skeidingslyne in die ou dae te skei - deur loodstawe tussen die lyne te plaas.
Oor die algemeen moet teks nooit ander elemente raak nie. Beelde, byvoorbeeld, moet nie teks raak nie, ook nie grense of tabelle nie.
Padding is die spasie tussen elemente en teks. Die eenvoudige reël hier is dat jou altyd spasie daar moet hê. Daar is natuurlik uitsonderings, veral as die teks 'n soort opskrif/grafiese is of jou naam is David Carson :-) Maar as 'n algemene reël maak dit ruimte tussen teks en die res van die wêreld dit oneindig meer leesbaar en aangenaam. .
Eerste van alles, wit spasie moet nie wit wees nie. Die term verwys bloot na leë spasie op 'n bladsy (of negatiewe ruimte soos dit soms genoem word). Wit spasie word gebruik om balans, verhouding en kontras met 'n bladsy te gee. Baie wit spasie is geneig om dinge meer elegant en luuks te laat lyk, byvoorbeeld as jou na expensive architect site, Jou sal byna altyd baie ruimte sien. As jou wil leer om witspasie doeltreffend te gebruik, gaan deur 'n tydskrif en kyk hoe advertensies uitgelê word. Advertensies vir groot handelsmerke van horlosies en motors en dies meer is geneig om baie leë spasie te gebruik wat as element van ontwerp gebruik word.
In WebDesignFromScratch is daar 'n goeie artikel genoem Web 2.0 how-to design guide, wat eenvoudige aanspreek - 'n konsep wat baie afstandverbruik maak. Daar is ook baie ander nuttige dinge daar!
Noodlebox doen 'n goeie werk om aan/af state in hul navigasie te gebruik om die gebruiker georiënteerd te hou.
Een van die mees frustrerende ervarings wat jou op 'n webwerf kan hê, is nie in staat om uit te vind waarheen om te gaan of waar jou is nie. Ek wil graag dink dat vir die meeste webontwerpers navigasie is 'n konsep wat ons daarin geslaag het om te bemeester, maar ek vind nog steeds 'n paar mooi voorbeelde daar buite. Daar is twee aspekte van navigasie om in gedagte te hou:
Navigasie - Waarheen kan jou gaan?
Daar is 'n paar commonsense reëls om hier te onthou. Knoppies om 'n webwerf te reis, moet maklik wees om te vind - na die bokant van die bladsy en maklik om te identifiseer. Hulle moet lyk soos navigasie knoppies en goed beskryf word. Die teks van 'n knoppie moet redelik duidelik wees oor waar dit jou gaan haal. Afgesien van die gesonde verstand, is dit ook belangrik om navigasie bruikbaar te maak. Byvoorbeeld, as jou 'n rollup-subkieslys het, maak seker dat iemand in die subkieslysitem kan ingaan sonder om die oorskakeling te verloor. Net soos die kleur of prentjie op die roll-up verander, is dit 'n baie goeie terugvoer vir die gebruiker.
Oriëntering - Waar is jou nou?
Daar is baie maniere waarop jy 'n gebruiker kan oriënteer sodat daar geen verskoning is om nie. In klein terreine is dit dalk net 'n kwessie van 'n groot opskrif of 'n 'af' weergawe van die toepaslike knoppie in u spyskaart. Op groter plekke, kan jou gebruik bread crumb trails, subopskrifte en werfkaarte waarvoor dit heeltemal verlore is.
Smashing Magazine het 'n seleksie van CSS-gebaseerde navigasie style wat lekker is om deur te gaan, en #3 is een van my! 'N Lys Apart het ook 'n goeie artikel oor oriëntering genoem Waar is ek?
4. Ontwerp om te Bou
Die lewe het baie makliker geword sedert webontwerpers oorgeplaas na CSS-uitlegte, maar dit is nog steeds belangrik om te dink oor hoe jou 'n webwerf gaan bou wanneer jou nog in Photoshop is. Oorweeg Dinge Soos:
Kan dit eintlik gedoen word?
Jou het dalk 'n wonderlike font vir jou liggaamsopskrif gekies, maar is dit eintlik 'n standaard HTML-font? Jou mag dalk 'n ontwerp hê wat mooi lyk, maar is 1100px breed en sal 'n horisontale scroller vir die meerderheid gebruikers tot gevolg hê. Dit is belangrik om te weet wat kan en kan nie gedoen word nie, daarom glo ek dat alle webdesigners ook sites moet opbou, ten minste soms.
Wat gebeur wanneer 'n skerm verander word?
Het jou herhaling van agtergronde nodig? Hoe gaan dit werk? Is die ontwerp gesentreer of links-gebind?
Doen jou enigiets wat tegnies moeilik is?
Selfs met CSS posisionering, is sommige dinge soos vertikale belyning nog steeds 'n bietjie pynlik en soms die beste vermy.
Kan klein veranderinge in jou ontwerp baie vereenvoudig hoe jou dit bou?
Soms kan 'n voorwerp rondom in 'n ontwerp beweeg, 'n groot verskil in hoe jou later jou CSS moet kodeer. In die besonder, wanneer elemente van 'n ontwerp oor mekaar strek, voeg dit 'n bietjie kompleksiteit by die bouwerk. So as jou ontwerp het, sê drie elemente en elke element is heeltemal geskei van mekaar, sou dit baie maklik wees om te bou. Aan die ander kant, as al drie mekaar oorvleuel, kan dit steeds maklik wees, maar sal waarskynlik 'n bietjie meer ingewikkeld wees. Jou moet 'n balans vind tussen wat goed lyk en klein veranderinge wat jou bou kan vereenvoudig.
Vir groot webwerwe, veral, kan jou dinge vereenvoudig?
Daar was 'n tyd toe ek foto knoppies vir my webwerwe gemaak het. So as daar byvoorbeeld 'n aflaai knoppie was, sou ek 'n bietjie aflaai prentjie maak. In die laaste jaar of so het ek oorgeskakel na die gebruik van CSS om my knoppies te maak en het ek nooit teruggekyk nie. Seker, dit beteken dat my knoppies nie altyd die buigsaamheid het waarvoor ek wil nie, maar die besparing in die bou tyd van die maak van dekades van klein knoppie beelde is groot.
As iemand die goeie tipe ken, is dit iLoveTypography!
Teks is die mees algemene element van ontwerp, dus dit is nie verbasend dat baie gedagtes daarin ingegaan het nie. Dit is belangrik om dinge soos:
Font Choices — Verskillende tipes lettertipes sê verskillende dinge oor 'n ontwerp. Sommige lyk modern, sommige lyk retro. Maak seker dat jou die regte gereedskap vir die werk gebruik.
Font sizes —Jare gelede was dit nuwerwets om 'n baie klein teks te hê. Gelukkig, mense begin deesdae besef dat die teks bedoel is om gelees te word, nie net gesien nie. Maak seker dat u teksgrootte konsekwent is, groot genoeg is om te lees, en proporsioneel te maak sodat die titels en onderskrifte korrek uitstaan.
Spacing — Soos hierbo bespreek, is spasie tussen lyne en weg van ander voorwerpe belangrik om te oorweeg. Jou moet ook dink oor die spasiëring tussen letters, maar op die web is dit van minder belang, aangesien jou nie soveel beheer het nie.
Line Length — Daar is geen harde en vinnige reël nie, maar oor die algemeen moet jou tekslyne nie te lank wees nie. Hoe langer hulle is, hoe moeiliker moet hulle lees. Klein kolomme teks werk baie beter (dink aan hoe 'n koerant teks uitlig).
Kleur— Een van my ergste gewoontes maak teks met lae kontras. Dit lyk goed, maar ongelukkig lees dit nie so goed nie. Tog lyk dit asof ek dit doen met elke webwerf ontwerp wat ek ooit gemaak het, tsk tsk tsk.
Paragraaf— Voordat ek begin ontwerp het, het ek geliefd om die teks in alles te regverdig. Dit het vir elkeen van my paragrawe vir lekker rande gemaak. Ongelukkig is gerechtvaardigde teks geneig om vreemde gapings tussen woorde te skep waar hulle outomaties gespasieer is. Dit is nie lekker vir jou oog wanneer jy lees nie, so hou aan die linkerkant, tensy jou 'n toorkunsteel van teks het wat perfek gebeur.
Nick La by WebDesignerWall het 'n goeie artikel oor aanlyn tipografie genaamd Typographic Contrast and Flow.
Happycog ken bruikbaarheid binne in, en hul eie webwerf is eenvoudig en maklik om te gebruik.
Web ontwerp gaan nie net oor mooi foto's nie. Met soveel inligting en interaksie wat op 'n webwerf uitgevoer word, is dit belangrik dat jou, die ontwerper, alles daarvoor moet voorsien. Dit beteken dat jou webwerf ontwerp bruikbaar is.
Ons het reeds sekere aspekte van bruikbaarheid bespreek - navigasie, voorrang en teks. Hier is drie belangriker:
Daar is sekere dinge wat mense verwag, en dit gee nie verwarring nie. As teks byvoorbeeld 'n onderstreep het, verwag jou dat dit 'n skakel is. Om anders te doen is nie goeie bruikbaarheidspraktyk nie. Seker, jou kan sommige konvensies breek, maar die meeste van jou webwerf moet presies doen wat mense verwag om dit te doen!
Dink na oor wat gebruikers eintlik sal doen
Prototipering is 'n algemene instrument wat in ontwerp gebruik word om eintlik 'n ontwerp uit te probeer. Dit word gedoen omdat u dikwels klein dinge sien wat 'n groot verskil maak wanneer u eintlik 'n ontwerp gebruik. ALA het 'n artikel wat geruime tyd genoem is Never Use a Warning When You Mean Undo, dit is 'n goeie voorbeeld van 'n klein koppelvlakontwerpbesluit wat die lewe vir die gebruiker kan suig.
Dink aan gebruikerstake
Wanneer 'n gebruiker na jou webwerf kom, wat probeer hulle eintlik doen? Lys die verskillende soorte take wat mense op 'n webwerf kan doen, hoe hulle dit sal bereik, en hoe maklik jou dit vir hulle wil maak. Dit kan beteken dat jou 'n baie algemene taak op jou tuisblad het (bv. 'Begin inkopies', 'leer oor wat ons doen', ens.) Of dit kan beteken dat jou seker maak dat iets soos 'n soekkassie is, altyd maklik is om toegang te verkry. Uiteindelik is jou webontwerp 'n hulpmiddel vir mense om te gebruik, en mense hou nie daarvan om irriterende instrumente te gebruik nie!
AListApart het lots of articles on web usability.
Elektriese pulp kan ruig lyk, maar as jou goed kyk, besef jou daar is 'n stewige rooster en dinge is eintlik almal op die regte pad.
Om dinge te hou, is net so belangrik in webontwerp soos dit in drukontwerp is. Dit is nie om te sê dat alles in 'n reguit lyn moet wees nie, maar jou moet deurgaan en probeer om dinge konsekwent op die bladsy te plaas. Aligning maak jou ontwerp meer bestel en verteerbaar, sowel as om dit meer polished te laat lyk.
Jou kan ook jou ontwerpe op 'n spesifieke rooster baseer. Ek moet erken dat ek dit nie bewustelik doen nie - alhoewel 'n webwerf soos Psdtuts + natuurlik 'n baie stewige roosterstruktuur het. Hierdie jaar het ek 'n paar baie goeie artikels oor rasterontwerp, insluitend Smashing Magazine, gesien Designing with Grid-Based Approach & A List Apart Thinking Outside The Grid. Trouens, as jou belangstel in roosterontwerp, moet jou beslis 'n gepaste naam besoek DesignByGrid.com tuis aan al die slegte dinge.
Die ExpressionEngine webwerf is siel duidelikheid. Alles is skerp en skoon.
8. Duidelikheid (Skerpte)
Om jou ontwerpe skerp en skerp te hou is belangrik Web design. En as dit duidelikheid betref, gaan dit oor pixels.
In jou CSS, sal alles perfek wees, so daar is niks om bekommerd te wees nie, maar in Photoshop is dit nie die geval nie. Om 'n skerp ontwerp te behaal moet jou:
Hou die punte van die vorm in pixels gebak. Dit kan handmatig skoonmaak vorms, lyne, en bokse behels as jou dit in Photoshop skep.
Maak seker dat enige teks geskep word met behulp van die toepaslike anti-aliasing-instellings. Ek gebruik meestal 'Sharp'.
Verseker hoë kontras sodat die grense duidelik gedefinieer word.
Oorbeklemtoon die limiet net 'n bietjie om die kontras te oordryf.
Ek het 'n bietjie meer oor duidelikheid geskryf Elements of Great Web Design - the polish. Ek het opgemerk dat drukontwerpers oorskakel na webontwerp, veral nie in pixels dink nie, maar dit is baie belangrik.
Veerle doen 'n uitstekende werk om die kleinste detail konsekwent oor die hele linie te hou.
Konsekwentheid beteken dat alles fiks is. Opskrif grootte, font seleksie, kleur, knoppie styl, afstand, ontwerp elemente, illustrasiestyl, foto seleksie, ens. Alles moet tema wees om jou ontwerp samehangend tussen bladsye en op dieselfde bladsy te maak.
Hou jou ontwerp konsekwent is om professioneel te wees. Inkonsekwentheid in 'n ontwerp is soos 'n spelfout in 'n opstel. Hulle verlaag net die persepsie van gehalte. Wat ookal jou ontwerp, hou dit konsekwent, sal dit altyd opdoen. Selfs as die ontwerp sleg is, skep ten minste 'n konsekwente, slegte ontwerp.
Die maklikste manier om konsekwentheid te behou, is om vroeë besluite te neem en daaraan te voldoen. Met 'n baie groot webwerf kan dinge egter verander in die ontwerpproses. Wanneer ek ontwerp FlashDen, Die proses het byvoorbeeld maande gevat, en uiteindelik het sommige van my idees vir knoppies en prente verander, so ek moet teruggaan en die vorige bladsye hersien om presies dieselfde te wees as die ander. Wanneer ek FlashDen ontwerp,
Om 'n goeie stel CSS style sheets te hê kan ook baie nuttig wees om 'n konsekwente ontwerp te skep. Probeer om 'n kernlabel te definieer soos <h1> en <p> op so 'n wyse dat u die standaardpas behoorlik moet maak en die naam van 'n bepaalde klas noit moet onthou nie.
ThinkVitamin Artikels How CRAP is your design? Bespreek Herhaling van die bladsy en hoe belangrik dit is. Hierdie artikel is geskryf deur Mike Rundle wat dit ontwerp het 9rules, so jou weet dit is die moeite werd om te lees!
Kry my Boek!
Geniet hierdie artikel? Ek het net 'n boek oor vryskutwerk voltooi wat jou aanlyn as 'n eBoek kan koop. Hoof om meer uit te vind How to Be a Rockstar Freelancer.