BaseKit Templates

Client

BaseKit: Online web builder that makes it easy to create responsive sites for everyone

Role

Web Design / Front-End Development

I was hired by BaseKit to join their design team that creates and maintains templates for BaseKit website builder.

Those templates must work with every widget that BaseKit website builder offers, ranging from a text content, twitter feed, contact form, image slideshow or gallery. There are also blog, store and restaurant menu modules. All those widgets and modules are designed and built responsively and they must cater for various content and for many user settings.

It was challenging to build website templates which didn’t appear broken or badly designed with some many settings variables and various user content. For example a company name length can vary from a few characters to several words. The logo could be either a small icon, a large banner or set to be hidden. Embedded widgets in the template (typically in the headers and footers) can be hidden or swapped with different type by the user and nothing must break. Also colours and font sizes and font families can be changed by the user. Everything works responsively from a large desktop screen to a small mobile screensometimes that’s very tricky, it’s much easier to design and build responsive sites where the content is known beforehand.

Every template design was discussed in the team and iterated to make sure the visual quality meets the company standards and that the theme fits our typical users and their needs. We also had a strict review process in place within the team even before the template was passed to a QA team. Templates were tested for compatibility with the editor functionality and for various user content. Browser and device testing were conducted either on virtual machines or on a range of real devices that were available to us.

Templates were built with HTML using TWIG template engine, CSS processed with LESS and many UI state changes were accomplished using jQuery. Source code was managed on GitHub.

Facet Template

Business oriented template

Zest Template

E‑commerce oriented website template

Timeline Template

Blog oriented template

dribbble github linkedin file-pdf codepen