Unit I

WEB DESIGNING PRINCIPLES

What is Website Architecture?
Website Architecture
Architecture is all about structuring a website. This is done to ensure that the website you create
meets your goals as a business website and also meets the requirements of the user.
It is how the content on your website is organized. Without a proper knowledge of website
architecture, you may end up creating a website that is completely confusing. At times the content
itself may get lost and go inaccessible.
The Concepts involved in Website
Architecture
Website architecture refers to the way we structure a website to ensure we meet our business goals
while delivering a great experience for our users.
Where information architecture (IA) is a broad field that refers to the structure of any shared system
of information, online or otherwise, website architecture relates specifically to websites. All websites
have an IA but the overall picture of a website’s architecture also includes:
usability
interaction design
user interface design
information design
web design
graphic design
content strategy
Creating a website architecture plan
Developing the architecture for a website is an essential part of the web design process and
there’s a lot to be considered. Before you develop your structure, you need a plan to ensure your
approach suits both business requirements and user needs.
Frame your approach: Are you redesigning an existing website or designing something new? If
it’s an existing website, you will need time to gain a thorough understanding of the current state
before moving on to anything else.
Understand the business goals: Whether you’re redesigning or designing something new, you
will require a firm understanding of the intent, drivers, and goals of the business. Knowing this
will enable you to make sound design decisions, keeping your project on track.
Creating a website architecture plan
Understand your user: Engage with your users and conduct research to understand their needs,
behaviors, and motivations. You may have completed some user research recently, so this is an
opportunity to build upon and validate those findings. If you’re redesigning, you might consider
running a usability test on the current state for benchmarking purposes.
Create personas: Once you’ve completed your user research, a great way to translate those
findings into a usable format is through personas. A persona is a story about a fictional user that
is based on information gathered from actual users. They have a name, a background story, and a
photo that allows your team to put a human face to the people for which you are designing. Print
them out and refer to them as you design your structure.
Creating a website architecture plan
Gather your content: Before designing (or redesigning) a website architecture, assemble all
your content and ensure it is current, accurate, and consistent. You can only decide upon a
website architecture structure if you know what it is you’re structuring in the first place. If you
attempt to do this before you have your content, you will most likely spend a lot of time updating
and reworking it over the course of your project. Not only is this a waste of time and resources,
but you run the risk of losing sight of the original purpose of the website, which can derail the
entire project and result in even more work.
Run a card sort: Once you have collated the content for your website, it’s a good idea to run a
card sort with your users to determine how your content should be grouped. If you conduct the
study as an open card sort, you can also gain insights into how your users might expect your
content to be labelled. A card sort can be run as a moderated study or you could use OptimalSort,
which allows you to reach a larger audience and does most of the analysis work for
you. OptimalSort also makes moderated card-sorting easier by providing the option to print
barcoded cards; these can be scanned back in after each moderated session, giving you the best of
both worlds.
 Some of the basic concepts you need to take
care include
1) Understanding the Exact Goals
Have a clear understanding of the driving goals of your business before you actually move ahead to
opt for website architecture. You need to understand the purpose and goals of your actual business.
This will go a long way in helping you check that your project is right on the track.
2) Check out Your User
This is another important aspect that affects your website design and architecture. Ultimately, it is the
website users who will decide the fate of your website, and in turn your business. From that
perspective, it should be ideal to conduct a complete research into the needs and expectations that
your users may have with respect to your website. In case you are redesigning your website, running a
usability test can be helpful in making the right decision.
3) Curate Your Content
Assemble your content for the website. This can be an essential element in making it possible to
take decisions on the exact website architectural structure. While you are gathering the content
and curating it, ensure that the content is accurate, current and consistent with your business
goals.
Page architecture
Websites showing different layouts
Navigation Bar Design Principles
 Example Horizontal Navigation bar
<!DOCTYPE html> <p>In this example, we remove the bullets from the list, and its
default padding and margin.</p>
<html>
<head>
<ul>
<style>
<li><a href="#home">Home</a></li>
ul {
<li><a href="#news">News</a></li>
list-style-type: none;
<li><a href="#contact">Contact</a></li>
margin: 0;
<li><a href="#about">About</a></li>
padding: 0;
</ul>
}
</style>
</body>
</head>
</html>
<body>
 Example Vertical Navigation bar
Li a:hover:not(.active) {
<!DOCTYPE html> background-color: #555;
<html>
<head> color: white;
<style> }
ul { </style>
list-style-type: none; </head>
margin: 0;
padding: 0; <body>
width: 200px;
background-color: #f1f1f1; <h2>Vertical Navigation Bar</h2>
}
li a { <p>In this example, we create an "active" class with a green background color and a white
display: block; text. The class is added to the "Home" link.</p>
color: #000; <ul>
padding: 8px 16px; <li><a class="active" href="#home">Home</a></li>
text-decoration: none;
} <li><a href="#news">News</a></li>
li a.active { <li><a href="#contact">Contact</a></li>
background-color: #04AA6D; <li><a href="#about">About</a></li>
color: white;
} </ul>
</body>
</html>