Hi, I’m Benjamin

My philosophy of web design is simple. Websites should be fun.

Obviously websites should be functional and easy to use.

That’s first. But that’s boring. You can do better.

Make them fun too!

That doesn’t mean they need to be extravagant or technically sophisticated. But they should have a sense of play and excitement built in from the very start.

This means different things in different contexts, and doesn’t apply to the same degree in every situation.

But any time one of your goals is get people excited about you, it’s important that you communicate that you are excited to be you.

You do this by having fun.

Ummm…what even does that mean?

Fun! Just make your site fun. There’s no formula.

But ok, yes. I can see how that’s unhelpful.

Here’s what fun might look like:

Sometimes it might mean investing in beautiful illustration or photography and letting it shine.

Sometimes it might mean building in special interactions and animations.

Sometimes it might not even be part of the web design itself. If the site is built around recurring content (say…a blog) that content can be the source of fun.

But your site can’t just be fun. It needs to be fast too.

This entire website is 219kb. That’s very small.

That’s kilobytes. The one that’s smaller than megabytes.

This entire website is smaller than most banner images.

But wait…does that include all the fun images and animations?

Yes. Those too.

Being fun doesn’t mean building a bulky, boorish website that might be fun if you have a perfect connection.

Guess what. No one has a perfect conection.

One thing that is not fun is waiting for a site to load.

Full-Stack, except different

‘Full-stack’ is a term from the development world for a developer who is skilled at every level of development.

I’m not a full-stack developer. But I like to think of myself, humbly, as a full-stack creative.

Being full-stack is useful in a development context, but it’s even more useful in a creative context.

To create a smooth, cohesive experience that is fast and fun, a project needs to have a vision that holds it all together.

I’ve invested a lot of time developing expertise in the breadth of creative and technical disciplines that go into creating a cohesive online experience.

That means UI/UX design, graphic design, illustration, photography, animation, copywriting, and front-end development.

Being able harmonize those skills enables me to create compelling, fun work without having to rely on a modular team of specialists, and it unlocks really cool things.

That’s really abstract, though. Let me tell you about something more specific.

Take, for instance, the humble SVG…

Oh. You might not know what an SVG is. They’re one of the coolest, under-sung tools of the web.

An SVG is a type of image format that contains instructions for your computer to draw lines and shapes.

Most images you see online aren’t like this. They’re made of pixel data.

SVGs are awesome, because they are are incredibly small, infinitely resizable, and can be manipulated in real-time using css and javascript.

They take up virtually no space and you can animate them.

The possibility of the SVG isn’t obvious unless you have both the artistic eye of an illustrator and the technical know-how of a frontend dev.

But if you’re looking at creative and development as being connected, the technical attributes of the SVG file-type let you do stuff that’s hard to replicate without making your site huge.

Being a full-stack creative is about harmonizing creative vision with technical constraint. Hence, beautiful and perfoment websites.

Pretty cool, huh

Yeah, ok. This is nerdy. But making cool websites is nerdy.

I’m not talking about SVGs because I want to give a TED talk on SVGs (which to be fair…I do want to do that). It’s just one example of how technical skill and creative vision can tie together.

The truth is most of my sites are not 219kb or even close. This site is overkill. It’s a demo site.

But I think it’s cool how slim you can make a site if you want.

There are lots of other ways to harmonize technical knowledge with creative vision. But one example is enough. I don’t want to bore you.

Let’s make something

So it all comes down to this–let’s make something. If you want a website that feels fresh and fun and fast, I can help.

Benjamin J. Friedrich

benjamin@FriedrichDesign.co
c. 515.441.3472

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.

Examples

Almost every line of code on this site is me, but here are a few other sites I’ve worked on that are cool. I’ve been pivoting back to web-design recently, so I’m rebuilding my professional portfio from scratch:

Euphoria Coffee: A Gatsby/React site with a snipcart powered online store.

My Portfolio: My portfolio of graphics, web-work, and photography.

BNJMN: My personal site.

Creative Skills

Graphic Design

Graphic Design is funny, because it’s not a very concrete discipline. You can be a fantastic designer and have relatively little technical “artistic” skill, because it’s about coordinating art, typography, and copy with your communication goals. But none-the-less it is hard to disentangle a designer’s skill as a designer from their skill as an artist.

Fortunately, I think of myself as being pretty good at both. If you want a taste, check out my Portfolizine. It’s cooler in person, but the online version is fun too.

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

UI/UX Design

UI/UX design is about creating natural, beautiful interactions. I don’t focus on complicated framework-driven web-apps, so my goal is usually to make the “interface” for a website as invisible as possible. I categorize this as a creative discipline, but having an extensive technical knowledge base is really important in designing interfaces that work for both the developer and the user.

A good example of a UI that I designed is the online store for my favorite coffee shop, Euphoria Coffee in West Union, IA.

Digital Illustration

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

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

I’ve done a wide variety of illustration over the years, and was even the in-house illustrator for a crypto/fin-tech news website called ‘the Block’ for a while.

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’m a champ of taking advantage of that blurry background bokeh effect that everyone loves.

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.

There are definitely things a full-time pro photographer is better set up for than I am, but a lot of times you just need something that looks good and won’t blow your budget.

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 illustration and design these days, but I went to school for copywriting, and have leaned on it ever since. It’s a skill that I use every day.

Web-based Animation

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

But you can achieve really cool effects, with relatively simple animations.

The landing page for this website is a bit overkill, but you can see how they can make your experience on the web more engaging.