How to test design of a website


Testing design of HTML and PSD.


  1. For testing design it’s better to use adobe photoshop.

  2. First you should look whole area of the page carefully.

  3. You should use wrapping method in photoshop for testing design.

  4. Wrapping means checking by margin, grid, font size and photo size of the HTML and PSD file placing on the same screen.

  5. HTML and PSD file should be placed on the same grid and line in one screen.

  6. Wrapping is needed for checking font size, photo size and also the margin. We can check theses part easily by wrapping.

  7. You should check the margin of HTML and PSD if its matching or not.

  8. You should take a screenshot when you can see a difference on any part of the page.

  9. You can draw lines on the screen to make box like area, so that you can check well with good concentration inside the box of the lines.

  10. Using box like areas by drawing blue lines, its more easy to focus on the area and easy to understand the difference between HTML and PSD files. If you see difference, you should take screenshot of that.

  11. You can create blue lines on photoshop by clicking and dragging on the side lines on the screen horizontally and vertically.

高木 昭博
著者: 高木 昭博バングラデシュでオフショア開発を行っています株式会社セームページ:
昨年度、経産省/HIDA 海外グローバル人材育成インターンプログラム (現 国際即戦力育成インターンシップ)で、バングラデシュへ6カ月滞在。 現地の企業を訪問する中で、雇用システムを変革すればバングラデシュの 経済成長を促進できるという思いで、現地日本名誉総領事と合資にてIT企業設立。 現在日本からIT業務の受託を行っている。今後、携帯電話求人情報ポータルサイトをバングラデシュで設立予定。