Golden Rules for Effective Website Design

8/18/2019 Golden Rules for Effective Website Design

1/9

Golden Rules for Effective Website Design

Munteanu Teodora

E.A.A

INFORMATIC AND ECOMMERCE


2/9

1.Introduction

“Design is a plan for arranging elements in such a way as best to accomplish a particular

purpose.” – Charles Eames

Das!boards are often created on"t!e"fl# $it! data being added si%&l# because t!ere is so%e

$!ite s&ace not being used. Different &eo&le in t!e co%&an# as' for different data to be

dis&la#ed and soon t!e das!board beco%es !ard to read and full of %eaningless non"related

infor%ation. W!en t!is !a&&ens( t!e das!board is no longer useful. )efore $e tal' about rules

lets sa# $!at t!e $ebsite s!ould be for% of.

Design with real content

)efore a &encil !as been &ic'ed u&( or *!otos!o& !as been o&ened( t!ere needs to be a

content strateg# in &lace. W!et!er t!e out&ut of t!at is t!e final content $!ic! $ill be used in

t!e live site or not( #ou need a good idea of t!e content $!ic! $ill be used in t!e final site.

W!at is t!e &oint in designing so%et!ing $!en #ou don+t 'no$ $!at content $ill be used,

Once #ou !ave t!e content( #ou can start to build content reference $irefra%es. T!is

referencing $!ere eac! &iece of content $ill sit.T!is tec!ni-ue is ideal for s!o$ing t!e basic

la#out of #our %ain te%&lates. ou can s!o$ $!ere t!e navigation( sub"navigation( footer and

secondar# %odules $ill sit around t!e %ain bod# of t!e &age. Wit!out getting into an# level

of detail( #ou are designing t!e fra%e$or' into $!ic! #ou $ill la#er detail later do$n t!e

line.T!is is t!e ti%e in t!e &rocess t!at #ou s!ould start to t!in' about #our res&onsive

brea'&oints. Ta'ing t!e content $!ic! #ou !ave received fro% t!e content strateg#( #ou can

build a si%&le one"colu%n la#out for %obile devices. T!is is best done in t!e bro$ser( using

basic /TM0( but %ore on t!at later.

W!at is t!e %ost i%&ortant &iece of t!e infor%ation on t!e &age,

W!ere s!ould t!e %ain CTA sit,

Does reading t!e content fro% to&"to"botto% %a'es sense,

Design 'in-browser'

Anot!er 'e# consideration for RWD1 electronic &erfor%ance su&&ort s#ste%s2 is to

ditc! t!e flat visuals and *!otos!o& co%&s. T!e# confuse t!e &rocess too %uc! b# creating

t!is idealistic vie$ of !o$ t!e site $ould loo' at %ulti&le s&ecific bro$ser $idt!s.)ut t!e#

rarel# end u& t!at $a#. T!e final build nearl# al$a#s loo's different. W!et!er its t!e &adding

or s&acing around ele%ents( t!e $a# in $!ic! t!e t#&e is rendered or t!e -ualit# of t!e

i%ager#( t!e final out&ut rarel# loo's as good as t!e visuals t!e client signed off earlier in t!e

&ro3ect.T!e &roble% $it! t!e visuals is t!at t!e# loo' too good. T!e i%ages are cris&( t!e

t#&ogra&!# is aliased and s%oot!( t!e use of dro& s!ado$s and blend %odes %a'e t!e design

loo' li'e a $or' of art.

Develop a pattern library

https://econsultancy.com/blog/63139-six-useful-case-studies-on-where-to-place-your-cta-to-maximise-conversionshttps://en.wikipedia.org/wiki/Electronic_performance_support_systemshttps://en.wikipedia.org/wiki/Electronic_performance_support_systemshttps://econsultancy.com/blog/63139-six-useful-case-studies-on-where-to-place-your-cta-to-maximise-conversions


3/9

One of t!e 'e# out&uts to nearl# all of t!e RWD &ro3ects I !ave $or'ed on is a st#le

guide. T!ese $ould include 'e# st#les for t!e &ro3ect and interactive states of all %odules. It

$ould even include a bit in t!ere about t!e res&onsive fra%e$or'.)ut t!ere+s a ne$ breed of

beast evolving !ere( t!at of t!e &attern librar#. T!is is $!ere #ou $ould define eac! of t!e

co%%on 45 &atterns used t!roug!out #our site( revealing notes and code sni&&ets along t!e

$a#.No$ I $ould nor%all# &ut t!ese toget!er in Fire$or's( using s#%bols and st#les for

co%%on co%&onents and %odules. )ut for a res&onsive design #ou $ould need to illustrate

!o$ eac! %odule $ould ada&t bet$een t!e brea'&oints #ou !ave defined.

Make it universally usable

T!e t!ing about designing a res&onsive $ebsite is t!at #ou cannot &redict eac! user+s

e6&erience( es&eciall# $!en it co%es to t!e %obile e6&erience.T!ere are literall# !undreds of

different &ossible scenarios of !o$ a user could be using #our $ebsite. T!is co%es do$n to

t!e nu%ber of s%art&!ones and tablets out t!ere $it! t!eir var#ing screen si7es( resolutionsand in&ut t#&es. T!e# could even be using t!eir televisions.our design is going to !ave to

totall# universal and ada&t to $!atever surroundings it is &laced./ere are a fe$ little !ints and

ti&s I li'e to 'ee& in %ind $!en designing res&onsive e6&eriences.

Keep performance in mind

We can never &redict $!o t!e ne6t user of our $ebsite $ill be( $!at device t!e# $ill

be using and on $!at connection. T!at is $!# $e need to design our res&onsive $ebsites $it!

&erfor%ance in %ind.Nobod# li'es to $ait around( es&eciall# on t!e $eb. If #our $eb site

doesn+t load $it!in a fe$ seconds( #ou+ve 3ust lost #our user. T!e#+ve alread# %oved

on.I%&roving t!e &erfor%ance and reliabilit# of #our site !el&s build t!e user+s trust. If t!e#

!ave a good e6&erience and #our site loo's good( t!e#+re bound to return. T!e 'e# !ere is to

'ee& #our $eb &ages as lig!t$eig!t as &ossible.Over 89: of t!e file si7e of %ost $eb &ages

are do$n to i%ages alone. T!e rest of t!e file si7e is %ade u& of scri&ts( st#le s!eets and ot!er

%edia t#&es.No$ t!e easiest $a# to bring #our file si7es do$n is to e6&ort t!e% out for t!e

$eb fro% #our c!osen gra&!ics a&&lication. )ut t!is isn+t enoug!. Es&eciall# if #ou use *NG

files $it! trans&arenc#.Websites suc! as Tin#*NG !el& reduce t!e $eig!t of #our files b#

stri&&ing out additional data and reducing t!e nu%ber of colours used in t!e i%age. ites li'e

t!ese are a godsend and s!ould be an essential &art of #our $eb design tool'it.

2.Eective Web Design rinciple

2.!. "isual #ierarchy

-uea'# $!eels get t!e grease and &ro%inent visuals get t!e attention. ;isual !ierarc!# is one

of t!e %ost i%&ortant &rinci&les be!ind good $eb design. It


4/9

Wit!out 'no$ing ANT/ING about t!ese circles( #ou $ere easil# able to ran' t!e%. T!at9 ite%s( are all of t!e% e-uall# i%&ortant, W!ere do #ou

$ant t!e user to clic', Ma'e i%&ortant lin's %ore &ro%inent.

2.2. Divine roportions

Golden ratio is a %agical nu%ber >.8>? 1 2 t!at %a'es all t!ings &ro&ortioned to it

aest!eticall# &leasing 1or so it is believed2.T!en t!ere is also t!e Fibonacci se-uence $!ere

eac! ter% is defined as t!e su% of t!e t$o &revious ter%s= 9( >( >( @( ( B( ?( >( @> and so on.

T!e interesting t!ing is t!at $e !ave t$o see%ingl# unrelated to&ics &roducing t!e sa%e e6act

nu%ber./ere


5/9

Fitt


6/9

Notice !o$ #ou could see t!e dog $it!out focusing on eac! blac' s&ot t!at t!e dog consists

of,T!e 'e# ta'ea$a# !ere is t!at &eo&le see t!e $!ole before t!e# see t!e &arts. *eo&le

al$a#s see t!e $!ole of #our $ebsite first( before t!e# distinguis! t!e !eader( %enu( footer

and so on. As one of t!e founders of gestaltis% urt off'a said= the whole exists

independently from the parts.

2.. White space and clean design

W!ite s&ace 1also called negative s&ace


7/9

@. trategic J E6ecutive

. Anal#tical

O,ertionl Dsbords "T!ese das!boards dis&la# data t!at facilitate t!e o&erational side of

a business. For e6a%&le( in a business $it! a $ebsite( it


8/9

ales Mar'eting

Finance 1Actuals and forecasts2

*eo&le

Often t!e %ost i%&ortant real"estate on a das!board 1to& left !and corner2 is reserved for a

co%&an# logo or a navigation tool. T!is is not good das!board &ractice as t!e &art of t!e

screen is t!e %ost i%&ortant &art of #our das!board 1t!is is because %ost $estern languages

read fro% to& to botto% and fro% left to rig!t " !ence our e#e $ill start it


9/9

das!board %a# onl# need 8 nu%bers( $!ereas an O&erational das!board %a# need u&$ards

of @92 T!ere is no !ard and fast rule to follo$ !ere( e6ce&t ensuring t!at ever#t!ing #ou

dis&la# is relevant and %eaningful to t!e audience. Do not add a gra&! or te6t si%&l# because

#ou can.

RULE 7 - HOW O*!E" DOE& !HE DA!A REALL "EED !O +E RE*RE&HED

Ensuring t!at #our das!board data is being refres!ed at t!e rig!t intervals saves ti%e during

develo&%ent 1$!# go t!roug! t!e &ain of sourcing real"ti%e data( $!en all #ou need is a

$ee'l# feed2 and can ensure o&ti%al &erfor%ance once t!e das!board is live.

E6a%&les of refres! rates on das!boards include=

Real"ti%e 1or near real"ti%e2

Dail#( $ee'l#( %ont!l#

As a rule of t!u%b o&erational das!board

Documents

Golden Rules for Effective Website Design