Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Design Cheats for Developers

DZone's Guide to

Design Cheats for Developers

Programmers generally suck at design, hence the proliferation of terrible websites and user interfaces. In this article, we offer some shortcuts and tools for the design-challenged.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

So I’ll admit it, design isn’t my strong suit. I’m really good at usability but I’ve never excelled with the "make stuff pretty" part.  Over the years, I’ve picked up a few tips and tricks that have allowed me to effectively hack my way around my inability to make my sites look awesome. So if you want to make your site look more Google Now and less Geocities, here’s my top resources and tips.

1. Fonts!

It sounds so obvious, but having really nice typography can make all the difference to peoples' impressions of your site. The awwwards site has pages and pages dedicated to sites with amazing typography. But, how do you choose fonts that go well together? If you want a shortcut, I recommend this post on 10 great web font combinations. If you’re willing to go really deep in the rabbit hole, try out this tuts + intro to fonts but be warned, it goes into a lot of detail.

But where/how do you get fonts? My default go-to is Google Fonts. Browse through the available fonts at leisure and add fonts to your "collection", then hit "use" when you’re ready to go. Google gives you the code to copy and paste straight into your website, no hassle. This is a really easy way to get high impact results on your site.

Font Squirrel has a whole bunch of free fonts too, and I tend to prefer it to Google Fonts in terms of content. However, it’s a bit more hassle to get them since you must upload the fonts to your site as they aren’t made available from the Font Squirrel hosting.

2. Brilliant Iconography

Ever go to a landing page and see the really cool icons above the feature boxes?Image title

Use web icons to make your site look professional. Chances are they’re from  Font Awesome. I can’t begin to tell you how much I love Font Awesome. They’ve created scalable icons for  almost anything (from social sites to paper aeroplanes to video cameras) and they’re adding new ones all the time.  You can use these completely free and installation is just copy and paste 1 line of CSS (the website guides you through the process, too). You can use these anywhere on your site to great effect.

3. Match Your Colors

Colors are hard. I sucked at art (still do).  So, how do you choose what colors to use? What works well together? What doesn’t? Fortunately for me, Paletton exists. You can mull around till you find a color you like, and then it will give you a complete color scheme for your site based off of this. It will even give you a preview so you can see whether you like it!

Image titlePlay around with colors and their compliments to get your site theme. I honestly couldn’t survive without this site (and neither could my readers' eyes).

4. Templates

Yes, it’s cheating, but there’s a whole lot of people out there who spend their lives making amazing designs. It makes a lot more sense to pay them $5 to download one or use a free one.  I cover this extensively in the "Build the complete business/startup website" course as the site is built from a free bootstrap template at . If you’re happy to pay out then check out Wrap Bootstrap where the themes start from $5 (and go up to a lot more). Even better, if you get good at this stuff you can submit your themes to Wrap Bootstrap and sell them! I’ve got two themes (Summering and Sparky) awaiting approval as we speak.

Image titleLet someone else do all the hard work and just get a theme

5. PowerPoint

"Er, what?" I hear you say. PowerPoint is a godsend for the creation of logos and banners. I spent years using Gimp to build logos and images up. It took ages and was really painful to do, and the result just never matched what I was aiming for. When talking to John Colley of the online learning podcast, he was critiquing the logo I was using for my course at the time (which was horrid); he said to try putting something together in PowerPoint. This is probably the best piece of advice I’ve ever received. It’s a tool that’s been built to be brilliant at image and shape manipulation, and you can save those shapes directly to pictures.  I’m now putting all my imagery together this way and I can’t recommend it enough.

Busted! This is how I put my youtube subscribe button together.
Busted! This is how I put my youtube subscribe button together.

6. Creative Commons Pictures

Pictures make websites, there’s no two ways about it. But, how do you find free pictures that you can use on your website? The answer is creative commons.

Essentially, a lot of people are happy for you to use/remix/make money from their content. There’s a variety of licenses (which you can read about in excruciating detail here), but if you stick to pictures that only require attribution then you should be fine.  The easiest way to find high-quality pictures I find is using Flickr creative commons search, but the creative commons website has it’s own CCsearch; it’s not as good at surfacing the quality pictures as Flickr, but it has more sources, and more material including audio and video. 

What hacks do you have to make your life easier in designing a really good looking website?

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
web design ,tools

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}