Smoke & Mirrors — The Importance of Thoughtful Web Design

Kandace O'Brien
Sep 4, 2018 · 4 min read
Let’s design!

When I decided to take the leap into becoming a front-end web developer, I was excited at the prospect of brainstorming designs and having the skills to execute these creative ideas. I remember learning about typography during one of my first lessons in web development. I browsed the Google Fonts site for what seemed like forever thinking about the limitless possibilities of what I could dream up and, eventually, code myself.

Flash forward to one of my first projects where I was responsible for designing and building my own personal webpage. No template required — anything I wanted to do was technically possible. Amazing! Or … wait. Okay, so no direction at all? No design to use as a guide? No Photoshop Document (PSD) to convert into HTML & CSS using my newly acquired coding skills and problem solving techniques? I stared at a blank webpage trying to think of a colour scheme, some font-pairings, and a wire-frame layout for my site but my limited (almost non-existent) experience with graphic design was halting my progress. The story ends anti-climatically with a personal website that was neither awful nor amazing. It did, however, also end with me developing a slight feeling of intimidation about web and graphic design.

Flash forward once more (flash, flash forward?) to the design lesson my web development bootcamp classmates and I were given by Melissa Carter — HackerYou’s resident designer. Melissa broke down the basic design principles and rules that we should all follow when making choices for our projects — both professional and personal. We were given so much helpful information that I will now always consider when working on a web development project.

These are the three big picture messages that I took away from Melissa’s lesson.

1. Less is more.

This might seem like an obvious one, but it really is so important. I am sure that a lot of us can remember when we first started using Microsoft PowerPoint. There were a ton of animations and WordArt options for us to choose from, how could we settle on just one or two? Personally, I loved animating my elements using some “random bars” or a handy “swivel” entrance and I was definitely no stranger to the WordArt gallery, that’s for sure.

A walk down memory lane.

What I learned from Melissa was that as web developers, we don’t want to overwhelm our users with too much happening visually. We need to keep white-space (the space around the elements on a page) in mind. The consistent use of strategically placed padding and margin between our elements provide a better experience for the page’s viewer.

It can also be very tempting to use a vast mix of bright colours, which can be aesthetically pleasing with the right knowledge and a thoughtful design, but it is totally fine (and encouraged!) to use white and black (or light/dark variations of these shades) with even just one highlight or accent colour to capture our viewers’ attention. Most often, websites use font-pairings that compliment each other and communicate different things. A limited use of purposeful fonts and colours throughout a website are design essentials!

2. Consistency is key.

The idea of consistency was continually referenced during Melissa’s lesson. As was previously mentioned above, fonts and colours should stay consistent throughout the entirety of a website. Consistent styling, placement of accent colours and use of fonts for specific purposes work together to deliver a well thought-out design. It is also essential to remain consistent with icons and images used in the design of your website. There should be a common style or treatment to both icons and images that will provide a sense of cohesion to the page.

Another area where being consistent is crucial is in the arrangement of the elements on the page. A clear and obvious grid system should be used in the layout of the page elements to keep the alignment intentional. Consistency in layout, colours, fonts, and overall design will give your website a professional and thoughtful look.

3. Rules are (sometimes) meant to be broken.

One of the biggest take-away messages from the lesson was to have fun with design when building a website. You should feel confident with what you are producing and hopefully your designs can reflect your personality and style. Once you have gained a sense of confidence with design it is fine to break some of the design principles, too! Breaking the rules, though, still requires thoughtful design decisions and detail-oriented design process. I don’t know if I am ready to break too many of these design rules just yet, but I now realize that we shouldn’t let design, or anything we aren’t experienced with for that matter, discourage or intimidate us.

So, short story long, I am now no longer intimidated by design. I am not afraid to use some basic principles of design to create and build a website. I am slightly afraid that my websites will not turn out the way I had planned but I won’t let that hold me back. This is not to say I am an expert in web design, because I most definitely am not, but I feel like I have a solid foundation to build from and am excited about what I can build and produce for my upcoming projects. I hope that you can use these three design principles in building your next project.

Check out Melissa’s website and blog for some major design inspiration : https://www.melissacarterdesign.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade