After months of having a utilitarian design, I decided to resurrect my initial recipe card design. This time, I went with the diagonal lines tile as the default. It comes with the same 4 alternate background tiles for the header that the original recipe card design had.
My initial attempt at making printed recipe cards involved generating PDFs with editable forms. Every time I thought I was finished, I'd started filling in the forms and realize the alignment was off or I wanted to make a modification. I'd have to regenerate all of my template PDFs, then copy the recipe details to the new templates. After the third or fourth time, I switched to hand-written HTML for a short time, then decided the only way to do this right is with a database application.
This Snap web application is the result. In addition to storing the usual fields like name, ingredients, and instructions, it has a few features that don't exist in other recipe applications or blog plugins.
- Multiple cook times, depending on the size of the portion or pan (eg. smaller cookies cook faster than larger ones)
- Cross-linking of recipes to establish relationships (eg. chocolate frosting goes well with chocolate cake, or mashed potatoes is an ingredient in shepherd's pie)
- Search by keyword, category, cuisine, and status type
- Notes to keep track of anything about the recipe (eg. I accidentally doubled the spices and it was too spicy)
- Link back to where you copied the recipe, drew inspiration from, or a really good demonstration
After my initial ribbon & scallop recipe card design turned out to be a bust, I wanted something that would go with recipe book. The book's style is called Perfect Setting by Susan Winget for C.R. Gibson. I managed to find a perfect match for the font, P22 Dearest Script. I had a hard time finding elements in the book's design that would fit into a compact recipe card, so the rest of the design is only loosely inspired by it.
I started browsing the internet for printed recipe card designs to tidy up my messy, hand-written recipe collection. The ribbon and scallop design was inspired by a ribbon I saw in a collection of whimsical watercolor drawings. The tiled background was originally polka dotted, but I came up with additional alternate tiles: vertical lines, diagonal lines, diagonal lines to form the outline of diamonds with dots at some of the intersections, and argyle.
This design was retired because my printer couldn't print 4x6" index cards all the way to the edges.
Inspired by Pixabay's autocomplete library, this library is intended to be used in situations where multiple fields need to be populated. Ever needed a select element that has too many possible values to reasonably list in the markup? That's the use case this library was designed for.
There are four major features this library provides
- The Plain collection of splices allows form fields to be displayed as plain text rather than in form fields.
- The Custom collection of splices allows highly customized markup, especially useful for Choice types that are typically presented as radio or checkbox input elements.
- A highly customized List splice that allows greater freedom in what mark-up is generated. The splice provided by digestive-functors-heist injects a div element, which might not be desired in your generated mark-up.
- A splice for generating radio input elements that span a List, ideal for setting a single element in the list to a specific value (eg. a default or featured element in the list).
This is the next evolution in the site's logo. I'm still using Coronet here as the base font, but the flower is different. The simple 5-petal coneflower has been replaced by a 5-petal water lily that uses partial transparency to give it the illusion of having more than that.
For years, the markup for my portfolio was written by hand. This was fine when I only had a few year's worth of designs, but I've been doing this for over 15 years now. I wanted to be able to sort them in different ways (year, color, etc.), as well integrate my development projects into the list.
The biggest challenge was designing the database in a way that would accommodate both development and design projects so that any given project could have designs and/or code associated with it, without having to duplicate tables (one for design projects, one for development projects). With this schema, it's trivial to add new project types in the future.
I had been tinkering with creating replacement SVGs for the redesign I started over a year ago for several months before I started actually pulling together a new design. It has a lot of the same features as before, but there content is quite different. Projects are now completely unified, instead of having design and development projects segregated.
This is an extremely simplistic design that I threw together. The primary focus of the site is the content, so I didn't want to detract from that. The silhouette found in the header is a tracing of a piece of in-game artwork found on survival matches. It features iconic characters like Iron Man, Deadpool, Doctor Octopus, and the Juggernaut. The primary blue color repeated throughout the design was chosen from the game itself.
A number of the UI elements were inspired by the game. The site's default view for rosters mimics its in game appearance. The icons that appear in the DDQ calendar and character information pages also come from the game.
The development for this application started in the database before being turned into a web application using the Snap web framework. It has 2 core features: tracking and predicting a quest that changes daily and an online inventory tracker.
In February 2015, Deadpool's Daily Quest introduced to the game. Due to the structure and predictability of the rewards, players were interested in seeing this information well in advance so they could decide when to spend their tokens. They were sharing this information on a flat forum, so I placed it in a database and presented it in an attractive calendar format. The database is setup to learn as new characters are introduced to the game.
Mystic Dhalmel Herder
It wasn't long until the linkshell needed more than just a way to process applicants who wanted to join our group. We ended up needing pages to track all sorts of things: events we had done and who came to them, items people wanted, items people had already received, how many upgrades people had collected to build a particular item, etc. This made it a lot easier to plan what events we should do for the evening.
This design is heavily inspired by the one I did for Guild Wars Gamependium back in 2005, but it has a lot better contrast. The header contains a panorama of Tahrongi Canyon, an area famous for the camel-like creatures with long necks known as dhalmels. The silhouettes in the foreground are the 3 original members of the linkshell running from a herd of dhalmels.
This design is heavily influenced by skating costumes while also having a bit of a Web 2.0 look. Different sections of the page are embellished with stitching, the header is adorned with Aurora Borealis colored Swarovski crystals, and the logo looks like it is "printed" on a tag that is sticking out of the back of the dress. The popular browsers at the time didn't have much support for linear-gradient or box-shadow, so I used tiling background images and pseudo elements to get the same effect. Having a gradient as a design element was very important to me, since creating an ombre or gradient effect on the costumes was one of the services I provided.
I had created a logo for my imaginary costume design business years ago, but it seemed a bit crude and amateurish to use now. The most promising concept I came up with was an outline of a skating dress that flowed into my name. The base font here is Allegro. I don't normally work with print, so I created a variation that was completely black and white just in case the color gradient couldn't be printed as intended.
After working with Pike for a few years to write the Gamependium website, I found it difficult to go back to using PHP as my language of choice for web applications, so I started rewriting my diary application in Pike. In addition to changing programming languages, I switched from MySQL to PostgreSQL for my database. The only significant feature I added in this version is allowing entries to be associated with multiple tags. Previously, entries could only belong to a single category. Also, dates are stored as dates rather than unix timestamps.
The photograph that is the basis for this design was taken shortly after we moved to a new apartment in a new city. The previous design was starting to feel dark and gloomy, so I wanted to create something light and fresh. Green is not something I use very often outside of an accent color, but the springy hue I chose complemented the blue in the photograph very well.
Guild Wars Gamependium
This is the first time I worked on a design for a site where the content itself and its UI were designed before the general look and feel was. The header features a panorama of an area of the game called Old Ascalon, which is the first thing you see after you leave the tutorial area. The silhouettes in the foreground are of a Mesmer, a Ranger and her pet bear. Some of the styling techniques, such as formatting a table to not look like a table, was quite cutting edge at the time and didn't actually work in the versions of Internet Explorer that were popular at the time.
The initial prototype for this application was done using PHP/MySQL, but it was moved to Pike/PostgreSQL very early in the development process. This is the very first application written using the Mako web framework (which remained closed source), and design changes within the framework were heavily influenced by the needs of GWG. One of the unique features of the builds section of the application is that as the skills were updated through game updates, you can see all of the skills as they looked when each revision of the build is submitted. When an update to the game was made that allowed players to save and share their builds in game, GWG was updated to read and generate build data that is compatible with the game.
After I redesigned my diary to have a more vibrant look and feel last month, I started getting the itch to do something similar for my photolog. The layout itself didn't change, it just got a new photograph and a fresh set of colors. In fact, the old design was left in place as an alternate style sheet.
The PHP/MySQL web application that powers the photolog is a fork of the one that powers my diary. The most significant modification is that it expects a single photograph to be uploaded per entry and it automatically generates a thumbnail upon submission. In addition to searching and displaying entries by month or category like one would expect from your typical blog software, entries can also be displayed by day.