Web Design Vs. Web Development

[notice]The terms web designer and web developer are used interchangeably in the media and advertisements. But, they are not the same thing. Design involves what the visitor sees on your website, development involves the site’s functionality. This article explores the difference between these two disciplines.[/notice]

A website contains several distinct aspects:

[list style=”theme-arrow-right” color=”accent2″]

• Look and feel – primarily the graphics, color scheme, navigation elements, etc.
• Content – information, products, etc available on the site.
• Functionality – functionality includes interactive features that the web site provides to the visitors and the required infrastructure needed to provide them.
• Usability – the site from a visitor’s perspective and includes things like program interactions, navigation and usefulness.
• Look And Feel

[/list]

Look and feel includes overall appearance of the website. A Graphic designer decides on what colors and fonts to use and how to layout each of the sites pages.

The graphic designer needs to have a good appreciation for aesthetics and feeling for what combinations of colors and imagery will project the image that the website owner wants visitors to have of the site.

[outer_text_divider ]

Content

[/outer_text_divider]

[image title=”content” align=”right” lightbox=”false” group=”” width=”0″ height=”0″ autoHeight=”true” link=”” frame=”false” underline=”true” link_class=””]http://www.developaweb.com/wp-content/uploads/2012/12/web-design-icon.jpg[/image] Content is all of the text that is found on a website and includes everything from the privacy policy to a very persuasive sales letter extolling the benefits of a product and asking the visitor to part with their hard earned money and everything in between. If it is written text then it is part of the content. You need a copywriter and editor to create good content.

[outer_text_divider ]

Functionality

[/outer_text_divider]

Functionality includes all of the interactive aspects of a web site and includes animation. The common denominator is that programmers using the various web programming languages that work either on a web server or in a web browser create all of these functions.

[image title=”” align=”right” lightbox=”false” group=”” width=”240″ height=”0″ autoHeight=”true” link=”” frame=”false” underline=”true” link_class=””]http://www.developaweb.com/wp-content/uploads/2012/12/Functionality.jpg[/image] Flash can be used to animate graphics. Perl, php and java are programming languages used on the web server to create sophisticated dynamic web pages. These pages can work independently but most commonly with a database to create all of the features we have come to expect from a website.

JavaScript is used in browser to create a lot of cool effects such as swapping images when a mouse moves over an image, “ticker tapes”, links changing colors, etc. JavaScript works in the user’s web browser rather than on the web server.

There are also other “backend” applications that are transparent to the visitor such as form processing, content management and other administration programs that make it possible for non-programmers to maintain some aspects of the website’s data.

All of these programs have to be integrated into the HTML code to be used on the webpage.

[outer_text_divider ]

Usability

[/outer_text_divider]

Usability is the website viewed from the user’s point of view and involves mostly testing things like:

[list style=”theme-arrow-right” color=”accent2″]

• Does the look and feel are actually portraying the proper image?
• Is the navigation is user friendly?
• Does the navigation lead the visitor to where the owner wants them to go?
• Does the site load quickly?
• Do the applications work properly?
• Design Versus Development

[/list] Unfortunately, there is a lot of overlap and integration needed between web design and web development. When you toss in content creation and usability testing, it becomes a real mess.

Can a single individual do all of these things? There are some people who can do all of these things but most people only do one or two of the tasks.

[image title=”usability” align=”center” lightbox=”false” group=”” width=”0″ height=”0″ autoHeight=”true” link=”” frame=”false” underline=”true” link_class=””]http://www.developaweb.com/wp-content/uploads/2012/12/usability.jpg[/image]

Web design usually involves content creation and look and feel while web development involves creating the functionality and testing its usability.

Web designers need to be proficient with graphic design tools like Photoshop. Most also know HTML so they can implement their designs. However, using animation on the site and layout for the site’s content are also part of the web designer’s responsibility.

Many site owners provide the content for the website but a web designer needs to be able to edit and even rewrite the content if necessary. Web designers also normally do the usability testing for the navigation and site loading speed.

Web development programmers create the functionality for the website, but all of that functionality must be integrated into the HTML pages on the site. Alternatively, the HTML content could also be integrated into the program. Web developers also do usability testing on the site, at least for the functionality they create. So the programmer also needs to have some HTML knowledge as well.

In either case the web designer and web development programmer need to work together to assure that the website does everything that the site owner requested.

[outer_text_divider ]

Bottom Line

[/outer_text_divider]

Only large companies can afford to hire separate experts in graphic design, content creation, programming and usability testing when building a new website. In most other cases, the web designer and web development programmer are two different people who must work together to create a successful website.