Lesson 2 Introduction To Principles of Web Design

Web Design and Development Lesson 2
Lesson 2: Introduction to Principles of Web Design
Lesson 2: Introduction to Principles of Web Design ................................................................................... 1

2.1 Concepts ....................................................................................................................................... 2
2.2 Architecture .................................................................................................................................. 2
2.3 Design ........................................................................................................................................... 2
2.4 Execution ...................................................................................................................................... 2
2.5. Testing........................................................................................................................................... 3
2.6. Navigation Design......................................................................................................................... 3
2.6.1. Cross-Navigation ................................................................................................................... 3
2.6.2. Color-coding .......................................................................................................................... 4
2.6.3. Tabs ....................................................................................................................................... 4
2.6.4. Breadcrumb trail ................................................................................................................... 4
2.6.5. Process Steps ........................................................................................................................ 5
Lesson 2 Discussion Session ..................................................................................................................... 5
Compiled by: Karari E.K email: [email protected] 1

2.1 Concepts
An effective website design should fulfil its intended function by conveying its particular message whilst
simultaneously engaging the visitor. Several factors such as consistency, colors, typography, imagery,
simplicity, and functionality contribute to good website design.
When designing a website there are many key factors that will contribute to how it is perceived. A well-
designed website can help build trust and guide visitors to take action. Creating a great user experience
involves making sure your website design is optimized for usability (form and aesthetics) and how easy
is it to use (functionality).
2.2 Architecture
This about the interactions happening between applications, databases and middleware
systems on the web. The architecture not only connects all these different elements but also
ensures the simultaneous functionality of all these multiple applications.
When you type a URL and click on the search button, the web browser is requested for that
specific web address you typed. This request is received by the internet-facing server containing
information about the specific site the webpage is a part of.
The server then sends a file to the browser as a response to the request made. Those files are
then executed by the browser to show the requested web page to the user.
The main aim of a high-performance web application architecture is to run the function of the
web application and give the users an efficient, reliable and secure experience.
2.3 Design
There are some rules that dictate how good web designs are made. They include:
1. The purpose- There is always a goal in mind that makes design teams tweak every last detail,
crafting a tailored design that seeks to achieve that goal. A classic example is ecommerce
websites.
2. Balance between bright visuals and empty space- It’s important to know when less visuals can
make the entire design better, allowing users to focus on the right things. Sometimes, by adding
more elements we dilute the true power of the design or simply make it more difficult for users
to recognize what they see.
3. Typography can make or break a webpage- From choosing a font with undeniable readability
even in very small size to opting for something dramatic for a high-impact title.
4. Mobile-friendly design- This is a necessity as the use of mobile devices continues to grow.
5. Minimum cognitive effort- Some of the tactics are like allowing whitespace and making sure the
design isn’t too busy.
2.4 Execution
At this step, you can finally start creating the website itself. Graphic elements that have been designed
during the previous stage should be used to create an actual website. Usually, the home page is created
first, and then all sub-pages are added, according to the website hierarchy that was previously created
in the form of a sitemap.

2.5. Testing
Testing is probably the most routine part of a process. Every single link should be tested to make sure
that there are no broken ones among them. You should check every form, every script, run spell-
checking software to find possible typos. Use code validators to check if your code follows the current
web standards. Valid code is necessary, for example, if cross-browser compatibility is crucial for you.
After you check and re-check your website, it’s time to upload it to a server. An FTP (File Transfer
Protocol) software is used for that purpose. After you deployed the files, you should run yet another,
final test to be sure that all your files have been installed correctly.
2.6. Navigation Design

This is the discipline of creating, analyzing and implementing ways for users to navigate through
a website. Navigation plays an integral role in how users interact with and use your website. It
is how your user can get from point A to point B and even point C in the least frustrating way
possible.
2.6.1. Cross-Navigation
Navigation can either be horizontal or vertical.
 Horizontal- Website visitors are drawn to the top of the site for ways to access the
various information available, and this ensures they are able to find what they need.
Examples of labels for horizontal navigation include About Us, Products, Services, Plans,
News, Blog, and Contact.
 Vertical- also referred to as sidebar navigation, lists out the website pages in a column
located on the right or left side of the page.
You can often find this type of navigation to categorize blog posts and articles.

2.6.2. Color-coding
It enables users to quickly jump to a specific section with the knowledge of the color associated
with it.
2.6.3. Tabs
This is essentially a set of buttons most often set horizontally. Tabs generally follow numerous
different styling guidelines. Tabbed navigation is based on the folder metaphor, which anyone
who works in an office or watches television should be familiar with.
2.6.4. Breadcrumb trail

A breadcrumbs navigation type is used to tell your visitors where they are currently on the
website. It is a hierarchical linking structure designed to show how pages are characterized in
relation to other pages on the site.

2.6.5. Process Steps

In this section we highlight steps to better website navigation:
1. Create a sitemap- a list of all your categories and subcategories and the pages, posts, etc, within
them, together with a link to each one.
2. Organize your site for your visitors.
3. Do not overpopulate a menu’s top level.
4. Limit top navigation menus to two levels.
5. Keep menu titles brief.
6. Make use of footer and secondary menu conventions.
7. Remember to use clickable call-to-actions.
8. Do not forget mobile users.
Lesson 2 Discussion Session

a) Discuss characteristics of a user-friendly website.
b) State components of a web system architecture.

Lesson 2 Introduction To Principles of Web Design

Uploaded by

Copyright:

Available Formats

Lesson 2 Introduction To Principles of Web Design

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 2 Introduction To Principles of Web Design

Uploaded by

Copyright:

Available Formats

Web Design and Development Lesson 2

Lesson 2: Introduction to Principles of Web Design

Lesson 2: Introduction to Principles of Web Design ................................................................................... 1

Compiled by: Karari E.K email: [email protected] 1

Compiled by: Karari E.K email: [email protected] 2

2.6. Navigation Design

Compiled by: Karari E.K email: [email protected] 3

2.6.4. Breadcrumb trail

Compiled by: Karari E.K email: [email protected] 4

2.6.5. Process Steps

Lesson 2 Discussion Session

Compiled by: Karari E.K email: [email protected] 5

You might also like