The document provides an overview of web design concepts and best practices. It discusses the planning process for developing a website, including setting goals, budgets, roles and a content strategy. It also covers basic design principles like simplicity, navigation and visual hierarchy. Additionally, it defines static and dynamic websites and explains responsive design. The document concludes by introducing web standards and recommendations from the W3C for ensuring consistency across browsers.

1. WEB DESIGNING
(UNIT-1, PART -1)
BY:SURBHI SAROHA
Assistant Professor
1SURBHI SAROHA

2. Syllabus
 Basic principles involved in developing a web
site.
 Planning process.
 Domains and Hosting.
 Responsive Web Designing.
 Types of Websites(Static and Dynamic).
 Web Standards and W3C recommendations.
2
SURBHI SAROHA

3. Basic principles involved in
developing a web site.
 1. WEBSITE PURPOSE
 Your website needs to accommodate the
needs of the user. Having a simple clear
intention on all pages will help the user interact
with what you have to offer.
 2. SIMPLICITY
 Simplicity is the best way to go when
considering the user experience and the
usability of your website.
3
SURBHI SAROHA

4. Cont….
 3. NAVIGATION
 Navigation is the way finding system used on
websites where visitors interact and find what
they are looking for. Website navigation is key
to retaining visitors.
 4. F-SHAPED PATTERN READING
 The F- based pattern is the most common way
visitors scan text on a website. Eye tracking
studies have found that most of what people
see is in the top and left area of the screen.
4
SURBHI SAROHA

5. Cont….
 5. VISUAL HIERARCHY
 Visual hierarchy is the arrangement of elements is
order of importance. This is done either by size,
colour, imagery, contrast, typographically,
whitespace, texture and style.
 6. CONTENT
 An effective web design has both great design
and great content. Using compelling language
great content can attract and influence visitors by
converting them into customers.
5
SURBHI SAROHA

6. Cont….
 7. GRID BASED LAYOUT
 Grids help to structure your design and keep
your content organized. The grid helps to align
elements on the page and keep it clean.
 8. LOAD TIME
 Waiting for a website to load will lose visitors.
Nearly half of web visitors expect a site to load
in 2 seconds or less and they will potentially
leave a site that isn’t loaded within 3 seconds.
6
SURBHI SAROHA

7. Cont….
 9. MOBILE FRIENDLY
 More people are using their phones or other
devices to browse the web. It is important to
consider building your website with a
responsive layout where your website can
adjust to different screens.
7
SURBHI SAROHA

8. Planning process.
 1. Set your purpose and goals.
 What is the purpose of your website? Is it to
gain publicity for your business? To sell your
inventory? To rally support behind a cause?
It’s important to identify your website’s
purpose, as well as your target audience. You
should also define your goals. How many
visitors do you expect per month?
8
SURBHI SAROHA

9. Cont….
 2. Create a budget.
 Whether you’re an established, mid-sized
organization or a fledgling start-up, you should
always set a budget for your website
expenses. This will probably include funds for
web design, programming, and web hosting
(though other expenses may apply). Research
the market by shopping around and consulting
with professionals.
9
SURBHI SAROHA

10. Cont….
 3. Assign roles.
 Company stakeholders (owner, marketing
manager, or whoever else represents a
primary function of the business)
 Web developer
 Content writer and/or editor
 HTML/CSS professional
 Web and graphic designer
10
SURBHI SAROHA

11. Cont….
 4. Create a content strategy.
 What kind of content will you be displaying on
your website? Content is basically anything that
gives your visitors information. It can include, but
is not limited to:
 Blog posts
 Documents
 Video
 Pictures (such as in a gallery)
 Slideshows
 Embedded social media feeds (such as your
Twitter stream or Facebook page updates)
11
SURBHI SAROHA

12. Cont….
 5. Structure your website.
 Decide what pages you’ll be using and what
features will be on each one. Most websites have
an About and Contact page, but the pages you
use should meet your business’ needs.
 6. Create a mock-up.
 A page mock-up, also know as a wireframe, is
essentially the outline of your website (with the
initial design being the first draft). Usually created
in Photoshop or Fireworks, you don’t have to put
too much detail into your mock-up.
12
SURBHI SAROHA

13. Cont…
 7. Start designing.
 The importance of good web design can’t be
stressed enough. Good website design includes
both usability and aesthetics. An ugly website will
drive away visitors, as will a website that’s difficult
to navigate.
 8. Test it out.
 Testing is important for getting out bugs out and
catching details that you might have missed
initially. Make sure your website shows up the way
you want it to in all browsers, including Chrome,
Firefox, Internet Explorer, and mobile web
browsers like Safari and Opera Mini.
13
SURBHI SAROHA

14. Cont….
 9. Maintain your site.
 Once your site is launched, the work isn’t over. A
website is an ongoing entity that continuously
represents your company, so maintenance is very
important. Monitor your analytics software to see
how your website is performing with the public.
Keep an eye on metrics like your number of
unique visitors, bounce rate, and which pages are
most popular on your website. You might find that
certain metrics are more useful to you than others,
but that is information you’ll find out over time.
14
SURBHI SAROHA

15. Domains and Hosting
 Web Hosting is an account on a computer
(aka server) that can store and serve website
files via the Internet.
 Domain Registration is leasing a human-
readable word (e.g., amazon.com) that directs
people to specific website files via a browser.
As an analogy, a domain is an “address” on
the Internet.
15
SURBHI SAROHA

16. Responsive Web Designing.
 Responsive web design is about creating web pages
that look good on all devices!
 A responsive web design will automatically adjust for
different screen sizes and viewports.
 What is Responsive Web Design?
 Responsive Web Design is about using HTML and
CSS to automatically resize, hide, shrink, or enlarge, a
website, to make it look good on all devices
(desktops, tablets, and phones)
 Responsive Images
 Responsive images are images that scale nicely to fit
any browser size.
16
SURBHI SAROHA

17. Types of Websites(Static and
Dynamic).
 Website is a collection of related web pages
that may contain text, images, audio and
video. The first page of a website is called
home page. Each website has specific internet
address (URL) that you need to enter in your
browser to access a website.
 Website is hosted on one or more servers and
can be accessed by visiting its homepage
using a computer network. A website is
managed by its owner that can be an
individual, company or an organization.
17
SURBHI SAROHA

18. Static website
 Static website is the basic type of website that
is easy to create. You don't need the
knowledge of web programming and database
design to create a static website. Its web
pages are coded in HTML.
 The codes are fixed for each page so the
information contained in the page does not
change and it looks like a printed page.
18
SURBHI SAROHA

19. 19 SURBHI SAROHA

20. Dynamic website
 Dynamic website is a collection of dynamic web pages whose
content changes dynamically. It accesses content from a
database or Content Management System (CMS). Therefore,
when you alter or update the content of the database, the
content of the website is also altered or updated.
 Dynamic website uses client-side scripting or server-side
scripting, or both to generate dynamic content.
 Client side scripting generates content at the client computer
on the basis of user input. The web browser downloads the
web page from the server and processes the code within the
page to render information to the user.
 In server side scripting, the software runs on the server and
processing is completed in the server then plain pages are
sent to the user.
20
SURBHI SAROHA

21. 21 SURBHI SAROHA

22. Web Standards and W3C
recommendations
 Created in 1994, W3C is an international
community of member organizations that
articulates web standards so that websites
look and work the same in all web browsers.
 Its mission is to lead the World Wide Web to
its full potential by developing standards,
protocols and guidelines that ensure its long-
term growth.
22
SURBHI SAROHA

23. 23 SURBHI SAROHA