Whether it being visual design or software, design patterns are important, very important. You don’t even have to be a huge team of designers, developers, copywriters and account handlers to see the benefits of having a system in place. Having your own set of design patterns and standards is very beneficial for teams to get projects out the door as smoothly as possible.

Visual and User Interface Design

From a visual and UI (user interface) point of view, you can have a number of design elements that you can simply drop into your designs to visualise to a client quickly and easily.

Predesigned elements may include the following:

  • Header
    • Placeholder logos
    • Menu navigation, both non-responsive and responsive for web applications
    • Contact area
    • Search field
  • User interaction forms
  • Icons
    • Social media
    • Downloads
    • Document types
    • Arrows
  • Placeholder imagery by sector areas
    • Law firms
    • Property developers
    • Health services
    • Utility companies
  • Typography sizing
  • Footer
    • Quick links
    • Social media
    • Legal information
    • Copyright information
    • Credits

Development

From a development point of view, you can have a coding standards that you and your team will follow. Even things such as folder structure and ease a lot of headaches.

This is a basic view of how we organise and structure our CSS in folders:

  • Base
    • Colours
    • Mixins
    • Resets
    • Typography
  • Components
    • Forms
    • Links
    • Menu
    • Rulers
  • Layout
    • Body
    • Footer
    • Header
    • Grid system

The base folder houses the basics to get any web application up and running.

The components includes simple stylings of key HTML5 elements.

The layouts are where we add layouts such as a newsletter element or contact form.

Changing Design Patterns

You and your team should never be afraid to change your design patterns every now and then. Yes, it is a big task and takes a lot of planning and preparation but it is well worth it in the long run. A good rule of thumb is to have a review every six months or so. It also can get team members who may not need to interact with one another on a weekly to monthly basis to do just that.

Do tips for reviewing an existing design pattern can be:

  • Map out what you can your team feel is working
  • If possible, gather together some client feedback
  • Where any elements rushed the last time and may need readdressing?
  • Have any new technologies that excite you came about since your last review?
  • Have any new team members been added who may bring a fresh insight?

Conclusion

All-in-all design patterns are extremely useful if used effectively. The design patterns we have set in place do a great job because we can design and develop prototypes with relative ease and speed.

First published: March 21, 2019