Alex Tebbs - UI Developer | Mythroller
UI Engineer

Click on a letter of my name

About this design

I like to be flashy, but minimalism is important to me. This type of design is popular among photographers, artists, and fashion labels. The stark, unassuming nature of the design provides a blank canvas upon which content becomes the absolute focus.

Remember me? Skeuomorphic design dominated the late 2000's - early 2010's. Skeuomorphic is a funny word which essentially means design which attempts to mimic the physical world. Skeuomorphic design is dominated by gratuitous use of shading and lighting, and in more extreme cases, texture and graphics to make a digital product resemble it's physical counterpart.

When designers felt Skeuomorphic design was becoming too overbearing, there was a large shift in the design world towards stripping out excess shading, lighting, and other affordances associated with the previous trend. This left us with "Flat" design. To me, flat design means focusing on creating clean and usable interfaces without using visual flair as a crutch.

This is everything you should never do. Poor hierarchy, misuse of typefaces, dark UI patterns, no consideration for mobile devices, obnoxious color pairings, awful contrast, distracting elements. Please don't make me do this stuff.

Seriously, .

Liberal use of primary colors, larger type, and colored, illustrative, iconography are a few of the things that make this design feel whimsical or even a bit childish.

I hesitate to use primarily dark color schemes -- black-on-white text is easier to read. However, black is a powerful tool. A darker grey balance can evoke feelings of sleek, modern exclusivity and mystery. Dark schemes can be useful when creating a product or website meant to be a counterpart to an already existing property. I also think a darker UI is a better fit when working on websites that deal primarily with video/other media. This mimics our expectation that video/other media appears on a black background, as it does on our TV sets.

Serif typefaces are seldom used in web design, and for good reason. Sans-serif fonts are friendlier and have been proven to be easier to read on screens, especially at small sizes. However, when attempting to target certain markets or create a sense of luxury, a design using serifs can give the impression of a high-end restaurant menu. Furthermore, liberal white space, thin strokes, and reserved use of pastel shades give this design a feminine energy.

Swiss design (aka International Typographic Style) is a classic style which began to emerge in the 1920's, and is still influencing designers to this day. In Swiss design, typography is king. Common hallmarks of Swiss design include large, geometric typefaces (most ubiquitously Helvetica), rigid alignment to a multi-column grid, and carefully-placed flush-left text. Color is used liberally, but usually no more than one color is used in a piece.

Originating from architecture, the term "Brutalism" refers to design that is intentionally raw and unpolished. In the context of web design, this usually means rejecting commmon user interface patterns in favor of presenting a design so aggressive it almost shocks the user into sticking around to enjoy the content.

But hey, if it's not your thing, I understand. , there's plenty more.

UI Engineer
Click on a letter of my name

Mythroller

Generating D&D characters using AI

Mythroller is a character generator for tabletop roleplaying games like Dungeons and Dragons. Typical generators for Dungeons & Dragons rely on picking random values from large tables to create unique characters, but this generator uses OpenAI completions and DALL-E.

Check it out here. Or view the code on Github here.

Showing input prompt screen for a logged out user. Example prompts can be "re-rolled" to generate inspiration.
Showing input prompt screen for a logged out user. Example prompts can be "re-rolled" to generate inspiration.

I created this app from the ground up, handling everything from the database schema to picking typefaces for the UI. The tech stack includes NextJS (app router), Prisma ORM, Planetscale (MySQL provider), Vercel (hosting provider) and Tailwind (design system). I'm using the text completion API from OpenAI, as well as DALL-E to generate an image for each character. Character images are persisted to a Cloudinary bucket. Some UI elements make use of THREE.JS.

Recording of character generating process using one of the randomly generated inspiration prompts

AI content can take some time to generate. It was important to me that the user can start viewing the character data as soon as possible - so rather than waiting for a long load process, the app immediately starts streaming the generated response content to the user. A class to compose prompts is used to create a unique prompt for each field to be generated, feeding back into the prompt all content that has been generated so far. Each field intelligently understands the dependencies it requires to generate. For example: generating a character's physical description requires the species/age of a character to be generated first - but generating the characters height and weight can be done completely in parallel, as they do not require one another to generate.

Images are displayed with a custom SVG dithering filter applied. This filter serves to both add some unique style as well as mask the lower quality and style of some AI-generated content.
Images are displayed with a custom SVG dithering filter applied. This filter serves to both add some unique style as well as mask the lower quality and style of some AI-generated content.

I also felt strongly that users should be able to generate a character without logging in. There were some technical challenges to solve with this - but through some cookie management, you can create a character without authenticating, and then create an account (with Google OAuth) later to associate that character with your user and gain privileges to edit that character.

Recording showing edit and re-roll UI. Text can be edited manually or sent back to the AI to be regenerated.

After the character has been generated, individual fields (including the image) can be "re-rolled", and instructions can be given for the re-roll process. A button in the header also allows the entire character to be re-rolled.

This project really broke open an entirely new field of development for me and was full of interesting problems to solve - I'm very happy with how it turned out and I think it demonstrates a fun and interesting use case for LLM text generators such as ChatGPT and others.

Back to all projects