Design Concept, Design Principles, and User Experience Specification

Like all design related modules, Bissetii has its own design concept. The idea is primarily focusing on rapid prototyping a web interface without relying on framework so the developer would just focusing on enabling the functions.

Using Bamboo to Build Hong Kong Skyscrapper

Bissetii, also known as Phyllostachys Bissetii was inspired by big, beautiful, simple, hardiest, and strong bamboo plant that stands out in both the garden and forest. Bamboo serves as the scaffolding for skysrapper construction, especially in Hong Kong.

Relating it back to the scaffolding role, Bissetii serves as the same types of bamboo scaffolding material for one to build building beyond imaginations.

Values and Motivations

Here are the values and motivations that kick-started Bissetii project.

The Story Behind

At first, Bissetii is designed as a Hugo theme module. It was meant to honor majority of the HTML partial templates and its associated settings. After observing Hugo’s practices and source codes, it is suggested that Go programming language is able to interpolate easily with the module.

Henceforth, the idea of single web design template module is born. Bissetii quickly got itself into a position where it is best suited to serve as a single theme-based design template module.

Resources Consolidations

One benefit via consolidation is to produce a single, focused, and pinpoint web template module. This consolidation allows us to easily standardize scaffolding design across different website or web-app, creating consistency for user experience.

Another benefit is we are able to isolate technological dependencies for both designers and developers for their respective work. Web designers can work independently with the designs in Bissetii itself using Hugo while Go developers can focus on developing the applications.

Design Principles

Based on the design’s values and motivations, we derived a list of design principles that we must strictly adhere with.

Principle #1 - Follows the Standards

Adhere internet standards like www.w3.org, Go Programming Paradigm, and Hugo Programming Paradigm.

Principle #2 - Keep it Go and Hugo Compatible

Keep the module compatible for both Hugo and Go. That way, we maintain a single template module.

Principle #3 - Keep Things Simple and Practical

Keep the module simple and practical. This is an artistic tool, not a fully aristic piece of artwork. It has a purpose to scaffold an idea.

Principle #4 - Prioritize Hugo over Go

The primary customer is still Hugo. Go is a programming language which has flexibility and versatility to overcome obstacles compared to Hugo.

User Experiences

Bissetii is designed based on the Hugo’s theme module. In other words, it has all the basic elements of Hugo themes like archetypes, i18n, layouts, etc.

In this section, we will specify more about how user uses Bissetii as an overall.

Bisseti Must Be A Direct Hugo Theme Module

The very basic function user MUST be able to do is git clone Bissetii into the Hugo local themes directory without any custom configurations.

$ git clone https://gitlab.com/ZORALab/bissetii.git

This is a NON-COMPROMISING user experience.

Go Compatible Import for Layouts Partials

All HTML or contents templates should resides under a single layouts directory. The layouts/partials directory is something you must pay attention:

  1. layouts/partials must be simple enough for Go to import with the exception to layouts/partials/hugo-only directory (the name said it all).

Anything else like layouts/_defaults, and layouts/shortcodes are more for Hugo-only use cases.

Go Shares the Same Hugo Theme File Structures

Since Hugo dominated the file structure, the easiest way is to adopt its file structures from the get-go.

Conclusion

That’s all for Bissetii’s design concept, design principles, and user experienc specification. Feel free to use the navigation menu to explore other contents.