A small web app to generate random medical-sounding words from a source list of stems. Output may or may not be a formally-recognised medical term.
Live web app
More UI/UX projects
Inspired by work done for an earlier client project, the first versions of this app were initially created with PHP and jQuery. From version 2 onward, they have been built using only vanilla JavaScript and hand-written HTML and CSS, without any libraries or frameworks; an attempt to stay grounded and keep in touch with the continued maturation of web APIs.
Though the code and interface have both continued to evolve, the method for generating words has remained essentially the same: 1) use a pseudo-random number generator to select suffix from a list; 2) filter the affix list to only 'compatible' affixes; 3) choose from that filtered list using the same number generator. The ending of the word is chosen first to allow the selection of word type (noun, adjective etc) in future, and the two stems are deemed 'compatible' if they join with a consonant-vowel or vowel-consonant pattern.
The interface of the initial versions was heavy with shadows, highlights and general skeuomorphism. By v2 though, a strict monotone, almost brutalist style had been adopted, in line with the drive to simplify and streamline the interface as much as possible. This same drive caused the manual selection functionality to be removed, as well as the visual indication of the joining point between the two stems.
Though version 2 was much faster, more efficient and simplified, it still felt delicate to use as each word just disappeared as soon as the 'Generate' button was hit. The obvious remedy to this was to provide some kind of history functionality, either natively through the browser history or manually through state tracking. The third and current iteration of this project was begun primarily to add this feature, and the latter option was chosen for its implementation.
History has been added to the interface as a collapsible side pane, and a new bottom pane holds further info about the app as well as multiple colour scheme presets. Both these panes transition between their states with a snappy 200ms ease-out animation, retaining visual continuity without feeling sluggish and getting in the way of usability.
Both the new copy-to-clipboard and permalink buttons are kept aligned with the generated word at the top as they represent actions specific to that word. The generate, options and history open buttons are kept along the bottom of the frame as they are app-wide and not specific to the current word. Each button has no border or other decoration so as to reduce visual clutter, and hover highlights are kept consistent across all elements.
Though the app appears relatively plain, its interface and usability are highly-refined and greatly considered, having benefitted from the luxury of an extended iterative design process. There are many further considerations under the hood, from code clarity to PWA implementation and colour scheme retention via local storage. But perhaps most importantly, I've continued to learn a whole lot over the course of this project.
Feel free to go and generate some Cronenbergian horror
