OUCTUS TECHNOLOGY
WEB DESIGN ANDDEVELOPMEN T
TOPICS: 1. I ntroduction to Web Design 2 .W e b Tr e n d s 3 . B a s i c C S S Wo r k s h o p BonusTopic: DoingBusinesswithWebDevel opment
Whatiswebdesign?
DESIGN 1
2
3
C o lect
I mplement
Ap ly design principles
ideas
these ideas
WEBDESIGN Folowsthesameproces indesign
Presentt hedesignthrough webpages
Createanefectivewebdesign byapplyingkeyvisualelements
ELEMENT 1 :
LAYOUT Maintain balance, consistency and the i n t e g r i t yo ft h e d e s i g n .
ELEMENT 2 :
COLOR Colorshouldrepresentyourpersonality o r t h e b ra n d o fa n o rga n i za ti o n .
ELEMENT 3 :
GRAPHIC S
L o go s , i m age s , a nd grap h i c st h atca n hel penha nceyo urde si gn. M akesureto placet hem s t ra t e g i c a l y. U s e g ra p h i c sw i s e l y !
ELEMENT 4 :
FONTS Typographycanenhanceyourdesign… w h e n u s e d w i s e l y.
ELEMENT 5 :
CONTEN T
S h o u l d b e u s ef u l a n d re l eva nt . Opti mizeforsearchengines.
Is your websit e userfriendly?
USER-FRIENDLYDESIGNELEMENT1:
NAVIGATION
Don’tmakethem t h i n k ! C onsider how users wi l navigate t hro ughyo ur websi te . Use simple HT ML or J ava S c r i p t m e n u s .
USER-FRIENDLYDESIGNELEMENT2:
COMPATIBILITY Designyourwebsitesthatperform w e l indiferentbrowsers.
USER-FRIENDLYDESIGNELEMENT4:
EASYACCESSIBILITY Yo u r w e b s i te s h o u l d b e a c c e s i b l e t o everyone including blind, disabled or the e l d e r l y. U s e r e a l fo n t s , n o ti m a g e s .
USER-FRIENDLYDESIGNELEMENT5:
WEL-FORMATTEDCONTENT Organizethefl owofi nformati on.Plan yourwebsite’ssecti onsandcategories c a r e f u l y. Useheadings,sub-headings,paragraphs, b u l e t s o r l i s t s c o r e c t l y.
Keep yourself updated by knowingthediferent webdesigntrends.
WEBDESIGNTREND#1:
RESPONSIVEWE B
• T h e i d e a i st o c re a te w e b l ayo u t st h a ta re co m p ati b l ew i t h a ny fo r m s o fdev i c e s: – D e s kto p – Laptop – SmartPhones – Ta b l e t s
WEBDESIGNTREND#2:
FIXEDHEADER BA RS
Worksbestwithone-pagelayoutsand l ayo u t s w i t h l o n g p a g e s .
T h i st re n d h a s b e e n a ro u n d fo ra w h i l e but now we are seeing this in full force.
WEBDESIGNTREND#3:
LARGEPHOTO BACKGROUND S
U s e yo u r b e st p h o t o s o rg ra p h i c designs as the main back ground photo ofyourwebsite.
WEBDESIGNTREND#4:
TYPOGRAPH Y
M ostwebsi tes nowu sem u lti pl efo nts, makingthepageeasiertoreadand m o re att ra c ti ve . M i xa n d m a tc h fo n t s w i s e l y !
WEBDESIGNTREND#5:
FLATDESIGN It ’saboutkeepingitsimple,clean,and m o d e r n ke y wo rd st h a t m o stc l i e n t s s a y.
WEBDESIGNTREND#6:
INFOGRAPHIC S
I n fo g ra p h i c s p r e s e n t a l o t o f i n fo r m a ti o n i n s u c h a s m a l s p a c e . Eye-catching.Entertaining. N o t b o r i n g . N o tt e x t h e a v y.
WEBDESIGNTREND#7:
SINGLEPAGEWEBSITE T h i s h a s b e n a t r e n d f o r a l o n g ti m e . Overtheyears,developershavecreated d i f e re ntt e c h n i qu e sfo rs in g l e pa ge concepts. Yo u ca n c re ate a n e nti re we b s i te u s i n g j u st onepage.
WEBDESIGNTREND#8:
PARAL A X
Thisisaspecialscrollinge fectusing Ja vaS cript wherein the background images moveslowlythanforegroundimages creating an animation or3Dfel.
Thank you! Address: C-246, Sector 63, Noida India 201301. Phone: (+91)-9599323090 Skype: ouctus Email: info@ouctus.com Web: www.ouctus.com Sales Information Phone: (+91)-9599577711 Email: sales@ouctus.com