There are times when you have to design something on the flyand web designers are not at hand.
In times like these, we can't sit back and wallow - we have to design.
Here are some good tips for WordPress designthat will bring any developer success, even if you are pushing the deadline.
Choose your settings wisely
If you are in a hurry, find WordPress theme with pre-designed layout and demo pages. Use visual builders such as Elementor or Beaver Builder, to quickly arrange and shape the layout and add existing elements. This way you can have a functional site up and running in a matter of hours. Yes, it may look a bit generic if you're not careful, but it will work. Consider adding custom designs and animations to give it personality.
Be sophisticated
This is probably one of the most important tips anyone can give you.
Designers who have an eye for aesthetics and design can get crazy at times. However, unless you were born with the innate ability to name 6 versions of the color blue, it's safer to stay elegantly minimalist. Try minimalistic design with colorful color accents and a few subtle animations here or there.
Examples of great minimalist design
To make the minimalist style work, you need to include more details . Luckily for you, the details I'm talking about can be shaped 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 used Photoshop actively for 10+ years and still only got a "C" on the Upwork Photoshop test. Imagine my surprise when I found out that I only actively use 30% of Photoshop's features. The same goes for AI. What I'm saying is, if you're good with code and CSS, use CSS. It will save you a lot of time.
Use apps and tools you feel comfortable with. This will help you design faster and more efficiently. Some people find Canva very simple and intuitive solution.
Learn Sass or Less
Sass and Less are CSS extension languages. They add additional useful features and functionality to CSS, such as variables, functions, nesting, and arithmetic operations. See their official websites for detailed information and documentation.
It's not really something you'll do after a few days of scouting, I know, but it's worth considering for the future. Once you learn any of these extensions, you'll improve your workflow dramatically.
Adapt other developers' code to your needs
There are many amazing people on the net who share their code for free. If you are in a momentary crisis, changing your existing design may be the answer to your prayers. Their place is Design Patterns on Codepen. You'll find pre-coded buttons, accordions, sliders, layouts and much more.
Use SVG images whenever possible
SVG images are scalable vector graphics. Use them for your logo, icons and other graphic images on your website. They won't lose quality even when you've scaled the image up.
Note the full power of SVG:
- SVG images can be created and edited with any text editor
- SVG images can be searched, indexed, staged and compressed
- SVG images are scalable
- SVG images can be printed in high quality at any resolution
- SVG graphics do NOT lose any quality if they are scaled 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 who still use PHP exclusively. JavaScript is the programming language of this era for several reasons.
Part of the reason JavaScript is so popular is that it has large number of open source libraries, frameworks and extensions . Taking advantage of these free resources will make you work faster, better and more efficiently.
Here is the list of third-party JS libraries that are already included in WordPress. You can use them right away, no strings attached.
- js
- CodeMirror
- mower
- JQuery
- imageareaselect
- Jcrop
- jQueryUI
- swfupload (rejected)
- ThickBox
- TinyMCE
Choose 2 colours
Choose one primary and one secondary color that go well together. Use applications such as palette for materials и colour calculator, for help yourself with this task. Use your primary and secondary colors consistently on all the items you want to have a color range. For layout backgrounds and text add neutrals to your palette accordingly. Don't add too many colors into the mix. Stick to minimalism.
Choose 2 fonts
Choose two complimentary font families to use on your website. Sans-serifs are more suitable for headlines, while serif fonts are more suitable for text content.
Pay for logo design
Sorry to break it to you, but designing a logo is not something you should try to do yourself. A logo is the most important visual element of any company. It is the visual identity of your company and you would want it to be executed properly. Refrain from using generic logo creators and pay a designer. Hire a freelancer if you must. If money is an issue, try to find a design student who is full of fresh ideas and you'll likely pay them significantly less.
Choose high quality photos and videos
Client didn't provide you with photos for the website? Or did they provide you with some but they were out of focus, pixelated and just plain awful, right?
We have all been in a similar situation. The simplest solution is to use high-quality stock images. There are plenty of free and premium libraries to choose from.
My personal favorite is Unsplash for free photos and Freepik for any resources.
The two most popular and probably largest free photo libraries are https://www.pexels.com/ и https://stocksnap.io/
Many of the photos on these sites are used as demo content in WordPress themes. Avoid using photos you've seen around because your site will look too generic. If you're looking for something specific and less "worn," I recommend sites like https://www.reshot.com/, who have selected non-custodial photographs. Another option is https://nos.twnsnd.co/, which contains vintage public domain archives and can be used without copyright restrictions.
For top-notch photos and videos, your first stops should be: https://www.shutterstock.com/ и https://www.gettyimages.com/
This German site is also worth checking out: https://www.photocase.com
Don't be cheap when looking for impeccable resources. If you find the perfect image or video - pay for it. It will be worth it.
You can use CSS filters For images for improve your stock photos even more.
Optimize images
Be sure to optimize images for the web. When downloading images, be sure to reduce it to the size you'll use before uploading it to WordPress. For further smoothing and optimization, I recommend Smush plugin.
If you use Photoshop or similar photo editing tools, be sure to use the Recording for Web . Save photos and images with many colours as .jpg files and save graphics in png format. When saving for the web, you have the option to choose the quality of the jpg and png file. There's no real rule for this - use the preview screen and make sure you haven't completely ruined the quality of your image before saving it.
Have a clear CTA
Call-to-actions (CTAs) 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.
Therefore you need to make sure that the CTA buttons are clearly visible, legible and readable.
Where to put the CTA? Traders have all over scientific method to it. Obviously it depends on the content of your site, my only advice is to make it distinctive.
Don't forget your mobile users. The same CTA rules don't apply to mobile and desktop. See Mobile CTA best practices .
Animations are cool when done right
Creating simple CSS or JavaScript animations can really elevate your design and make it look polished and professional. The secret, again, is to be subtle and not overdo it.
Good examples:
https://www.monogranofelicetti.it/en/
"The worst thing you can do" for example:
Icons - small players with big roles
Icons are an extremely important part of your website, especially if you've taken my advice and gone for a minimalist design. Elegant icons can effectively enhance your entire web design.
As a developer, you should be aware that good icons are quite difficult to create. Don't even think about making them from scratch. Find free icons in icon libraries like https://www.flaticon.com/or https://icons8.com/
Find an icon pack that matches your logo or website style and you'll save yourself a lot of work and effort. Never mix icons from different packages - it will just look unprofessional.
For extra style points, consider animating the SVG icons. The best way to do this is with Snap - javascript library created for the purpose of animating SVG graphics. If for some reason you don't want to You are encoding , you can use the app SVGator . This is a paid app with a one month free trial and is worth a try.
The devil is in the details:
For a minimalist style that looks good, you need to roll up your sleeves and put the extra work into the details that matter. This can be done with code.
Not everything is black and white
Avoid pure black # 000 or pure white #FFF color. They are too harsh on the eye. Use slightly softer variants such as #EFEFEF for whites and # 181818 instead of blacks.
Borders are old-school
Try to use CSS box-shadow property instead of an element border. This will make your design more slick and subtle.
Solid 1px or 2px borders can look cool and retro on some designs. And please, never use dotted lines or dashed borders, please!
Style of dividers <hr>
Dividers are usually boring elements that can have a real positive impact if you add a little coding to them.
Elementor Builder has a very cool feature for styling dividers.
Rectangles are boring. Don't be a rectangle.
Uneven lathes attract more attention. Use them sparingly for CTAs or high hierarchy buttons.
Menu style "hamburger"
Hamburger-style menus are a must-have on mobile, but they can also look cool on wide screens. I found a collection of hamburger menus on CodePen that I'd like to share with you. If you don't know how to make a hamburger menu, read on lesson in this article .
Use gradients
Instead of using one background color, why not try gradients? You can easily create your own gradients with editor forgradient of colorzilla and simply copy the CSS code into your WordPress site.
Don't go overboard with the number of colours in the gradient and be careful not to get too dark. If you're having trouble creating your own color combination or don't know what works well, you can always choose to use free pre-created gradients .
Gradients can also be used as an overlay for background photos, icons, buttons and other design elements. This is a very neat trick for creating consistency. If you want to overlay a gradient on top of a background image, use the &:before property (SASS) to add your gradient and simply reduce its opacity to 60 - 70%. Here's how it looks:
In conclusion
It's always better to hire a professional designer, but sometimes we have to do it ourselves.
If you're in a hurry, choose your settings wisely. Install a quick minimalist theme and import a demo for it. Stylize the details to make your design more professional and less generic. Use your strengths (code) as much as possible. Always choose tested color combinations and high-quality images and videos. Be sure to use icon packs from the same author and in the same general style. Pay for logo. Most importantly, remember to be consistent and subtle with your design.
Good luck in your design and coding!