The Free 4-Minute Tutorial Will Quickly (Re)Train You on Good Design
Designers starting out are advised to train their eye. They’re encouraged to search and compile what they think is aesthetically pleasing and observe sites that provide a quality experience. Unfortunately, even after compiling a lot of content and perhaps several boards on Pinterest, it is still difficult to understand what makes up “good” design.
Enter Web Design in 4 Minutes.
In this free four-minute tutorial, front end designer Jeremy Thomas gives designers and non-designers alike a breakdown on basic rules and tips you can apply when building your website. Rules such as: You should avoid black text on white backgrounds because that color combination can be harsh on the eyes. And tips such as providing enough space around content can increase the aesthetic appeal of your page. So simple, yet so true.
His tutorial provides basic CSS for making impactful changes to your site and ultimately showcasing what is most important—your actual content. He starts with a page with almost no stylistic formatting and then improves it step-by-step. Through a few lines of CSS, such as centering content and importing custom fonts, he demonstrate the mark of good design. And, as a bonus, Thomas provides further in-depth knowledge of making Photoshop design files into a reality with his free HTML and CSS tutorial.
When my design instructors first provided me these basic rules and tips, I felt limited by them. I thought these guidelines would keep me from designing a unique site and experience. However, after creating a couple poorly designed sites, I realized that you need these rules in your toolkit because users, perhaps unknowingly, come to sites expecting them to be followed.
For example, as Thomas also states in his tutorial, a page can seem “broken” to users if there’s not sufficient and equal spacing around content—not surprisingly, a “broken” design can prevent users engaging with your content.
In addition, after beginning my career, I also realized that these tools do not eliminate originality. Instead, they provide a foundation for which you can customize and make unique with custom layout, custom fonts, images, and a color palette.
LOVE THIS TUTORIAL SO MUCH THAT YOU WANT A NEW JOB IN DESIGN
Lucky for you, we have tons of awesome openings at amazing companies
Even if you’re not a designer, and you’re still reading this, you should know that this tutorial is also helpful to anyone looking to develop his or her design eye. Within four minutes, you can build the foundation for a simple well-designed site without needing to create a PSD file first or beg your designer friend for input.
So, why not give it a try? Worst-case scenario is that you lose four minutes. You’ve probably already given that amount of time to scrolling through Instagram, starting a pop culture conversation with your desk neighbor, or internally debating what you’re going to eat for dinner tonight.
Photo of person at computer courtesy of Tom Merton/Shutterstock.
Neely is a Front End Engineer at The Muse. She loves being inspired by great design, code, and movies. If she’s not developing or designing, she’s dancing, binge watching shows years after everyone else has watched them, or exploring the Big Apple one comedy show at a time.More from this Author