Key web design tips you will find beneficial

Page 1

KE Y

WE B DE S I GN T I P S YOUWI LL

F I NDBENE F I CI AL


KEYW EBDESI GN TI PSYOU W I LLFI ND BENEFI CI AL Thedes i gnofy ourwebs i t edet er mi nesi t smar k et i ngpot ent i alt oagr eatex t ent .I nt hedi gi t i z ed i nf r as t r uc t ur eofbus i nes s ,c ompet i t i oni nt hec y ber s pac ei shi ghamonggener i cbr ands .You needt os t andoutwi t hy ourwebs i t ei nt hi sc ompet i t i v ec l ut t er .Ev i dent l y ,mos toft hec ompani es s eekwebdes i gnanddev el opments er v i c esf r om ex per t s .Awel l des i gnedwebs i t egoesal ong wayi nmoul di ngt hewayy oumar k ety ourpr oduc t s .I nf ac t ,webs i t eshav et ur nedi nt opower f ul t ool sf ormar k et i ngi nt hev i r t uals pac e.Av i s ual l yappeal i ngwebs i t ec anat t r ac ty ourc us t omer s andengaget hem f oral ongers pan.


Her ear ecer t ai nWEBDESI GNTI PSANDTRI CKSt hatyouwi l lf i ndhandy . CODEKI TFORBROWSERRELOADI NG Whi l eus i ngCodek i tf orr el oadi ngbr ows er s ,bus i nes sowner sar eabl et ov i ewt hec hangesi nt he br ows er si ns t ant l y .Youneednotr el oadi tagai nandi ts i mpl i f i est hepr oc es s .Codek i ti ses s ent i al ,par t i c ul ar l yi fy ouar eus i ngMac .As mal lc os ti si nv ol v edi nt hepr oc es sandi twi l lhel py ou t or ef r es ht hebr ows erf as t .

APPLYI NG GLOBALCHANGES Appl y i nggl obal c hangesc anhel ppr of es s i onal sf r om al l domai nsoft hei ndus t r yi ns t r engt heni ng t hei rwebs i t es .Thewebs i t edes i gni ngpr oc es swi l lgetaboos t ,wheny ouadoptt hi ss t r at egyat t heear l yphas eoft hedes i gnpr oc es s .Thewi l dc ar dCSSr ul ewor k soutwel l i nt hes ec as esand f ort hes el ec t or ,youc anus eanas t er i s k .


SETTI NG GARI SHOUTLI NES Theout l i ness houl dbes eti ngar i s hc ol our s .Shadesl i k er ed,bl ue,gr eenandy el l ow wor kout wel li nt hes ec as es .Thi swi l lal l owy out oi ns t ant l yv i ewt her ul est hatar eappl i edt ot hec ont ent y ouar el ook i ngat .

CHARACTERCOUNT Chec koutt hec har ac t erc ountperl i neswheny oudes i gny ourwebs i t e.Onanav er age,4575 c har ac t er si neac hl i nemak ei ts ui t abl ef orc omf or t abl er eadi ng.I nr es pons i v eandf l ui ddes i gns , y ous houl dpl ac eadummyl i neoft ex tont hepageal ongwi t hanas t er i s k ,wi t h45c har ac t er s . Wi t hanot heras t er i s k ,t hec har ac t erc ounts houl dbe75.Nowr es i z et hem t ov i ewt hes i z et hat c anbec omf or t abl yr ead.

I NTEGRATI NG FI TVI DSWHI LEEMBALMI NG VI DEOS Wi t ht hei nc ept i onofHTML5,v i deoembal mi nghasbec omes i mpl i f i ed.Howev er ,des i gner sf ac e apr obl em i nr es i z i ngt hev i deor es pons i v el yandens ur i ngappr opr i at er es i z i ngdegr adesf or Fl as h,i nc as ei tdoesnots uppor tHTML5embeddi ng.Fi t Vi ds ,apopul arj Quer ypl ugi n,c aneas e upt hepr oc es s .


USESMUSHI TFORREDUCI NG I MAGESI ZE Youc anel i mi nat eunnec es s ar yby t esf r om y ouri magesbyus i ngSmus hi t . Theopt i mi z at i ont ec hni quesar ebenef i c i ali nt hes ec as es ,asopt i mi z edi mageshel pt hes i t est ol oadf as t er .They s howabet t erper f or manc eonmor edev i c es .

USE8BI TPNG I MAGESWHI LEEXPORTI NG I nc as ey ouar eex por t i ngi magesf r om Phot os hopt oPNG, y ous houl dt r yt oex por ti tasan8bi tPNG f i l e.Par t i c ul ar l y ,i f i tdoes notneed t r ans par enc y ,y ou c an i nt egr at et hi s pr oc es s .Thi swi l lnotaf f ec tt hequal i t yoft hei magei nmos t oft hec as es .Youwi l l beabl et or educ et hes i z eoft hei mage byal ar geex t ent .

USEPNGQUANTTO CONVERTI MAGES I fy ouar ewi l l i ngt omi ni mi z et hef i l es i z eandmai nt ai nt r ans par enc yatt hes amet i me,us e PNGQuantf orc onv er t i ngi mages .I nt egr at i ngt hi spr oc es s ,24/ 32bi tPNGsc anbec onv er t edt o 8bi tPNGsandy ouc anmai nt ai nt het r ans par enc yatt hes amet i me.

USI NG GUI DEGUI DE Wheny ouus ePhot os hop,y ouc anus eGui deGui de.I ti sar ow,c ol umnandmi dpoi ntpanel us ed i nt heedi t i ngs of t war e.Aswebs i t esar ebes tdes i gnedi ngr i d,y ouneedt os ett hes eupwhi l e webs i t edes i gni ng.Howev er ,i ti sat edi oust as kandy ouc aneas eupt hepr oc es sbyc r eat i ng c ust om gr i dsus i ngt hi st ool .


I NTEGRATI NGA12COLUMNGRI D I ti sr ec ommendedt oi nt egr at eagr i dt hatc anbedi v i dedby2,3and4.Us ea12c ol umngr i d, whi c ht ur nsoutt obeav er s at i l eonewhi l edes i gni ngy ourwebs i t e.Youmayc hec koutt he popul argr i dt empl at esbef or edes i gni ngt hewebs i t e.

CHOOSI NG THECOLOUR Whi l edev el opi ngawebs i t e,c hoos i ngt her i ghtc ol ourpanel pl ay sani mpor t antr ol ei ni nc r eas i ng t heappeal oft hewebs i t e.Tr youtv ar i ousc ol ours c hemes ,i deasanddes i gnsi ny ourwebs i t et o enhanc ei t sappeal .

USETYPECASTTO DESI GNTYPOGRAPHY

Enr i c hedt y pogr aphyaddst ot heel eganc eofy ourwebs i t e.Youc anus eTy pec as t ,apopul ar appus edt odev el opt het y pogr aphys eaml es s l y .Thedev el oper sc anbui l dt y pogr aphi cpal et t es andc ompar et hem eas i l yus i ngt hi ss of t war e.


USI NG TYPECASTANDCHOOSEGOOGLEFONTS Af r eev er s i onofTy pec as thasbeenr el eas edaf t erMonot y peandGoogl et eamedup,whi c hy ou c anac c es st hr oughGoogl eFont s .Des i gner sc anc hoos eanyf ontont hewebs i t ef orGoogl e Font sandgetac r os st ot heTy pec as tappbyf ol l owi ngt hel i nkt hatappear s .

FREEWEBFONTS Des i gner sc anus eFontSqui r r el t ogetf r eef ont sf ort hewebs i t e.Webdes i gner shav es t r uggl ed ov ert hey ear si nf i ndi ngt her i ghtf ontf ort hei rwebs i t e.Youc anus eFontSqui r r elt ogetf r ee webs i t ef ont sandus et hem i ny ours i t e.

USI NG DROPBOXFORCONTROLLI NG THEVERSI ON Youc anus eDr opboxPr oasas i mpl ev er s i oni ngs y s t em.I tc omeswi t hasmuc has100GBof s t or ages pac eandt hedes i gner sc andeal wi t hac c i dent al del et esmor eef f i c i ent l ywi t ht hi st ool .

APPROACH Webs i t edes i gner sof t enwhi poutt hes ket c hbookatt heout s et .Howev er ,y ouneedt oc hange t heappr oac hands l owdown.I ti snec es s ar yt oadoptanappr oac hbas edont hes c enar i o,and notont hedes i gn.Theus er ’ sgoal sneedt obees t abl i s hedf i r ml y .Youneedt oi dent i f yt hei r needsandbui l dt hedes i gnac c or di ngl y .

PLACEYOURWEBSI TEONPOSTI T I fy ourdes i gni deaf i t sonaPos t i tnot e,goahead.Des i gner swi l lgai nc l ar i t yi ndec i di ngt he s t r at egi est hatar el i k el yt owor koutwel lf ort hem.Omi tt heel ement st haty oudonotneed.Get ac r os st oar eput edwebdes i gnagenc yf ort henec es s ar ys uppor t .


NAMING THE LAYERS While designing a website, you should name the layers wisely, making them as descriptive as possible. This is what most professional companies offering web design services do. When you try to locate it later on, this will eliminate your troubles. You can find it easily whenever you want, when the layers are named systematically.

ELIMINATE UNNECESSARY LAYERS While working on Photoshop, you should eliminate the layers that are not required. It will reduce confusion and speed up the designing process. If you are willing to save the extra layers for specific purposes, archive them to keep the space clutter-free.

LABELLING THE FOLDERS Labelling the folders according to its contents simplify the designing process. You need to create separate folders for images, fonts, logos and other resources. Label them accordingly to prevent confusion in future.


MAI NTAI NACONSI STENCYWI THTHENAMES Thef i l enami ngs t r at egys houl dhav ec ons i s t enc yi ni t .Wheny ous t or et hewebs i t eel ement si n t hes ef i l es ,y ous houl dc omeupwi t hapl anabouthowy ouar egoi ngt onamet hef i l es .Bes i des , y ous houl ds t or et heol derf i l esi nar c hi v edf ol der s ,wi t hs pec i f i cnames .Thi swi l lhel py out o l oc at et hem l at eron.

SAVI NG THEWORKTO THESERVER Asy oupr oc eed,y ouneedt os av et her es our c est ot hes er v er .Ev enwheny out weakt hef i l es , y ous houl ds av et hem i nt hes er v er .Thi swi l lmak ey ourr ec entwor keas i l yav ai l abl ewhenev er y ouneedt hem.


USI NG PI NTERESTFORMOODBOARDS Pr of es s i onal webs i t edes i gner sof t enbankonPi nt er es tt oc ol l abor at ewi t ht hei rc l i ent sonmoodboar ds . Al ar ges ec t i onoft hec l i ent spr ef er smoodboar ds ,asi ti sani deal s t r at egyt ogat hert he r el ev antel ement s .Thec l i ent sc anpar t i c i pat ei nt hei ni t i aldes i gni ngpr oc es sandc omeupwi t h s pec i f i cr ec ommendat i onsr egar di ngt hedes i gn.

I NNOVATEANDWELCOMENEW CHALLENGES Oneoft hemos tef f ec t i v es t r at egi esf ors uc c es s f ulwebs i t edes i gni ngi st owel comenew c hal l engesandi nnov at ei deast oc at ert ot heneedsoft hec l i ent s .Webs i t edes i gni ngi sady nami c ar t ,anddes i gnt r endsk eeponev ol v i ng.I nc or por at i ngc r eat i v ei deaswi l l enabl ey out owel c ome newc hal l engesi nt hi sc r eat i v ear t .

You may hav e a wor d wi t ht he ex per t sf or webs i t e des i gn i deas .Ty pi c al l y ,ex per i enc ed des i gner sc r af tpower f ulwebs i t es f ort hei r c l i ent s .Wi t ht he r i ghtdes i gn el ement s and s t r at egy ,y ouc anc r af tapower f ulwebs i t et hat c an hel p y our bus i nes s ex pl or e gr eat er hor i z ons .


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.