Web Design, Development And Testing

Design-Development-Testing

Many organizations are interested in building web applications for their business but are unaware of the various steps that are needed to build a compelling web application. In this article I will attempt to put together the various pieces of the puzzle. Application development involves several distinct efforts that need to come together to build a compelling end product. A compelling end product is the combination of design, development architecture, development implementation, automated regression and functional testing and performance and load testing.

Design: People often confuse design with development. Moreover even within design, user interface design is often confused with graphics design. Web user interface design involves the design of the flow of the website and the layout of the specific web pages within the website. The web user interface designer concentrates on the usability of the application. The user interface designer will typically develop “wireframes” using tools like Adobe Photoshop to convey the design. These are often initially developed as prototypes and usability testing is carried with user groups out to ensure that the web application will be intuitive and easy to use. Graphics design on the other hand relates to the aesthetics of the page. The graphics designer is responsible for the aesthetic layout of the pages and the creation of the various graphical objects inside the pages such as images and flash objects. The graphics Designer will typically use a combination of tools such as Adobe Photoshop, Adobe Illustrator and Adobe Captivate to create the actual graphics objects. A designer will need to work closely with other groups to make sure the design process does not compromise the performance of the application by making sure that the graphics objects are small thus ensuring that the various web performance metrics are unaffected.

Development: This involves converting the design into an actual application. The development typically involves an architectural phase where the underlying modules that make up the application are scoped out. If persistent data storage is needed, a database schema should be designed to accommodate the data storage needs. The choice of the operating system (e.g. Windows, or Linux ) where the web application will run, the web server (e.g. Microsoft IIS, Apache or Tomcat) which will run the web application and the back end database (e.g. Microsoft SQL Server, Oracle, MySQL or MongoDB) which stores the data will need to be made. Various development frameworks are available to build web applications. The most common ones are ASP,  JSP , PHP and Perl that are open source. The choice of the application framework is typically dictated by the strengths of the members of the development team. The architectural phase is followed by the implementation phase. This is typically the longest part of the project and during this phase the actual code is written using the design specifications and graphics objects developed by the design team. The programming will typically be done using a combination of the application frameworks mentioned earlier together with HTML, JavaScript and CSS style sheets.

Quality Assurance and Testing: A surprising number of people are of the view that quality assurance and testing is desirable but is not actually needed. Unfortunately this view has its roots in total ignorance of the process that is needed to build a good end product. Regardless of how pretty or slick we make the application, if it does not work as expected, users will reject it. Quality assurance and testing involve two different kinds of tasks. Functional and regression testing is used to verify that the developed application is doing what it is supposed to do. This is achieved by test automation using a functional testing tool. Load and Performance testing is used to ensure that the application performs as intended when it is subjected to the typical load of a production environment. Load testing is practically speaking impossible to perform without using an automated load testing tool since it involves the simulation of a large number of concurrent virtual users. This effect cannot really be achieved manually and needs the assistance of an application that is designed to subject the application to a specified load and then measure its performance when it is subjected to that load. Quality Assurance teams will need to track the bugs or defects in the application using bug tracking tools. Such tools will allow defects to be tracked by all members of the team.

Iterative_development_model.svg

The three groups mentioned above tend to be specialized for their skill set. As an example, people often make the mistake of using developers as quality assurance testers. This is not a wise strategy because most developers who are good at writing software are quite poor at finding bugs or defects in their own software.

Writing good and compelling web applications requires an understanding of all phases of the process, design, development and quality assurance. Skipping phases or taking shortcuts will result in low quality software that will generally cost more in the long run.

About

I am a Web UI/UX Designer who specializes in user interface design, user experiences and programming languages like HTML, CSS, and Front-End Frameworks like Bootstrap. I enjoy working on and blogging about projects that involve a mix of web user interface (UI) design, user experience (UX) research, mobile design prototyping, eCommerce, content creation and internet marketing.