1. Website Design
and Development
(Graphically)
Submitted By:
Name
: Aakash Gupta

2. Cover Note
Project Role:
Website Design and Development
This project will provide the user with a new stream of website designing services including
corporate websites, custom build websites and e-commerce websites.
Software Used:
The following software’s were used in making this project:
Name
• Adobe Photoshop CS6
• CorelDraw X6 Graphics Suite
• http://makeagif.com/
• Wordpress 3.6 (PHP)
• MySQL 5.6
• Apache 2.4
Purpose
Graphics Design
Page Layout
Animated Images(.GIF)
Front End GUI
Database Server
Back End Server
Future Perspective:
To make this application available for all the people who have to commute to far off places on
daily basis and help them in every possible way. On the environmental side, its main perspective
would be to restrict the pollution in the atmosphere to the bare minimum level.

3. PREFACE
Web design encompasses many different skills and disciplines in the
production and maintenance of websites. The different areas of web design
include web graphic design, interface design, authoring, including
standardized code and proprietary software, user experience
design, and search engine optimization. Often many individuals will work in
teams covering different aspects of the design process, although some
designers will cover them all. The term web design is normally used to
describe the design process relating to the front-end (client side) design of a
website including writing mark up. Web design partially overlaps web
engineering in the broader scope of web development. Web designers are
expected to have an awareness of usability and if their role involves creating
markup then they are also expected to be up to date with web
accessibility guidelines.
By the means of this project we aim to we depict a whole new stream of
website designing services including corporate websites, custom build
websites and e-commerce websites. Our designs will be custom build, purely
compatible with your business and a better experience giving one.

4. INTRODUCTION
Scope of the Project:
Web Design encompasses many different skills and disciplines in the production and
maintenance of websites. The different areas of web design include web graphic design, interface
design, including standardised code and proprietary software, user experience design, and search
engine optimization. Often many individuals will work in teams covering different aspects of the
design process, although some designers will cover them all. The term web design is normally
used to describe the design process relating to the front-end (client side) design of a website
including writing mark up. Web design partially overlaps web engineering in the broader scope
of web development. Web designers are expected to have an awareness of usability and if their
role involves creating mark-up then they are also expected to be up to date with web
accessibility guidelines.
Web Development is a broad term for the work involved in developing a web site for the Internet
(World Wide Web) or an intranet (a private network). Web development can range from
developing the simplest static single page of plain text to the most complex web-based internet
applications, electronic businesses, and social network services. A more comprehensive list of
tasks to which web development commonly refers, may include web design, web content
development, client liaison, client-side/server-side scripting, webserver and network
security configuration, and e-commerce development. Among web professionals, "web
development" usually refers to the main non-design aspects of building web sites: writing markup and coding.
For larger organizations and businesses, web development teams can consist of hundreds of
people (web developers). Smaller organizations may only require a single permanent or
contracting webmaster, or secondary assignment to related job positions such as a graphic
designer and/or information systems technician. Web development may be a collaborative effort
between departments rather than the domain of a designated department.

5. Marketing and Communication Design
Marketing and Communication Design on a website may identify what works for its target
market. This can be an age group or particular strand of culture; thus the designer may
understand the trends of its audience. Designers may also understand the type of website they
are designing, meaning, for example, that business-to-business (B2B) website design
considerations might differ greatly from a consumer targeted website such as a retail or
entertainment website. Careful consideration might be made to ensure that the aesthetics or
overall design of a site do not clash with the clarity and accuracy of the content or the ease
of web navigation, especially on a B2B website. Designers may also consider the reputation of the
owner or business the site is representing to make sure they are portrayed favourably.
User Experience Design and Interactive Design
A user understanding the content of a website often depends on users understanding how the
website works. This is part of the user experience design. User experience is related to
layout, clear instructions and labelling on a website. How well a user understands how they can
interact on a site may also depend on the interactive design of the site. If a user perceives the
usefulness of that website, they are more likely to continue using it. Users who are skilled and
well versed with website use may find a more unique, yet less intuitive or less userfriendly website interface useful nonetheless. However, users with less experience are less likely
to see the advantages or usefulness of a less intuitive website interface. This drives the trend for
a more universal user experience and ease of access to accommodate as many users as possible
regardless of user skill. Much of the user experience design and interactive design are considered
in the user interface design.

6. Page Layout
Part of the user interface design is affected by the quality of the page layout. For example, a
designer may consider if the sites page layout should remain consistent on different pages when
designing the layout. Page pixel width may also be considered vital for aligning objects in the
layout design. The most popular fixed-width websites generally have the same set width to match
the current most popular browser window, at the current most popular screen resolution, on the
current most popular monitor size. Most pages are also center-aligned for concerns
of aesthetics on larger screens.
Typography
Web designers may choose to limit the variety of website typefaces to only a few which are of a
similar style, instead of using a wide range of typefaces or type styles. Most browsers recognize a
specific number of safe fonts, which designers mainly use in order to avoid complications.
Font downloading was later included in the CSS3 fonts module and has since been implemented
in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in web
typography, as well as the usage of font downloading.
Most layouts on a site incorporate negative space to break the text up into paragraphs and also
avoid center-aligned text.
Motion graphics
The page layout and user interface may also be affected by the use of motion graphics. The
choice of whether or not to use motion graphics may depend on the target market for the
website. Motion graphics may be expected or at least better received with an
entertainment-oriented website. However, a website target audience with a more serious
or formal interest (such as business, community, or government) might find animations
unnecessary and distracting if only for entertainment or decoration purposes.

7. Occupation
Jobs, which under particular circumstances may become involved during the creation of a
website include:
• Graphic Designers are to create visuals for the site such as logos, layouts and buttons.
• Internet marketing specialists to help maintain web presence through strategic solutions on
targeting viewers to the site, by using marketing and promotional techniques on the internet.
• SEO writers to research and recommend the correct words to be incorporated into a
particular website and make the website more accessible and found on numerous search
engines.
• Internet copywriter to create the written content of the page to appeal to the targeted
viewers of the site.
• User experience (UX) designer incorporates aspects of user focused design considerations
which include information architecture, user centered design, user testing, interaction
design, and occasionally visual design.

8. PROBLEM STATEMENT
The mission of this project is to provide the customers with a visually appealing, polished and
professional website creating graphic solutions that support the design. All issues are addressed
here as to make it convenient for the clients. Design, development and marketing is included
while making a corporate website and advertisement banners.
To support this we make use of Adobe Photoshop CS6 to create a user attractive, visually
appealing site. PHP and MySQL are used to retrieve or add data as they make sure that the data is
added from the webpage directly to the database. The user can search for content, about the
organisation/client, services offered etc. While searching for the most optimal plan all the user
needs to do is enter any value based on which he needs the product and all goods/products
relating to that value are generated.
The user can alter his personal details he provided while registering for to the site. An additional
facility is also provided to the users. When the user forgets his password an email will be sent to
the id provided by the user containing the password.
Thus a website (graphics), advertisements etc., are created by the means of this software.

9. SYSTEM REQUIREMNTS
Hardware Requirements:
The minimum hardware configuration required to run this project are:
Processor
: Intel Pentium 4 or AMD Athlon 64 processor
Graphic Card
: 512MB
RAM
: 1GB
VRAM
: 512MB
Hard Disk
: 2 GB
Mouse
: 2 Button with scroll wheel
Keyboard
: English QWERTY
Software Requirements:
The minimum software configuration required to run this project are:
Adobe Photoshop
:
CS4 or higher
PHP
:
v5.2.4 or higher
Apache Tomcat Local Host Server :
v6.0.35 or higher
My SQL
:
5.0 or higher

10. TECHNIQUES USED
RWD - Responsive Web Design
•
Overview
The concept of Responsive Web Design (RWD) has been snowballing in momentum since its
inception in a 2010 article by Ethan Marcotte.
But just like cloud computing before it, all the noise surrounding RWD distracts from the fact that
what we have here are techniques, not an overarching theory.
It is the technique that relate to the use of images in responsive web design that we will be
focusing on here. The aim here is to create images and icons that are as flexible as possible so
that they scale up smoothly in size but also don’t lose any of their clarity when viewed on a highpixel-density screen.
•
Vector Graphics
Vector Graphics (VGs) use mathematical equations to define themselves rather than pixels and
are made up of a number of different scalable objects, meaning that they always render at their
highest quality and that individual aspects of a graphic can be modified without altering the basic
object.

11. There are a number of distinct
advantages to using VGs over
pixel based bitmap images:
Being based around
mathematical equations
rather than a collection of
pixels means that VGs are
“resolution independent” in
that they are scalable at any
zoom level while maintaining
the same quality.
VGs can be embedded into
your HTML document directly by using a SVG tag. This reduces the HTTP request load because your
browser no longer needs to perform a request to serve the graphic.
VGs have a much smaller file size when compared to bitmap. Graphic editor like Adobe
Illustrator, Inkscape or CorelDraw is required.
VGs are by no means a perfect tool however (with the support offered by some older versions of
browsers being pretty patchy for a start), and there are a couple of situations where it might be
inefficient option to take. If you are looking for realism in your images above all else, VGs are
unlikely to be to one’s liking. Also, it is not possible to achieve some kinds of effects such as blurring
by using this kind of responsive image technique.

12. •
Icon Fonts
Fonts are by their very nature scalable in a smooth way that bitmap images are not. Like VGs,
they also don’t require as many HTTP requests. While many of us equate fonts with the letters
and symbols we use for writing documents, in essence they are all just shapes, shapes that might
as well be icons as well as letters.
 As well as bestowing some of the same benefits that VGs can, icon fonts can be good for
designers in a number of other ways:
 The colour of icon fonts can be easily changed.
 Shadows and transparent knockouts are easy to add.
 They can do anything that other image icons can do.
 With icon fonts, first step is to embed the font selected (from any source) and then either
wrap the icon in HTML, use CSS generated content or use the data-icon attribute.
•
CSS Patterns
Using CSS3 gradients to generate a whole host of
infinitely scalable backgrounds. This technique
languished in relative obscurity until a few years ago,
when it’s awesome potential for responsive design
begin to be fully recognised.

13. These kinds of CSS patterns are basically an abstraction created by CSS in your document tree. In
practical terms this means that they are not properties but computed values that are generated
by the browser rather than pointing towards an image with a URL. One noticeable effect of this is
that these patterns have a smaller effect on page load and render time.
Effective Banner Design Techniques
Overview
Banner advertising is undoubtedly the most admired and common form of advertising on the
Internet since its early days. Copywriters are always looking for new designs to grab the visitor’s
attention and compel him to click on their banner. There are different ways to design a successful
and effective banner. Besides some pretty universal ingredients there are a few tricks that are
distinctive to online ad space. Applying all or most of them will always get you a higher click
through for your various banners.
File Size
The ideal file size of a web banner is 10kb or less. Since banners are usually displayed at the top
of web pages, they should load before or with the main page text to seize the viewer’s attention
instantly. If the .gif or .jpg file is large it will take a few seconds to load and by then the visitor
could have scrolled down the page. If people do not see your banner they certainly are not going
to click on it.
Call to Action Clicks
Banners with "Click here", "Go", “Sign up now” or something alike increases the click-through
rate by almost 20%. ‘Call to action’ serves as a visual indicator to increase the CTRs. It includes
the fact that there is so much advertising off-line, such as TV, Radio, billboards etc. where target
audiences watch or read the ad. Online ads bear a link to be clicked by the people taking them to
the advertiser’s website. That is why having call to action improves the effectiveness of a banner.

14. Animation
Animated banners appeal the eye more than inactive banners do and generate almost 30%
higher click-through rates than static banners. Animation with larger file sizes is a big
disadvantage and is generally annoying to people. If your banner irritates them, they will most
likely leave without clicking on it. You can get the required value of an animated .gif banner by
decreasing both the number of colours used and vertical colour change.
Excellent and Copy
Excellent ad copy provokes people to check into your product. Try to focus the benefits, not
features of your product or service. The text should hold the banner punch line and should be
short, simple, informative and pragmatic, making the viewer curious. Preferably, the copy should
end with the same appealing phrase as on your web site unless the banner punch line is the
same.
Fake Element
Several successful banner ads lately contain fake elements as fake scroll bars, text links, selection
boxes, text boxes, submit buttons etc. These fake banners are made by Print Screen button.
Image is, then, cropped around the button or scroll bar area and pasted into a banner. These fake
elements do so well since people believe they are clicking on a link to go to another page of the
current site but in fact they are clicking on a banner.
Several Banners for a Single Ad Campaign
Don't crowd your banner with more than a single concept tied to a clear call to action. If there
are multiple offerings that are relevant, use separate ad vehicles to communicate them. Start
with 6-10 banners and keep rotating them. As the ad campaign progresses you'll come to know
which banners are generating higher click-through rates. Track the success of each banner in
terms of CPMs, CTRs and CPCs.

15. Efficient Marketing Mix
Rich media tends to produce a much higher CTR than animated GIF banners. A successful online
marketing mix combines rich media with animated GIFs. Devise the finest mix to achieve your
client's goals. Only flawless blend of creative, technical and media creates a successful online
creative.
Something Free
Nothing entices a visitor more than the word "FREE!" in your banner. Naturally, you should only
do this if you deliver what you have promised in the banner. Bespeak it promptly on your site;
else the visitor would leave the page never to return again. Besides, it also generates some
negative publicity.
Logo and URL
It is suggested to include the logo and the web site address in the banner if your ad campaign is a
brand building exercise. For other types of banners, you might like to include both but make
certain that they don't dilute the banner punch line or the copy. It's best to keep the logo and the
URL together either on the right or the left side of the banner. The logo should be small and the
URL should be in a very small font size.
Blue Underlined Text
Blue underlined text is known as links. Create a banner with blue underlined text written in
common fonts such as Times, New Roman, Verdana or Arial if you are sure that the banner would
be exposed on a web page with white background. The banner thus blends into the web page
appearing to be a part of the content.

16. jQuery
Overview
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document
traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-touse API that works across a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people write JavaScript.
 jQuery is free, open source software, licensed under the MIT License.
 jQuery's
syntax
is
designed
to
make
it
easier
to
navigate
a
document, select DOM elements, create animations, handle events, and develop Ajax
applications.
 jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript
library. This enables developers to create abstractions for low-level interaction and
animation, advanced effects and high-level, theme-able widgets.
 The modular approach to the jQuery library allows the creation of powerful dynamic web
pages and web applications.

17. IMPLEMENTATION
RWD – Responsive Web Design
The concept of Responsive Web Design (RWD) has been snowballing in momentum since its
inception in a 2010 article by Ethan Marcotte. It is used to create visually appealing, attracting
and elegant designs.
Vector Graphics
Vector graphics (VGs) use mathematical equations to define themselves rather than pixels and
are made up of a number of different scalable objects, meaning that they always render at their
highest quality and that individual aspects of a graphic can be modified without altering the basic
object. VGs are “resolution independent” in that they are scalable at any zoom level while
maintaining the same quality.
VGs have a much smaller file size when compared to bitmap. Graphic editor like Adobe
Illustrator, Inkscape or CorelDraw is required.
Some of the icons and sliders are implemented using VGs in CorelDraw X6 Graphics Suite.
Icon Fonts
Fonts are by their nature scalable in a smooth way that bitmap images are not. Like VGs, they also
don’t require as many HTTP requests. While many of us equate fonts with the letters and symbols
we use for writing documents, in essence they are all just shapes, shapes that might as well
be icons as well as letters.
 Icon fonts are good for designers for reasons:
 The colour of icon fonts can be easily changed.
 Shadows and transparent knockouts are easy to add.
 They can do anything that other image icons can do.
 Using this application of icon fonts is created.

18. Effective Banner Design Techniques
File Size
The ideal file size of a web banner is recommended to be 10kb or less. Since banners are usually
displayed at the top of web pages, they should load before or with the main page text to seize
the viewer’s attention instantly. Keeping this in mind small size banners are created.
Call to Action Clicks
Banners with "Click here", "Go", “Sign up now” or something alike increases the click-through
rate by almost 20%. ‘Call to action’ serves as a visual indicator to increase the CTRs. It includes
the fact that there is so much advertising off-line, such as TV, Radio, billboards etc. where target
audiences watch or read the ad. Online ads bear a link to be clicked by the people taking them to
the advertiser’s website. That is why having call to action improves the effectiveness of a banner.
“Buy now”, click button is used in banner advertisements.
Animation
Animated banners appeal the eye more than inactive banners do and generate almost 30%
higher click-through rates than static banners. All the banners are created in .GIF format and are
inactive banners i.e. animated banners.
Excellent and Copy
Benefits, not features are focused on the product or service. The texts hold the banner punch line
and are short, simple, informative and pragmatic, making the viewer curious. Preferably, the copy
ends with the same appealing phrase as on a web site unless the banner punch line is the same.

19. •
Fake Element
No fake element has been used in banners used for advertisements
•
Logo and URL
Logo is and the web site address is included in the banner. Logo and the URL are together kept on
the right side of the entire banner and in every banner. The logo is small and the URL is in a very
small font size.

20. CONCLUSION
I have implemented the design techniques using Adobe Photoshop CS6 and CorelDraw X6
Graphics Suite to create a user attractive, visually appealing site. PHP and MySQL are used to
retrieve or add data as they make sure that the data is added from the webpage directly to the
database. The user can search for content, about the organisation/client, services offered etc.
While searching for the most optimal plan all the user needs to do is enter any value based on
which he needs the product and all goods/products relating to that value are generated.
The mission of this project is to provide the customers with a visually appealing, polished and
professional website creating graphic solutions that support the design. All issues are addressed
here as to make it convenient for the clients. Design, development and marketing is included
while making a corporate website and advertisement banners.
The user has the facility to alter his personal details he provided while registering for/to the site.
An additional facility is also provided to the users. When the user forgets his password an email
will be sent to the id provided by the user containing the password.
Thus a website (graphics), advertisements etc., are created by the means of designing software.

21. FUTURE PERSPECTIVE
Web design and development is an ever changing industry, and as technology
grows and develops, so does the job description.
Design Trends Now and In The Future
Of course, not every trend will stay around. The ones that are the most practical
and usable will stick, and could eventually effect the way we work. Let's do some
more specific predicting now and guess which design-related trends are going to
be staying with us for several more years.
Font Replacement
Sifr and Cufon are just the beginning of
font replacement it seems. As technology
grows, it may become easier and more
efficient to replace web fonts with custom
fonts. No matter how we'll do it in the
future, though, it is likely that font
replacement is here to stay.

22. Print to Web
In the future texture will continue to
be used, and support for things like
multiple backgrounds will continue to
develop as well. We can already do
some pretty cool things with the new
CSS3 to create life-like interfaces and
use any version of CSS with some cool
tricks to make a textured website. Even
modern, clean, and minimal website designs are starting to implement texture,
letterpress effects, and other trends.
Personalisation
As the web grows bigger, more
individuality is needed to stand out. In
recent years, illustrated web designs
have become very popular. If a
designer, these illustrations showcase
the designer's style and talents.
Otherwise, illustration in web design
has a good use of branding by
providing the website with a bit of personality.

23. Development Trends that Will Likely Continue
Just like design trends, a lot of trends related to technology are expected to carry on
into the future and evolve further.
Smaller Screens and Mobile Designs
The web is evolving out of just a computer screen, and onto a more versatile level.
In the future many mobile and
small-device web design
technologies will be more
compatible with each other. Right
now, app development is far from
mobile web design, and the
practice of mobile web design is
different than the practice of
creating an iPad design. Because the trend is relatively new, there is a lot of
competition and no standard programming language or best design concepts best for
us web designer and developers.

24. MORE OPTIONS AND EASIER EDITING FOR CLIENTS
Think about how just WordPress development has evolved in the last year or two. A
few years ago, anyone could buy or download a WordPress theme with no back panel
options and be happy. Now, even with free themes, it's almost demanded. Now all
WordPress themes, premium or not, come with a custom admin panel that lets its
user change social media options, logos, backgrounds, and more. Options are a huge
trend right now, and they're so useful, they're not going away any time soon.
The web designer and developer's jobs are going to become more intertwined, and it
is going to be essential for a web designer to learn more coding practices and
technologies.

25. Future Web Design Business
THE GROWTH OF FREELANCING
With so many benefits from both sides, and with so many freelancing resources
available today, the growth of freelancing web designers will likely continue. Anyone
can start at a young age, while they're still in school, or during a career change. It's
easy to set up and get going, and with experience and a good brand it can be just as
profitable in today and future generations as a salaried job.
LESS CLIENTS AND FEWER CUSTOM WEBSITES
A rise in premium themes and templates means more businesses (especially startup businesses) are looking for pre-designed templates and cheaper solutions. A
future day in the life of a web designer may mean working on a premium theme
for sale, a custom web app that sells subscriptions, and perhaps working with a
client only to customize a pre-made website they've bought.

26. NON-LOCAL BUSINESS
Local clients are a great way to start up a web design business, and to keep them alive.
However, today many start-up design firms or freelancers have never even looked at a
local client. As the web grows larger, the world grows smaller. In the future, this will
continue and it may become irrelevant and unnecessary to search for local web design
work.
Social media, blogging, and free releases are all great ways to obtain international
attention
to
your
small
home-town
business.
Also,
things
like
Skype, GoToMeeting, and even specialized business applications are making it easy to
work "face-to-face" with a client across the world. Right now, local businesses can be
beneficial, but it may not be a reliable business model within the next ten years.
Always be sure to improve your web design skill set enough to beat a large portion of
the online competition, not just the local competition.

27. REFERENCES
• Adobe Creative Suite 6 Design and Web Premium Classroom in a
Book: for Adobe Photoshop CS6 help and queries
• http://www.web-designers-directory.org/articles/effective-bannerdesign-techniques-2.html: to give an idea on effective banner
design techniques
• “jQuery in Action, Second Edition” by Bear Bibeault and Yehuda
Katz
• http://www.onextrapixel.com/2010/09/21/the-future-of-careersin-web-design: to give an idea on future perspective on web design.
• http://likescart.com/
• http://wintech.in/
• http://www.jscripters.com/jquery-disadvantages-and-advantages/

32. ICONS

33. THANK YOU