Using OUTLINES for Responsive Web Design

Every day as a Web Designer the conversation is ever shifting, we’ve gone from just knowing how to build WEBSITES, to knowing how to build RESPONSIVE websites. and everyday new frameworks are coming out, new ways to experiment with the old features to help achieve this one ubiquitous goal and achieve this is the shortest time possible.

Early this year, while working on a company's website, I discovered a strategy to help with this discussion.

I was to build and manage their website and toward the end its complexity was getting a bit suffocating. So I took a few elements that I had used flex box on, and used borders on them and not only did it help me notice the root of my mistake, a mistake that and I do not exaggerate when I say could have made me agitated for up to 20minutes, it helped me see breakpoints in my design, that I didn’t think were even there. so I started applying it to many things and it made me see web design in a whole different light. An example is the first image in this article, and this.

As an illustrator and designer I've noticed one of the things we use is grid lines or wireframes, and this helps us build really good looking projects, right? so why not bring that into web design.

Outlines serve as light in a dark forest of broken designs, it gives an refined look at the structure of things responsible for the look and feel of design, responsible for Responsive Design.