HTML & CSS: 6 Do’s and don’ts of design patterns


What do design patterns do? Here we provide six tips and pointers to avoid confusion on what they do and dont do



• Help to standardise your code
When writing code to a defined pattern it is easier to maintain consistency, even across a large-scale project. This consistency is vital as it enables you to be confident about the quality and stability of your solution. Well-structured code is much easier to test, debug and fix, for example a pattern that separates data, logic and presentation enables each area to be tested independently. This means that any issues within a code solution can be identified and eradicated with very little debugging effort. As you gain experience in working with standardised approaches and patterns, you will also find that estimating projects becomes more accurate.

• Provide consistent UI behaviours
When considering the user experience of a digital interface you will be thinking of patterns without even realising it. Every user holds a certain level of expectation for the behaviours or steps through a user journey. These expectations are generally based on repetition and in turn help us to establish standards over time. There is not one UI pattern that suits all cases, but by ensuring that a platform does not switch between patterns, your users will not get confused. This is really important to design and build digital products that not only work but work well for users.

• Enable reuse and maintainability
It is very easy to solely concentrate on the exact requirements and agreed functionality you have defined with a client. In doing so you can be certain that you will design and build something that your client is very happy with, making the project a success. However, what happens when your client changes their mind or you are requested to extend or adapt some functionality as part of a subsequent project? This can incur a lot of refactoring or code rewrites, but by coding with patterns you can cater for future extensibility and build something you are happy with.


• Consist of a suite of code snippets
Code snippets provide reusable functionality that is already tested and proven within other projects, stopping us from writing the same or similar solutions time and again. Design patterns provide us with a structure to work within, a set of rules if you like, that help to make consistent decisions when writing code. Code snippets themselves can fit within a range of patterns and when considering larger reuseable sections of code, you should bear in mind how these fit with any patterns you may be working with. Don’t expect a design pattern to provide you with answers, it will instead give you the means to find the answers more efficiently.

• Negate the need for user testing
When thinking about UI patterns, we are generally making sure that any journeys or interactions are considered and based on proven approaches we know users understand and expect. Therefore, it is easy to assume that our platform is fine for users without any form of user testing. This is a risky assumption to make, users across different demographics, industries and even in differing environments can and will expect differing behaviours. Even if you are building a solution for users you have built for previously, it is important to remember that these user experience standards have evolved over time and will continue to do so.

• Provide one approach for all projects
The use of design patterns span from providing an overarching structure to an application to more granular patterns for small decoupled pieces of functionality. Most projects encompass a range of design patterns, separated by UI and functional, and one pattern may contain other smaller patterns. For example AngularJS is based on an MVC application pattern which separates your Model, View and Controller, however your controller can contain more granular JavaScript patterns such as Constructor or Modular.