Graphics Designing (Character, Posters, Advertisements, Brochure, Interface Build-Up) - Aakash Gupta

Website Design and Development

(Graphically)

Submitted By: Name : Aakash Gupta

Cover NoteProject Role:Website Design and DevelopmentThis 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 Purpose• Adobe Photoshop CS6 Graphics Design• CorelDraw X6 Graphics Suite Page Layout• http://makeagif.com/ Animated Images(.GIF)• Wordpress 3.6 (PHP) Front End GUI• MySQL 5.6 Database Server• Apache 2.4 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.

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.

INTRODUCTIONScope 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 mark-up 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.

Marketing and Communication DesignMarketing 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 DesignA 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 user-friendly 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.

Page LayoutPart 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.

TypographyWeb 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 graphicsThe 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.

OccupationJobs, 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.

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.

SYSTEM REQUIREMNTS

Hardware Requirements:The minimum hardware configuration required to run this project are:Processor : Intel Pentium 4 or AMD Athlon 64 processorGraphic Card : 512MBRAM : 1GBVRAM : 512MBHard Disk : 2 GBMouse : 2 Button with scroll wheelKeyboard : English QWERTY

Software Requirements:The minimum software configuration required to run this project are:Adobe Photoshop : CS4 or higherPHP : v5.2.4 or higherApache Tomcat Local Host Server : v6.0.35 or higherMy SQL : 5.0 or higher

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 high-pixel-density screen.

• Vector GraphicsVector 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.

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.

• Icon FontsFonts 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 PatternsUsing 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.

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 TechniquesOverview 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 SizeThe 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 ClicksBanners 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.

AnimationAnimated 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 CopyExcellent 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 ElementSeveral 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 CampaignDon'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.

Efficient Marketing MixRich 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 FreeNothing 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 URLIt 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 TextBlue 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.

jQueryOverviewjQuery 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-to-use 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.

IMPLEMENTATIONRWD – Responsive Web DesignThe 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 GraphicsVector 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 FontsFonts 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.

Effective Banner Design TechniquesFile SizeThe 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 ClicksBanners 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.

AnimationAnimated 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 CopyBenefits, 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.

• Fake ElementNo fake element has been used in banners used for advertisements

• Logo and URLLogo 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.

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.

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 FutureOf 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 ReplacementSifr 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 customfonts. No matter how we'll do it in thefuture, though, it is likely that font replacement is here to stay.

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.PersonalisationAs 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.

Development Trends that Will Likely ContinueJust 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 DesignsThe 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.

MORE OPTIONS AND EASIER EDITING FOR CLIENTSThink 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.

Future Web Design Business

THE GROWTH OF FREELANCINGWith 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 WEBSITESA rise in premium themes and templates means more businesses (especially start-up 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.

NON-LOCAL BUSINESSLocal 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.

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-banner-design-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-careers-in-

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/

ICONS

THANK YOU