INSTITUT SAINS DAN TEKNOLOGI DARUL TAKZIM
DIPLOMA TEKNOLOGI MAKLUMAT
DIT 1413 / SKK 1313
TECHNOLOGY AND MEDIA DESIGN
ASSIGNMENT 2
REPORT MEDIA DESIGN CRITIQUE
NAME:
ROZITA ABDULLAH (345621)
NURUL SALIHAH BT ZAKARIA
(381928)
ZURINA ASYIKIN BT ISMAIL (383838)
PREPARED FOR :
CIK NOOR FAZLINDA BINTI OTHMAN
DATES SUBMIT:
23 MARCH 2011
TABLE OF CONTENT
Content
Page Number
1.0 Introduction
2.0 Example of Webpage
3.0 Analysis Report
4.0 Modification Suggestion
4.1 Typography Aspect
4.2 Color Selection
4.3 Layout Setting
4.4 Multimedia Element
5.0 Prototype Suggestion
6.0 Conclusion
7.0 References
1
1
3
4
4
5
7
9
10
11
12
1.0 Introduction
The term “web design” means the discipline to structure the graphic elements of a
website to reflect, through an aesthetic dimension, the visual identity of the company or
organization. It is thus a step in visual design, as opposed to the functional design (ergonomics,
navigation). The purpose of web design is to enhance the image of the company or organization
through graphics to enhance its visual identity and provide a sense of confidence to the user.
However, under the criteria of ergonomics, a website must meet the expectations of users and
enable it to easily find information they seek.
When designing a website, the destination is a computer monitor, not the printed page.
As a web designer, must create Web pages specifically for the computer screen. The most
important that should be considered is the layout, fonts and color that will appear on the screen.
The web design is a compromise between a presentation with a stunning graphics, giving
credibility and image to the company and navigation allowing the user to easily find what they
seek. By extension the term means the business web designer to design the design of a website.
The design of a web page is primarily an act implementing artistic inventiveness and
creativity. The purpose of this guide is to give some key elements to obtain an effective design;
however, a good source of inspiration may be to visit reference sites, including education sites.
2.0 Example of Web Page
• We choose education website:
– http://www.bestedsites.com/
– This website was created and owned by Janice Berthiaume, Med.
– It contains the best educational links on the web.
– There are many sources that can use by student in their learning.
3.0 Analysis Report
There are several elements that should be considered when design the website:
– Typography aspect
– Color Selection
– Layout Setting
– Multimedia Elements (Animation, Graphic, sound, video, interactivity)
a) Typography aspect
Typography is the balance and interplay of letterforms on the page, a verbal and
visual equation that helps the reader understand the form and absorb the substance
of the page content. In this website, typography use for the typeface use is Serif
(Times New Roman) with the font Italic and bold and font size is (28pt).
Typeface Serif is suitable with the print document not the presentation document.
So the suitable use in this website is san Serif. This website also uses mixture of
color for the title and content. There are too many color in website not suitable
because no harmony. The text color uses the red and blue color. When click on
the link no different whether user has been invited that page. User get confuse
with this situation. The size of typeface is too big and use simple links as
navigation. The use of white space gives a sense of spaciousness and overall
neatness to a site. Small capitals use for the text in this website.
b) Layout Setting
In this website, the layout setting:
– No section to separate the header, content, advertisement and menu bar.
– No balance – elements arranged on the screen without regard to the weight on
both sides of the center line.
– Margins and Page Layout more too left side.
– Unclear navigation.
– There is no focal point in this website to draw the readers eye to the important
part of the layout
c) Color Selection
Color selection in this website:
– No different between visited link, active link and unvisited link color.
– No consistency color in this website.
– Use many color for text.
d) Multimedia Elements
In this website, multimedia elements use:
– Animation is annoying and distracting.
– Graphics in this website are meaningless and useless.
– The use of graphic is not effective.
4.0 Modification Suggestion
There is several modifications should be improve in this website based on the principle of
web design. The modification is from typography aspect, color selection, layout setting, suitable
design and others factor.
4.1 Typography aspect
It is strongly against the state to use more than two fonts on a website. The stylized fonts
should be used sparingly (for the title for example) and most of the web page will be made with a
classic police (Arial, Verdana, Helvetica, etc.).To use traditional print, font’s wheelbase (serif)
generally facilitates reading since wheelbases can accompany the eyes of the reader. On the web,
the use of such policies is not recommended because under the definition of the visitors screen,
the wheelbases can very quickly become handwritten embarrassing for reading. Thus, it is
desirable to opt for sans serif fonts (sans serif), plus round. Finally, be aware that texts using
non-standard fonts may not appear correctly on the screens of users. To create titles with such
policies, it is possible to circumvent this restriction by creating transparent images with the text.
Suggestion: For modification in this website, we use the typeface San Serif with the font size
is 18 suitable in this website. This size is not too small both big and suitable to
catch eye of users. In addition, the alignment text for this website is balance. The
text color, we choose black for the content, blue for the link text and red color the
title in that website.
4.2 Color Selection
Website color selection is as important to your website design as your text and graphics!
People see color long before they can absorb anything else on your website. Color sets the mood
and tempo of your website. Select your website color combinations carefully for the message
you want to present on your website. Website color has a psychological effect on people and
how they react to your website. Some colors imply action, others peace and tranquility. The
chart above shows some psychological implications of color.
a) Focus on the Target Audience
When deciding on the appropriate color for a website, consideration should be given to
the target audience. The color used for a product focused on the elderly may not fare well
with teens or younger generations. Also, over use of extremely bright colors like red,
yellow, blue etc causes eye fatigue and could drive visitor away.
b) Background Color
We often find it helpful to have a different color background. By doing this, it
punches the body of the website page forward and keeps the focus on the website itself.
c) Make Your Text Black
When it comes to reading text, people are used to reading black text. It is the easiest on
the eye. There is no need to stray from what people have grown up using.
d) Color should relative to products being highlighted
As stated earlier, it is important to relate your product / service to a color relevant to your
industry.
Red is attractive and powerful and would go well for websites that are focused on
products meant for children and also for inducing a visitor to take action with a “Book
now”, and/or “Reserve now”. Red invokes emotion.
Orange is used in websites that promote food products. It is known to promote positive
thinking and increase creativity. The color also appeals to the younger generation. Many
technical companies use Orange.
Yellow signifies cheerfulness and creativity. It appeals to children and is used in sites that
promote leisure products. Yellow, however, can tend to strain the eyes and should be
used as an accent color in most cases.
Green is pleasing to the human eye and is apt for tourism sites and sites that relate to
nature. Green symbolizes prosperity and wealth. Green also invokes trust and is one of
the most trendy / corporate colors.
Blue is a conservative color with incredibly high trust value and is known to relax the
nervous system. It is suitable for sites offering high- tech products and also for diet
products. Many people mistakenly use blue for text color. This should be avoided as it is
not a standard color for the human eye to read with.
Black is useful for sites that relate to photography and art.
Purple is used in religious sites and vacation sites.
e) Helpful Color Chooser Tools
We all love tools that help make our lives easier. On an earlier blog post about color we
had someone comment about a great color scheme tool. We recommend you have a look
at this one if you need help picking colors that work well together.
f) Don’t Make Your Website a Rainbow
A final note – the temptation with people starting out in web design is to use many
colors. The most impactful websites are the ones that keep the use of color to a
minimum. As a rule, we recommend that your website employ the use of 2 – 3 colors at a
maximum. Often the biggest statement your site can make is in its simplicity.
Suggestion: For modification from color selection aspect, we choose to use white space. This
is because white space allows for easier scanning of a website. It reduces the
amount of text visitors see all at once and makes reading much easier. It allows
for the visual separation of design elements without adding any new elements
such as visible lines or boxes. It is clean, looks professional when used correctly,
and gives a site an uncluttered and fresh feel. We also put some blue color
because is a conservative color with incredibly high trust value and is known to
relax the nervous system. This new modification looks like professional and
suitable with the educational background.
4.3 Layout Setting
Website design is not a onetime activity. Almost all websites alter their layouts to give it
a new and better look. Also with advancement in technology, underlying code also changes
accordingly, adding new possibilities of providing a better layout.
Points to consider while designing a website layout
a) Keep it simple.
A simple website layout is user friendly. Do not create complex navigational links using
complex scripts or images that may not be viewable correctly in different browsers. Also
search engines cannot index the site properly if complex navigation is involved.
Minimize the use of bulky images which take long to load. Use smaller icons to attract
visitor's attention instead.
b) Readable font size and face
Use a standard font size of "-1" (11 or 12 pixels if using styles) so that visitors can read
the content easily. Select a professional looking font face (Verdana, Arial, Helvetica,
sans-serif are very common). Avoid using fancy fonts like Comic Sans
(unless it is a personal website). Use appropriate spacing between lines (12 or more
pixels) to avoid clumsiness.
c) Use web safe eye pleasing colors.
The choice of colors may reflect one's personal taste. Every webmaster or designer wants
the color combination that he/she likes best. However, it is a wise decision to get
feedback from users or friends about what they feel about the color combination
of the website. Use web safe colors whenever possible.
d) Webpage Dimensions:
One important aspect of layout is keeping track of dimensions of a web page. Most
successful commercial websites limit the width and height of the webpage so that the
important content of the webpage lies within the top 600x600 viewable area without
scrolling. To avoid a horizontal scrollbar, set the page layout to expand and shrink with
changes in browser window size. Sometimes this interferes with image and text positions
relative to each other and throws the layout structure out of sync. The best choice is to
limit the width by placing a table with a fixed width of 750 or 775 pixels. See the layout
of this web page for an example. The page height should not be any more than 4 scroll
lengths. Limit the content of the page and if more content needs to be added, move it to a
new web page. Provide a navigational link to the next page and a link back from the
second page. This will also increase your web site's page views (adding more advertising
space).
e) Limit File Size
Webpage size is defined by the total size of text, images and supporting files (including
JavaScript, flash etc.) that is downloaded from the server to view a webpage. Page size is
very critical for high volume websites because of high bandwidth needed. However, it is
also very important for any other site in order to keep loading times to a minimum. Most
of the population on the internet use a slow 56K modem to access the internet. And
smaller page sizes load faster. If you look at some very high volume websites like
Yahoo.com and Google.com, they hardly have any images, making their site load faster.
There is a tradeoff between making your webpage look nicer with lots of graphics and
making it faster to load. The rough target for page size should be below 35K for at least
the cover page. However, for e-commerce sites, it is often not possible because they have
to present multiple product images to attract attention. As a general rule of thumb, a
visitor will leave your site if the loading time is more than 8 seconds.
Suggestion: For modification from layout setting, we decide to make this design is
professional. Then we put the header as the banner for this website. In addition we
make some navigation button to ensure that users can find their way in this
website. Navigation is a key component of a website, relating directly to its
success. Also known as a button bar, website navigation is the gateway into the
different sections of content, and there are some general rules to follow to design
it effectively. Besides that, the effective navigation is putting up good navigation
on your Web sites allows your readers to easily find their way around. There are
several button that is home button for the home page, about us link is about the
designer that make this website, learning button for learning for students,
activities button for the tutorial or games that can use by users, resources button
for some material in education and the last button is how to contact with the
author of this website.
4.4 Multimedia Elements
It is advisable to use symbols or icons to establish a visual signal. Caution still the choice
of symbols because the sense perceived by the user may be different from that attributed to him,
especially if the website has an international vocation. The following symbols are commonly
used:
A magnifying glass usually symbolizes a search function.
Indicates an envelope can contact the webmaster by mail
A question characterizes online help.
A house is a link to the homepage.
A flag indicates the language of the current page or the possibility of changing language
Great design doesn’t need fancy graphics. But poor graphics will definitely hurt a design.
Graphics add to the visual message. Websites like Web Designer Wall have impressive
illustrations, while others are understated. Try to make the graphics go well together, and
make sure they embody the style you are aiming for. We are not all gifted with the same natural
ability, though. You can pick up some things by learning from others, but sometimes you just
have to pick the style.
Suggestion: For modification from multimedia elements, we use simple graphic for the home
page. This picture use can assume that that website is education website. No need
to put many graphic because that can be annoying. There is some audio and
sound use in this website. Video use for the resource where student can follow
their instructor when make some activities. Audio also use for sound button in
games activities.
5.0 Modification Suggestion Prototype
A model is a fake website and summary (prototype) with the design of the site and its
navigation. The model allows formalizing the design of the site and is usually the validation
stage of this phase, to move to the implementation phase. The model represents the main pages
of the site (without content) with static pages and can simulate navigation. Thus, the dynamic
elements such as search engine, for example, lead to a page with fake results. The figure below is
show the design after the modification.
6.0 Conclusion
In Web design it is too easy to get engrossed in the many unique constraints of the
medium and completely forget some of the underlying concepts that can strengthen any design.
To better discuss such concepts, we need to step back from our specific discipline and look to the
history of the field. It is here we find the axioms of our profession. Good Web design is not
limited to the seven key principles discussed here. Aspects such as accessibility, readability and
usability play a part, too.
Header
Balance
Graphic
Navigator
Logo
Copyright
Content
White Space
7.0 References
– http://www.bestedsites.com/
- www.wikipedia .com
- www.google.com
- www.yahoo.com
- Principles of web design / Joel Sklar- Australia : Course Technology, 2000
- Developing online content : the principles of writing and editing for the web /
Irene Hammerich, Claire Harrison- New York : John Wiley, 2002
- Web application architecture : principles, protocols and practices / Leon Shklar,
Rich Rosen- Chichester, England ; Hoboken, NJ : Wiley, 2009
Recommended