-wong chin hui 0307877 (leader) -lok ly-sha 0307964 -kuan jie yi 0308246 -kristine goh junyi 0314697...
TRANSCRIPT
LAYOUT DESIGN CONCEPT
- Wong Chin Hui 0307877 (Leader)
- Lok Ly-Sha 0307964- Kuan Jie Yi 0308246 - Kristine Goh Junyi 0314697- Chan Jia-Qi Janice 0307993
BMC 2314: Interactive Media
CrazyRockets
Lecturer: Ms Ivy Chen
Introduction
• In this slides, an overview of building a webpage layout design is being studied supported by opinions
• Focus of the important criteria in designing a webpage
Interesting LayoutWebsite SpeedNavigationColour
Interesting Website LayoutDon’t bore your readers
Use an interesting layout for your website
• A simple yet interesting website will create great interest for the viewers.
• An informative and easy to read website to engage the reader’s attention
The content must be relevant to the niche, business, or company that it's being written about (The Huffington Post, 2014)
Agree
From Harbeck, 2012• Studies show that people read information
differently on the web than they do in print. o For example, website users only tend to read small amounts of
information at a time, and they are less likely to read all of the information especially if the information is poorly organized or if there is too much text on a page.
• Users are less likely to read information that they must scroll down to find. (Harbeck, 2012)
From Huffington Post, 2014
• The content should provide valuable and useful information to the reader. It should teach them at least one or two things or answer at least one question they have. This can be adjusted depending on where the content will be published o such as a blog, website, add or social media)
and what the main purpose of the content is.
• You have to keep in mind that real people are reading this content, so it has to be interesting; the content needs to catch and keep their attention from the title to the last period
• The content must be relevant to the niche, business, or company that it's being written about
Examples Of Interesting Website
Layouts
Screen Shots Of
Interesting Content Websites
Source from The Huffington Post, 2014
Source from Harbeck, 2012
• It’s a simple website as it is easy to access.• Easier for readers to read • Not messy • Straight to the point
Picture from Hongkiat, 2014
• Simple design • Captures attention of the readers easily
Picture from Brown, 2014
WEBSITESPEED
Summary of Article• Web designer put top-notch graphics and sound
into their web page
• Only 216 colours can be seen through the screen that is between 15 and 19 inches wide
• And most of the viewers view the screen at the inches wide, can only download at 28.8 kb per second
• Size of the page should be cut down, if viewers need to wait for the page to fully downloaded
• We agree with the article that website speed is much more important then those fancy images and sound.
• No matter how great the web design, impatient visitors will not wait around for slow-loading pages
Website Speed
Compare
This website:
Ellecta Interactive, 2010
Versus
This website:
Rochester Institute of Technology, 2011
Which attracts?
And
Which loads faster?
• In terms of visual, 1st website is more visualize compare to 2nd website
• But less graphic website like 2nd website, do load faster compare to 1st website
• We know that effective web pages have to look great, and images play a huge role in that.
• We also know that images play an equally big role in degrading performance.
• “As you increase the number and size of images on your pages, load time uniformly increases” (Pinto, 2013)
Some facts……
• “With the amount of content out there on the web, a page or site that loads slowly is going to have fewer visitors than one that loads quickly” (Kyrnin, 2014).
• “47% of consumers expect a web page to load in 2 seconds or less,” said Sean Work, Minister of Propaganda, KISSmetrics (Neeley, 2012).
• Therefore, loading speed is very important for web sites.
Common Causes Of A Slow Website
• Large volume of unoptimized Images
• Too Much Fancy Flash
• External Media Usage
• And so, here is some tips to speed up your website!
To speed up the website
i. Web images should be smallii. Use graphic more, design lessiii.Use special effects sparingly
Web Images should be... SMALL
• Web images take up the majority of the download time in most web pages.
• But if you optimize your web images you will have a faster loading website.
• “The one way that will improve your speed the most is by making your graphics as small as possible” (Kyrnin, 2014)
Picture from Visia, 2014
For example:
• As mention from the article, web page should be no larger than 50K and not lesser than 30K.
• The number one visited web site home page is under 21k.
• Example given is Yahoo’s home page which is 20K
More Design
Less Graphic
• Instead of one long page. • The more you separate your content the faster it will
download.
Picture from Half Creative, 2014
Use Special Effects Sparingly• Make sure that the site needs the effect you want
• Put important ones only.• If extra graphics can sell them, keep it, if not, delete
it!
Picture from Half Creative, 2014
Ways To Get Small Size Images
• Using the right format• Image dimensions• Color of images
Using The Right Format
GIF JPEG
• For flat color images.
• Images with just a few colors
• For photographic images.
• Images with millions of colors.
PNG
• Good for both flat color and photographic images
• Transparent background
There are only three image formats for the web: GIF, JPG, and PNG
Image Dimensions
• Most cameras take photos that are way bigger than the average web page can display.
• By changing the dimensions to somewhere around 500 x 500 pixels or smaller, you will create a smaller image
Color of Images
• 216 is the number of colors you have on a web safe color pallet.
• Use solid colors when designing your image.
• The more color you have in an image the bigger it’s going to be.
For example…This website consists of more colors for the image,
therefore, the image size is bigger
Picture from Ellecta Interactive, 2014
However…This website consists of less color for the image, therefore, the
size of the image is smaller
Picture from Rochester Institute of Technology
Therefore, a web page to be successful it
needs to download quickly and look good.
WHAT IS NAVIGATION
Ease of navigation is one of the biggest keys
to the usability of a website. If visitors can
easily find what they are looking for they will
be more likely to stay on the website rather
than leaving and going to another site.
Navigation is the way to guide users through a website, so that they know how much content is available and exactly where to find what they are looking for.
WHERE AM I?
WHERE CAN I GO FROM HERE?
WHERE WAS I ALREADY?
Your website’s navigation should answer the following questions :
WHERE AM
I?
Should a visitor randomly arrive at your website, it should let them know exactly what website they are at, and what they are reading.
• The name and logo of the company should consistently be at the top / top left of every page in the website, and link the user back to the homepage.
• Websites should always include a search bar.
• Some sites use a ‘breadcrumb trail’ near the top of the page that usually looks a bit like this:
Home > Products > Women > Bottoms > Skirts
…no second guessing.
Bluegg’s browser title states exactly what the company is ; a website design, branding and design agency in Cardiff. The title / logo is consistently placed at the top of every page and a single click will bring you back to the main page.
WHERE AM I
Picture from Bluegg, 2014
Another way to ensure the user knows where they are is by highlighting the icons in a darker color as an indication for the currently opened subpage, as shown by Bloom Search Marketing’s website.
WHERE AM I
Picture from Bloom Search Marketing, 2014
75B ’s website, while innovative in their use of icons instead of words, is confusing because while mousing over one icon, the user might have forgotten what the other icons are for.
WHERE AM I
Picture from 75B
WHERE
CAN I
GO FROM
HERE?
People leave websites that they cannot navigate. Thus, your website should be understandable, clear and intuitive and utilize the three click rule. • Site navigation should appear in the
same location on every page of a site. This will enable users to get used to a site and feel comfortable browsing it. If navigation were to jump from the top to the left, disappear, or change colors from section to section, frustrated visitors are more likely to go elsewhere.
• Links must be labeled smartly and tell the user where it's going without the user having to open the link to find out. Also, users should be able to get where they intend to go in two or three clicks.
…be creative, but organized.
Naks’ navigation is clear, concise, and the menu bar consistently sits by the left hand side no matter
what page you are at.
WHERE CAN I GO FROM HERE
Picture from Naks Food, 2014
However, Larissa Ness’s website has too many navigation buttons. A long list of options is messy,
unnecessary and confusing. Aim for a maximum of 7. Sub-pages should be grouped under related
titles, and social media links can be included as icons.
WHERE CAN I GO FROM HERE
Picture from Ness, 2011
Eurofurniture uses drop-down navigation, which shows lower levels of the classification when the mouse rolls over a particular link. Similar items can be grouped into a list of hyperlinks to show they have a relationship. This allows the
reader to navigate further into the website if they wish, without being messy and intrusive.
WHERE CAN I GO FROM HERE
Picture from Euro Furniture
WHERE WAS
I AL-
READY?
It is helpful to let users know what they have already read instead of having them to open and check each page over and over again. That way, they can spend more time on the things that matter.
• Visited links should be highlighted in a different color, or underlined (since some web users are colorblind) after being opened.
• Avoid making pages too deep and hard to find. Users may lose interest if they find it difficult to find what they were looking for.
…have I been here before?
A very prominent example of using highlights to distinguish visited websites is Google. By doing this, users can save time instead of re-clicking links.
WHERE WAS I ALREADY
COLOR
SUMMARY• Color should be one of your first concerns
when it comes time to starting your web site design.
• You should always use a browser safe color
when using solid color as a design element. • You should NEVER irritate the visitor with
bright colors.
Agree?
OF COURSE!
WHO’S ABLE TO STARE AT THIS??
Picture from Accept Jesus, Forever Forgiven
Or these?
Picture from Cheesies, 1999-2012
Picture from Burnsed C 1995-2009
Picture from Penny Juice
These websites used lots and lots of colors, causing it to hurt the audiences’ eyes!
How about now?
Picture from Eric, 2010
Picture from Speed Motion, 2006-2014
This website, only used a few colors. Therefore, making the audiences’ eyes feel comfortable
Lets take a look at a few
more
“eye soothing”
webpages..
Picture from Paraguay, 2011
Picture from Thomas Fritzpatrick, 2014
Picture from These Are Things
Picture from Activate Media, 2014
As you can see, a website doesn’t
need tons of colors to attract
Who are your site’s potential visitors?
What are your products or services?
What are your site’s key objectives?
(Pallasart Web Design, 1996-2014)
Before selecting colors, we ask the following questions:
A good number of designers recommend using only 3 main colors on your website. (Bowers, 2011)
Create a strong contrast between a
page’s background and it’s text. (Avangate, 2004-
2014)
Picture from Massimiliano, 2013
Understand the meaning behind different
colors
RED: Energy, passion, excitement, power
Blue: Depression, spirituality, freedom, loyalty
orange: Friendliness, warmth, playfulness
BLACK: Power, elegance, secrecy, mystery
(Avangate, 2004-2014)
Less well-known businesses should carefully consider the colors they choose for their logos and website.
Certain colors work well with specific types if businesses.
(Pallasart web design, 1996-2014)
For Business Websites
For Example,.. Warm colors like , , and work well for food sites and restaurants that offer spicy fare.
RED
YELLOW
ORANGE
(Pallasart web design, 1996-2014)
Picture from Chillis, 2013
Cream, white and dark brown can be used successfully on websites that sells chocolate.
(Pallasart web design, 1996-2014)
Picture from Dove Chocolate, 2014
Cool colors like and complement outdoor products, airlines, medical services, law firms and intellectual content.
BLUE GREEN
(Pallasart web design, 1996-2014)
Picture from M&M Outdoor Product, 2010
Conclusion
• Website Layouto Simple yet interesting web layout attracts
o Text in web should be concise however informative
• Website Speedo Too much graphic and design would slow down loading of webpage
• Navigationo Easy navigation to explore the web should be easily access
• Colouro Too much colour would affect negatively on the web, keep colours to
the theme
o Readable colours are important especially for text
Simplicity is the key to sophistication
REFERENCES
• 75B, [ONLINE], viewed 9th October 2014, < http://www.75b.nl/>
• Accept Jesus, Forever Forgiven, [ONLINE], viewed 8th October 2014, <
http://www.dokimos.org/ajff/>
• Activate Media, 2014, Activate Media United Kingdom, [ONLINE], viewed on 8th October 2014,
<http://activatemedia.co.uk/>
• Avangate, 2004-2014, Choosing the Right Colors for your Web Site, [Online], viewed 1st October
2014, < http://www.avangate.com/avangate-resources/article/color-web-site.htm >
• Bloom Search Marketing, 2014, Montreal, [ONLINE], viewed 9th October 2014,
<http://www.makeitbloom.com/>
• Bluegg, 2014, Bluegg, United Kingdom [ONLINE], viewed 8th October 2014,
<http://www.bluegg.co.uk/>
• Bowers, T 2011, How to choose a great color scheme for your website, [Online], viewed 2nd October
2014, < http://premium.wpmudev.org/blog/choose-color-scheme-your-website/ >
• Brown, D 2014, The Experience, [Online], viewed on 1th October 2014,
<http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/derren.jpg>
• Burnsed, C 1995-2009, The Ultimate '80s Songs, [ONLINE], viewed 8th October 2014,
<http://www.ultimate80ssongs.com/index.html>
• Cheesies, M 1999-2012, Mama's Cheesies Handmade Clothing & Accesory, Dynamic Drive United
States, [ONLINE], viewed 8th October 2014, < http://mamascheesies.com/>
• Chillis, 2013, T.A.S Publisher, Malaysia, [ONLINE] , viewed 2nd October 2014, <http://chillis.com.my>
• Dove Chocolate, 2014, Dove Chocolate, Mars, [ONLINE], viewed 8th October 2014, <http://www.dovechocolate.com/>
• Ellecta Interactive, 2010, Home Page, [Online], viewed 1st October 2014, <http://www.ellectainteractive.com/#/home>
• Eric, C 2010, All Around DJ, [ONLINE], viewed 8th October 2014, <http://www.djericc.nl/>
• Euro Furniture, [ONLINE], viewed 9th October, < http://www.eurofurniture.com/>
• Half Creative, 2014, Home Page, Pixelentity, [Online], viewed on 3rd October 2014, <http://themes.tf/preview/?
halfcreative_wp>
• Harbeck D 2012, How to Make a Website Interesting and Easy to Read-Site Pro News, Jayde Online, [ONLINE], viewed
9th October 2014, <http://www.sitepronews.com/2012/04/18/how-to-make-a-website-interesting-and-easy-to-read/>
• Hongkiat, 2014, The Noodle box, [Online], viewed 10th October 2014, Available at: <
http://media02.hongkiat.com/designing-restaurant-websites/10-the-noodle-box-restaurant-website.jpg >
• Kyrnin, J 2014, Don’t Use Nested Tables, About.com, [Online], viewed on 4th October 2014, <
http://webdesign.about.com/od/speed/a/dont-use-nested-tables.htm>
• M&M Outdoor Products, 2010, New Berlin, [ONLINE], viewed on 2nd October 2014
<http://mmoutdoorproducts.com/home.aspx>
• Massimiliano, B 2013, Barni Design, [Online], viewed 3rd October 2014, <http://www.barnidesign.it/>
• Naks Food, 2014, Big Red Dog, [ONLINE], viewed 9th October 2014, <http://naksfood.com/\>
• Neeley, J 2012, Five Ways to Speed-up Your Website, Hosting Services, Inc. Midphase, UK2 Group, [Online], viewed on
5th October 2014, < http://www.midphase.com/blog/five-ways-to-speed-up-your-website/ >
• Ness, L 2011, Larrisa Ness, [ONLINE], viewed 9th October 2014, < http://larissaness.com/>
• Pallasart, 1996-2014, Website Design, Web Marketing, & Technical Tips make your site a success,
[Online], viewed 2nd October 2014, <http://www.pallasweb.com/color.html>
• Paraguay, A 2011, Melonfree, [ONLINE], viewed 8th October 2014, <http://melonfree.com/>
• Penny Juice, [ONLINE], viewed on 8th October 2014,
<http://www.pennyjuice.com/htmlversion/whoispj.htm\>
• Pinto, A 2013, Why Your Website Is Slow: Image Performance, Yotta, [Online], viewed on 4th
October 2014, < http://www.yottaa.com/blog/bid/293406/Why-Your-Website-Is-Slow-Image-
Performance>
• Rochester Institute of Technology, 2011, Visual Communication Design at RIT, Rochester Institue of
Technology, [Online], viewed on 3rd October 2014, <http://computergraphics.rit.edu/>
• Speed Motion, 2006-2014, [ONLINE], viewed 8th October 2014, <http://speed-motion.com.ua/>
• The Huffington Post, 2014, Informative, Interesting, Relevant: Three Rules for Creating Quality
Content in Digital Marketing, [ONLINE], viewed 1th October 2014,
<http://www.huffingtonpost.com/roger-bryan/informative-interesting-r_b_4914330.html>
• These Are Things, [ONLINE], viewed 8th October 2014, http://www.thesearethings.com/
• Thomas Fritzpatrick, 2014, [ONLINE], viewed 5th October 2014, <http://fitzfitzpatrick.com/>
• Visia, 2014, Home Page, Pixelentity, [Online], viewed on 3rd October 2014,
<http://themes.tf/preview/?halfcreative_wp>
END