DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Tomorrow’s Cloud Today: Unpacking the Future of Cloud Computing
  • What Is React? A Complete Guide
  • Revolutionizing Algorithmic Trading: The Power of Reinforcement Learning
  • Operator Overloading in Java

Trending

  • Tomorrow’s Cloud Today: Unpacking the Future of Cloud Computing
  • What Is React? A Complete Guide
  • Revolutionizing Algorithmic Trading: The Power of Reinforcement Learning
  • Operator Overloading in Java

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.

Sam Atkinson user avatar by
Sam Atkinson
·
Apr. 22, 16 · Analysis
Like (18)
Save
Tweet
Share
15.51K Views

Join the DZone community and get the full member experience.

Join For Free

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?

Design

Opinions expressed by DZone contributors are their own.

Trending

  • Tomorrow’s Cloud Today: Unpacking the Future of Cloud Computing
  • What Is React? A Complete Guide
  • Revolutionizing Algorithmic Trading: The Power of Reinforcement Learning
  • Operator Overloading in Java

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: