Pattern Pattern

May 11, 2024

Drawing (and redrawing) the patterns from some old favorite clothes.

View project page

Two repeating patterns, side by side, both drawn from old textiles

Digging around the dusty corners of an old hard drive when I came across a pattern I had drawn way back when. The pattern on the left was actually from one of my favorite 1950s style jackets. I don’t know where the jacket went, but I do still love that pattern. The one on the left is from a shirt I still own. More on that pattern later.

When these were originally drawn, I did them in Adobe Illustrator and saved them as Illustrator swatches which is kind of telling as to how long ago it was. Repeating patterns as swatches were new and exciting and Illustrator was the main tool of choice in my work. There wasn’t a whole lot of web design work back then and print ready vectors were mandatory.

Like a lot of my recent archive discoveries, once again, the project was how to update these files for the web.

The Design

Since the patterns were originally swatches, I used that idea as the main design feature. I’ve been creating a few varieties of UI cards for work, so I had a head start on what I needed. Card interfaces are all over the web, but I definitely wanted these to be closer to Pantone or paint chips. There’s a couple of different card options to show the pattern specs, the full repeating pattern and then the individual colors.

For the typography, I wanted something a bit retro to reflect the 1950s period, but without looking too stylistic. I also wanted to branch out from the usual sources and find some new fonts. Being able to self-host the files and if possible, use a variable font were also on my requirement list. Luckily, I found everything over at Fontshare. The main heading is set in New Title and the subheads are set in Clash Grotesk. The really narrow letterforms of New Title definitely had that retro feel I was looking for. I’m also still completely enamored with big chunky sans serif faces, so Clash Grotesk definitely caught my eye. All the rest of the text is set to a general system sans serif for speed and ease (or laziness while coding if you like).

For the colors, I’m still stuck on using the Flexoki palette as I love the warmer print-like tones. Once again, I didn’t really use the full palette, but that’s okay. I also didn’t go overboard and create multiple color themes. Just dark theme for this page, thank you very much. Now, the colors used in the patterns themselves are not from Flexoki and were eyeballed from the clothes themselves as part of the drawing process. It’s also worth noting that the color names used in the patterns are totally made up marketing copy. They’re not accurate in any way. I just wanted some fancy titles for them. Use the actual color values if you want to replicate them.

The page design is also the same basic template I’ve been using for these little projects: header, main, footer. Nothing crazy as it let’s me quickly get to the fun stuff.

The Patterns

The quickest way to get the patterns ready for the web was to export them out of Illustrator as SVG files. Add in a bit of compression and optimization and the SVGs were ready. I’m using the plural “patterns” here, but I should clarify. The whole project idea started when I found the first jacket pattern, but as I started working, I found I had previously drawn another textile pattern back in 2012. This was the shirt pattern. Turns out my love of patterns has taken many forms. Even though I had blogged about the shirt pattern, I had only provided it as an Illustrator swatch, so including in this new page seemed like an obvious next step. Creating SVGs for the web is pretty standard fare these days and while it’s one of my favorites, I did want to push things a bit further. Hence, some code exploration.

The Code

General page design is still based on a responsive CSS grid with three columns and a few column/row spans for the larger cards. Nothing fancy. The real challenges came when I started looking closer at the jacket pattern. It’s essentially a pixel pattern — which made me thing of a grid pattern — which made me think of CSS grid — which made me do something silly. I created the entire pattern as a CSS grid with each cell representing a pixel on the pattern. Of course, the pattern is 17 x 17 for a total of 289 squares.

(Why the original pattern was 17 x 17 is beyond me, but it made the math more painful than necessary. I actually typed up a cheat sheet with the numbers for easy reference.)

Yep, that’s right. I created a grid with 289 empty <div> elements. Genius, I know. I then set up background colors for the red and black squares with a massive list of :nth-child() statements. Being responsive, it does get squashed when the viewport is resized, so beyond the insanity and performance issues with all those DOM nodes, it’s not an ideal method. The SVG is still better.

Just because it’s possible, doesn’t mean it’s a good idea. But knowing that didn’t stop me from trying another crazy idea. I’ve been playing around with creating background images with multiple linear gradients. Knowing that we can create hard lines between colors with stops in the gradient, I set out to draw the 17 x 17 jacket pattern as a gradient. This method, like the massive <div> list, was an effort in persistence. Getting the pixels lined up was a complete pain, not to mention all the sizes for the 17 gradient rows, but I did learn a bit more about these complex background images. I even went a step further and created a version of the gradient using percentages instead of pixels. This certainly helped and brought closer to the CSS grid version in terms of flexibility, but also the same limitations. In the end, I didn’t even include an example of the gradient on the page although I did keep it in the CSS file for reference later.

Learning all those lessons, coupled with the more intricate pattern of the shirt, I didn’t even attempt either a grid or gradient solution for the second pattern. It might be possible, but after all that experimentation, I didn’t have the patience for more.

Overall, I’m happy with the lookbook design and chip cards. Getting these old projects some new life in a new format is always fun too. Head on over check it out and download the pattern files.

View project page

Civil Defense

July 1, 2023

Redrawing the original set of civil defense badges from the United States Civil Defense Corps created in the 1940s.

View the project page.

As has become apparent over the last few years (and even decades and centuries before), we are each responsible for our own safety as well as the safety of our communities. It seems this is a lesson we forget and relearn in a cycle of storms, accidents and tragedies. This concept of mutual aid is once again in vogue and becoming more prominent as we begin to see epic environmental changes occurring in our own neighborhoods. When “once in 100 year” events start happening every year, we’ll need to pool our resources and efforts to survive the floods, droughts, storms, fires and freezes.

Luckily, we’ve done this before. During WWI, the U.S. government started what would later become known as the Civilian Defense Corps.

A set of three civil defense logos from the illustration project.

Reading up on the history, I was excited to see that each group had their own badge and more importantly — they were awesome. Really great, simple yet functional pieces of graphic design united in theme and purpose. Unfortunately, as I searched further, I couldn’t find much about the logos nor could I find the badges themselves. So I set out to redrawn them based on an original document from the period. And that inspiration provided another opportunity to work on a little web design and development to showcase the badges.

The illustrations

Redrawing the badges looked difficult at first, but creating a base template for the logo with the appropriate shapes and colors streamlined the process. Are the final results 100% identical to the originals? No, but they are very close and faithful. I didn’t make any creative or editorial decisions (suppressing all my art director experience — I really wanted to realign each). Each was then exported to SVG and optimized for the web.

Design and development

Now that I’ve got a few of these one off pages created, the ramp up process is much quicker. It’s not quite a template, but it is a starter pack of sorts. The Rorsch project was a great starting point given the retro vintage styles used. But…I didn’t want that much retro. I didn’t need the super distressed paper, but did still want the look and feel of that old manual. I pulled a sample of the paper from the manual to set as a background-image and then applied a background-blend-mode of multiply against the base background color. I did the same for one of the standard grit textures I have on file, but with a different blend mode. Being able to set multiple background images via CSS is a real game changer in terms of design possibilities. I’ve used the same technique, but with gradients, in other projects to draw complex backgrounds instead of using a raster file.

The big change for this project was to try out using an SVG filter to add a layer of noise over the entire page. I tried a couple of different ways to get it to work properly and finally ended up putting the SVG filter into the CSS as a background image and then setting the mix-blend-mode to hard-light. I dropped the CSS class onto the html element so that it covered the entire page. Along with the fractal noise distortion, the hard light mode did change the colors a bit, but it works as it almost de-saturates them a bit enhancing the retro style.

For the type, I wanted to match the styles in the PDF source, but…I couldn’t go as far as to use that cursive subhead font. It was just too much. The sans serif headers are Alternate Gothic to get that compressed letter width. The serif is FF Seria and despite only being used once for the intro text, I still wanted to try to match the style of the manual. Both are served via Adobe fonts which isn’t ideal from a performance standpoint, but it is convenient. I do wish Adobe would come up with a self-hosting option for customers.

All the SVG files are loaded via a standard img tag with a figure tag which allows adding a figcaption tag inside to drop in the badge name.

Packaging up the set of SVG files for a download was the final step. Hopefully, we don’t need them in the future, but it’s always a good idea to be prepared!

View the project page

Xtra

March 29, 2020

Photo of an ITT Xtra computer circa 1984

I have been using computers for over 35 years. This is quite a statement and one that makes me appreciate all the bad ergonomic decisions I’ve made along the way. In fact, it was a diagnosis of tendinitis in my elbow and subsequent introductory questions from a doctor that made me even realize that my relationship with computers had been going on so long.

“Do you use a computer for work?” Yes.

“How long have you been using a computer?” Uhhh, years? Decades? A long, long time.

And I didn’t really have an exact answer. Which got me thinking, because it seems like something one should know about oneself. I’m in the first generation when it comes to personal computers (which may lead to another longer post topic).

The ITT Xtra is the first one I ever really explored. My parents bought it one Christmas and I can still remember first seeing it set up on the kitchen table. No box, no wrapping paper, just sitting there like an alien. Now, to be fair, I had been using computers for some years before this — they were starting to show up at friend’s houses and my middle school had purchased a bunch of TRS-80s to stick in a science class.

But there’s a difference between “using” and “exploring”. It wasn’t until this showed up in my house that I was able to spend unlimited hours learning what it could (and couldn’t) do and by extension, what I could (and couldn’t) do with it. My siblings were too young to care much about it and my parents were too busy to learn it, so I became the default user for the house.

“Give ITT a round of applause for including clear, profusely illustrated documentation with the Xtra. This little extra touch is worth it’s weight in gold.”

Creative Computing, 1985

ITT Xtra computer with manuals and extra hard drive

Not an actual photo of my Xtra, but those manuals were fantastic!

It was that “profusely illustrated documentation,” as seen in the photo above, that gave me any chance of understanding how the computer worked. Beyond using the word processing program to write all my school papers, it was here that I began to make the early connection between code and art. The idea that you could program the computer to make art. This was an astonishingly profound revelation — that graphics on screen were directly tied to code — basically text. It wasn’t long, and it was probably the first thing I wanted to do with the computer, before I was writing screen graphics in BASIC.

Seeing the light

One of the coolest features was, of course, the amber monochrome monitor. While I may have had some initial trepidation because I had never heard of the ITT brand before, I was immediately won over when I learned that amber monochrome monitors were easier on the eyes than the traditional green monochrome monitors that everyone else had. Remember, I was a teenager with all the misguided fears, self-doubt and imagined peer pressure that accompanies those years, so having something — anything — uniquely cool was a big deal. Even if the claims about amber monitors weren’t necessarily true.

“An amber screen was claimed to give improved ergonomics, specifically by reducing eye strain; this claim appears to have little scientific basis.[3] However, the color amber is a softer light, and would be less disruptive to a user’s circadian rhythm.”

Wikipedia

So where does all this nostalgia lead us?

It’s led me to create a new page on the site using the style of my old original amber monochrome monitor. It’s a flashback to what it was like for me to work on that first ITT Xtra computer — amber, bitmap fonts on a black background. To that end, I’ve been toying with the idea of including a client archive page on the site. These two ideas were perfect for each other — a long list of text in a table with a retro design style.

The design itself is by it’s very nature, basic. I started by finding the perfect shade of amber, not necessarily in terms of accuracy, but more on an emotional basis dredged up from some sort of color memory library. Next up, was choosing the perfect bitmap font and I do love a good bitmap font. In this case, historical accuracy won over nostalgia as I was able to find the exact font files used on the ITT Xtra. From there, it was more of a matter of web development to bridge the gap between the old and new.

Now of course, it’s not an exact replica to the original, mostly due to the underlying technologies involved. The two big differences being the monitor construction and the text rendering engines in modern computers. Those old monochrome monitors made for much crisper text. So the way your laptop screen is built makes the text a little blurry (on the plus side, it has more than one color). The second difference is how your computer renders the text itself — usually via anti-aliasing or subpixel rendering. While I can’t overcome modern displays, I have included some CSS to help recreate that old text rendering.

Along the same lines, I’ve also chosen to use another old technique for the page — loading the client list data via XML and a deprecated Javascript library from Adobe called Spry. Now, admittedly, this has nothing to do with my old ITT Xtra, but it was a fun bit of nostalgia to use again. Old school web designers will fondly remember (or not) that thirteen years ago, loading data into a web page (without a database!) was super cool. At some point, I may swap this out for actual on page data which would be better for performance, accessibility and longevity.

In the meantime though, and without further ado, venture back in time to experience the dawn of personal computing.

Bad Form

September 16, 2011

Bad Form

 

In these heady days of web design and development, with multiple screen sizes, tablets and smarphones, it can be difficult to get proportions and spacing correct. Of course, one would expect a major retailer to have the resources (and care) to get it right. This screenshot was taken on my laptop with a resolution of 1440 x 900 running Firefox 5 on OSX. Nothing too crazy in terms of a web user profile.

Beyond any aesthetic issues with the check box label being too far to the right, the functional issues (or non-functional as the case may be) are what should be of primary concern here. I suspect many users would stumble over connecting these two parts of the form. If it takes folks an extra few seconds to fill out your form, it takes away from the shopping experience and therefore it impacts your brand.

Will it take away from sales? Maybe not initially. I certainly continued with my purchase, but if users are left remembering that the checkout process was annoying, weird, or heaven forbid, difficult, they may be more likely to head to your competitor’s better designed site.

Small improvements can build up to increase satisfaction and in this case, it seems like an important (and easy) fix – especially as this is one of the very last steps in the check out process – right before you click the “purchase” button.

Seems simple enough – in both common sense and in design – but the evidence is clear.

 

 

 

 

You Can’t Go Wrong With Robots – Part One

August 6, 2010

It’s an old motto that, the more information you can give a designer, the better the final design will be. This is especially true in the case of the audience. One of our key audiences, which is near and dear to my heart, is the video game community. I’m of the generation that came of age with the Atari 2600 and hung out in dark arcades dropping quarters, so it’s an audience of which I’m a member. Designing for yourself is always fun and whenever I get a project targeting at gamers I dive right in.

There are a few things that will always peak the interest of a gamer and at the top of my list is robots (others include ninjas and monkeys — both completely viable options). Access Communications hosts an annual party at the gaming industry’s biggest trade show E3 and I was tasked with developing some email invitations for the event. Naturally, I developed, designed and wrote the copy for the invites using a robot theme. The key concept of the 2009 invite was that the event would feature alcohol dispensing robot. After a hard day trudging around the trade show, everyone’s ready for a drink and it seemed natural to combine the two ideas. Of course, the whole idea is meant to be taken as tongue in cheek humor — there would be no actual alcohol dispensing robots at the event (but we can dream). The invite was met with success and even got picked up and posted by the online gamer press which is always a good sign.

When this year’s event rolled around, the team and I brainstormed and narrowed it down to two themes: pirates (another gamer fave) and a continuation of the previous year’s robot concept. The pirate theme centered around a skull and crossbones logo I developed (more on that at another time), but it didn’t have a story behind it. Crafting a compelling story is another key to getting the audience to engage and without a story (or time to develop one), the pirate concept got shelved.

I was also completely intrigued with the idea of continuing the robot story from the previous year. It’s rare that we get the opportunity to tell long arc stories and to continue the conversation with the audience. So many projects are just one time affairs soon to be forgotten. For the follow up invite, I wrote copy that directly referenced the previous year’s invite and moved the story forward. The invite was met with a ton of positive feedback and although it did not get picked up by the gamer press, it had a more substantial impact — Access had to increase the budget for food and booze to accommodate the increase in RSVPs.

Here’s sample screens from the two invites and each links to the full invitation:

2009 E3 Invitation

E3 2009 Invitation

E3 2010 Invitation

E3 2010 Invitation

Here’s a few of the comments the team received on this year’s invitation:

  • “I will try to make it unless the robots get me first”
  • “FINALLY, ROBOTIC BEINGS RULE THE WORLD”
  • “Please RSVP me for this event, even though I will have to order drinks from a filthy human and not from a precision calibrated robot”
  • “It just won’t be the same without the drunk robots, but I’ll still be there!”

Coming in Part Two: What I designed for the events themselves.