Web Design Basics For Non-Designers
As a software engineering student who just completed their first full stack application, I can honestly say that what intimidates me most about full stack development is the CSS. That’s right, I regularly risk life and limb to climb actual frozen water (that photo is me!), but I get the cold sweats over the box model, color theory, and font selection. When my friends ask me what kind of job I think I’ll end up in, I usually say something along the lines of, “Probably a back end developer because I’d rather make something work than make it pretty.” While I know I don’t want ever want to be a UI or UX designer, I’d also rather the projects in my portfolio don’t look like total shit.
So, I started to do some research to familiarize myself with the basics of design. Patrick McClary gives a wonderful introduction to design for web development students. Turns out, design isn’t just about making things look good, it’s also about problem solving. Designers have to get to know user groups and the problems they face. Then, they coordinate with developers to build the solutions. Both designer and developer must understand time and budge requirements, feasibility of what they’re building, and the level of effort it’s going to take to build the thing.
“If you have too much awesome at the same time, nothing’s awesome.” -Kyle Coberly
Kyle Coberly does a great introduction to basic design principles for junior devs. In his overview, the trifecta of visual design is typeface, color, and layout.
TYPEFACE
Don’t be basic- change you typeface! One of the easiest ways to style your website is to simply change the typeface from the browser default. Google Fonts is a great resource for selecting a new font. Pro tip- when searching, under the font properties drop down, push the number of styles up. Well designed typefaces tend to have a larger variety of styles. This helps limit the number of options to look through.
COLOR
One of the biggest mistakes new developers make is trying to use TOO MANY COLORS! Pick one, MAYBE two colors to feature on your sight. You can use darker and lighter shades of that color or grayscale. You can use different shades of your color to highlight things without changing the text size. Before selecting colors, familiarize yourself with the color theory. Colors have vibes, so make sure you pick accordingly. Be sure to keep in mind that different colors have different meanings internationally and in different cultures.
LAYOUT
To give your web applications a modern feel, be sure to give things the breathing room they deserve by utilizing whitespace. Spacing can help define how things relate to each other (again, without having to change the size of your text!). Don’t center everything, and when in doubt, left-align. Finally, take (or leave) the border off of things (like text inputs). It’s heavy handed and if your user can’t naturally see the boundaries on your page, you need to go back to the drawing board, rather than boxing everything in a big, bold border to create separation.
Other tools I’ve found useful on my journey:
Flexbox Cheatsheet: An easy styling trick (especially when there are cards of some kind involved). Familiarize yourself with at least the basics of what’s possible with Flexbox.
Scale: A tool that generates color scales.
CSS-Tricks: Daily articles about all things related to web design and development, including snippets of code for developers.
Meet The Ipsums: Fun random text from different themes (like Space!) to use as a placeholder to your website instead of the traditional lipsum ipsum. Helpful for testing out your new fonts before your content is developed.
Look around for sites that you really like. Use inspect and dev tools to look at the CSS they use. Mimic the layout or color palette on your next project. A lot of great CSS tricks have already been built out. For example, my partner and I used an awesome gradient background animation on our project to add some sparkle. Amazingly, pretty looking things have already been created, and are available for you to readily apply to your code.
Finally, practice. Practice. Practice. Practice. Web design isn’t a creativity contest, it’s a skill, just as like any other part of coding. As our instructors regularly tell us, you’ve got to write shitty code before you can write good code. You’ve also got to design some hideous projects before you design the beautiful ones. So grab your ice tools, er, stylesheets and get after it!
