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.<\/p>\n
Here are some convenient WordPress\u00a0design tips that will set up any developer for success, even if there’s a pressing deadline in sight.<\/p>\n
If you’re in a rush, find a WordPress\u00a0theme<\/a> with a pre-designed layout and demo pages. Use visual builders like Elementor<\/a> or Beaver Builder<\/a> 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.<\/p>\n This is probably one of the most important tips anyone can give you.<\/p>\n Designers who\u00a0have the eye for aesthetics and design can go crazy every once in a while. However, if you\u2019re not born with the innate ability to name 6 versions of the color blue, it\u2019s safer to stay subtle. Try minimalist design<\/strong> with a splash of colorful accents and a few subtle animations here or there.<\/p>\n Examples of great minimalist design<\/a><\/p>\n For a minimalist style to work, you should put extra effort into\u00a0details<\/a>. Luckily for you, the details I’m talking about can be styled using something you’re most familiar with \u2013 code.<\/p>\n I\u2019ve been using Photoshop actively for 10+ years and I still barely got a \u201cC\u201d on an Upwork Photoshop test. Imagine my surprise when I found out that I\u2019m actively using only 30% of Photoshop\u2019s functionalities. The same goes for AI. What I want to say is – if you\u2019re good with code and CSS \u2013 \u00a0use CSS. It will save you a lot of time.<\/p>\n Use apps and tools you’re comfortable with. That will help you design faster and more efficiently. Some people find Canva<\/a> a really simple and intuitive solution.<\/p>\n 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.<\/p>\n https:\/\/sass-lang.com\/<\/a><\/p>\n http:\/\/lesscss.org\/<\/a><\/p>\n 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.<\/p>\n 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<\/a> on Codepen. You will find pre-coded buttons, accordions, sliders, layouts, and much more.<\/p>\n 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.<\/p>\n Beware the full power of SVG:<\/p>\n 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.<\/p>\n Part of the reason JavaScript is so popular is that it has a great number of open source libraries, frameworks,\u00a0and extensions<\/a>. Taking advantage of these free resources will make you work faster, better, and more efficiently.<\/p>\n Want to know how to add libraries to WordPress the right way? Luckily, we have just the thing for you – a tutorial\u00a0on how to enqueue JavaScript in WordPress.<\/a><\/p>\n Here is the list of 3rd party JS libraries that are already included in WordPress. You can use them right away without enqueueing.<\/p>\n Pick a primary and a secondary color that go well with each other. Use apps like Material Palette<\/a> and Color Calculator<\/a> 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.\u00a0 For layout backgrounds and text\u00a0add neutrals to your palette accordingly. Don’t add too many colors into the mix. Keep it minimal.<\/p>\n 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<\/a>.<\/p>\n 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.<\/p>\n 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?<\/p>\n 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.<\/p>\n My personal favorite\u00a0is Unsplash<\/a> for free stock photos and Freepik<\/a> for all sorts of resources.<\/p>\n The 2 most popular and probably largest free stock photo libraries are https:\/\/www.pexels.com\/<\/a> and https:\/\/stocksnap.io\/<\/a><\/p>\n 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\/<\/a> which has handpicked non-stocky looking photos. Another option is https:\/\/nos.twnsnd.co\/<\/a>\u00a0which contains vintage photos from public archives and can be used without any copyright restrictions.<\/p>\n For premium stock photos and videos, your first stops should be:\u00a0https:\/\/www.shutterstock.com\/<\/a>\u00a0and https:\/\/www.gettyimages.com\/<\/a><\/p>\n This German site is also worth checking out:\u00a0https:\/\/www.photocase.com<\/a><\/p>\n Don’t be cheap when looking for impeccable stocks. If you find a perfect premium stock image or video \u2013 pay for it. It will be worth it.<\/p>\n You can use CSS image filters<\/a> to enhance your stock photos and your WordPress site even more.<\/p>\n 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\u00a0Smush<\/a> plugin.<\/p>\n If you are using Photoshop or similar tools for touching up photos, make sure you\u00a0use the\u00a0Save for web<\/em> option. Save photos and images with a lot of colors as .jpg files and save graphics in png format. When saving for the\u00a0web, 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.<\/p>\n 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.<\/p>\n This is why you have to make sure the CTA buttons are clearly visible, legible and readable. Be consistent with styling your buttons<\/a>.<\/p>\n Where to put CTA? Marketers have a whole\u00a0scientific method<\/a> to it. It clearly depends on your site’s content, my only advice is to make it stand out.<\/p>\n 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<\/a>.<\/p>\n 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.<\/p>\n Good examples:<\/p>\n https:\/\/www.monogranofelicetti.it\/en\/<\/a><\/p>\n https:\/\/affinity.pt\/en\/about\/<\/a><\/p>\n The “worst thing you could do” example:<\/p>\n https:\/\/www.lingscars.com\/<\/a><\/p>\n 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.<\/p>\n 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\/<\/a> or\u00a0https:\/\/icons8.com\/<\/a><\/p>\n 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.<\/p>\n For extra style points, consider animating SVG icons. Best way to do so is with\u00a0Snap<\/a>, a javascript library created for the purpose of animating SVG graphics. If,\u00a0for whatever reason, you don’t want to code at all, you can use the\u00a0SVGator<\/a> app. It is a paid app with a one-month free trial and it’s worth checking out.<\/p>\n 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.<\/p>\n 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.<\/p>\n Try using CSS box-shadow property<\/a> instead of a border on an element. It will make your design more slick and subtle.<\/p>\n See the pen here.<\/a><\/p>\n Solid 1px or 2px borders can look cool and retro on some designs. However, don’t ever use dotted or dashed borders, please.<\/p>\n Dividers are usually dull elements that can make a real positive impact if you add a little bit of code to them.<\/p>\n Elementor page builder also has a very cool feature for styling dividers.<\/p>\n See the pen here.<\/a><\/p>\n Irregular shapers draw more attention. Use them in moderation for high hierarchy CTAs or buttons.<\/p>\n See the pen here.<\/a><\/p>\n 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<\/a>.<\/p>\n See the pen here.<\/a><\/p>\n Instead of using a single color background, why not give gradients a try?\u00a0 You can easily create your own gradients with colorzilla gradient editor<\/a>\u00a0and simply copy the CSS code into your WordPress site.<\/p>\n 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<\/a>.<\/p>\n 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:<\/p>\nBe subtle<\/h2>\n
Don\u2019t use Photoshop or Illustrator if you know you\u2019re not good at it<\/strong><\/h2>\n
Learn Sass or Less<\/strong><\/h2>\n
Adapt other people’s code to your needs<\/h2>\n
Use SVG images whenever possible<\/strong><\/h2>\n
\n
Use Javascript libraries and frameworks<\/h2>\n
\n
Pick 2 colors<\/h2>\n
Pick 2 typefaces<\/h2>\n
Pay for a Logo<\/h2>\n
Choose good quality stock photos and videos<\/strong><\/h2>\n
Optimize images<\/h3>\n
Have a clear CTA<\/strong><\/h2>\n
Animations are cool when done properly<\/strong><\/h2>\n
Icons – small players with big roles<\/strong><\/h2>\n
Devil’s in the details:<\/h2>\n
It’s not all black and white<\/h3>\n
Borders are old-school<\/h3>\n
Style your <hr><\/h3>\n
Squares are boring. Don\u2019t be a square.<\/strong><\/h3>\n
Style your hamburger menu<\/h3>\n
Use gradients<\/h2>\n