Background

A while ago I was in need of a whole bunch of titles for a music project, so building a semi-random generative system seemed like a quick solution. Hilarious, I know.

The first version went live in 2015 and I wrote a fairly long-winded journal entry about the process of designing and building it. At the time I was still relying on comfortable old PHP and jQuery, and in a classic case of choosing familiarity over logic, these first versions duplicated the code and source data across both server-side PHP and client-side JS.

Old versions showing definition rollover

Word Generation

Though the initial implementation was inefficient and cumbersome, its core logic was sound: stick to a single word and keep it simple to avoid the rabbit hole of morphological generation rules. Hence the steps for word generation are:

randomly pick a suffix

check first letter is vowel or consonant

filter the prefix list to items ending with the opposite

randomly pick a prefix from resultant filtered list

Though not the most sophisticated or true to life, this process seemed to consistently produce convincing results, most likely due to the fine quality of the source data courtesy of the same wikipedia page used in the first versions.

The Urge to Decorate

The process of designing the initial interface also underscored the valuable lesson that over-decorating things can quickly get in the way of functionality. Even something as seemingly innocuous as a gradient or drop shadow will almost always begin to limit your design options.

Attempts to ape the physicality of real-world objects were swiftly abandoned, allowing fast iteration towards a visually minimal interface. However, the final version of the these was still bounded by a white rectangle with a drop shadow - skeuomorphism not entirely eliminated.

Rebuild

The most recent iteration process resulted in what seems to be the absolute minimum interface without sacrificing affordance. The text is still bounded within a rectangle on larger screens in order to give it some visual rigidity, but all the colour and gradients have been removed in favour of a monotone design.

The only exception to this are the white highlights on mouse-over of ‘actionable’ elements. Mouse-over is also employed to indicate connection between the word’s parts and their definitions below. On touch devices these highlights are only visible upon touch, but this is a wider problem beyond the scope of this project.

On the technical side, both jQuery and PHP were finally retired and the core logic was migrated to vanilla Javascript only. Not needing any external frameworks, the entire app including all HTML, minified CSS and JS was packed into a single file weighing in at just over 10kb with nothing else to load.

Improvements

As the random feel of the generator can encourage a sense of play, some kind of history functionality might be a valuable in a future version. Each new word could be added to a list to allow for faster, less careful usage where the fear of missing an appealing word is mitigated.

Usability-wise, two further functions could be improved: a way to swiftly copy the generated word to the clipboard; and the ability to manually select a part of the word from a list.

Naturally, the code still has room for further optimisation and the word-generation itself could be a little more intricate. But for the moment, it’s a minimal and efficient little toy for producing surprising and occasionally gross imaginary nomenclature.