Basiese beginsels van webontwerp & beste praktyke om beginners van enige vlak te help om 'n professionele persoon visueel te ontwerp & slanke webwerf op sigself.
Dit is deesdae moontlik vir almal om 'n webontwerper te wees. Ja, dit is 'n gewaagde stelling – maar met 'n verhoogde toeganklikheid tot open source-ontwerpsagteware soos Gimp, en met die bou van platforms vir DIY-werwe soos Wix en Weebly wat die mark oorstroom, is die lyn tussen amateur en bona fide web ontwerper het laat geword baie dunner en gevaarliker. Die interessante ding met kreatiwiteit is dat niemand vir jou kan besluit wanneer jy 'gereed' is om 'n sekere rol te vervul nie. Baie rocksterre het nooit musieklesse geneem nie; baie suksesvolle kunstenaars het nooit menslike anatomie bestudeer nie; en die meerderheid webontwerpers daarbuite het nie 'n formele graad nie. Dus, as u die webwerf van u eie onderneming geskep het, kan u dan met vrymoedigheid sê dat u 'n 'webontwerper' is? Dit is wat u moet bepaal.
Dit is moontlik vir almal om 'n webontwerper te wees met selfplatforms vir die bou van 'n webwerf.
As u 'n aanhanger van hierdie blog het, het u waarskynlik reeds die besluit geneem om u webwerf self te bou. Alhoewel u heeltemal oorweldig voel deur die geweldige inligting wat u oor webontwikkeling het, kan u gerus wees met die wete dat sake-eienaars met selfs 'n baie min ontwerpervaring webwerwe kan skep wat professioneel lyk. Dit begin alles met 'n paar grondbeginsels wat, indien dit korrek toegepas word, kilometers kan loop in die geloofwaardigheid van die ontwerp en gebruikerservaring van u webwerf..
1 Wat hierdie gids is (en wat dit nie is nie)
2 Die basiese beginsels van webontwerp vir beginners
2.1 1. Sit die muis weg, haal 'n potlood op
2.2 2. Volg 'n hiërargie
2.2.1 Hou inhoud "bo die vou"
2.2.2 Gebruik 'n "held" -beeld
2.2.3 'Die vou' kan verander na gelang van die toestel
2.3 3. Tipografie is u ontwerp
2.4 4. Kleure & Kontras is van groot belang
2.5 6. Die gebruik van prente
2.5.1 Verstaan ​​lêertipes & Kompressie
2.6 6. Mobiele eerste ontwerp
2.7 7. Hou dinge in lyn
2.8 8. Hou dit eenvoudig
2.9 9. Groot oop ruimtes
Wat hierdie gids is (en wat dit nie is nie)
VINNIGE WENK: 'N Basiese kennis van HTML en CSS hou groot voordele in vir enige nuwe webontwerper. As u regtig wil werk met kodering, stel ek dit voor W3Schools om meer oor die fondament te leer.
Die basiese beginsels van webontwerp vir beginners
Laat ons daarby kom, sal ons? Hier is 'n paar van die mees bruikbare neigings en riglyne om te weet wanneer u u eerste webwerf bou:
1. Sit die muis weg, haal 'n potlood op
U webwerf bestaan ​​moontlik reeds as 'n pragtige, volledige entiteit in u gedagtes – daarom spring u dadelik in Photoshop (of erger, 'n blaaier en HTML) om dit uit te beplan. Whoa, whoa – koel jou jets vir 'n sekonde af! Moenie die wa voor die perd sit nie. Haal eers 'n potlood en papierstuk uit en begin om jou idees in iets tasbaars te plaas. Dit is 'n belangrike fase om die struktuur van u webwerf te karteer deur niks meer te gebruik as reghoeke, krabbels en geïnspireerde idees (dikwels genoem wireframing). Dinge kan op hierdie punt baie grof wees; niemand sien dit behalwe jy nie.
Met 'n webwerf-draadraamwerk kan u 'n uitleg en struktuur vir u webwerf ontwikkel, terwyl u gebruikerservaring (UX) verbeter en tyd bespaar.
Dit is in hierdie stadium baie makliker om uitlegte wat u oorspronklik gedink het, sou verander, maar nou ontdek dat dit rommel en verwarrend op papier is. Dit sal u ure se frustrasie bespaar, anders as om dieselfde ontdekking te maak sodra die webwerf gekodeer is en in 'n blaaier. Boonop help dit aansienlik om 'n webblad te bou as u 'n verwysing in die hand het om eerder te konsulteer as om blindelings te gaan.
2. Volg 'n hiërargie
Dit is 'n feit dat die meeste webblaaiers geneig is om slegs webblaaie te skandeer eerder as om tyd te neem om alles te lees. U moet hiervoor gereed wees plaas die belangrikste inhoud eerste. Dit beteken dat 'n gebruiker die belangrikste inligting op 'n bladsy op een skerm op die eerste skerm moet kan verteer sonder om in te zoem of te blaai. Dit is natuurlik baie makliker gesê as gedaan. Hier is 'n paar wenke om u te help om die belangrikheid van hierdie ontwerpteorie beter te begryp:
Hou inhoud "bo die vou"
Ons noem dat die aanvanklike skerm van gelaaide inhoud "die vou" is – en alles onder dit wat gekrol moet word om gesien te word, word as sekondêr beskou. Oor die algemeen sit u belangrikste inligting "bo die vou". Die belangrikste ding om te bereik binne hierdie gebied is om 'n gebruiker te lok om aksie te neem of die aansporing te genereer om verder af te blaai.
Gebruik 'n "held" -beeld
'N Algemene tendens in webontwerp is deesdae om hierdie' bokant die vou'-area te vul met wat 'n 'held'-beeld of banier genoem word. Dit is 'n volledige agtergrondprent met 'n baie bondige en toonaangewende teks wat gewoonlik met 'n oproep-tot-aksie-knoppie gepaard is. Dit is moontlik dat die hele doel van die webbladsy binne hierdie banniergebied kon voorkom, alhoewel dit ook 'n wonderlike basis vorm vir die volgende inhoud.
'Die vou' kan verander na gelang van die toestel
Hier is waar dinge ingewikkeld raak – en hoekom u uself nie moet oorlaai nie en probeer om alles bo hierdie magiese lyn te pas. Afhangend van die gebruiker se toestel, kan die skermafmetings geweldig verskil. 'N 5K-skerm wat met 'n kakebeen sak, het 'n vertikale resolusie van 2880 pixels, terwyl 'n iPhone 5 minder as die helfte hiervan het. Dit beteken dat mobiele gebruikers net nie soveel inhoud in hul vaste eiendom op die skerm kan inpas nie. (Meer hieroor later.)
VINNIGE WENK: Die algemene reël is om te verseker dat die inhoud "bo die vou" binne die laagste gemene deler van die skermafmetings pas. Dit word gewoonlik aanvaar as 768 pixels van vertikale resolusie.
3. Tipografie is u ontwerp
Tensy u 'n fotografieonderneming bedryf, is teks die belangrikste element van enige webwerf, daarom is dit belangrik om hierdie deel reg te doen. Die hiërargie van u webblad is grootliks afhanklik van die tipografie wat u kies: hoe u opskrifte, subopskrifte en teksteks 'n natuurlike vloei volg en visueel onderskeidend van mekaar bly. Raadpleeg ons gids vir beste praktyke vir 'n uitgebreide blik op tipografie. Hier is 'n paar belangrike wegneemetes:
Sorg dat die teks is leesbaar (vermy blomagtige lettertipes!) en groot genoeg (gewoonlik ongeveer 16 px vir die liggaam).
Hou by nie meer as nie twee lettertipes– en sorg dat hulle goed aanmekaar pas!
Gee u paragrawe ruimte om tussen mekaar in te asem, en stel genoeg in topvulling of marge op u opskrifte om duidelike onderbrekings in die inhoud aan te dui.
Vermy lang reëls teks. Dit is makliker vir paragraaflyne om nie meer as net so te wees nie 15 woorde lank—En 'n bietjie minder as dié vir mobiele skerms.
serif lettertipes is gewoonlik net die beste in druk – tensy dit in groot opskrifte op die web gebruik word.
4. Kleure & Kontras is van groot belang
Ons het breedvoerig oor kleursielkunde gepraat, maar die konsep word herhaal. Die kleure wat u op u webwerf kies, speel 'n enorme rol in die manier waarop gebruikers u handelsmerk raaksien, asook hoe gemotiveerd hulle kan voel om aksie te neem (d.w.s. om dinge te koop) via u webwerf. Hoekom? Wel, elke kleur roep sekere emosies op, en óf as gevolg van die inherente aard daarvan of deur kulturele kondisionering, word hierdie kleure geassosieer met sekere soorte ondernemings. As 'n kinderspeelgoedonderneming of 'n finansiële adviseur hul hele webwerf in swart swart geverf het, sou dit die verkeerde seine absoluut na hul beoogde gehore stuur. Aan die oorkant sou 'n helder oranje of 'n aangename blou onderskeidelik die perfekte toon en bewustheid vir hul kliënte verkry.
Blou is 'n kleur wat vertroue en vertroue ontlok, 'n gewilde keuse vir finansieringsverwante webwerwe.
As u die kleure van u handelsmerk reeds vasgestel het, gebruik dan die op u webwerf. Dit is egter die beste om dit by te hou hoogstens drie kleure vir u webwerf; soos lettertipes, wil u dit nie hier te veel oordoen nie, of u webwerf kan met veelvuldige persoonlikheidsversteuring eindig. Pasop ook vir te veel kleurspatsels op u webblad; ons oë word soos heuningvalle na hulle getrek, en dit kan die natuurlike vloei van u inhoud onderbreek. Gebruik slegs kleur as dit die nodigste is, soos vir skakels of knoppies.
Oor die onderwerp van teenstelling, dit is noodsaaklik dat u teks uit die agtergrond staan. As u liggrys, geel of groen vir u lettertipes gebruik, sal dit amper sekerlik sigbaar word op die bladsy. Swart op 'n wit agtergrond is die grootste kombinasie van kontras en is gewoonlik waaraan jy moet vashou.
VINNIGE WENK: Dit is die beste om te vermy volle versadiging met kleure op die web. Suiwer rooi (hex-waarde # ff0000) is 'n bietjie te ponserig vir die oë. Net so reageer suiwer swart (# 000000) vir lettertipes te sterk vir die oë, terwyl 'n effens minder swart (# 333333) dit makliker maak om te lees.
U wil ook hê dat u teks teen agtergrondprente moet verskyn. As u baie besige foto's gebruik, kan u dit van die teks aflei, en gebruik dus foto's wat minder gedetailleerd is, of gebruik 'n oorleg van byvoorbeeld rgba (51,51,51,0,5) om die prentjie onder die teks te versag..
Gebruik 'n oorleg agter teks om dit te help om van die agtergrond af te spring.
Kontras speel ook 'n rol in die manier waarop gebruikers na sekere sleutelelemente van u webwerf gevestig word. U belangrikste knoppies vir oproep tot aksie moet die oog gryp deur kontrasterende kleure te gebruik. 'N Blou "koop nou!" knoppie verloor sy dringendheid en die moeite werd as dit ingesluk word deur 'n webwerf wat oral blou gebruik – maar 'n rooi knoppie op dieselfde bladsy gryp 'n gebruiker se aandag deur te skree: "Haai! Klik my! "
6. Die gebruik van prente
Die keuse van die regte beelde om op u webwerf te gebruik, kom deels tot u eie artistieke aanleg, maar daar moet ook intellektuele oorwegings geneem word wat sal help met u keuringsproses. Eerstens moet u vermy dat u u webwerf met vreemde foto's versier net omdat dit mooi lyk. Dink eerder aan hoe elke beeld wat u gebruik sy eie doel dien, en nog belangriker hoe dit optree inhoud. 'N Goed gekose foto kan u handelsmerk, diens, produk of gehoor baie meer effektief oordra as woorde. Gebruik foto's om u gebruikers te help om iets te verstaan, om emosie op te wek of om vertroue te skep; dit slegs om estetiese redes te gebruik, moet sekondêr wees.
Verstaan ​​lêertipes & Kompressie
Daar is 'n ekstra stap wat geneem moet word om beelde op die web te gebruik. Daardie spoggerige foto's wat jy op webwerwe soos kry Shutter en iStock kan redelik groot wees (5000+ horisontale pixels en 10+ megagrepe), wat goed is om te druk, maar dit is ongeskik vir webwerwe. Nie almal het super-vinnige veselinternet nie, dus u moet die grootte van u beelde verminder om laaityd te akkommodeer (om nie te praat nie) 40% van die besoekers sal vertrek as die webwerf langer as drie sekondes neem om te laai! Tipies, wil u elkeen van u beelde op een hou maksimum van 500 kilobyte in grootte, alhoewel u gemiddelde lêergrootte waarskynlik ongeveer moet wees 100 kilobyte.
JPEG is die standaardformaat vir foto's. Dit is 'n verliesformaat, wat beteken dat die beeldkwaliteit verlaag word wanneer dit saamgepers word. As u 'n JPEG gebruik vir 'n volledige agtergrondprent, beveel ek die horisontale resolusie aan nie minder nie as 1200px. Vir algemene doeleindes, vermy die gebruik van 'n beeld met minder as 600 px horisontale resolusie, want dit sal waarskynlik op 'n moderne skerm vertoon.
PNG is die voorkeurkeuse vir grafika of vir beelde wat benodig word deursigtigheid. Dit is 'n verlieslose formaat, wat ideaal is vir die behoud van beeldkwaliteit, maar dit kan ook die lêergroottes verhoog. Oor die algemeen sal u PNG-grafika gebruik vir illustrasies, ikone of kleiner beelde wat op die top van ander elemente gestapel kan word as gevolg van hul deursigtigheid. U sal selde 'n PNG benodig om groter as 1000 px te wees.
SVG (Skaalbare vektorgrafika) is 'n nuwer formaat wat vervang word GIF en selfs PNG in sommige gevalle. Die skoonheid van SVG is dat dit net so groot of so klein op die skerm kan wees as wat u nodig het, terwyl u perfekte helderheid en helderheid behou (en steeds 'n klein lêergrootte is). U moet dit oorweeg om SVG te gebruik vir enige logo, ikoon of vektorgrafiek op u webwerf; Aangesien hoë DPI-skerms nou alledaags word, sal die skerpte van SVG die beste beeldkwaliteit bied.
6. Mobiele eerste ontwerp
Ons het nou 'n tyd bereik waar die meeste mense aanlyninhoud met hul telefone verbruik eerder as op 'n tafelrekenaar. As gevolg hiervan is daar baie groter voorkeur in webontwerp om spesifiek aan te pas by die mobiele ervaring, wat gelei het tot die 'mobiele eerste ontwerp'-filosofie..
Dit beteken in wese dat dit die beste is om tydens u aanvanklike skets- en beplanningsfase op papier te fokus op die webwerf se mobiele uitleg. Slegs die belangrikste inhoud wat nodig is vir die werking van u webwerf word op kleiner skerms vertoon. Dit dwing u om vereenvoudig u uitleg en sny van die begin af enige afleidende elemente uit. Dink terug aan die inhoud van die bladsy bo die vou: as u eers seker maak dat al die belangrike inligting op die eerste skerm van 'n telefoon kan pas, sal u seker wees dat dit op groter skerms sal pas. Sodra u die noodsaaklike mobiele uitleg vasgespyker het, kan u versierings of groter prente vir tafelbladskerms byvoeg.
U mobiele uitleg veronderstel 'n meer vertikale ontwerp wat blaai, eerder as die wye landskap van 'n tafelblad, inspireer. As u, byvoorbeeld, u produkbladsy lys in 'n ruitenet van 3 regoor op desktops, dan sal u mobiele uitleg dit gewoonlik net as 'n enkele kolom vertoon.
Ja, dit beteken dat u basies verskillende uitlegte vir elke bladsy van u webwerf moet skep. Gelukkig moet 'n goeie webwerfbouer reageer met sjablone wat hierdie uitlegte outomaties verstel, sodat u dit net hoef te verfyn.
VINNIGE WENK: Sorg dat geen enkele element op u webwerf, veral as dit interaktief is, minder is as nie 44px by 44px in grootte. Hoekom? Dit is die kleinste waar 'n teiken kan wees waar die vinger steeds akkuraat kan tik.
7. Hou dinge in lyn
As elemente sporadies op u webwerf gelê word, is dit dikwels as gevolg van 'n belyningskwessie. Stel u u webblad voor op 'n vel grafiekpapier. Verdeel dit in eweredige kolomme deur byvoorbeeld ses reguit lyne te teken. U wil nou seker maak dat die linkerkante van u elemente versprei en in lyn is met slegs hierdie ses vertikale lyne.
8. Hou dit eenvoudig
Daar word gereeld gesê dat die beste webontwerp onopgemerk raak; dit is slegs 'n swak ontwerp wat die aandag op homself vestig. Soos vroeër genoem, is die belangrikste aspek van enige webwerf bloot die teks. As u uitmuntende tipografie kan verskaf wat aangenaam is om te lees, is die kans goed dat u nie veel meer hoef te doen nie. As u u webwerf nie te veel ontwerp nie, sal dit net 'n bietjie rommel raak en dinge bemoeilik.
Is die kassieskaduwees nodig? Die mal, versierde patrone? Die dosyne kleure? Waarskynlik nie.
9. Groot oop ruimtes
U inhoud het ruimte nodig om asem te haal. wit spasie is die heersende ontwerpkeuse vir moderne webwerwe: wye, oop ruimtes van niksheid om gebiede tussen die inhoud te versper. Dit is 'n aangenamer manier om inligting te verteer, en moedig u ook aan om oorbodige teks en beelde te verwyder om die webwerf skoon te hou.
Webontwerp kan 'n uitgestrekte veld van tegnologie wees om te leer, konsepte om te oefen, tale om te studeer en kuns om te bemeester. Slegs met ervaring sal al hierdie komponente sinvol begin raak, maar u is alreeds goed op pad deur die basiese beginsels van 'n goeie webwerf te laat begryp. Ek hoop dat hierdie gids dien as u vertrekpunt en dat dit u die vrymoedigheid gee om u webwerf in u eie hande te neem en dit op te bou op die manier waarop slegs 'n sake-eienaar die beste weet.