Eli Brumley

Designing with Code

The days of complex CSS hacks and legacy dependencies just to get a simple website to look good are gone. There’s a continued conversation around the friction of Designers Learning Code and Developers Learning Design. My hope with this blog is that I can introduce you to some very simple concepts and techniques that make it super easy for any designer to understand the importance of learning some modern CSS. So the next time you’re faced with speaking “dev lingo” with your fellow coworkers, you’ll have some tricks up your sleeve.

The Old Way and New Way

Before this huge wave of new/frequent browser releases, the internet was stitched together with legacy coding techniques like: HTML Tables, Image Maps, Floating Elements, Fixed Width’s, and other odd growing pains that we all have encountered.

The Traditional Design Tools

As Designers are becoming more utilized in the web space, software companies like Adobe have crafted beautiful tools for any entry-level designer to pick up. These tools range from doing basic tasks such as wireframes to sophisticated tooling for creating high-fidelity mocks and basic prototypes. Tools like Adobe Dreamweaver attempt to bridge the gap between design input tooling and sophisticated code output. The problem constantly faced is the lack of knowledge on both sides, Design and Dev. It’s not easy for a developer to just pick up code output from these tools and seamlessly integrate with their current stack.

As a Digital Designer, it has made my life much easier to understand the root fundamentals of HTML and CSS. It levels the playing field of respect when a developer feels that their designer knows these base web languages. It also gives the designer much more appreciation for the complex issues that a developer faces on a daily basis. Big picture, the tools and knowledge base is what holds back Digital/Web Designers from becoming a better UX/Interactive Designers. It’s difficult to represent the UX from the UI when the “Experience and Interactions” are presented as flat mocks.

You need to understand the possibilities and constraints of your medium in order to do the best design work that technology can allow for. There’s no better way to gain this understanding than knowing how to build your own designs.

- Ben Lisefski

The benefit of having designers who know basic web development is how frictionless it makes the process from the beginning stages of a design to the finalizing of the web project. Plus we all dream of being “Design Unicorns”, right.. ? ** ☕ helps too.

So let’s dive in and take these simple steps to accomplishing great design through code.

A typical project process breakdown:

1. Info architecture 📝

2. Sketch and Wireframes ✍️

3. UI design 🎨

4. UX design 💡

5. Front-end code 🔮

6. Back-end development 🖥️

I think step 3, 4 & 5 can be meshed into one fluid step. A design project should always start with defining the problems & gather as much data as possible to construct the best designed solution.

1. Info architecture

Here are a few resources to gather some of that useful data:

2. Sketch & Wireframes

Best simply using Pencil & Paper or whiteboard

This phase should be freeform & allow you to rapidly produce a basic idea/concept with little to no commitment. Mix it up & have fun with colored pencils. 🎨

3. Combining UI/UX/Front-End Development

This is not a one trick pony. Learning a few languages & the fluidly implementing into your workflow can take months. Again, take baby steps.

Here is a list of resources that has greatly helped me over the years:

A few examples of Modern CSS properties that are changing the game:

CSS Grid

CSS Grid is one of the newest additions to W3 standards. It’s becoming the best way to create dynamic & flexible layouts across devices, with ease. Learn more about CSS Grid & how it can help you quickly structure your next website project.

CSS Flexbox

CSS Flexbox Module is revamping how designers/developers build out smart responsive components into their websites & web-apps. The root functionality is “flexible” to any screen size & device contents. Here are some resources to getting started with Flexbox.

Piggyback off a lightweight framework

CSS & JS Frameworks are great jumping off points when starting a large web project. They serve well as base components styles & functionality that most websites & web-apps utilize. Grab one of these well-known frameworks & modify them to fit your web needs & style.

There is so much value in Designers diving in & understanding the utilitarian aspect of what they are designing for. I hope more designers are inspired to learn more Front-end tools & create a more fluid working relationship with their development team.

Once you start diving into these amazing languages, through design thinking, please utilize CrossBrowserTesting Free Trial to test your new creation across various platforms & devices. If you found this article helpful or inspiring, please drop us a chat.

We love hearing from Designers & Developers, Tweet me

Thanks for your time & happy testing!