We understand that the testing phase comes after the development stage, and if errors occur, the project moves back to the development stage and then again to the testing stage. The process goes on and on until we have resolved all the errors. But have you ever thought of testing the design files? Taking the design files through the Quality Check stage? Some of you might have, and some not. Computan designers and QC engineers tried their hands at it, and here are some of the findings shared by QC Analysts Kiran Khan and Farhan Arshad.

Quality Check for Design Bugs

In QC for design bugs, you can compare the design specifications for font details on all the pages. It should be reported if any other font family or wrong text size is used. Check for designs in different views of different browsers before proceeding to the development stage itself.

Quality Check for Spacing Inconsistencies

Review the spacing between every section on the page, like space above the header and below the footer. If there is any standardized spacing in any section, then you must resolve them as soon as possible. However, it doesn’t have to be pixel-perfect. You may get a pixel-perfect design on a particular device or a browser, but consider whether it is worth your time to make it pixel-perfect for all the devices and browsers. The ones from where you are getting maximum or 2nd highest or 3rd highest traffic may have a pixel-perfect design.

Quality Check for Functionality

How can you test functionality on a design file, right? Well, it’s a yes or no. You cannot test complete functionality, but you can test from which section/button the functionality is available, and if there’s a dialog box or a new page involved, then you can view that in the designing stage. To understand the functionality in-depth, Read the SRS (Software Requirement specification) and actively discuss the doubts with clients. Once development is initiated, it may create trouble in the end. Review the acceptance criteria and note the points of discussion. 

How can a design file be Quality Checked?

There can be different criteria to understand the quality check of a design file. For example, a quality assurance engineer should check the text's font size, family, and weight to ensure the design goes well. Here the design formed can be different in different browsers and devices like Google Chrome, Mozilla Firefox, and Brave. From the device perspective, instead of using different devices, the QA engineer can open up the mobile views in different browsers with different screen sizes per the stages.

When you check on a simulator, make sure you put the screen size available on the devices. Checking random dimensions and asking for pixel perfection is not a good way to test a design file or a website, for that matter.

Why should a design file be Quality Checked?

Before starting the development or coding of a project, understand the design and test it thoroughly to mark the changes. This reduces the alterations in code, and fewer bugs and employee cost is also reduced with early project completion. Also, the QA team can get an idea of all the functionalities and give the client a tentative deadline, which can improve the understanding of the project on both sides.

Advantages of Quality Checking a design file

Save Time

Once the files are developed successfully, the rest of the team members can start developing the project, code the modules, and send them to the testing teams. If the bugs are fixed in the initial phase and when development is not started, it will save a lot of time. In this case, the testing team can give a green signal while testing the code, and it reaches production. 

Also, when the client tests the code in production, if any features are exploited on different devices or screens, it’ll create a loop where the client will be raising bugs, and now it’ll go in a loop through all the other teams. This way, initial checks can save a lot of hours which results in saving other costs as well, like working hours of an employee and early completion of the project is there.

Clean GIT

GIT is a distributed version control system. Companies mainly use it to keep a repository of the code they are deploying parallel to the working environment. For example, there is a GIT environment parallel to staging, UAT, and Production. Whenever the code is modified, the developer checks it in GIT to maintain the updates and regulate the versions. 

Initial quality control helps identify bugs and eliminate them by taking appropriate actions. This way GIT repository stands clean, and while replicating the project or fulfilling some other requirements, the code stays clean. 

Reachable Timeline of the project

In general, a delayed project deadline leads to loss of business and affects the company's reputation. Although the delay could be any, it shouldn’t be due to the reasons that could have been covered on time. Hence, it is in the interest of all the beneficiaries to deliver the project as soon as possible. 

QA Team has all the inputs and testing ideas

When Design QC is already initiated in the initial phase, QA can test the project thoroughly, including the UI screens and all the functionality given. This helps in efficient testing because one module has multiple test cases and many modules in a project. 

For example, suppose there is a button for submission of .pdf or .word extension files.

Hackers can upload .bat and other extension files to run a script and get into the system to run Trojan. Thus it is important to understand the business logic which is kept behind to complete the project. The QA team must tell the developers about these potential issues which can harm the business. 

Positive Feedback

Tell me which situation you like

Situation A: your QC team is reporting the issues

Situation B: Your client is reporting the issues

Of course, situation ‘A’ if you have a chance. You would want to find and mark the resolve the issue within the team before your product reaches the client. So, adding a new layer of testing, in this case, testing the design, is always a boon. Testing the design files minimizes the number of issues that clients would find, which can help in achieving positive feedback. 


Quality check of the design files is highly important before starting the development. As discussed above, quality control can be achieved in multiple ways and for multiple scenarios. Once the green signal is achieved from the QA team, start the development and transfer the project slowly to production by keeping the files clean.