By Jerome Kalumbu

Prototyping principles

Six simple steps for coding effective interfaces in HTML & CSS

Guidelines to help you implement healthy interfaces that add real value to businesses and users.

Once your key pages are fully mocked-up and you have an idea of the design direction, code a prototype in HTML and CSS that you can test and use as a blueprint to implement your website.

Why an HTML & CSS prototype?

A prototype in HTML & CSS will allow you to quickly assemble responsive layouts, experiment with typography and grids, test interactions, and iterate cost-effectively to ensure that you build the best product for your users. Prototyping is the foundation for coding static websites.

The 6 Simple Prototyping Steps will teach you in six steps how to implement high-performing interfaces quickly in HTML & CSS, following best practices in accessibility, progressive enhancement, performance and CSS.

You can also use this checklist and best-practice to improve the efficiency and performance of an existing website that you have.

These checklists and tips solve the issues we faced over 17 years of designing and implementing digital products for businesses.

A blueprint for developers

If you like to implement your designs on a CMS like Drupal or WordPress, creating a static prototype in HTML & CSS will allow you to:

  1. Create a blueprint that you can follow to implement the designs;
  2. Save time in preparing assets such as HTML files, including CSS.

The 6 Simple Prototyping Steps

Take into consideration performance and accessibility

  1. Setup your project
  2. Write Semantic HTML
  3. Consider performance
  4. Use a clear CSS Structure
  5. Write Modern CSS
  6. Test, learn, iterate

By following these steps, you will be able to:

  • Implement responsive designs using semantic HTML and Modern CSS;
  • Test early concepts effectively to avoid costly errors;
  • Optimise your website for better performance and accessibility;
  • Organise and maintain your CSS better;
  • Have a prototype ready to be implemented on a CMS;
  • Build user-friendly interfaces.

Results if you don't follow the principles

If the product fails, you will fail too

  1. Costly development time
  2. Bad performance
  3. Struggle to maintain your project's codebase
  4. You will stay confused
  5. Missing oportunity to grow your front-end skills
  6. Product with poor UX
  7. Iteration hell