Yeo Shu Xian 0308455 (Leader)

Goh Yi Yan 0314826

Lee Shin Wei 0309999
Lee Joe Ann 0301658
Yong Chun Khuen 0303038
Research Topic: Layout Design Concept
(Photobucket, 2014)
Font and the spacing between letters can
impact how reader feel when reading on a
website.
(Image taken from huffpost.com, 2014)
Effects of good fonts
Higher cognitive focus
More efficient mental processes
A stronger sense of clarity
Well-designed reading environments
dont necessarily help you understand
what youre reading better, but they
Make you feel good
Feel inspired
More likely to take
action.
How we read
When we read, our eyes follow a natural pattern
called a Scan Path.
We break sentences up into scans (saccades)
and pauses (fixations).
(Image taken from medium.com, 2013)
Our eyes typically move across a page
for between 7-9 letters before needing to
pause to process what youre reading.
As you scan a sentence, no useful visual
processing is happening in your brain.
Visual processing is completely dependent
upon the information taken in when you
pause.
How to design better
websiteUsing font.
1) Choose an anchor font
Selecting a typeface for the content that is
most prevalent in your project
This will be the typeface that you base your
other font decisions on like headlines and
subheads
Serif FontsLetters with short lines coming off
the edges. Viewed as more formal and
traditional. Best suited for print.
Sans-serif FontsLetters without serifs. Viewed
as informal and playful. Best suited for digital.
(Image taken from medium.com, 2013)
When choosing a font for body text for website, its
usually best to stick with a Serif font or Sans-serif font.
An example of a website using only Serif font and Sans-serif font.
(Screenshot of medium.com, 2014)
(Image taken from
webdesignerdepot.com, 2013)
(Image taken from webdesignerdepot.com, 2013)
(Image taken from webdesignerdepot.com, 2013)
(Image taken from webdesignerdepot.com, 2013)
2) Pick a font size bigger than 12pt
As digital and screen resolutions improve,
many designers mention that 16px font is the
ideal size for website font.
(Image taken from cksource.com, 2013)
A recent study has also shown that larger font
sizes can elicit a stronger emotional connection.
A website using larger font sizes to attract the attention of reader to click into
their featured story.
(Screenshot of cnet.com, 2014)
While having a huge font over 30px most likely
wouldnt make sense, many blogs have font in
the 10px-12px range.
Yahoo Music Blog
(Screenshot of music.yahoo.com/blog, 2014)
3) Watch your line length
Line length is how far the sentences stretch
across the page.
The ideal line length should be between
about 50-75 characters.
If the line length is too short, readers rhythm
will break because their eyes must travel back
to the left of the page too often.
A line length that is too long makes it hard to
find where lines of text start and end. It can
make it difficult for reader to get to the next
line without accidentally jumping to the
wrong place.
Research shows that subconscious mind gets
a boost of energy when jumping to a new line
(as long as it doesnt happen too often) but
this energy dwindles as readers read over the
duration of the line
This line length has been shown to be
most effective in helping readers move
through their Scan Path.
Its 78 characters, about 6.5 inches.
(Image taken from medium.com, 2013)
4) Mind your spacing
Adequate spacing between letters is
important for readers to be able to move
through sentences fluidly.
The tighter the letters are together, the
harder it is for people to identify the
shapes that make up different letterforms
Heres an example from Jessica Hische of the
readability of Helvetica versus Avenir. Hische
recommends Avenir because of its more open
spacing:
(Image taken from medium.com, 2013)
The best font choices are ones
where readers do not notice
the font but the message.
LAYOUT
is the sizing, spacing, and placement of contents in design.
Features of An Effective
Website Layout
FOCUS
showing users what need to look first
Good Example : Users will first focus on the center which contains the
tagline of the company.
(Screenshot of foreverheavy.com, 2011)
Bad Example : Users wouldnt know where and what to look first.
yvettesbridalformal.com yvettesbridalformal.com
(Screenshot of arngren.net , 2004)
FLOW
Ability to create a clear path through the surface, leading the users
eye to flow smoothly for easier search of elements they need.
(Screenshot of keithcakes.com.au, 2014)
As you can see in the annotated
screenshot on left, there is a natural
reading down the page. This is great as
users are more likely to see all the
content and less likely to miss important
information.
Notice the use of images to draw the
attention of the visitor towards the
next section which can be seen in
points 2, 3, 4, 5 and 6.
The use of typography helps take the
user to the next sections as seen in 3,
7, 8 and 10.
The horizontal red lines help to define
sections creating a natural reading
order from left to right.
(Screenshot of inspectelement.com, 2009)
GROUPING
Content and elements that are related to each other are grouped
together while unrelated contents are separated.
The contents on the left is not
cluttered but the elements are
not logically grouped, so the
effect is weak.
The grouping of elements in the
contents on the right is more
logical and has a more pleasing
visual effect.
(Screenshots of webdesignerdepot.com, 2010)
Good Example: Related contents are well grouped together.
(Screenshot of theworkcycle.com, 2011)
Bad Example : Contents are scattered all over the webpage without proper
grouping of contents.
(Screenshot of arngren.net , 2011)
EMPHASIS
Different content and elements are highlighted according to their
relative importance by the size, colour contrast and placement.
Good Example : By using the colour contrast of the banner, it has highlighted
and attract users about the new collection of the brand.
(Screenshot
of iwc.com,
2010)
ALIGNMENT
Elements are arranged accordingly and orderly for easier access.
(Screenshot of webmastericons.com, 2012)
Good Example : The navigations and descriptions are properly aligned.
Some spaces are left in between to create a clean alignment.
(Screenshot of stephencaver.com, 2009)
Bad Example : The texts and contents are badly aligned. It looks jarring and
unpleasant to users eyes.
(Screenshot of siphawaii.com, 2007)
Consistency
Pages with similar content uses similar page layout in order to create
uniformity.
Good Example : The colour tones and alignment of the contents are
uniformed and consistent throughout the webpage.
(Screenshot of
arias.ca,
2010)
Good Example : The elements
of website layout design are
consistent as it uses the same
element repeatedly
throughout different pages of
website.
(Screenshots of panerabread.com, 2013 )
WHY WEBSITE LAYOUT IS IMPORTANT ?
Its the facade of the company.
It will show the brand/company identity.
Determines the kind of experience that users will
have when they pay a visit to the site.
Enhance the aesthetic of the entire group of
projects.
Help keep your visitors interested.
It can makes the website attractive even without
attractive graphics
Functional > Design
Function should always take precedence over
design.
Internet users know that they are free to
navigate away from a website that doesnt
provide useful and claimed information.
There are no definitive right or wrong ways of
approaching website layout !
Just make sure that the layout works for the site
that you are designing.
What about
Colors?
Based on the article,
A good website design determine on the choice of COLORS or else it is
either boring and plain or too bright that cause unpleasant sight for
viewers.
Colors are important!
However, appropriate usage of colors need to take into consideration.
Article :Find Out What Colors Will Cause Your Visitors to Hate You
Know your colors
well !
Before making the choices of your color.
What ?
Warm colors
Red Orange Yellow
Vivid & energetic
Tend to advance in space
Cool colors
Blue Green Purple
Impression of calm, create a
soothing impression
Neutral
Black
White
Grey
Mix & Match
with
others color
schemes.
(Warm &
Cold)
Color is a Non-verbal
Communication
Choose the right color to communicate effectively for your website design to grab
your viewers interest.
RED
ORANGE
YELLOW
GREEN
BLUE
Color of energy, passion, action and determination.
Color of social communication and optimism.
Color of the mind and the intellect- Optimistic and cheerful.
Color of balance and growth.
Color of truth and peace.
PURPLE
PINK
WHITE
BLACK
Color of imagination.
Color of unconditional love and nurturing.
Color of perfection, the most complete and pure.
Color of hidden, secretive, unknown and mystery.
Examples of good website design
(Color)
For this website, the color of black and red compromised and brings the effect strong impact
between the mixture of neutral and warm color schemes. Based on the color psychology, red
and black brings out the energy, action and hidden mysterious emotion that will keep the
viewers to stay on the site or even purchase the product.
Warm & Neutral
(Image from Onextrapixel, 2014)
Cool & Warm
For this website, it used the triadic color scheme. Good combination of warm and cold color (Purple,
orange and green) harmonies well. Purple as the domain. Viewed with fun and imaginary outlook.
(Image from Nice One, 2014)
Neutral & Warm
For this website, it focuses on the black, white and grey which are neutral scheme.
However, the yellow in the middle made a stand alone and the immediate focus of viewers eyes is on it.
Making use of the balance of color schemes to effectively attract viewers.
(Image from Smashing Hub, 2013)
Examples of bad website design
(Color)
YOU WOULD NOT WANT
TO SEE SOMETHING
LIKE THIS, RIGHT ?
( Layoutsparks, n.d.)
Penny & Juice
Colors are not harmonized, rainbow color effect is not a good choice. Bright color background
does not go well with colorful texts. Too many colors blended in one design. Visitor may lose the
focus and misleading by the colors of what this site is all about. The red and yellow should be
used adequately.
(Image from Janine C., 2013)
Pizza & Pasta
Color coordination is bland and dull. Color visualization is not appealing, one color stanza. Color
harmony needs to be consider in order to know which scheme is suitable to create a more
tempting site, for example, food.
(Image from Markus Design Works, 2014)
L.A. Eyeworks
Background should avoid bright series of color, it may irritate the viewers eyes.
The font color, white and black are overshadowed by the background color.
(Image from Altplus, 2009-2014)
Color is important!
I agreed that the statement regarding color does play an
important part in website design. The choices of color that placed
in each components will affect the whole if one color is out, for
example, red background with yellow font color. Used a solid color
as a domain, determine on the color schemes and color harmony
that ones want to apply will lead to a good start for website
design. Font color should be The color plays a part in determining
the success or failure of a site. So, choose the color carefully.
Navigation
Definition of navigation
A field of study that focus on the process of monitoring
and controlling.
The movement of a that brings them from one place to
another.
To make sure the correct path way from one places to
another.
Navigation
To determine of position and direction.
A skill to lead some message to perform in a right way.
This also practice of navigating, especially the charting of
a course for a ship or aircraft.
Navigation
Navigation means providing in directing and participating in plotting , Below
were a few where navigation usually appear on daily life
1. Navigating a ship
2. Navigating a aircraft
3. Navigation a car
4. Navigating a person to reach their needs
Navigation
In a new generation that filled with Technology would have
generate navigation machines.
Navigation
Other than just using a tool, web page would also navigate
their customer properly.
According to the Navigation article that provided. To
navigating their consumers reach product service at what
they are looking for. By :
1. Stating the logo or name of your company at the top right
side come along with your page name.
- This would clearly shown the customers where they are and
which web page they were in. A clear location and direction
must provided.
Navigation
2. Provide a clear navigation button
- This could help to ensure the customers understand the
flow of the web-page. Other than that it would avoid them
being confuse about the lay out, in the same time would
increase the effectiveness of customers reach their needs
and wants.
Navigation
There were few characteristics of a successful
navigate on webpage.
1. Clear
This was the most important element in webpage in order to let
customers clearly know why and where they were.
Navigation
A short explanation of the function would provide the audience a clear explanation
(Screen shoot from
usabilitypost.com, 2009)
To perform a clear navigation button colour is important !!
(Images from ipsdtemplate.com)
4. Ensure every button where link correctly.
{As the article of navigation has mention that user will be
frustrating to click on a page that they just visited}
Although you may have a lots of link but stated them
clearly is necessary.
Navigation
(Image taken from a1javascripts.com, 2010)
Example of a bad navigation button and the arrangement
caused user confuse
Navigation
https://blog.kissmetrics.com/wp
-content/uploads/2013/01/4-
long-side-navigation.jpg
Conclusion
Navigation meaning that to successfully lead the user to
the destination or answer the question that they seek for.
I agreed to the article which stated that navigation should
always answer the question Where am I? we cant sure
that the user will follow he sequence that arranged.
Instead, we should always makes our thing clear and direct
to avoid them confuse in our web-page.
Navigation
References
Altplus, 2014, l.a. Eyeworks, viewed 9
th
October 2014,
http://altplus.net/2014/03/000138.php
Bonshoff, J., 2009, The importance of website design & layout, viewed on 6
th
October 2014,
http://www.trafficbrand.com/the-importance-of-website-design-layout/
Bulat, A, Font Psychology: What Your Font Says About Your Website, viewed 8th October 2014,
http://blog.templatemonster.com/2012/05/16/font-psychology/
Coffin, D., 2014, Learning from Bad Web Design, viewed on 6
th
October 2014,
http://webmarketingtoday.com/articles/learning-from-bad-web-design/
Cho, M, Fonts have feelings too, viewed 8th October 2014,
https://medium.com/.../fonts-have-feelings-too-1523564d966c
Foreverheavy.com, 2014, Greensboro NC Professional Web Design and Development: Forever
Heavy, viewed 6
th
October 2014, http://foreverheavy.com
Hische, J, Upping Your Type Game, viewed 8th October 2014,
http://jessicahische.is/talkingtype
Inspectelement.com, 2014, Inspect Element - Web Design & Development Blog, viewed 6
th
October 2014,
http://inspectelement.com
Janine C., 2013, Web Design: Good and Bad Website Design, viewed 9
th
October 2014,
http://janinecoviello.wordpress.com/2013/09/11/web-design-project-one-good-and-bad-website/
Kenny, T., 2009, The Principles of Good Web Design Part 1: Layout, viewed on 6
th
October 2014,
http://inspectelement.com/articles/the-principles-of-good-web-design-part-1-layout/
Kole, S, Serif vs. Sans: the final battle, viewed 8th October 2014,
http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/
Keithcakes.com.au, 2014, Birthday Cakes, Desserts, Pies & Savouries, Muffins and Catering | Keith
Homemade Cakes, viewed 7
th
October 2014, http://keithcakes.com.au
Larson, K & Picard, R, The Aesthetics of Reading, viewed 8th October 2014,
http://affect.media.mit.edu/pdfs/05.larson-picard.pdf
Lazaris, L., 2010, The Principle of Proximity in Web Design, viewed on 8
th
October 2014,
http://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design/
Microsoft, Scan Path, viewed 8th October 2014,
http://www.microsoft.com/typography/ctfonts/wordrecognition.aspx%20-%20use%20skitch%20to
%20point%20to%20points%20of%20fixation
Markus Design Works, 2014, Price of Bad Website, viewed 9
th
October 2014,
http://markusdesignworks.com/wp-content/uploads/2012/06/316.png
Nice One I Like, 2014, Web Design Marketing and SEO- Secret Key Agency, viewed 8
th
October 2014,
http://www.niceoneilike.com/best-website-inspiration/Web-Design-Marketing-and-SEO---Secret-Key-Agency
Onextrapixel, 2014, 40 Stunning Website Design with Great Color Schemes, viewed on 8
th
October 2014,
http://www.onextrapixel.com/2013/10/25/40-stunning-website-designs-with-great-color-schemes/
Pallasart Web Design, 1996-2014, Making Effective Use of Color in Website, viewed on 8
th
October 2014,
http://www.pallasweb.com/color.html
Smashing Hub, 2013, 14 cool hexagon web design, viewed 8
th
October 2014,
http://smashinghub.com/14-cool-hexagon-web-design.htm
Tiger Color, 2000-2012, Basic color schemes- Introduction to Color Theory, viewed 8
th
October 2014,
http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm
The importance of attractive website layout, n.d., Jet Peppers Blog, viewed on 6
th
October 2014,
http://jetpeppers.com/the-importance-of-attractive-website-layout/
Theworkcycle.com, 2014, The Work Cycle | Home, viewed 6
th
October 2014,
http://theworkcycle.com
Understand the Meaning of Colors in Color Psychology, 2009-2014, viewed on 8
th
October 2014,
http://www.empower-yourself-with-color-psychology.com/meaning-of-colors.html
WHY LAYOUT IS IMPORTANT IN DESIGN?, 2012, Arfa Technologies, viewed on 7
th
October 2014,
http://arfatechnologies.com/graphic-design-blogs/why-layout-is-important-in-design/#more-21