Hack Design – 15+ Concrete Tips That Will Actually Help You
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.
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.
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
Here is the list of 3rd party JS libraries that are already included in WordPress. You can use them right away without enqueueing.
- swfupload (deprecated)
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.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox – free!
You can use CSS image filters to enhance your stock photos and your WordPress site even more.
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
The “worst thing you could do” example:
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.
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.
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:
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.