The last few years have seen a revolution in the web design process. Many web designers and their clients have moved away from vast numbers of time consuming and expensive deliverables towards leaner processes producing fewer, more useful deliverables.
One item I’ve briefly written about before is the use of HTML prototypes. Where wireframes and mockups require clients imagine the final product through visual images, an HTML prototype provides an immersive, clickable and accurate representation of the final product. It allows clients and prospective users of your website to gain a feel for the product.
Alongside HTML prototypes is the concept of designing in the browser. Traditionally, web design has been done up front before any code has been written but, as the line blurs been web design and web development, the practice of designing through your code is becoming more attractive.
The benefits
Designing in the browser is low cost. Licenses for the software that designers use to create mockups e.g. Photoshop are expensive and can rack up hundreds of pounds. Browsers and text editors are open source and therefore free to use.
No duplication of efforts. The traditional approach sees a web design created up front, the design then needs to be created in code so that it can be used on a website. But by designing in code first this duplication is not created.
Changes can be made quicker. Due to the nature of using CSS classes, designs with repetition can be changed easily and quickly through a few lines of code. Similar changes in Photoshop or Illustrator may require many small alterations to many layers – a time consuming job.
Clients get a better feel for the end product. Instead of showing the client just an image, the web designer is able to show an HTML prototype.
The disadvantages
Only efficient if the designers are proficient in HTML. My feeling is that all web designers should be proficient in the technologies that are needed to turn their design into a reality but if your designer isn’t used to coding then this technique will not be in their comfort zone and they should stick to what they know.
Poor quality code. Because of the iterative nature of design and the inevitable changes to code iterations will create, then it will be unlikely that the code is faultless. A code review and refactor should be conducted before using the code in the end product.
