Graphic Design For Non-Graphic Designers in WordPress

February 8, 2016

Graphic Design Advice For The Non-Graphic Designer

featured_wordpress

 

Introduction

This is a broad subject but an important one that can really confuse individuals who are not from a graphic design background. If you want your WordPress-powered website or blog to be successful in 2016 and you can’t afford a graphic designer to help on an ongoing basis you need to understand how to edit and use graphics yourself with WordPress.

Also, in the last couple of years mobile devices dominate how people view your website so understanding how WordPress works connected to responsive images is really important.

The good news is that WordPress is on the leading edge of any CMS connected to how it handles responsive images. RSS Feed Then we have the whole areas of how you link your WordPress posts with social media and images.

In truth, apart from being a guest author on somebody else’s website the main way people push their written posts nowadays is by social media. See the days of the RSS feed are really over apart from this still being the main technology used by people connected to pod-casting publishing.

 

Responsive Images and WordPress

We start our journey with why this is really quite important in 2016 when most people are viewing your written content on all kinds of different screen sizes and resolutions that have major download time constraints.

It’s a major exercise trying to get clients to understand that they shouldn’t upload enormous images from their iPhone and then use the WordPress cropping tool and also explain that they really need to upload three to four different sizes of the same images into WordPress, but to be fair who’s got time for this in the first place!

Here’s a great article that explains the basics. It’s a little bit out of date because the plugin that the article talks about is now integrated into the core of WordPress. Basically with this technology in place most modern browsers will choose the best image to download and display.

Why should you care about this? Basically, when somebody views your website on a iPhone or similar device the website will download more quickly.

Here’s a plugin that really helps if you have a lot of images in your WordPress library that were uploaded pre-4.4. Chris CoyierBut to be honest, even the WordPress solution, which is one of the best at the present moment, is not perfect. In this video, on the CSS Tricks website, run by the great CSS ninja Chris Coyier, goes over in some great detail what are some of the fundamental problems that modern web design faces connected to pixel images.

SVG Images

Another technology that will change how images are used is SVG. This technology is has been around for a couple of years; but in truth, it hasn’t been adopted that much.

One of the major reasons for this is mostly down to lack of browser support. However, over the past year, this situation has changed. Here again is another great video on the CSS Tricks

 

website on SVG.  Imagine if you could embed an image in a web page, scale that page to any size, and never lose image quality. Well, you can. It’s totally possible, with SVG images. Never heard of this technology or this image file format? I personally feel in 2016 you are going to hear a lot more about this image technology.

Yes, with the new core WordPress functionality it is much easier to use traditional image file formats like JPEGs and PNGs; however, none of these image formats were designed to be used in the world of the Internet of 2016.

This is where SVG promises a much more flexible file format. However, it is never in my mind going to replace traditional image file formats because compared to SVGs, pixel file formats are much more easier to produce. However, for background images and icons SVGs provide great flexibility. Here’s a great article in Smashing Magazine from David Bushell that covers the basics of SVG, it’s a bit old i.e., it was published in 2012, but it still gives you a good understanding on what SVG can be used for.

Image Tools For Non Graphic Designers

A couple of years ago you didn’t have much choice when it came to tools that could help you with website graphics, basically it was Photoshop or a subset of not that good funky low-end software tools. Canva_LogoThis situation has changed recently with a number of great graphic producing tools. A great example of this is Canva which is a great free online graphic producing tool for the non-graphic designer. Another great online tool is Piktochart that helps you produce professional Infographics. Here’s some free or very inexpensive online photo editing services: PicMonkey: is an amazing value free or low expense photo editor PIXLR: is another great editor, which I personally like more, than PicMonkey.

If you are on the Mac–here are some other inexpensive tools you also should look at!

Keynote: I used this myself and it can produce some great mix images where you have a background image and you want some funky text effects and it only costs $19.99! Pixelmator: This is a nice Mac photo editor if you are only looking to do some basic photo editing and do some text effects. However, don’t get the wrong impression it powerful and at $29.99 it is great value and much easier to use than Photoshop! Affinity Designer: I’ve been playing around with this app, i.e., I downloaded the free trial version and it’s amazing!!! It’s a modern version of Fireworks which Adobe stopped updating a couple of years ago. Basically, it mixes pixel and vector editing in one great app at $49.99 and you also don’t have any of this monthly subscription rubbish, which you now get from Adobe. My only fear is that Adobe will probably buy them up and kill the app! Also, this is not a simple tool to use but I’m just amazed at its power and flexibility.

Getting Free or Very Low Cost Quality Images For Your Posts Can Be a Problem

It can quite quickly get expensive if you are buying seven or more images for your latest and greatest blog post even if you are using my favorite online stock image provider BigStockPhoto. Here some other online resources where you can get some excellent free photographs. Flickr Creative Commons License.

Yes, you can use Flickr as great photo resource but you need to be careful and understand the different licensing agreements. Bridget Willard of WordImpress has recently done a great write-up on a WordPress plugin called ImageInject that really helps in finding a Flickr image with the right license agreement. FreedigitalPhotos.net is a great resource if you are looking for some free photos that you can use for commercial use. PhotoPin.com is another great website to find images under the Creative Commons license. Pixabay is another good resource for creative commons license. There is a number of websites that you can use to find images with Creative Commons license.

Here’s an excellent article that lists almost all the good resources where you find good quality free photography.

Social Media & Images

Using images correctly with social media and WordPress has become really important. I would recommend that you use this leading SEO WordPress plugin Yoast SEO, which helps you with Facebook’s Open Graph Data requirements, connected to your posts link to showing the right featured images.

In Buffer’s “The Ultimate Guide to Ideal Image Sizes for Social Media Posts,” Kevan Lee talks about how Facebook chooses an image to display when you post your link. “When choosing an image to go along with a link, Facebook looks at the Open Graph tags for a page, specifically the og:image tag, which specifies the image that Facebook should use when sharing in the News Feed. You can add the og:image tag manually into the <head> section on every page of your website, or you can try out a plugin like Yoast SEO for WordPress, which handles the code and implementation for you. (We’re big fans of the Yoast plugin for the Buffer blog.)”

Graphic Design For Non-Graphic Designers in WordPress was last modified: by