ABSTRACT

A web designer needs to constantly update himself to survive and shine in his
industry. He needs to be knowledgeable about the latest trends and designs followed
and should be able to satisfy his clients about the latest happenings in the design
industry. That makes it very important for him to go through others works and
observe any new thing he finds interesting and follow that. So, Inspiration is the most
important thing for a designer to look and observe and follow it with his own ideas to
create his own design. Changes are happening every second in all the fields and new
trends are always seen in every field. Web designing has also seen constants
developments and changes which happen every time.

Web designing has also seen a change in the form of designs from handmade
sketches, headers, and logos, perspective changes, keeping the designs minimal and
layouts from magazines. These are some of the trends which are followed and still the
designs keep changing which needs to be constantly updated with the latest trends. A
web designer constantly works on new projects which demand a lot of creativity from
him, so he starts hunting for unique or unusual designs which he tries to give a
different look through his creativity. This hunt is Inspiration which is the most
important aspect for his designs because he needs to be different from others, so web
design galleries give him a new way of defining his own designs which itself can
become an inspirational design. With the use of some of the inspirational designs, he
improves himself or redefines himself and ends up with a fresh new design for his
website.
CONTENTS

1. WEB DESIGN 01

1.1 Definition1
1.2 Principle of Web Design1
1.2.1 Anatomy of Website2
1.2.2 White space3
1.2.3 4
1.2.4 5
1.2.5 6
1.2.6 7
1.2.7 8
1.2.8 9
1.2.10 1
1.2.11 12
1.2.12 13
1.2.13 14
1.2.14 15
1.2.15 16
CHAPTER 1

WEBSITE DESIGN

1.1 Definition

Web design is the process of creating websites. It encompasses several different

aspects, including webpage layout, content production, and graphic design. While the
terms web design and web development are often used interchangeably, web design is
technically a subset of the broader category of web development. Websites are created
using a markup language called HTML. Web designers build webpages using
HTML tags that define the content and metadata of each page. The layout and
appearance of the elements within a webpage are typically defined using CSS, or
cascading style sheets.

1.2 Principle of Website Design

A Website is a related collection of World Wide Web (WWW) files that includes:

Anatomy of Website

White Space

Style & Theme

Inspiration

Headers & Footers

Background Texture

Typography

Navigation

Spread Sheets

Organization

CSS

Contents

Usability

Goals

[1]
1.2.1 Anatomy of website

Good web design has a number of common features which make websites easier and
more enjoyable to use. Some of feature are:

Main navigation

The main navigation is usually a horizontal row of 5-8 page links, which are either at
the top of the site structure, or are the most important pages on the website.

Secondary navigation

Secondary navigation refers to pages below the top level of the website, the second
tier of the site structure.

Page title

The title of your page is crucial to attract a visitor's interest. Studies have found that
the vast majority of visitors will look at a web page for less than 30 seconds.

Breadcrumb trail

A useful navigational aid, the breadcrumb trail is usually placed just below the page
header and shows at a glance where the visitor is located in the site.

Hero image

This refers to a large image at the top of the page content that grabs the visitor's
attention. Its use should be restricted to key pages such as the home page, in order to
maximize the effect. 

Content width

An important consideration for readability is the width of the main content of a page.
Text that spans the whole page can be hard to follow, which is why newspapers use a
series of narrow columns.

[2]
1.2.2 White Space

Whitespace, many times referred to as negative space, is the portion of a page left
unmarked, the portion that is left blank, or (as Mark would quote) the empty space in
a page. In web design terms, it’s the space between graphics, columns, images, text,
margins and other elements.

White space – an active element

Negative space has been considered a passive element, but it plays an extremely
important role in enhancing brand exposure and improving the entire visual layout.
Creating and delivering a great user experience involves more than using white space,
but we can’t deny the huge importance of this element

The role of white space in web design

There are two types of white space: micro and macro white space. Micro white space
is the space between those smaller elements: between letters, words, list items,
between an image and a caption. Think, for example, about an online newspaper.

Negative space has a huge influence. Find out why!

White space gives the brain visual cues regarding what elements are separated and
which belong together. The best example consists of several lines of phone numbers
or email addresses on a site separated by white space, which signals your brain that
each is a different sequence and not a very long number.

Clients should also understand the importance of white space

If you have doubts or if your clients don’t understand quite well the importance of
negative space, here’s what you can do: build your design in two different ways. One
featuring less negative space to convey a more practical and down-market tone and
the other one with more white space for a sophisticated feeling. Keep in mind that you
should use the same elements in your two designs. The only thing that you should do
differently is to change the spacing between all these elements.

[3]
1.2.3 Style & Theme

A style is a collection of attributes that specify the look and format for a View or
window. A style can specify attributes such as height, padding, font color, font size,
background color, and much more. A style is defined in an XML resource that is
separate from the XML that specifies the layout.

A theme is a style applied to an entire Activity or app, rather than an individual View,

as in the example above. When a style is applied as a theme, every view in the activity
or app applies each style attribute that it supports. For example, if you apply the
same CodeFont style as a theme for an activity, then all text inside that activity
appears in a green monospace font.

Applying Styles and Themes

There are several ways to set a style:

When you apply a style to a single View in the layout, the attributes defined by the
style are applied only to that View. If a style is applied to a View Group, the
child View elements don't inherit the style attributes; only the element to which you
directly apply the style applies its attributes. However, you can apply a style so that it
applies to all View elements by applying the style as a theme.

To apply a style definition as a theme, you must apply the style to an Activity or app
in the Android manifest. When you do so, every View within the activity or app
applies each attribute that it supports. For example, if you apply the CodeFont style
from the previous examples to an activity, then the style is applied to all view
elements that support the text style attributes that the style defines. Any view that
doesn't support the attributes ignores them. If a view supports only some of the
attributes, then it applies only those attributes.

Apply a theme & style to an activity or app

Theme overlays allow you to override some of the style attributes applied to a subset
of the components styled by a theme. For example, you might want to apply a darker
theme to a toolbar in an activity that uses a lighter theme. If you are using  Change the
toolbar colors to a dark theme but preserve other style attributes, such as those
relating to size.

[4]
1.2.4 Inspiration

Inspiration, or simply said, an attraction towards something, is a natural way to

respond to things towards which we are attracted to or which gives a new perspective
or dimension towards an idea which we have never explored. Inspiration gives us
fresh ideas, new ways to explore something when we think that this cannot be
improved more than this.

Inspiration in Web Design

Inspiration is the source of creativity, which gives things a new identity, makes it
creative, interesting and novel for a common man to a designer in his every day
works.

Does Inspiration Mean an End to Creativity?

Creativity is not a skill which is in born but it is a skill which is mastered and over the
time it is the ability to take things in a different manner. So, a creator takes inspiration
or observes many things around him and produces results in his own way.

Role of Inspiration in Web Designing

Web designing has come a long way from its evolution till date. Design, itself is no
longer restricted to a pattern but has got inspired from various fields and new designs
are created each and every day and the credit goes to the web designer.

Where Can We Get Web Design Inspirations?

Web designs from other designers in the form of web design galleries can be a great
source of inspiration those galleries present the designs in a novel way which many
give birth to another novel idea. Apart from these galleries there are a lot of other
unusual ways like Visual effects, Digital paintings, Graphic designs and effects, 3 D
visuals, Typography, Vector arts, Graffiti designs and even street paintings can be a
wonderful source of inspiration.

[5]
1.2.5 Header & Footer

One of the most important element of your website is the header and footer - actually
that’s two, but they often go hand in hand. The header and footer often contain
important links, information or a call to action. It’s essential that you use these areas
to their full potential rather than adding them as an afterthought. A lot of useful
information can go here.

Impression with a Header in website

The header on your website is often the first thing that people see, and so it’s essential
that you make a good first impression. You’ll need to think about the style of header
you wish to use, and what you want your header to say. You can choose to display
your logo and contact details, your social media details, images, or a combination of
all three. Show people why they should use your services, and make it clear that you
offer outstanding service, something different and competitive prices. We offer a
number of templates that utilise headers in the most effective way possible, or we can
provide you with bespoke web design in Lanarkshire expertly tailored to suit your
needs. We’ll create a header you can be proud of and which will persuade visitors to
delve deeper and explore your website further. Your header is also easily changeable -
perfect if you want to use it to display your latest special offers.

Attention with a Good Footer

If a header is the first thing the visitor sees, the footer is often the last chance you’ll
have of grabbing a visitor’s attention. Here you can include links to interesting pages,
more special offers, your contact details and more serious things like your privacy
policy and terms of use. A footer is also the best place for elements such as your
copyright notice, or other trademarks. The design of your footer is also important, and
it should be clean, uncluttered and easy to navigate.

Whether you are looking for a redesign, or introduction of headers and footers, or you
need a new website designed from scratch, we offer web design in Lanarkshire you
can trust. Get in touch with us today to learn more about the elements that can drive
more traffic to your website, and convert more visitors into customers

1.2.6 Background Texture

[6]
Texture is a powerful technique for creating compelling and lifelike design projects,
and mastering it will vastly improve your designs. Texture is the surface
quality or feel of an object. The way your skin rubs against the rough fabric of your
wool blanket, the warm sensation of the soapy bubbles covering your skin in the bath
or the gentle touch of your hair falling down your shoulders these are all sensations
and experiences created solely by the qualities of texture

In web design, texture is generally only a visual thing, but it creates a physical
illusion and it continues to play a leading role in the creation of all types of visual
elements.

Use Natural Textures to Bring Organic Life to Your Web Designs

The first trick on our list is to incorporate natural textures into your designs. Natural
texture imagery comprises things like the crisp look of fresh grass or the gentle touch

Tactile Texture To Build Visual Interest

Unlike purely visual textures, tactile textures are those with a physical quality. While
tactile texture describes the physical surface of objects, it can be successfully
transferred into graphic design to create a certain feel.

Photography as a Striking Textured Background

Photography can be used as a textured background to create fascinating designs. The

textured graphic, being immersed with the textual message, is a stunning photograph.

Texture to Build Three-Dimensional Layers in Your Designs

Having a static textured background is one thing, but using that background to create
the sense that your design is three-dimensional and layered is another.

Bold Statement with Textured Typography

Texture can be combined with typography to create stunning design effects.

Typographical art offers a wide spectrum of design variations that add diversity and
accent to modern minimalist designs.

[7]
1.2.7 Typography

Typography is, quite simply, the art and technique of arranging type. It's central to the
work and skills of a designer and is about much more than making the words legible.
Your choice of typeface and how you make it work with your layout, grid, colour
scheme, design theme and so on will make the difference between a good, bad and
great design.

Typography plays an important role in setting the tone and message of a website.

With increased resolutions and responsive design typography is becoming more

important in order to create impact and make a statement.  However, fonts needs to be
checked to ensure they are web safe if they are not being used as image files, render
consistently in all browsers and are legible when viewed in smaller mobile devices.

Why Type Choices Matter So Much in Wed Design

At this point in the series, it should be clear: Type choices will affect your website
design and your target audiences’ experience, especially their first impressions of who
you are and what you do. Type, just like imagery, evokes emotion and feeling. But
sometimes we don’t value this. Instead, many businesses invest the bulk of their
energy choosing from generic stock photos to represent “who they are,” and typefaces
unfortunately takes a back seat in the process.

Invoking feelings and reactions in responsive design through typography

Just as body language and tone is important along with visual language and words to
convey feelings, text alone cannot convey the same message in isolation while artists
can interpret the same and yet create different pieces of the text.

The mobile world is subject to rapid change and the importance of Responsive web
design cannot be ignored. The main content is the main goal and hence typography is
what delivers the right effect. Successful web design is actually the right typography
balanced by right visuals and right text content. And each element should blend
seamlessly with the other.

[8]
1.2.8 Navigation

Navigation and search are intertwined. Search is a form of navigation. In many

situations, the reader will use a combination of the “content gatherers”. They will use
search to bring them to the subject area or product type they are interested in. Then
the navigation should kick in, giving them the context for their search.

Navigation is often taken for granted, but it plays a crucial role in getting site visitors
to view more than just the home page. If navigation choices are unclear, visitors may
elect to hit the “Back” button on their first (and final) visit to a Web site. Once they
enter, the real challenge begins, as it is no easy task to allow first-time visitors to get
take maximum advantage of a site.

Design for the reader

The fundamental principle of navigation design is that you should design for the
reader the person who uses the website. Avoid designing navigation simply for it to
look good. Also, avoid designing navigation from the point of view of the
organization, like using internal, obscure classification names that aren’t commonly
understood.

When designing navigation

Involve readers from day one by surveying or interviewing them about how they
would like to navigate the content.

Create mock-ups of the navigation as early as possible and show them to a sample of
readers to get feedback.

Provide a variety of navigation options

If everyone were to navigate through content in the same way, the job of the
navigation designer would be a lot easier. Unfortunately, different readers have
different preferences on how they like to navigate around a website. Therefore, to
accommodate a variety of readers and their navigation requirements, a range of
navigation options should be offered.

[9]
1.2.9 Spreadsheet

Spreadsheet is a form of separation of presentation and content for web design in

which the markup (i.e., HTML or XHTML) of a webpage contains the page's
semantic content and structure, but does not define its visual layout (style). Instead,
the style is defined in an external style sheet file using a style sheet language such
as CSS or XSLT. This design approach is identified as a "separation" because it
largely supersedes the antecedent methodology in which a page's markup defined both
style and structure

Data Validation 

This handy feature allows you to create a dropdown list inside of a cell. Depending on
the complexity of your data, you can set this in-line or in a separate worksheet.

Concatenation

Concatenation is exactly what you need; it takes two fields and combines them into
one. You might use this to convert First_Name and Last_Name into Full_Name..

Make a Copy

There’s no need to start from scratch. If you’re planning to reuse a document, just
make a copy and you can adjust permissions, keep or change the content, and modify
as you see fit.

Charts and Graphs 

Converting stats into charts and graphs can help you make a more convincing
argument to up the budget and it makes it easier to spot changes in trends.

Functions 

Functions afford savvy marketers an opportunity to perform on par with software

developers by manipulating data and performing calculations.

Protected Sheets 

Sharing is caring. But opening up your spreadsheet could result in someone

accidentally deleting an important formula or critical pieces of data.

[10]
1.2.10 Organization

There was a time when having a working knowledge of basic web design was
adequate to produce some nice designs for an average business owner on the Internet.
Today, this is not the case.

In today’s Internet-dominated environment, it becomes mandatory to observe certain

web design protocols as web design gives way to more advanced web development.
That being said, our article below covers some of the basic website design tips that
must be adhered to by developers in making a website profitable for e-commerce
owners and a pleasing experience for customers.

Define a clear information structure

Certainly, the most logical starting point is to define a clear information structure for
your content. To find out how people are going to use your site, there is nothing more
logical than just to ask them.

Consider different audiences

Your website visitors are not very likely to all be the same. You might even have
different target groups with entirely different levels of expertise, foreknowledge, and
goals.

You might have to include some content elements double because different users
might group them differently. Don’t worry about that. If duplicate links are the only
way to ensure that all your users find certain content, why not include the link twice.

Offer customization

You can also decide for a less predefined and more flexible content organization. Let
your users get involved and decide for themselves what is important and what isn’t.
Especially for services or sites that are very personal, or include regular usage, a
customizable approach might be perfect.

Test before implementation

The most important thing to consider for your content organization is that you don’t
only rely on your own logic, but ask your users what makes sense to them.

[11]
1.2.11 CSS

CSS is a newer animal and is not as familiar to beginning web designers as HTML.
CSS was created to allow designers to have even more creativity and control over
their designs. Today there is more than just one type of Internet browser to design for
and this can be tricky and time consuming for HTML designers. These saves users
time, effort and most likely money when they are creating sites. Also, CSS
encourages less effort by allowing designers to create style sheets. This means when
an edit is made to one page, all other affected changes are automatically made. This
keeps designers from having to make multiple edits for large, detailed websites

Improves Website Presentation

The standout advantage of CSS is the added design flexibility and interactivity it
brings to web development.

Makes Updates Easier and Smoother

CSS works by creating rules. These rules are simultaneously applied to multiple
elements within the site

Helps Web Pages Load Faster

Improved website loading is an underrated yet important benefit of CSS. Browsers

download the CSS rules once and cache them for loading all the pages of a website.

Ability to position elements anywhere: 

Developer to change the position of a particular element if it does not go well with the
way you had wanted it to be.

Print friendly web pages

Another important feature of CSS is that it provides print friendly web pages. This is
to say that the web pages can be easily printed.

Customization 

CSS sheets allow the users to customize the web page. The CSS sheets are stored
externally and allow the user to make requisite changes on their own.

[12]
1.2.12 Web standards and Models

Web standards, simply put, are the basic rules that all Web designers, coders, and
programmers should understand and follow when designing and building webpages.
While these standards mostly deal with coding and other behind-the-scenes issues,
they can also greatly affect a site’s design and influence how visitors access the
content on different sites. Above all, standards help ensure that everyone (including
nonhuman Web robots and spiders) can access every webpage on the Internet
regardless of their browser, device, or operating system. In this article, you’ll learn
where Web standards came from, why you should use them, and where you can go to
find out more about them

Efficiency of code

The larger your files are, the longer they will take to download, and the more they will
cost some people to view (some people still pay for downloads by the megabyte.)

Ease of maintenance

It means you only have to make updates in one place if you want to change your site’s
appearance.

Accessibility

Web users who are visually impaired can use a piece of software known as a “screen
reader” to access the information through sound rather than sight — it literally reads
the page out to them, and it can do a much better job of helping people to find their
way around your web page if it has a proper semantic structure, such as headings and
paragraphs.

Web crawlers/search engines

Chances are you will want your pages to be easy to find by searching on Google, or
other search engines. A search engine uses a “crawler”, which is a specialized piece of
software, to read through your pages.

[13]
1.2.13 Content

High quality content is crucial to the success of any website in order to retain visitors
and have a high ranking on search engines. Of course the design of the website is
essential in making a good first impression on your visitors, but the content of the
website is what will keep them coming back.

Leading search engines like Google are very particular when it comes to the content
of a website. If your website does not have enough quality content then it simply will
not rank highly within search results.  Google doesn’t see how your website ‘looks’ to
visitors, so all it cares about is content, content, and content.

Original and Varied Content

It’s important to remember that internet users need a reason to keep visiting your site.
Everyone has a limited amount of time to spend on-line and you need to offer your
visitors something that will tempt them away from Facebook for 10 minutes, to see
what your site has to offer.

Titles and Meta Data

In the past websites have tended to rely on using page titles and meta data such as the
common keyword and description tags to encourage Google to rank their sites highly
for certain keywords or phrases.  To some extent search engines relied on the content
within these special tags because it was much quicker and easier for them to process
pages this way.  

Keywords

Keywords are the king of the SEO world, and if you want to have a higher ranking on
the search engines you need to understand what keywords your potential customers
are searching on.  Search engines look for keywords within your website content to
determine what a page is about. 

Content Generation

[14]
This all leaves one important question.  How do I get content for my site?  Clearly one
option is to write the content yourself, and if this is something you feel comfortable
doing then it’s also the cheapest option. 

1.2.14 Usability

Usability in website design is the most important aspect. With the importance of the
Internet in business, and the impact a web presence can have on a business's
productivity, an unusable or confusing website can make or break your company's
success. For this reason, it is essential to make sure your company's website is
readable and easily navigated while containing all the information you want it to
possess.

Processing Orders

If your website sells a product and customers cannot figure out how to select and
purchase that product, you will be losing sales. For a small business, every sale
counts.

Detailing Your Business

If your business offers a service rather than a product, your website must still be clear
in what that service is, your fees, how to hire you and how to contact you.

Contact Information

Your website should clearly identify how and when to contact you with questions or
to hire you.

Referrals

A usable website will also make it easy for potential customers to find reviews of
your company or for previous customers to leave reviews of your work. For a small
business, word of mouth can bring more customers to your door than even the most
extensive and well-funded marketing campaigns.

Business Expansion

[15]
A usable website is an often overlooked tool to helping you expand your business.
With even a small one-time investment, the number of customers your website will
draw in if it is usable can be much more than you expect.

1.2.15 Goal

Goal-oriented design is a process for creating solutions that enable people to achieve
realistic goals.

All goals are important, but you may not be able to deliver them all, and you certainly
can’t design for every possibility. If your web project is going to succeed, you need to
know which goals to shoot for.

Marketing Strategist

The marketing strategist plays a key role in the long-term success of your website.
This individual works to ensure the success of the client and their team.

UX Designer

An Agile web design process always begins with the team's involvement in scoping
and prioritizing elements of the project. Your team should always include a UX
designer.

Content Specialist

Content is such an important part of your website, but it doesn’t always get the
attention that it deserves. Too often, the task of writing gets delegated to someone
who is not a professional writer, which can cause poor conversions and project delays.

Website Developer

Strategy, content and design are all key, but without a team of developers to tie all
those pieces together, your website will never be built. The website developer (or
development team) uses the web strategy, content and design to build out the website.

Editor

[16]
It's important to have a great editor as part of your website project. A professional
editor ensures that everything on your website is working, complies with brand
guidelines and is error-free. The editor tests workflows, calls-to-action, internal and
external links, and more.

[17]
Web designing is not only about creating the layout and structure of a website but
involves a lot of other things like the usability of the website which involves the
factors like, how do the visitors like the site, do they visit the site often or do they just
switch from the site, do they use it properly, and do the visitors register themselves
with the site? It is the job of a web designer to identify the audience and goals of the
website and make the sure the website is readable to the use and the visitor finds it
user friendly.

Web designing is not only about designing a web page but involves the whole
production or the process of a website i.e. right from planning to the production of the
site, including the technical development, visual appeal, information structure and the
networked delivery.

The most important quality of a web designer is that, he should be skilled in different
versions of Operating systems and browsers. He should produce a design which looks
visually pleasing, should load quickly, and should be SEO friendly and should be
display well on different browsers and Operating systems.

[18]
REFERENCES

Census data revisited (2008), Anatomy of web page

https://www.iteracy.com/resources/bluffers-guide/anatomy-of-a-web-page/

Catauta R (2015), White Space in Web Design

http://www.instantshift.com/2015/02/26/white-space-in-web-design/

API, Theme and Style

https://developer.android.com/guide/topics/ui/themes.html

Kumar S (2010), Why inspiration playing a critical role in web design

http://www.instantshift.com/2010/11/19/why-inspiration-playing-a-critical-
role-in-web-design/

Cooney G, (2016) Importance of header & footer in web design

http://www.designzbyjamz.com/importance-of-layout-in-graphic-design-
materials/

Theodor V (2015) Role of texture in web design

https://designschool.canva.com/blog/texture/

Noetickeval (2015) Importance of Typography in Web Design

http://noeticforce.com/importance-of-typography-web-design

Summers (2015) Role of Spreadsheet in Web Design

http://www.dtelepathy.com/blog/business/google-spreadsheet-uses

Shamemm (2013) Role of CSS in Web Design

https://shameemullahs.wordpress.com/2013/11/01/role-of-css-in-a-web-
design/

Census data revisited (2015), The importance of content in web design

https://www.webfuel.com/the-importance-of-good-website-content

Census data revisited, The importance of Usability in Web Design

http://www.wahm.com/articles/the-importance-of-usability-in-website-
design.html

Hunt B, Using Goal in Web Design

http://webdesignfromscratch.com/design-process/about-goals/

[19]