CrossBrowserTesting.com

A Design, Development, Testing Blog

  • Product Overview
  • Pricing
  • Back Home
  • Free Trial
  • Design
  • Development
  • Manual Testing
  • Test Automation
  • Visual Testing

Designing with Code

June 27, 2019 By Eli Brumley Leave a Comment

guy with classes and sweatshirt on with a computer in the back ground 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.

man looking at apple computer

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.

coffee cup with unicorn on it

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

group of guys looking at a whiteboard with posted notes on it
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:

  • Client/Project Discover Meeting (ask all the things!)
  • Google Analytics
  • MixPanel
  • Social Demographic
  • HotJar, CrazyEgg, etc

hands near a laptop

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. 🎨

land highlighting writing on paper with an iphone on the table

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.

tablet with a Starbucks coffee cup and desktop PC

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

  • Treehouse Tutorials
  • Learn HTML/CSS in 2019
  • CSS on CodeAcademy
  • Digging through CodePen

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.

  • Complete Guide to CSS Grid
  • Scrimba Tutorials

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.

  • A Complete Guide to Flexbox
  • CSS FlexBox Playground

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.

  • Bulma
  • PureCSS
  • Zurb Fondations
  • Bootstrap
guy and woman looking at laptop and PC desktop

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.
Thanks for your time & happy testing!

Twitter: @elibrumley

Filed Under: Design Tagged With: coding, css, desgin, web design, web designer

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Try CrossBrowserTesting

Everything you need for testing on the web. Browsers & Devices included.


  • Grid In The Cloud
  • Simple CI Integrations
  • Native Debugging Tools
  • Real iOS and Android
  • 2050+ Browser/OS Combinations
  • Intuitive REST API

Start Testing Today

Want Testing Tips?

Want the latest tips & strategies from industry experts right to your inbox? Sign up below.
 

Join Over 600,000 Testers & Developers And Start Testing Today

Learn more Free Trial

Features

  • Live Testing
  • Selenium Automation
  • Automated Screenshots
  • Screenshot Comparison
  • Local Testing
  • Real Devices

Solutions

  • Automated Testing
  • Visual Testing
  • Manual Testing
  • Enterprise
  • Internet Explorer

Resources

  • Browsers & Devices
  • Blog
  • Webinars
  • Integrations
  • ROI Calculator

Company

  • About Us
  • Careers
  • Plans
  • Terms of use
  • Security

Support

  • Help Center
  • API Docs
  • Schedule A Demo
  • Contact Us
  • Write For Us