Another photo from England: this time a stone pillar in an alley between the high street and the back of the shops. Your eye is immediately caught by the storm trooper stencil, but more and more is revealed as you look closer. The caricature at the top is quite striking. There’s a realism and emotion along with a cartoon style. Finally, you start to see the messages scratched into the surface. It seems to be a common post for sounding off on the popular conspiracies of the day. It’s also an example of one of my favorite bits of graffiti in the public square — a dialog.

Cotswalds, England

Creating a catalog of the movies in our video library

View the project

My wife is a big movie buff and so over the years we’ve amassed a large amount of videotapes, DVDs, BluRays and streaming service purchases. It was way back in 2004 that I first got her a Netflix account as a Christmas gift back when they would mail DVDs to your house based on your selections. It might be the best gift I’ve ever given her as we’re still members after 21 years. We’ve certainly gone through the tech conversion process as well — buying DVD versions of videotapes and then buying digital downloads of DVDs. All of which means we have a mishmash of movie formats scattered around — binders full of DVDs, boxes full of videotapes and digital purchases across a variety of streaming services. It’s a bit of a mess despite her valiant attempts to organize the collection to make finding a particular title easier.

So recently…while I was digging around deep in the archives of some old hard drives, I came across an unfinished attempt to build out a movie catalog for us. From the file dates, it looks like I grabbed a design concept from 2008 and used it as a basis for an initial catalog build in 2011. With the recent (somewhat) build (success?) of the virtual library of all our books, I decided to revive this old movie project and finally to bring it to life.

The Design

I’ve been kind of in love dark UI color themes recently — grabbing screenshots and building out example palettes for using in some future project. Finding this old design file turned out to be the perfect project to scratch that dark UI color itch and better yet, it came with a preset colors. Turns out long before theme switching became a thing on the web, I was designing dark UI patterns.

The design is a centered, basic table with the data surrounded on the left, right and bottom with artwork. The artwork style is very much of the early 2000s or at least, very much of the style I was drawing back then. I guess you could call sort of a floral trash glitch. Lots of scroll work with tech elements with noise and grime textures overlapped on top. The bottom artwork is a silhouette of an industrial building, but flipped upside down so that the scaffolding and smoke stacks point downwards.

The Development

The two development challenges were converting the old HTML to a modern layout and switching out of the obsolete Adobe Spry framework the original page was using. Keen readers may remember that I used the Spry framework for the retro client list page I created way back when.

The Colors

Working through all the colors led me down a side quest to create swatch cards for each color. This is not a new idea as I’ve done it before for other projects such as the Pattern Pattern project. This time around though, I wanted to replicate a tool I built for use at work. Namely, incorporating some data attributes and a bit of Javascript to allow for visitors to copy the color values for use elsewhere. Taking it a step further, I converted the hex color values over to OKLCH which is a bit of an aspirational nod to the future (present) to remind myself to really start exploring and using OKLCH values. I’ve tried to make it a bit generic for use with other projects and I’ll probably continue to tweak it and make it a template of sorts. For example, the buttons probably could use some announcement UX improvement.

The Layout

Back on track, I stared updating the HTML structure and layout. The original old file has a single background image. The image pushed the art to each side leaving the middle as a single flat color. The HTML then centered the data table in the center of the page and therefore, on top of the center of the background image. It was a common technique back then, but obviously not relevant today. Centering the HTML on the page is trivial, but updating the layout mean breaking up the single background image. Of course, in the original old files I could only find a Photoshop source file and not the individual illustrations used to create it. Since I wanted to update the raster image to SVG, this led me to reverse engineering the original to convert it back to vector. Maybe someday I’ll find the original files and recreate the complete vector illustration, but for expediency, the new version is not technically identical to the old version.

The Typography

The original used Arial because custom fonts and font loading were in their infancy while services like Google Fonts weren’t even available. System default font stacks were still the quickest option for little projects like this concept. The one trick in the original design was to reduce the type size of Arial significantly which gave it an almost bit mapped or mono space appearance. For the new version, I took this visual quirk and better defined it by switching to an actual mono space font, specifically one of my new favorites, Space Mono. It’s still small to help maintain the look and actually works better as the characters forms are more legible increasing readability and accessibility.

The Content

With the graphics, layout and basic HTML structure updated and in place, it was time to get the massive list of movies into the HTML table. It only took a few minutes of copy pasting movie details into HTML blocks, duplicating the HTML and repeating it all over again for me to realize the manual process was too cumbersome for me to ever finish the project.

So what’s the solution? Like any good craftsmen, it’s to build your own tools, your own jigs. It’s a common enough approach in the carpentry and the idea is finally coming around to web development. Here’s a good post about the connection between craft, tools and jigs and another post with an example jig a designer built for their use. I can relate to both posts as I’m now finding new little parts of the design/build process that need a custom tool or jig to make things easier (and often better). Realistically, I’ve been doing this forever. Every time, you learn a new code pattern, you often reuse the pattern elsewhere. Code building upon code. The color swatch panel is an example. I made it for one specific use case, but I keep finding other opportunities to use it as well as continuing to tweak the features.

In order to speed up the data entry, I built a form. A regular old HTML form with some PHP to handle the inputs and dump them in to a JSON file. This was the jig, the single purpose tool to help me craft the final output. With the form up and running, things became much easier. I was able to flip through binders of DVDs and then tab through the form fields to quickly enter the data. I kept a browser tab open with our Prime video account so that I could jump over there to figure out a movie genre, double check spelling or look up a title. It was a tremendous time saver to say the least. Using the form got quicker with each entry as the browser remembers previous inputs and then allows you tab through the entries. After a few times, I didn’t have to type in the genre anymore, but merely tab through the browser suggestions. Super quick and easy.

For testing, I wrote up a script that took the JSON file and generated the HTML table. This helped catch any errors and typos before they got hidden too deep in the list. Of course, the page was then dependent on the Javascript. No Javascript (due to loading error or visitor setting) and then there’s no table. For the final production page, I took the testing page live output and copied the entire table, pasting it into a new HTML file. This extra step keeps the page static eliminating the table build step. The only Javascript then is for the extra functional upgrades and if it doesn’t load, the table data is still available. This also let me alphabetize the list by title prior to creating the new static page which was handy as the data as originally entered was anything but organized. And yes, that does mean that the build process for this static page is…me, building the page. I’m the build process.

Sadly, I do have to add an aside here: “building your own tools” is not a “website builder,” “vibe coding” or any other artificial “intelligence” no code bullshit. I hand code the tool to help me hand code the output.

The Upgrades

As the list got longer and longer, I took the opportunity to add a few features to help my one potential user, my wife, find a film. This meant two upgrades: search and sorting the table by columns.

The search was a modified version of the one I built for the virtual library. Again, another example of reusing (and modifying) a code pattern for a new project. For this version of the search, I switched from using data attributes to just the text values of the table cells.

For the sorting, I’m not sure where I dug up the script, but it’s certainly a pattern I’ve used before in other projects. Nothing fancy, just a little text comparison, but definitely can help with such a long list.

Summary

Overall, it’s nice to get this project up and running to bring this design to life. I find there’s something really attractive about the table cell separation. It just feels…right. A bit of extra polish for an otherwise ordinary table. The same is true for the mouse over / hover effect on the table rows. It doesn’t do anything, but it’s fun. It’s almost a functional deceptive pattern although I wouldn’t go that far. The cursor doesn’t change indicating a hyperlink and the text itself can still be selected. But it’s a fun highlight effect that might help with readability. It also fits with the retro style. I can almost hear the small beep, chime or click sound as you move up and down the table rows. Hmm…maybe I should add in a sound effect and some tab key navigation in the next revision.

View the project

Here’s another find from the English countryside. It may be genuine — pulled from some school or misguided high street shop manager — but I really hope it’s an artist created bit of cheeky humor. It’s such a nice dry summary celebrating the small and pointless in the face of the large and important. I love it.

Cotswalds, England

A bit surprising to find this graffiti in a small town in the idyllic English countryside, but also refreshing. Turns out there actually still is Anarchy in the UK after all these years. Hopefully, the kid’s have understanding and not just outrage. Hopefully, they know what they’re fighting for and not just what they’re fighting against.

Cotswalds, England

Back from holiday and it seems like Midtown has a new logo. Or a new advertising campaign. One can never be sure these days. It is a very clean stencil though and that’s not easy to do. The monogram is also very nice. It’s an obvious nod to the Yankees monogram which itself has moved well beyond sports identity to a clear New York City logo recognized around the world. It’s even surpassed the state’s I ♥️ NY logo from Milton Glaser. I don’t think this one will rise to the heights of those renown logos, but it is a nice bit of typographic illustration and painting.

Midtown, Manhattan.

Helping a Vietnam Veteran share his photos and stories from the war

View project

On March 8th, 2024 I was able to launch a side project for my father-in-law Bruce Tester that has been banging around between us for years. We get excited, get distracted, get busy, get back to it and the cycle would repeat. This post is a summary of the design and development of the site as well as the history of all our fits and starts.

The Background

Bruce is an accomplished photographer and with my design background, we’ve spent countless hours geeking out over Photoshop, the latest digital cameras, scanners, printers and all manner of photography related equipment. Many times, I’ve happily ended up being his de facto photographer’s assistant lugging around gear and setting up for a golden hour landscape shot or a time lapse night shoot. Bruce is humble about his photography and despite filling his house with gorgeous prints, he doesn’t really promote his photos. My wife and I have always loved his work and would (gently) push him to display them somewhere, but to no avail. Finally, for one holiday gift, I bought him his own domain, set up hosting on my account and volunteered to set up a site for his photos.

First Attempts

For quick setup and ease of use, I installed WordPress for him and threw a couple of his photos in place using a free photography theme. I tweaked the type a bit, created a quick logo of sorts and posted some photos to show him what was possible. And that’s was where it sat. For years. We both got busy with life and it was always more fun to take photos versus building a photography website.

Getting Serious

Once Bruce retired, he finally had the time to begin digging through his photo archives, retouching and organizing thousands of photos. This is when we came back to the idea of creating a web archive for his photos. The collection that was in many ways, most important to him, were his photos from his time in Vietnam. Since we already had WordPress installed, he began feeding my sample photos and I started setting up test pages.

Of course, like many projects, as we reviewed and discussed the test pages we found the site wasn’t quite accomplishing what he wanted. I had even given him some basic WordPress training, so he could upload photos and create pages, but it just wasn’t working out. He wanted to write more about each photo, write more about his time in the Marines and organize the photos into subsections to better tell his story. In short, the theme wasn’t working out. I searched for other themes and tried several, but the more we talked, the more it dawned on me — we needed to build it from scratch. It would certainly be a ton more work, but we create something unique, personalized and beautiful.

The Design

The decision to finally build the site by hand was in many ways, a huge relief. While I’ve used WordPress for years and years (and still do for this blog), I’ve grown beyond the framework and it’s limitations are now irritations. Starting from a blank page was freeing and more inline with the majority of my recent efforts. Hand crafted instead of framework dependency.

Overall, the design inspiration was really about the time period — the 1960s. And not the free love, hippie, psychedelic day glow lettering 1960s. The other America. The more conservative 1950s generation with buzz cuts and starched shirts. Looking through the command diaries and cruise book Bruce provided really got me thinking about what “official” document design looked like back then. I started researching other government publications.

The primary goal of the site was of course, to focus on the photos. The site hierarchy was a basic thumbnail gallery leading to individual photo pages. Nothing crazy there. Navigation is a simple masthead with a drop down menu along with a breadcrumb link navigation at the bottom of each interior page. The breadcrumb links expose the structure and allow for jump navigation. Within each photo page there is also a previous/next link navigation so you can alternatively progress through the site in a linear fashion.

Framing the photos and lifting them off the page a bit was another design choice to help separate and define the content, directing attention and focus. The site colors were all muted tones: blacks, whites and warm grays — all in service of the UI and not to interfere with the photos.

The typography was chosen to split between the site UI (menu, navigation, etc.) and the content. For the UI, the Inter font family was perfect. It’s got lots of options, it’s very legible and modern, but also not showy. Like the UI colors, it’s not going to distract from the content. For the text content itself, I loved the look and feel of the typewriter style fonts used in the command diaries. Going with a monospace font like Courier New helped anchor the content in it’s original time.

The one page where I did have a bit of fun was on the About page. I was able to grab a few of the military stamps (“Confidential”, “Unclassified”) from the command diaries along with a bit of texture to add to the background. I think these little touches help to keep the page from being too clean and sterile.

The Development

The site is super old school in terms of development — semantic HTML with CSS for style. The only Javascript used is for the main drop down menu and that’s just for the button event to show and hide the menu. Choosing this direction rather than the latest framework flavor was important as the site is a historical document. I always had to keep in mind that i was building for the future. Keeping it simple and using the proven standards that the web was founded on would help ensure that the site would work well into the future. The entire project is essentially a library archive to help tell part of American history. It was a responsibility I did not take lightly.

Accessibility and the Audience

Accessibility is always a requirement, but as we worked through initial pages, it became even more important as we really considered the potential audience. Given the historical content (and using Bruce himself as a tester), we realized we needed to add design elements to cater to an older audience. Adding numbers to each photo in a category, not only helped us in production, but also gives a reference anchor for visitors. The same is true with the text overlay that appears on hover for each thumbnail. The “click to view” instructions help guide visitors to the full size photos. This was a great exercise in recognizing and adjusting our bias — just because we’re click happy youngsters doesn’t mean folks over the age of 70 would understand the implied navigation. Similarly, adding some “how-to” text to the home and about pages helps to make it obvious.

Education and Production

One of the other parts of the development process was education. Bruce has no idea about the mechanics of good website structure, accessibility or SEO and nor should he. He’s the photographer. This lead to some back and forth as I taught him about <h1> tags, why they were important and why we needed one written for every page. All 400 plus pages. So the production process was Bruce writing and reviewing test pages while I focused on batch image formatting, resizing, optimization and even naming for better SEO. The same was true for the HTML side. Sessions of duplicating files, updating the content and links while capturing and handling any unique content that a specific page might have.

One production and accessibility aspect that I also tackled was writing the alt text for the photos. This let Bruce focus on the photos, titles and the overall story. Now, writing descriptions for 400 photos was no small task and at times it did seem overwhelming. After about twenty, you start to burn out and your eyes blur over. Admittedly, some of the descriptions might sound a bit lazy and in a twist, the WebAIM WAVE tool flags some of them as being too long. I do take a bit of pride in providing good alt text, so it’s a warning I’m willing to set aside especially as this is a photography site.

Other production notes include creating open graph images and the site’s favicon. The challenge for the open graph image was to come up with the text to help “package” the entire project. Given Bruce’s other landscape photography work, I could envision adding new sections to the site and moving this entire project to a sub directory. Thinking about that possible future helped me to consider this project a “collection” which then made the open graph designs fairly easily. Designing the favicon, on the other hand, was much more difficult. The site is personal, so it doesn’t have a logo per se. With no logo and a fairly subdued color palette, there wasn’t any material to rely on. I wanted something dramatic, probably because I suffer from too many browser tabs being open at a time. Initial inspiration came from the Marine Corp itself. Namely, the colors. The red and yellow combination is certainly dramatic and jumps out in a browser tab. The second bit of inspiration was the idea of old camera lens iconography. I worked through a few different, more classical lens shutter icons before settling on an abstract approach.

Performance

Things could always been improved and you can chase down minor improvements for a long long time. Overall though, Google PageSpeed is happy with scores of nearly 100 across the board for desktop (the intended profile). The results for mobile are also impressive if a bit lower for the performance metric.

Performance reports from GT Metrix and YellowLabs also confirm the site is doing pretty well.

Likewise, the site HTML and CSS both validate without issues. Interesting to note that the WebAIM WAVE tool shows the thumbnail hover text as failing color contrast even when the color combination is well above the WCAG 2.2 Level AA ratio. Turns out it’s due to the opacity being zero. Once the thumbnail is hovered, the text opacity changes to 100%, so the error is a bit of a false positive.

Conclusion

Overall, I’m really happy with the way the site turned out. It feels very professional and I think I’ve lived up to the responsibility to tell the story. As the grandson of a history teacher and as a child born during the Vietnam War, I feel passionately about accurately telling stories like this for the future. Heck, I think I bought Bruce the web domain for Christmas back in 2008! It only took us 16 years to build something really great. Hopefully, it’s also worthy of Bruce and the all men and woman who served in the war.

View project

Things are not okay. We all know it. We see it. We hear it. We’re bombarded and we can’t avoid the onslaught. All of which means it’s a good time to ask people, “are you okay?”

There’s a short story going on in this small piece. The look of concern, the flat mouth line, the slouching eyebrow, the sad eyes as one looks away and one looks on. The illustration style reminds me of old Pink Panther cartoons or the Little Ceasers mascot both of which come with fond nostalgia and sit in contrast with the emotion in this brief sketch. I like to think of these two as “D” on the left and “T” on the right. Two characters, close, concerned and unsure.

And so, even if the answer is “no”, even if you don’t have a good reply, now is the time to ask the question. RUOK?

Lower East Side, Manhattan.