15+ Design Tips for Developers When Your Designer Is Not Around

There are times when you have to design something in a hurry – and designers are nowhere to be found. In times like these, we can’t sit and cry – we have to hack design.

Here are some convenient WordPress design tips that will set up any developer for success, even if there’s a pressing deadline in sight.

Choose Your Setup Wisely

If you’re in a rush, find a WordPress theme with a pre-designed layout and demo pages. Use visual builders like Elementor or Beaver Builder to quickly arrange and style the layout and add pre-existing elements. By doing so, you can have a functional site up and running in a matter of hours. Yes, it might look a bit generic if you’re not careful, but it works. Consider adding custom design and animations to make it your own.

Be subtle

This is probably one of the most important tips anyone can give you.

Designers who have the eye for aesthetics and design can go crazy every once in a while. However, if you’re not born with the innate ability to name 6 versions of the color blue, it’s safer to stay subtle. Try minimalist design with a splash of colorful accents and a few subtle animations here or there.

Examples of great minimalist design

For a minimalist style to work, you should put extra effort into details. Luckily for you, the details I’m talking about can be styled using something you’re most familiar with – code.

Don’t use Photoshop or Illustrator if you know you’re not good at it

I’ve been using Photoshop actively for 10+ years and I still barely got a “C” on an Upwork Photoshop test. Imagine my surprise when I found out that I’m actively using only 30% of Photoshop’s functionalities. The same goes for AI. What I want to say is – if you’re good with code and CSS –  use CSS. It will save you a lot of time.

Use apps and tools you’re comfortable with. That will help you design faster and more efficiently. Some people find Canva a really simple and intuitive solution.

Learn Sass or Less

Sass and Less are CSS extension languages. They add extra handy features and functionality to CSS, like variables, functions, nesting, arithmetical operations, and mixins. Check out their official websites for detailed info and documentation.

https://sass-lang.com/

http://lesscss.org/

This isn’t really a thing you will do in a few days, I know, but it’s worth considering for the future. Once you learn one of these language extensions you will drastically improve and fasten your workflow.

Adapt other people’s code to your needs

There are lots of amazing people out there sharing their code for free. If you’re in a time crunch, tweaking an existing design could be the answer to your prayers. My go-to place is Design Patterns on Codepen. You will find pre-coded buttons, accordions, sliders, layouts, and much more.

Use SVG images whenever possible

SVG images are scalable vector graphics. Use them for the logo, icons and other graphic images on your site. They won’t lose quality even when zoomed in.

Beware the full power of SVG:

• SVG images can be created and edited with any text editor
• SVG images can be searched, indexed, scripted, and compressed
• SVG images are scalable
• SVG images can be printed with high quality at any resolution
• SVG images are zoomable
• SVG graphics do NOT lose any quality if they are zoomed or resized
• SVG is an open standard
• SVG files are pure XML

Use Javascript libraries and frameworks

I sincerely hope you’re not one of those WordPress developers still using PHP exclusively. JavaScript is the programming language of this era and for a reason.

Part of the reason JavaScript is so popular is that it has a great number of open source libraries, frameworks, and extensions. Taking advantage of these free resources will make you work faster, better, and more efficiently.

Want to know how to add libraries to WordPress the right way? Luckily, we have just the thing for you – a tutorial on how to enqueue JavaScript in WordPress.

Here is the list of 3rd party JS libraries that are already included in WordPress. You can use them right away without enqueueing.

• Backbone.js
• CodeMirror
• cropper
• jQuery
• jQuery.imageareaselect
• jQuery.Jcrop
• jQueryUI
• swfupload (deprecated)
• ThickBox
• TinyMCE

Pick 2 colors

Pick a primary and a secondary color that go well with each other. Use apps like Material Palette and Color Calculator to help you with this task. Use your primary and secondary colors consistently on all the elements you want to have a splash of color.  For layout backgrounds and text add neutrals to your palette accordingly. Don’t add too many colors into the mix. Keep it minimal.

Pick 2 typefaces

Pick two complimenting font families that you’ll use on your website. Sans-serifs are better for headings and headlines, while serif fonts are better for textual content. I have written more about choosing a typeface pair and a color palette in my previous post.

Pay for a Logo

Sorry to break it to you, but designing a logo isn’t something you should try to do on your own. A logo is the most important visual element of every company. It’s your company’s visual identity and you would want it to be done properly. Refrain from using generic logo creators and pay a designer. Hire a freelancer if you must. If money is the issue, try to find a design student who’s full of fresh ideas but will probably charge considerably less.

Choose good quality stock photos and videos

Your client didn’t provide you with photos for the website? Or maybe they did, but they were out of focus, pixelated and simply beyond horrible, weren’t they?

We’ve all been there. The simplest solution is using high-quality stock images. There are plenty of both free and premium stock libraries to choose from.

My personal favorite is Unsplash for free stock photos and Freepik for all sorts of resources.

The 2 most popular and probably largest free stock photo libraries are https://www.pexels.com/ and https://stocksnap.io/

Many of the stock photos on these sites are being used as demo content in WordPress themes. Avoid using the photos you’ve seen around because your site will look generic. If you’re looking for something specific and less “worn out” I recommend sites like https://www.reshot.com/ which has handpicked non-stocky looking photos. Another option is https://nos.twnsnd.co/ which contains vintage photos from public archives and can be used without any copyright restrictions.

For premium stock photos and videos, your first stops should be: https://www.shutterstock.com/ and https://www.gettyimages.com/

This German site is also worth checking out: https://www.photocase.com

Don’t be cheap when looking for impeccable stocks. If you find a perfect premium stock image or video – pay for it. It will be worth it.

You can use CSS image filters to enhance your stock photos and your WordPress site even more.

Optimize images

Don’t forget to optimize images for the web. When you download a stock photo, scale it down to the size you will be using before uploading it to WordPress. For further smushing and optimization, I recommend the Smush plugin.

If you are using Photoshop or similar tools for touching up photos, make sure you use the Save for web option. Save photos and images with a lot of colors as .jpg files and save graphics in png format. When saving for the web, you have the option to choose the quality of a jpg and png file. There is no real rule to this – use the preview screen and make sure you haven’t completely ruined your image quality before saving it.

Have a clear CTA

Call to actions (CTA) are your way to interact with the user. In a sense, if users click on a CTA, they are fulfilling the purpose of a website.

This is why you have to make sure the CTA buttons are clearly visible, legible and readable. Be consistent with styling your buttons.

Where to put CTA? Marketers have a whole scientific method to it. It clearly depends on your site’s content, my only advice is to make it stand out.

Don’t forget your mobile users. The same CTA rules don’t apply for mobile and desktop. Check out the best practices for Mobile CTA.

Animations are cool when done properly

Creating simple CSS or JavaScript animations can really lift up your design and make it look polished and professional. The secret is, again, to be subtle about it and not overdo it.

Good examples:

https://www.monogranofelicetti.it/en/

https://affinity.pt/en/about/

The “worst thing you could do” example:

https://www.lingscars.com/

Icons – small players with big roles

Icons are an extremely important part of your website, especially if you’ve listened to my advice and went for the minimalist design. Elegant icons can effectively elevate your whole web design.

As a developer, you should be aware that good icons are fairly difficult to create. Don’t even think about doing it from scratch. Find some free icons in icon libraries like https://www.flaticon.com/ or https://icons8.com/

I prefer flaticon because you can find icon packs from the same author. Find one icon pack that matches your logo or website’s style and it will save you a ton of trouble. Never mix icons from different packs – it will just look unprofessional.

For extra style points, consider animating SVG icons. Best way to do so is with Snap, a javascript library created for the purpose of animating SVG graphics. If, for whatever reason, you don’t want to code at all, you can use the SVGator app. It is a paid app with a one-month free trial and it’s worth checking out.

Devil’s in the details:

For a minimalist style to look good, you have to roll up your sleeves and put some extra work into the details that matter. This can all be done using code.

It’s not all black and white

Avoid pure black #000 or pure white #FFF color. They are too harsh for the eye. Use slightly softer variants like #EFEFEF for whites and #181818 instead of black.

Borders are old-school

Try using CSS box-shadow property instead of a border on an element. It will make your design more slick and subtle.

Solid 1px or 2px borders can look cool and retro on some designs. However, don’t ever use dotted or dashed borders, please.

Style your <hr>

Dividers are usually dull elements that can make a real positive impact if you add a little bit of code to them.

Elementor page builder also has a very cool feature for styling dividers.

 

Squares are boring. Don’t be a square.

Irregular shapers draw more attention. Use them in moderation for high hierarchy CTAs or buttons.

Style your hamburger menu

Hamburger menus are a must for mobile devices, but they can also look really cool on wide screens. I have found a slick collection of hamburger menus on CodePen I would like to share with you guys. If you don’t know how to make a hamburger menu, read a tutorial in this article.

Use gradients

Instead of using a single color background, why not give gradients a try?  You can easily create your own gradients with colorzilla gradient editor and simply copy the CSS code into your WordPress site.

Don’t go crazy with the number of colors in a gradient and be careful not to clash the colors completely. If you have trouble with creating your own color combination or you don’t know what works well, you can always choose to use the free pre-made gradients.

Gradients can also be used as an overlay for a background photo, icons, buttons, and other design elements. This is a very neat trick for creating consistency. If you want to overlay a gradient over a background image use &:before property (SASS) to add your gradient and simply lower its opacity to 60 – 70%. Here’s how it looks:

Let’s recap

It’s always better to hire a professional designer, but in times of need, we have to manage!

If you’re in a hurry, choose your setup wisely. Install a fast minimalist theme and import demo content for it. Style the details to make your design look more professional and less generic. Use your strengths (code) as much as possible. Always pick tested color combinations and high-quality images and stock video footage. Remember to use Icon packs by the same author and in the same general style as your website. Pay for a logo. Most importantly, don’t forget to be consistent and subtle with your design.

Happy code-designing!