12/6/2018 LMS

Close

English

WIKI: WEBSITE DESIGN

1 What is website design?

Web design is the planning and creation of websites. This includes the information architecture, user
interface, site structure, navigation, layout, colors, fonts, and imagery.

Everything about your website - including the content, the way it looks, and the way it works - is
determined by the website design. Web design is a process of conceptualizing, planning, and building a
collection of electronic files that determine the layout, colors, text styles, structure, graphics, images, and
use of interactive features that deliver pages to your site visitors.

When you're ready to build a website, you have several options. If you are not familiar with HTML
programming language and Web design applications, there are a number of other options for creating
your Web design:

Hire a professional website design expert to create and build a unique Web site.
Create your own website design using off-the-shelf software such as FrontPage® or
Dreamweaver®. (These software packages do require technical expertise.)
Use online website design tools that have a WYSIWYG interface.

2 Why do I need to learn website design?

Learning web design and development can give you the creative edge that's rare in today's world. It is
extremely valuable to understand the fundamentals of web design if you want to work in digital
marketing, social media or design.

Nowadays, almost all jobs require a level of computer literacy. As everything we do becomes more and
more automated, having fundamental knowledge and background in web design and development will
give you an advantage when you start working. Being able to design and build a website from scratch
will give you a new perspective, appreciation, and understanding of how websites actually work. It will
also practice your analytical and problem solving skills.

3 What does a website layout look like?

To design your website, you will go through the process of paper prototyping. In human–computer
interaction, paper prototyping is a widely used method in the user-centered design process. It involves
creating rough, even hand-sketched, drawings of an interface to use as prototypes, or models, of a
design. While paper prototyping seems simple, this method of usability testing can provide a great deal
of useful feedback which will result in the design of better products. This is supported by many usability
professionals.

Here are examples of paper prototypes of webpages:

http://lms.ayalaeducation.com/Learning/Wiki/WikiPreview.aspx?WikiId=2720&WikiMode=1&ModuleId=22129&CourseId=2373&CourseSessionId=511… 1/4
12/6/2018 LMS

Elements of Web Design

Web design uses many of the same key visual elements as all types of design such as:

Layout: This is the way the graphics, ads and text are arranged. In the web world, a key goal is to help
the view find the information they seek at a glance. This includes maintaining the balance, consistency,
and integrity of the design.

Colour: The choice of colours depends on the purpose and clientele; it could be simple black-and-white
to multi-coloured design, conveying the personality of a person or the brand of an organization, using
web-safe colours.

Graphics: Graphics can include logos, photos, clipart or icons, all of which enhance the web design. For
user friendliness, these need to be placed appropriately, working with the colour and content of the web
page, while not making it too congested or slow to load.

http://lms.ayalaeducation.com/Learning/Wiki/WikiPreview.aspx?WikiId=2720&WikiMode=1&ModuleId=22129&CourseId=2373&CourseSessionId=511… 2/4
12/6/2018 LMS

Fonts: The use of various fonts can enhance a website design. Most web browsers can only read a
select number of fonts, known as "web-safe fonts", so your designer will generally work within this widely
accepted group.

Content: Content and design can work together to enhance the message of the site through visuals and
text. Written text should always be relevant and useful, so as not to confuse the reader and to give them
what they want so they will remain on the site. Content should be optimized for search engines and be of
a suitable length, incorporating relevant keywords.

Creating User-Friendly Web Design

Besides the basic elements of web design that make a site beautiful and visually compelling, a website
must also always consider the end user. User-friendliness can be achieved by paying attention to the
following factors.

Navigation: Site architecture, menus and other navigation tools in the web design must be created with
consideration of how users browse and search. The goal is to help the user to move around the site with
ease, efficiently finding the information they require.

Multimedia: Relevant video and audio stimuli in the design can help users to grasp the information,
developing understanding in an easy and quick manner. This can encourage visitors to spend more time
on the webpage.

Compatibility: Design the webpage, to perform equally well on different browsers and operating
systems, to increase its viewing.

4 How do I create a paper prototype?

Though paper prototyping has been around since the 1980s and has had different variations, there are
some standard practices to follow. Justin Mifsud, UI Designer and Owner of UsabilityGeek, explains
these steps in a post for his site:

Sketch each screen — Each screen's sketch should be creative — for example, a pull down
menu can be folded underneath the paper at first — but also individual and separate from the
rest.

Create user scenarios — Create a realistic scenario to run through, either to demonstrate for
a presentation, or for your test-takers to try to figure out.

Rehearsal — Run through the different scenarios until the “human computer” works like a real
machine.

Presentation/Test — Now you're ready for the presentation or usability test. For
presentations, just run through the scenario as rehearsed.

For every link and button on your website, be prepared to have a matching sketch ready to
display.

5 Additional Resources

10-minute Practical Guide to Paper Prototyping

https://studio.uxpin.com/blog/paper-prototyping-the-practical-beginners-guide/
An article about when to use paper prototypes, why they can help, and how to make one to suit your
own needs.

4 Key Components of a Great Web Design

http://webdesignledger.com/the-four-key-components-of-a-great-web-design/
An article containing the four key components of a great web design with examples and resources.

http://lms.ayalaeducation.com/Learning/Wiki/WikiPreview.aspx?WikiId=2720&WikiMode=1&ModuleId=22129&CourseId=2373&CourseSessionId=511… 3/4
12/6/2018 LMS

7 Essential Elements for a Great Website Design

http://foxlearningsystems.com/blog/7-essential-elements-for-a-great-website-design/
A list of the basic requirements of any website.

10 Website Layout Examples

http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/
A gallery of website layout examples.

Trendy Web Color Palettes, Schemes, and Tools

http://www.awwwards.com/trendy-web-color-palettes-and-material-design-color-schemes-tools.html
A website containing examples of websites with great color palettes, guidelines in choosing a material
design color, and links to online tools to help you choose a color palette.

6 Cited Resources

Hawkyard, J. (n.d.). What is Web Design? Retrieved March 21, 2016, from https://www.treefrog.ca/what-
is-web-design

Kyrnin, J. (n.d.). What is Web Design? Retrieved March 21, 2016, from
http://webdesign.about.com/od/webdesign/qt/what-is-web-design.htm

Medero, S. (2007, January 23). Paper Prototyping. Retrieved March 21, 2016, from
http://alistapart.com/article/paperprototyping

Paper Prototyping. (n.d.). Retrieved March 21, 2016, from http://www.creativebloq.com/ux/how-

prototype-websites-paper-31514246

What is Website Design? (n.d.). Retrieved March 21, 2016, from

http://www.networksolutions.com/education/what-is-a-web-site-design/

Wikipedia: Paper Prototyping. (n.d.). Retrieved March 21, 2016, from

https://en.wikipedia.org/wiki/Paper_prototyping

http://lms.ayalaeducation.com/Learning/Wiki/WikiPreview.aspx?WikiId=2720&WikiMode=1&ModuleId=22129&CourseId=2373&CourseSessionId=511… 4/4