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.
Join the DZone community and get the full member experience.
Join For FreeSo 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?
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!
Play 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.
Let 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.
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?
Opinions expressed by DZone contributors are their own.
Comments