This Will Be Fun

‘This Will Be Fun’ is a website about my approach to web design. Websites should be fun!

I built the site using Hugo and deployed it via Netlify. The visually dynamic aspects of the site are built using vanilla JS and a library called anime.js. In hindsight, I wouldn’t have built this site exaclty the way that I did, but it’s fast and light weight, and a lot of fun. Hugo is soild, but using a framework would have reduced the amount of wierd Javascript hacking I had to do.

Be sure to follow the learn more link too.

Stack: Hugo | Netlify | Anime.js

Euphoria Coffee

Two years ago, the best coffee you could buy in West Union, Iowa was at the Casey’s gas station. It was bad. But then Nick & Jace started Euphoria Coffee. They roast their own beans in the back of the shop, and are already one of the most highly regarded coffee shops in the state.

I built drinkeuphoria.coffee using Gatsby, so it’s a statically generated site built on React, and deployed via Netlify. The site uses Snipcart and Square for e-commerce. The store and blog content are managed using a headless CMS called Sanity.

All the design, illustration, and development was done by me. About the only things I didn’t work on are product descriptions and my JS dependencies. This is the first full-size React app I’ve worked on, and I found React Hooks really suit my programing style.

Stack: React | Gatsby | Snipcart | Sanity | Netlify

This Portfolio Site

It feels a little silly to include a portfolio website within itself, but this website is pretty cool—and it’s totally built from scratch.

The big challenge for portfolio sites is making something that is visually coherent, demonstrates the breadth of your work, and is snappy and fun. It’s especially tricky for me, because I want to feature both my illustration work and web-design. This site is designed around the strengths of vector graphics, so that I can have a really rich site that loads quickly. All the raster images are loaded in using a custom loader that I wrote called Ladder.loader(), so the site loads as quickly as possible, despite having so many large images.

The site is built using Hugo and distributed via Netlify CDN. Virtually all the JavaScript is written from scratch. This isn’t to say that writing your JS from scratch is always a good thing (some of the code running this site should be rewritten in fact), but being able to build your own tools is valuable, because it allows you to think outside of the frameworks and libraries that you’re comfortable with.

Stack: Hugo | Netlify

RoWriter()

RoWriter() is a Javascript utility function that solves a niche problem with standard CSS flex-box. I needed it on a project, so I wrote it and then published it on NPM.

Frankly, the coolest thing about RoWriter is the website I built for it, which uses some animation techniques that I wanted to experiment with. Have a look.

RoWriter() is a simple algorithimic function that takes a list of items and puts them into rows, based on the number of items and the maximum width of the rows. Here’s what I mean: Using CSS flex-box, if you had 13 objects and each row could fit 12 objects, then the css would give you a full row of 12 objects and a second row of 1 object. RoWriter would give you a row of 7 objects and a row of 6 objects, which is more aesthetically balanced.

RoWriter-React is a React component that implements RoWriter() in React.

Stack: React | Gatsby | Netlify

Ladder.loader()

Ladder.loader() is a Javascript utility function that loads images from the server to a browser one at a time, so that the user gets complete images as fast as possible. This portfolio website has a lot of image assets and uses Ladder.loader() to bring them in as seemlessly as possible.

Ladder.loader() is written with ES6 javascript in a functional style. I hadn’t written much funcitonal code until I wrote this, (functional programing is a particular style of programing, just in case in case this isn’t your field) and I found that I really enjoyed it.

I use a lot of open source tools, so it made perfect sense for me to put Ladder.loader() out there as an open source tool.

And of course, I built the very cute Ladder.loader() website too. The site’s code highlighting is achieved using Prism.js.

Stack: Hugo | Netlify | Prism.js

Chess Foundry

If you’re a designer, you’ve heard of a type foundry—it’s a design business that specifically designs fonts. The Chess Foundry is a pet project of mine that is like a type foundry, but instead of fonts, I design digital chess sets for use in online chess. There are a lot of parallels between font design and chess set design—both are meticulously precise, balancing utilitarian and aesthetic goals, striving to look beautiful and new while remaining comfortable and recognizable. My chess sets feel natural to play with after only a handful of matches, while looking beautifully at home in a modern computer’s user interface.

This site is extremely simple—it’s one I built a few years ago. It’s just hardcoded html and css files hosted on a Virtual Private Server I rent via Digital Ocean that runs NGINX. The chess game is powered by chess.js, chessboard.js, and garboChess.js It’s a lot of fun though. The chess engine is extremely beatable, so give it a shot.

Stack: VPS (Digital Ocean) | NGINX | chess.js | chessboard.js | garboChess.js

52 Failures

52 Failures is the product of a project I undertook for 2019. My goal was to publish one poem a week for the entire year, with the goal of becoming more comfortable with taking creative risks in public. It went really well! I succeeded an I am actually really proud of the work I did.

The site itself is a Wordpress site built with a custom theme hosted on my NGINX server. In hindsight, I would have built it much differently, because the poems themselves require some fancy HTML wrapping on a line-by-line basis, because of the why indentation and line wrapping works in poetry. So in practice, every poem I posted I had to pre-process with a ruby script I called poemify, before dropping it into the Wordpress CMS.

This will probably be the last time I use Wordpress for a personal site in the foreseeable future, just because I love the flexibility and efficiency of other deployment techniques.

Stack: VPS (Digital Ocean) | NGINX | Wordpress

BNJMN

BNJMN is my personal site. It’s minimalistic mini-blog and image posting site. It’s the first project I built using a static site generator and it introduced me up to a way of doing web-development that made a lot of sense to me, and got me interested in becoming a more serious developer.

The most interesting thing about the site actually isn’t strictly speaking part of the web stack. I wanted to make the site extremely easy to post to, so using the iOS apps Drafts, Shortcuts, and Workflow, I wrote some scripts that allow me to post images and asides directly from my phone, without having to log into some annoying web-based CMS. Making a site fun and usable for the content creator is just as important as designing the front end of the site.

Stack: Jekyll | Netlify

Crypto & Fintech

The Block

One of the more interesting gigs I’ve had in the last few years is working with a start-up news and analysis site called the Block that reports on the crypto-currency and financial-tech industry. Their audience are serious investors and industry people, so their aim is to be neutral in a hype-filled industry.

I helped the Block by running editorial illustration and defining a visual brand during a period where they were trying to grow quickly and build out a scalable editorial image process.

The work here is just a selection of some of my favorite pieces I did for the Block. Most were for their premium paid feed called Genesis, and where produced with extremely fast turn arounds—roughly 2hrs per illustration.

If you asked me 5 years ago if I thought that there was a future in which I would be doing editorial illustration about crypto-currencies I would have laughed in your face. But weird things happen and you roll with it.

Home Farm Brewing

Good, honest beer

Home Farm Brewing Co is a branding and graphic design exercise that draws on the culture and vocabulary of the upper-midwest American family farm. The simple, bold designs are a nod to the graphic style used in the agricultural industry of the 70s—the peak of the family farm as an American institution.

‘The Home Farm’ is the name that many farmers, including my grandparents, would use to refer to the plot of farmland tied to directly to their homestead.

This isn’t a project that ended up in the real world, but I like it as a portfolio piece, because I think it does a good job of demonstrating how you can create a cohesive brand identity, while having distinct, bold looking packaging designs.

Elkader

Elkader is a tiny town of 1,400 people nestled in a valley on the banks of the Turkey river. The iconic symbols of the town are the twin-arched limestone keystone bridge in the center of town—the oldest of its type west of the Mississippi—and a 19th century opera house recently restored to its full glory. The town is small but plays an outsized role in the culture of the region. It draws in thousands for its annual art festival called “Art in the Park” and has a remarkable relationship with the country of Algeria, because of its namesake—a 19th century Algerian religious and political leader, the Emir Abdelkader.

Not many little Iowa towns have the ambition or diversity of Elkader, so it’s one of my favorite places to spend time in and do work for.

Odds & Ends

So much Fun!

Like any graphic designer/illustrator worth their salt, I have a vast archive of unused or underused logos and graphics. As you can see, I’m a big fan of vector based illustration, especially for the web. The files are smaller, and look fantastic on the high-res screens that we use now. There’s a place for raster graphics for sure, but I think that svgs are the most fun, interesting file format for graphics on the modern web.

Photography

I’m a documentary and environmental photographer, occasionally doing environmental product shots and portraits. Photography is not my area of professional focus, but I’ve enjoyed photography as a hobby since I was very young (I learned on a film camera even!) and it’s an excellent supplemental skill for my work.

I shoot really lean—typically just an old Fuji XT-1 or my Fuji XF10, a few fast prime lenses, and sometimes an off-camera speed-light flash. My niche is being the type of guy who can go in quick and get beautiful, artistic shots without the hassle of setting up a big shoot with a full-time pro photographer.

If you want shots of products on white backgrounds, maybe I’m not your guy, but I’m ok with that.

My Story

There is a myth that creative vision and analytical thinking are oil and water—oppositional modes of thought that do not mix. Creatives dream their dreams, while wonks tinker away at spreadsheets and pivot tables.

Poets do not write python, and coders do not compile wet globs of pigment into paintings.

But that’s not the truth. At least it’s not the truth for me.

The truth is that creativity and technical savvy are inextricably linked, especially in a world where the internet is king.

My name is Benjamin & I live in the rural country-side of northeast Iowa, outside a town called West Union. I mostly work on websites for a living, with an emphasis on front-end design and development.

I am an illustrator, designer, developer, photographer, coder, carpenter, poet, in no particular order. And that doesn’t make me a master of none—it makes me better at each.

Technical Skills

HTML 5 / CSS 3

If it can be done using HTML and CSS, I can do it. I’m primo at this stuff. Mobile-first, flexible layouts.

Most of the HTML/CSS work I do these days takes place in the context of templating systems or frameworks, but that doesn’t diminish their importance as the foundational vocabulary of front-end web design.

Frontend JavaScript

I’m good at javascript, but still growing. Capable of using established libraries and building my own tools. I’ve done my share direct DOM manipulation for simple tasks, but I’ve been focused on using more robust tools like React and Svelte to help make complex apps more maintainable.

My style is frontend heavy, and I like working with REST APIs and query tools like GraphQL.

I stick mostly to ES6 Javascript, but I’m not afraid of jQuery or Typescript or anything.

For context, for a long time I was writing light-weight, spaghetti javascript (using simple libraries and writing basic functions). I didn’t think of myself as coder—I was just a designer—so I just did the bare minimum to achieve functionality.

But then one afternoon, when I was debugging a sloppy mess I had made, I realized I was a coder. I was writing code. And I liked writing code. So why not learn to write good code.

So I decided to expand my front-end development capability and started treating JS and web-development in general more seriously, and since then have turned it into a proficiency.

JAMstack

I’m a big fan of using static site generators to build websites, distributing them using a CDN, rather than running the site on a dedicated server.

I have a lot of experience using Hugo and Jekyll as static site generators. Recently I’ve focused more on tools like Gatsby.js and Sapper that enable you to use more robust front-end frameworks in a serverless context.

I’m a huge fan of using Netlify as a build and content distribution tool.

I use Github to manage codebases—it integrates fantastically with Netlify.

If I need a server-side style work done, I like spinning up AWS Lambda, and using Node.JS to do the job.

There are a bunch of good client facing content managment tools. I’ve worked with Foresty.io and sanity.io.

Traditional Stack

JAMstack is cool, but I like Wordpress too. I’m not a PHP whiz, but I’m a champ at using it for templating Wordpress themes.

I claim no expertise in building out complicated, high-load back-ends, but for small projects, it’s really easy to toss up a virtual private server on Digital Ocean or Linode, install Apache or NGINX, and serve up a Wordpress site from there.

WYSIWYG

Depending on the client, there are times when the best solution is actually a service like Squarespace. It’s limiting in lots of ways as a developer, but if you play by its rules, Sqaurespace can empower clients who need something made quickly that can be modified easily.

Creative Skills

UX/UI/WEB Design

Design is all about having process & vision—it’s about coordinating art, typography, copy, & structure with goals & technical constraints. You can create execution silos for the different disciplines of making a web app, but there needs to be someone there who knows how all of those things interact in a deep way. That’s me.

Ultimately it comes down to caring about what the user cares about, and understanding how to get them to care about what you care about.

I’ve been designing sites for a long time, but have recently put an emphasis on web design as being one of my core skills. I’m tool agnostic, but find myself using Adobe XD & Adobe Illustrator for wire-framing on solo projects. I also like Sketch & figma.

Graphic Design

Graphic Design is hard to wall off, because it’s in a grey area between a lot of skills, but at it’s core Graphic Design is about being able to create and execute visual systems across different media.

If you look through my portfolio you’ll see both consistency and diversity. Distinctive work that pulls in the same direction. This is what you want a visual system to do.

I’m an Adobe guy, so my design workflow revolves around Adobe Illustrator, Adobe Photoshop, & Adobe Indesign.

Digital Illustration

My style as an illustrator is high-contrast, shape-driven illustration. Good colors are the key to impactful, efficient art.

I’ve specifically developed my illustration skills to ingrate with my design goals. I tend to start with vector files, and layer in textures only when I actually want to go bitmap. Layers of flexibility.

The most valuable currency for an illustrator is time, and I have experience doing shippable quality illustration for the web with very quick turn around. If you check out the crypto illustrations i did for the Block, most were produced in 2-4hrs.

Photography

I’m a good documentary and environmental product photographer. I shoot really lean—typically just an old Fuji XT-1, a few fast prime lenses, and sometimes an off-camera speed-light flash.

I consider my photography abilities to be a bonus skill.

My niche is being the type of guy who can go in quick and get some good shots without the hassle of setting up a big shoot with a full-time pro photographer.

I also take beautiful pictures of my cats, which, as you well know, is a fundamental internet skill.

Copywriting

Good copy is a vital part of any design.

People get bored easily. They don’t like reading.

So you have to trick them into reading. It’s not easy.

You do this by keeping it simple.

Once you’ve earned their attention, you can start adding in a few subtleties and flourishes, but not until you’ve earned it.

I spend most of my time on design and illustration these days, but I went to school for copywriting, and have leaned on it ever since..

Web-based Animation

Animation on the web has a lot of technical constraints. So it’s really important to embrace those limitations.

Animation is a time sponge—you can always spend more time on an animation to make it better, but you can achieve really cool effects, with relatively simple animations. As a designer, it’s important to know how to use animation in strategic, effective ways.

If you want a delightful demonstration of my web animation chops, check out my site for RoWiter.dev and This Will Be Fun.