ASSIGNMENT 2

RESEARCH DESIGN REPORT

INTERACTIVE MEDIA

by ARMAGEDDON
Research Topic : Layout Design Concept
Team Leader : Darius Shu Chen Keong (0309847)

MEMBERS

Ow Ji Jing (0310461)
Krishna Kumar a/l Apparao (0309371)
Prakaash a/l Pram Kumar (0302927)
Mithun Edwin (0303690)



-Agree with the author that websites should do everything possible to
keep the viewers interested. First impressions are always the one that
lasts. Proper designing and creative output plays a essential role in keeping
audiences enthralled before they change their focus into the content of
the website. A website does portray itself as a small company.



Dont Bore
Your Visitors



-Agreeing with the author saying that a good website design must have the
ability to keep the audience entertained
-Consumers want something that is pleasant, simple and convenient. Thus,
current web design trends caters to consumers taste.
-Consumers tend to make instant judgment on whether to continue using
the service of a particular website based on the impression they get from
its design



DESIGN
Web design has a key role, similar to the way that posters are designed to motivate a
reader, improve readability, and to draw the readers eye to the key content. Web design
issues involve improving the clarity and form more than its intended function. Strategies
for web design include guidelines in areas such as graphic design, typography, and layout.


Grant, S 2002, Principles Of Effective Web Design, accessed 8 October 2014
<http://www.shersonmedia.com/grant/cv/items/presentations/WebDesignTalkfest.pdf




-Use original information and original photos makes will make a website look less
sterile and gives a more personal approach as all websites should be able to
generate a feeling about it (matching your personality and business model)

-Have movements and animation. Any type of movement is going to catch the
audience attention. Static is fine but nothing catches attention like movement
does. This is important to keep the audience entertained.

-Must have a consistent feel.. (Consistency is the key in web design especially when
you are building a brand or creating a purpose. More attention should be paid to
detail (create subtle textures and patterns, use borders to separate elements)

Here are some examples;
Dont Bore
Your Visitors
Consistent feel.
(Beatport.com homepage and all its sub pages
uses similar themes and attains similar color to
give a consistent feel)
Monochromatic text website with minimal design shows the professionalism of a
website
Candy colored website has a different approach and constitutes a different vibe.

- The author also claims that visitors will assume a simple website design
can be characterized as a small company.

- It doesnt matter how a website looks or how cool a certain effect of
animation is, none of that really matters. The purpose of the website is
to be used for whatever its intended purpose is.

- One should avoid copying competitors as there will be nothing else to
set you apart from the others; a website needs its own identity. This is
also crucial to avoid consumers from being confused.

INTERACTIVITY
"User-centric web design has become a standard
approach for successful and web design. After all, if
users can't use a feature, it might as well not exist." -
Vitaly Friedman, "10 Principles of Effective Web Design",
"Integrating the social experience into your organization's web
site will help promote the channel, engage supporters, and
provide a constant source of dynamic content "- Melanie
Mathos and Chad Norman "101 Social Media Tactics for
Nonprofits: A Field Guide."

Original, one-of-a-kind website designs
tend to create an everlasting impression
Blacknegative.com A perfect example
on how design and interactivity
makes an impact
Engage viewers via videos. Its much more than sliding images or cool animation because
video tends to have a purpose (timeline or a plot) (the best way to engage to your
audience and its versatile)
Go BOLD, its to create a strong impression using LARGE text or large bright and bold
images makes it extremely hard to overlook.
Keep it simple: we live in an era where minimalistic ideas are very resilient. Consumers
want to get straight to the point with ease.
Different ways of interacting


Google interacts with its user by giving them the freedom
to search for anything they want therefore there are no
search options.
Yahoo interacts with its users by giving the choices on
what to search rather to let them think of what to search
like Google.









Web pages use to have lots of graphics, beautiful animations and flash images. Even with
the slow internet people still would wait.




SIMPLE, FAST, EFFECTIVE AND EFFICIENT. These are the expectation of today. Gone are the
days where 3D animations or huge flash banner bombarded you when you open the site.
We are on the age of minimalism.
FAST with GOOD LOOKING DESIGN website is what we need.
Dont Make
Them Wait
AGREE
A webpage is not a TV. Websites suppose to load
fast and without top notch graphics.
Back in the past
NOW
SPEED MATTERS




Agree images need to be in very small sizes. 4k to 6k is the best.
Affect loading speed of the website. It is a pain if the website lags. You lose visitors.
People will get bored of waiting and leave.
There are so many sites out there, you need to compete to be the best, the most efficient
and the fastest.

Speedometer, n.d. photograph, viewed 6 October 2014
<http://cdn.highspeedgeek.com/wp-content/uploads/2012/12/speed-
test.jpg>
SPEED MATTERS




Surveys by Akamai and Gomez.com states that nearly half of
web users expect a site to load in 2 seconds or less.
They tend to leave the site if it does not load within 3 seconds.
79% of web shoppers who have trouble with web site
performance say they wont return to the site to buy again and
around 44% of them would tell a friend if they had a poor
experience shopping online.


Speedometer, n.d. photograph, viewed 6 October 2014
<http://cdn.highspeedgeek.com/wp-content/uploads/2012/12/speed-
test.jpg>
Jacob, S 2011, Kissmetrics, accessed 5 October 2014,
<https://blog.kissmetrics.com/speed-is-a-killer/>

- Images need to be optimized for the web. Photoshop plays a major role in this
situation. It is very frustrating when it takes over a minute to load a page. You
need to give customers the best user experience. Performance of a website is
crucial.





SPEED MATTERS




Optimise Performance, n.d. photograph, viewed 6 October 2014
<http://www.opslc.com/images/uploaded_images/optimise.jpg>
Optimizing an image can help in reducing byte and increase
performance for your website:
The fewer bytes the browser has to download, the less
competition there is for the client's bandwidth and the
faster the browser can download and render useful content
on the screen.
Optimizing Content Efficiently 2010 , accessed 5 October 2014,
<https://developers.google.com/web/fundamentals/performance/optimizing-content-
efficiency/image-optimization>
Google.com takes less than 1 second to open. Over the years Google
keeps making the design of their page more simplistic with simple
text and images.
EXAMPLES OF GOOD FAST LOADING WEBSITES
Google performed an experiment on website
load times.
Many users said they wanted 30 results
therefore Google change their settings.

THEN THE SHOCK CAME

Traffic drop an astounding 20%.
Google tested the loading difference between
the 10 and 30 results pages and found that it
was just half of a second.
Therefore half a second too make a BIG
difference
DO YOU
KNOW?
Jacob, S 2011, Kissmetrics, accessed 5 October 2014,
<https://blog.kissmetrics.com/speed-is-a-killer/>
Amazon.com takes less than 5 second to open. Even with its many
images, those images are compressed to allow their webpage to
open quick, thus a good user experience for their online customers.
Apple.com includes slight flash movement involve in their webpage
during scrolling of their products but they manage to keep it smooth
and fast. Their website opens less than 3 seconds.
SaltedHerrings.com includes a heavy usage of images and animation
which took more than 10 seconds to fully open the webpage. There
is also unnecessary graphics going on which further slows down the
website.
EXAMPLES OF BAD SLOW LOADING WEBSITES
BlackNegative.com is a heavy graphic website that took more than
30 seconds to load.
EXAMPLES OF BAD SLOW LOADING WEBSITES
DESIGN vs GRAPHICS







- Another statement that the author said was a webpage should use more
design and less graphics.
- This is a statement to agree for as in today world we opt for more simplistic
design, and we do not like seeing a clutter mess of graphics everywhere.

- Too much graphic is no longer a beauty, but beautiful designed website is.
- Getting rid of heavy graphics also allow the webpage to load faster, and we
still could have a beautiful webpage. It is a win-win situation.
- 2014 has been a year of minimalism design and this trend is here to stay.
This should be an example set for the future of websites. Embracing this
brings a good change to how people view websites.

There are reasons to why flat minimal
designs are gaining immense popularity,
and it all begins with the fact that they are
crisp, and they are chic.

A minimal design doesn't pull a viewer's
attention in all directions, it instead draws
focus on the element that's supposed to
draw maximum attention. Not to mention,
it has its own visual charm.
Dawson, S 2014, Awwwards, accessed 5 October 2014,
<http://www.awwwards.com/how-the-concept-of-minimalism-in-
web-design-came-about-and-why-it-stayed.html>
DESIGN vs GRAPHICS












EXAMPLES OF GOOD MINIMAL DESIGN WEBSITES
These websites are designed with simplicity in mind. Less graphics but still pushing the envelope
of good design. Light and minimal is the way to go and these websites open fast. People would
not have to worry about loading time anymore and they can still enjoy great design at the same
time.
Iconwerk, n.d. photograph, viewed 5 October 2014, <http://www.iconwerk.de/>.
BernatFortet, n.d.photography, viewed 5 October 2014, <http://bernatfortet.com/?
Find out
What colors

Based on the author, it is agreeable that color placement plays an
important role in creating a website.

Before creating a website if the designer does not pay attention to the
colors of the website it may end up plain and boring or it may be an
eyesore.

The color concept of a website should be balance to please the viewers
so it will be easier for them to browse.

Find out
What colors
Agree the authors sayings that color concept because the color
combination gives imaginative vibe to the audience and viewers to surf
the site.
The balance background of colors , gives the user to surf website safely
and it doesnt distort their vision. However the author said that color
must be balanced and you must not over do it.
Few years back web pages use to consists basic color concepts and
design. Even with flat color concept people have no choice, they have to
go through it to get ideas. However nowadays, peoples expectation are
high on published website. Everybody needs a simple color website to
please them.


Find out
What colors

- When discussing the design of a new site, a question that consistently arises is
- How do I select the most effective color? Choosing the right color palette
for a site is essential to communicate your message, brand your product or
service, and, if you are an online business, sell your products.
- Everyone has their own favorite colors, but how these colors are interpreted
may vary from culture to culture. Color communicates far more than most
people realize. Choosing wrong the wrong color can affect the website views
and reliability.


According to different sources, half of the people visiting a website
dont come back because of the color of the design. The first thing
people need to recognize when they see your site are the brand
colors. If you have multiple colors and they cant see the most
dominant, it means you should consider a redesign.

Vasile ,C, 2014, Colors in Web Design Make Website Successful ,accessed 8 Oct.2014,
<http://www.1stwebdesigner.com/design/colors-in-web-design-make-websites-successful/> .






The website monsterism.net created by Peter Fowler. His idea
purely based on nature, daily experience, and monster music.
The colour concept solely based on visual adventure which
made his work noticeable around the world.
EXAMPLE OF GOOD WEBSITES






espnfc.com a simple sport website platform which consist of three
main colors light green, white and silver. This allows the viewers to
surf the site without
EXAMPLE OF GOOD WEBSITES






EXAMPLE OF GOOD WEBSITES
Tgv.com.my, movie based platform for online customers to purchase tickets
online. The color combination of red, black, light blue gives and interactive
edge to site. However the main color red is used for promotional where it
stimulate customers to make quick decision.
HunttGraphic.com is a graphic printing design company .The site
consist of variety of color of colors and it is an eyesore, it may lead the
viewer out of focus and cause them to leave the website.
EXAMPLE OF BAD WEBSITES
This is a website run by Water Equipment technology , the site it self have variety of
pictures and wordings, and the indication buttons are poorly indicated with consistent flat
blue color. Besides it may lead the viewer to drift apart while going through the page and
cause them to leave the website.
EXAMPLE OF BAD WEBSITES
Navigation
Where am I? Where can I go from here? Where was I already?
These are the common questions that all
visitors will want to find out wile browsing the
web. Thus, navigations should be simple and
user friendly so that web browsers will not get
lost amongst a sea of content.
Web users are impatient, and they're not
going to hang around a site very long if they
can't find their way around.

Five Rules to Effective Website 2014, accessed 6 October
2014, <
Navigationhttp://graphicdesign.about.com/od/effectivew
ebsites/a/web_navigation.htm>

Navigation
The companys name or logo should be on top of every page in your website.
It should link back to home page as well.
A companys name or logo should be on top of
each page and it should link back to home
page.
The majority of users expected to find the
Back to Home link in the top left corner.
According to a survey done, users are very
confident that there will be a link to the home
page in that position.

Wheres The Home Button 2014, accessed 6 October 2014,
<http://www.hmu.com/blog/2/wheres-the-home-button-
users-expectations-for-web-page-content-location/>

Navigation
Visitors want to know where can I go from here and web designers should
give insights on where the link will take them.
Giving the visitor an insight on where the link
will take them. For example, for resources page
which has more detailed information, it should
have brief descriptions with links.
Having these two things included in the
website will definitely improve the web
browsing experience.
This is a good example of a website which has a great navigation
route planned out. The home button is located at the top left corner
and it brings to user back to home page.
This is worth the extra time for those who can see it. Link titles
improve the navigation usability.
AGREE that link titles are important to help web browsers to
understand more about the link before navigating, and it is
worth the extra time downloading each link title.
It gives users a brief understanding on where the link is going
to bring them, and it will prevent users from getting lost in the
midst of browsing the web.

USABILITY
Good example
When the mouse hovers across the icons on the bottom right, it shows what
is the user actually clicking on. In this case, it shows quality.
Users want to know if they already visited a page.
AGREE that users want to know whether they have already
visited a page.
People get lost and move in circles when websites use the
same link colour for visited and new destinations. To reduce
navigational confusion, select different colours for the two
types of links.

Good example
This is a creative and good example of showing the users that they have
already click on the link. The test tubes turn into green after I have clicked
on the link.
COLOR SCHEME
For your navigation to work well you should use blue for
unvisited and purple for visited as a color scheme. Using other
colors will just confuse people.

However, we disagree on the second point which says we
should use blue for unvisited and purple for visited as a color
scheme. Using other colors will confuse people. As long as
there is obvious changes that show users that they have visited
the links before, users will not get confused over visited and
unvisited links.


Good example
This is an example that even though the web designer did not follow the
blue and purple color scheme, as a user, they still able to understand and
they will know that those links has already been clicked.
LIST OF REFERENCES
Dawson,S 2014, How the concept of minimalism in web design came about and
why it stayed, accessed 5 October 2014,< http://www.awwwards.com/how-the-
concept-of-minimalism-in-web-design-came-about-and-why-it-stayed.html>

Jacob, S 2011, Speed is A Killer, accessed 5 October 2014,
https://blog.kissmetrics.com/speed-is-a-killer/

Optimizing Content Efficiently ,2010 , accessed 5 October 2014,
https://developers.google.com/web/fundamentals/performance/optimizing-
content-efficiency/image-optimization

Wheres The Home Button Users Expectations for Web Page Content ,2010,
accessed 5 October 2014, <http://www.hmu.com/blog/2/wheres-the-home-
button-users-expectations-for-web-page-content-location/>







NTEN: The Nonprofit Technology Network, (2014). 10 Steps to a More
Effective Nonprofit Website: Part 2. [online] Available at:
http://www.nten.org/articles/2012/10-steps-to-a-more-effective-
nonprofit-website-part-2 [Accessed 8 Oct. 2014].

Sherson, G. (2014). Principles of Effective Web Design. [online]
shersonmedia. Available at:
http://www.shersonmedia.com/grant/cv/items/presentations/WebDe
signTalkfest.pdf [Accessed 8 Oct. 2014].

Skdesigns.com, (2014). How do I keep my Web site fresh, alive and
interesting? WebsiteTips Newsletter, by SKDesigns, Web Design
Sacramento, Carmichael, California. [online] Available at:
http://skdesigns.com/newsletter/v1n3.shtml [Accessed 8 Oct. 2014].

Treehouse Blog, (2012). 4 Ways to Go From a Boring to Amazing
Website - Treehouse Blog. [online] Available at:
http://blog.teamtreehouse.com/4-ways-to-go-from-a-boring-to-
amazing-website [Accessed 8 Oct. 2014].
LIST OF REFERENCES
Vasile ,C, 2014, Colors in Web Design Make Website Successful ,accessed 8
Oct.2014, <http://www.1stwebdesigner.com/design/colors-in-web-design-
make-websites-successful/> .

Five Rules to Effective Websites, 2012, accessed 6 October 2014,
<http://graphicdesign.about.com/od/effectivewebsites/a/web_navigation.h
tm>