The Ultimate Guide to Managing your Visual Content the Smart Way Part 2

BL-Num-2-x2 Png

Part 2

take action
Why Would you build your own

Visuals Content Management System?

Welcome to the second and most interesting part of this in-depth guide about managing Visual Content the Smart Way!

I have to warn you … this is a long one

Emoji Jpg

Firstly, let me define the framework and some important terms that you will need to know:

Visual Content

When we start a new creative project – or a part of it – we usually transform our ideas in combinations of shapes, colors, images and text. This combination reaches our persona’s eyes as a Visual Content

Taking Action

From the stage of searching and refining our ideas to the stage of presenting them to our audience, we are taking specific actions of implementation.

The Flagship

Our flagship on every single step of the process should be our Persona’s Profile and their flow during the Buyer’s Journey

The Purpose

Our main purpose is to engage our Persona with our content.

Visuals Content Management system (VCMS)

When we apply a specific sequence to our actions and we use specific tools and tactics when eworking on visuals content creation that means that we apply a Visuals Content Management System (VCMS)

To give you the complete picture, think of yourself working on your device while you are starting a new project. You are taking the first notes regarding your persona’s identity, habits and behavior. You’re searching for some additional data on how your persona reacts during their buying journey, in order to build the right communication strategy for your product. As soon as you collect this data then you will have your foundation mapped out in front of you.

Once you have this foundation mapped out then you should have it in front of you whilst working on your projects.

It is nice and clear up to this stage, but what will you do next, how can you work smarter in order to achieve your purpose (aka to engage our Persona with your content)?

  • Do you know which are your next actions?  
  • How should you prioritize them?
  • What are the best practices you can use to eliminate back-and-forth mistakes?
  • Which steps can form your own workflow?

The answers to the above questions can shape a complete Visuals Content Management System.

Why is this important?

It’s a very effective and productive practice to set up your own system for managing visuals content. By following specific steps every time you design an element of content will prevent you from missing any of the proven strategic tactics mentioned in the first part of this guide.

Working for many years as a stack developer, I came up with some effective practices that I use repeatedly, and I have refined these practices over time through trial and error. Nevertheless, I have built a system that helps me work faster with fewer mistakes.

In next few paragraphs I would like to share some ideas with you and I am confident that by the end of this post you will be inspired to build your own effective Visuals Content Management System (VCMS).

1. Find the software or your favorite online application

that you feel comfortable to work with and get married to it

Pick the right Software

There are a lot of software alternatives in the market that basically separated to Vector and Raster (Bitmap) Graphics Software. Amazing visuals can be created with both types of software, but what you will choose depends on your skills and your types of projects. If you are not familiar with their functionality have in mind the there is a big learning curve.

Vector Graphics

Graphic elements created with thousands of tiny curves

Raster Graphics

Raster or Bitmaps are graphics created with hundreds of square pixels

Raster graphics software is the ultimate solution for manipulating images, creating GIFs and creating beautiful product or device mockups using the “smart objects” feature.

Vector software is the best choice for designing shapes, icons, logos, patterns and any kind of Illustrations. Vector files are much smaller than raster files, they will never break when zooming in and can be exported to JPG, SVG, PNG, EPS, PDF and many other types of file formats.

Vector apps are the best choice for designing shapes, icons, logos, patterns and any kind of Illustrations. Vector files are much smaller than raster files, they will never break when zooming in and can be exported to JPG, SVG, PNG, EPS, PDF, and many other types of file formats.

You are allowed to use vectors in a raster software but you can only edit them in vector software. You can also use images in a vector graphics software, but you have limited editing features.

There are great alternatives for both Adobe Photoshop and Adobe Illustrator that are widely used by many happy users and dynamic communities:

GIMP, Inkscape and Gravit Designer are great alternatives that offer many similar features and they are completely freeSketch and Affinity are also great alternatives to Adobe’s, offering far more and  at a lower cost.

Two additional software alternatives for designing your graphics are Microsoft PowerPoint and Google Slides. These neither are vector nor raster graphics software. They mainly used for creating presentation slides with animations, but you can create little visual miracles with them! If you are not familiar with any of the vector or raster graphics software or the learning curve is a problem for you, then you may find your way with any of these two.

  • PowerPoint (PPT) is an app that is a part of Microsoft Office suite and offers a wealth of tools and animated effects
  • You can create unbelievable static or animated visuals and videos and customize your canvas to the dimensions you need
  • You can export either single shapes or specific slides as images in various file formats
  • There are a large number of free and premium ready-made PPT templates suitable for many types of creative projects
  • PowerPoint is one of the best options to use also for helping your clients create wonderful graphics for their websites and social media platforms in just a few minutes
  • Google Slides is a very similar app to PowerPoint, but thanks to Google is available for FREE, on all devices if you have a GMAIL account. You can create a GMAIL account anytime, also for Free
  • Using Google Slides you can enjoy plenty or editing tools and graphics effects similar to PowerPoint. You can export your work in various file formats, but the best thing is that you can embed your work on a webpage with a simple HTML code similar to that of YouTube
  • An additional feature is that you can utilize the power of Google search while creating a project in Google Slides by searching for images and bring them instantly onto your canvas
  • There are also many free add-ons available for Google Slides that can help you create many types of graphics
  • Have in mind that Google Slides import and edit any PowerPoint file 

Pick an Online Application

If you prefer working with lighter design tools, but without sacrificing your creativity then you can use an online application that will also be available on any mobile device. Most of these apps are very user-friendly and give you many ready-made visuals to edit with your own data and export them to the most common file formats (JPGs, PNGs, PDFs). Below is a short list of popular online apps that are widely used:

All these apps offer:

  • A wide range of inspiring template for any platform and for any purpose
  • Big range of canvas grids
  • Many shapes, icons, images and patterns
  • Hundreds of fonts
  • Creative effects and image styles
  • Elements which you can instantly tweak as you wish and finally create your own visuals

You must be careful with their Social Media ready-made templates because they do not update them regularly according to the current dimensions suitable for each platform.

Create your own Templates - Mockups

On the main title of this section, I suggested to find your favorite app and get married to it. What I meant was that:

BL-Num-1-x2 Png

In case you haven’t already, you should learn how to use these app/software as deeply as possible. By learning most of your app's features and tricks, you will feel like having a trustful and a helpful partner to working with

BL-Num-2-x2 Png

By having a deep knowledge of your app, you will be able to transform it into a graphics-machine creator. As soon as you realize what kind of visuals you usually need for most of your projects then the best practice is to create your own templates or mockups.

Templates or mockups are files designed with specific dimensions and they are planned for specific content applications. They may include text with specific fonts, colors, styles and layout settings designed to match their final position with regards to website modules (ie. e-Shop products galleries, social media posts, etc.).

You may create templates for any of the following cases:

  • Website Section Header/Footer Backgrounds
  • Video Tutorial Covers
  • Post of Custom Post Type Featured Images
  • Devices or Product Mock-ups for your e-Shop
  • Title-Headers you use on your website
  • Animated Banners with various dimensions
  • Services Icons
  • Products/Services Banners
  • Static Promo Banners
  • Instagram Stories Templates
  • Pinterest Pins Templates
  • Facebook Ads Templates
  • Infographics Layouts
  • Slide Backgrounds
  • Style-Guides and Style-Sheets
  • Grids/Collages layouts

Templates can also be a great solution for your clients. You can create template files in Google Slides or PowerPoint covering your clients’ content needs. The next step is to show them which format to export their creations and how to upload them on their posts. That way you can reduce the risk of “breaking” website layout consistency.

I actually use Photoshop and Illustrator templates for almost every basic website element and Social Media visuals. I also use actions in Illustrator for exporting my graphics to various formats with just the click of a button.

2. Choose the appropriate dimensions and file sizes for your visuals

considering the platforms where will be uploaded to for website layout consistency

Dimensions and image scaling ratios define the canvas of a creative project and determine its harmonic appearance on specific web modules (sliders, grids, galleries) and on specific social media platforms.

When you have the whole picture of your communication strategy and you know on which platforms you will publish your visuals then you can easily decide which canvas dimensions that you will extensively use.

For example, you may find out that 16:9 size is suitable for all the elements included in this list:

  • Website Hero Headers
  • Tutorial Slides
  • Facebook Event Announcements, as well as for your
  • YouTube video covers

That kind of information helps you be incredibly productive since you will finally create fewer graphics files using certain templates with ready-made settings.

Finally, when using specific dimensions or canvas ratios for visuals that you will place in standard modules across web pages. (i.e. Headers, Featured Images) your CSS styles will be applied harmoniously and this will give you faster loading speeds.

Suggested Guidelines For The Dimensions for Basic Website Modules

Home-1 Png


A visual in 16:9 ratio (1920px x 1080px) or in 21:9 (1920px x 823px) is ideal for hero headers

Grid-3_3 Png


Visuals planned for galleries can be of any ratio, but work better when they have exactly the same dimensions. A good practice for WordPress users is to use the same dimensions with those of your featured images

Ecommerce-4 Png


Choose only one ratio (4:3 or 9:16 or 1:1) for all WordPress post types of your website or, use a specific visual ratio for every different post type (products, teams, posts, events). Apply centered titles for better responsiveness and positioning in social media links

Home-7 Png


Choose only one ratio (22:6 or 16:9 or 4:3 or 1:1) for all slides of the slider or the image carousel

Features-1 Png


Use mainly the 1:1 ratio for Teams, People and icons. This will always display correctly everywhere and will also be harmoniously circled

Remember that the 16:9 ratio turns to 9:16 on mobile devices, while 1:1 works great on almost every device and on any module where the main subject of your visuals is centered both horizontally and vertically.

Social Media Modules Dimensions Cheat Sheets

Almost every year, the social media platforms make changes totheir dimension guidelines for certain modules. Below you can find some useful cheat sheets with the dimensions that are currently being used for the most common platforms:

3. Follow the standards of your Brand Identity

Your own or your client's logo, colors, fonts and the general branding style guide

Your Brand identity and the elements constitute the pillar of your communication strategy. Practically, this means that the general style of the logo, the tone of the tag and company’s pitch, colors, symbols and fonts, all have a strong impact on your visual content. You need to be consistent with your Brand Identity because every visual element you will use may enhance or harm your brand awareness and its general impact.

The Basic actions to consider:

  • Decide which version of your Logo goes where according to a Branding Style-guidelines 
  • Upload and set-up the appropriate logo on the web platforms you use (i.e a circled version of your Logo for Facebook page and/or a square white version of your logo as a watermark etc.)
  • Use your branding color palette accordingly on the basic elements of your web platforms
      • Buttons
      • Heading Titles
      • Dividers
      • Menus
Elementor-global-colors-step-2 Jpg
Colors set up on Elementor Page builder
  • Set up your branding colors on your design software, your WordPress editor and on your WordPress Theme options (or customizer).
  • Set up your branding fonts on website Header tags (H1, H2, …H6) and body fonts

4. Optimize your Visuals for the Web

Before Uploading them on any Platform

There is a lot of buzz about how important it is to have super optimized graphics on your website. And everything you heard is true! When your media files are named with proper filenames and they have a “light” size, then your pages will load much faster and your SEO rates will be better. There are a lot of plugins that can optimize your media files, but personally, I rarely use them. I don’t like to install an additional plugin on my WordPress for media files optimization since I can optimize them in advance when I export them from my various design software.

Media Optimization plugins are ideal for websites that have a lot of media files uploaded that have never been optimized and are causing serious loading and SEO problems.

In the next section, you can find a list of the best practices on this subject.

But first, let’s define what media files optimization is.

We create, export/save, compress and convert our files to specific sizes, dimensions, formats, names and quality, in order to achieve:

How to optimize your files before uploading them on your Website:

001-png Png

Use PNG file format only when your graphics have transparent parts or special curves and shapes or when you need to showcase artwork

002-jpg Png

Use JPG file formats for most of your website and social media elements and posts

003-image Png

Save your artwork for web pages in 72 dpi, medium JPEG quality (50-70%) and in the proper dimensions for the modules you want to place them in

004-folder Png

Preferably, delete EXIF metadata before exporting images from the app you use

002-svg-1 Png

If needed, then use only sanitized SVG files. Use SVGs when you need to edit those graphics on your website page builder, on specific widgets

005-rgb Png

Use clear color contrasts on visuals when the main subject isn’t so clear in order to make them better accessible to people with visual disorders

006-responsive Png

Test how your artwork is displayed in 2-3 different device views. Ensure that one of the test-devices is the smallest mobile phone there is in the market at the moment of testing

007-css Png

Create and save your artwork with the most possible blending and masking effects in order to use only the necessary CSS styling on your website

008-folder-1 Png

Name your images using either the title of your webpage/post where will be placed or if it is a Featured image, name it with your keyword. Use Latin characters without spaces and separate words with underscores. Use abbreviations that make sense to you or to your users for better filing and easier searching (i.e. prdglr = product gallery, hdr = header, FI = Featured Image, CTA – Call to action)

010-resize Png

Resize your files before uploading them on your website to a final weight ranging between 10 KBs the smallest and 80-100 KBs the largest. If this is not possible then try not to exceed the 200-300 KBs in rare cases. Make sure you have covered all of the above-mentioned optimizations. Remember that you can upload much larger files on Social Media Platforms

012-alt Png

Always set a proper alt-text as soon as you have uploaded your file on a website. Never leave the alt-text empty. If you have a large number of files then you can use a WordPress plugin to do this automatically based on your Image name or your post title

013-settings Png

Set up your WordPress media sizes before uploading any files to your media library. WordPress by default, creates 3 additional sizes of any image you upload to the media library. Set these sizes to match your website style and the ratios of your files

Useful Software for Optimizing your Visuals:

ADOBE-bridge Jpg

Use Adobe Bridge to Optimize visuals Faster

Bridge gives you centralized access to all the files and assets you need for your creative projects. Organize personal and team assets, batch edit with ease, add watermarks, set centralized color preferences and much more. On the following video, you can see how to batch edit your files.

ADOBE-bridge Jpg
Play Video

Use Adobe Photoshop to Export Optimized visuals

Photoshop has a quick export feature where you can set up how to save your visuals in order to be optimized according to your specifications. It also has another great tool that helps you to export batch files. On the following video, you can see how to batch export and name your files.

Play Video

Use Adobe Illustrator to Export Optimized visuals

Illustrator has the same quick export feature where you can set up how to save your artboards in order to be optimized according to your specifications. It also has another great feature that helps you to export individual assets with a single click! In the following video, you can see how to do that.

Play Video

Export your Vsuals with GIMP

Here is a video showing on how to save and export images when using GIMP for creating images

Play Video

Export your Visuals with INKSCAPE

Here is a video showing on how to save and export images when using INKSCAPE for creating visuals

Play Video

Use FOTOSIZER to Optimize your visuals

Fotosizer is a FREE software for Windows that bulk optimizes your visuals anyway you need.

Play Video
XnViewMPjpg Jpg

Use XnWiewMP to Optimize your visuals

XnView MP is a FREE software for Windows, Mac, and Linux that bulk optimizes your visuals anyway you need. It is a powerful picture viewer, browser and converter. This software can read more than 500 formats change picture size, reduce picture file size and much more.


Use PHOTO BULK to Optimize your visuals

PhotoBulk is a Freemium image editor Mac app that is meant to dramatically simplify batch image editing: batch rename images on Mac, optimize photo, compress image file, add watermark, etc. It is also a perfect PNG to JPG converter and bulk image resizer Mac app.


Use BATCH PHOTO to Optimize your visuals

Batch Photo is photo productivity toolkit for Mac. You can perform bulk actions to your images like resizing, converting, cropping, watermarking, date stamping, renaming and much more.

Online tools for resizing your Visuals:

5. Organize your Files in Meaningful Folders

on your hard-disk or on the cloud service that you use

The organization structure of your saved files can seriously affect your productivity. A good file management practice can accelerate your workflow or terribly slow it down. If you have well organized files and they are correctly named, then you can find them in seconds. Otherwise, you may lose hours trying to remember where a file is while digging into hundreds of folders without any specific structure.
A good file management structure should be based on:
  • The types of projects that you are working on
  • Your clients’ input
  • Your collaboration habits
  • Your Productivity and “Get Things Done” habits 
  • The tools/apps you prefer to use
  • How meticulous and consistent you are when saving your digital work

Over the years, I have used various file systems to organize my project files. I can assure you that there is no ideal system suitable for all kinds of projects or all types of clients.

In the following sections I will give you two ideas for a filing structure (folder “trees”) that I use most often and that helps me work faster.



Website Graphics

Social Media

Website Settings





(product mockups, branding mockups, social media posts/pins/stories templates, Post-type Featured images, Headers, Slides for Sliders, Common Text files)




(Website tree structure, Social Media scheduling, Product ideas, Promotional Ideas, Website Content planner)


(Papers, Affiliate, Ads, Promo Banners, Offers, e-mail Covers, Videos, Video Covers)

Social Media

Website Settings



You can use the following ways to name your folders and files for faster retrieval:

008-folder-1 Png


Name your folders with simple words or meaningful short phrases.

  • Simple Words: Headers, Banners, Teams, Users, e-books
  • Phrases: Featured Images, Product-Galleries, Services-Sliders, Call-To-Actions, Ultimate Guides, Facebook Campaigns, Xmas-email-campaigns
004-document-1 Png


Name your files with abbreviations and Latin characters without spaces (use underscores to separate words)

  • Use dates when you are saving post content
  • Use versions when you save downloadable products, e-books, presentations or guides and checklists
  • Use plugin or apps abbreviations when your files will be used in specific settings or options on your web platforms
  • Use your keywords for your post graphics
  • Use dimensions or width/height indication when saving images for specific modules
  • Use any combination of the above

6. Prepare your Website to Welcome your files

ease your editing, searching and retrieval actions

Now that you’ve named and organized your files properly you are ready to set up your website in a way that will make your life easier when creating and editing layouts, pages and posts.

You need to configure your website in two parts:

BL-Num-1-x2 Png

Apply Global Website Settings

These are settings take effect on all your website and usually applied once in every WordPress installation

  • Set up your fonts globally either using your Theme options or your page builder plugin options
  • Set up your branding color palette accordingly
  • Use your logo in the right file format and size on default headers, footers, menus, favicon
  • Decide which style and size you need for your posts and your products featured images and set the appropriate dimensions for Thumbnails, Medium and Large images in WordPress Media Settings
  • If you are planning to use SVG files then you need an additional plugin to function as an SVG sanitizer that is necessary for WordPress safety and better performance
BL-Num-2-x2 Png

Configure WordPress Media Library

You will extensively use the WordPress Media library for uploading and retrieving files that you will need to place in your content. By default, WordPress does not include specific features for organizing your media library. When uploading your files, they just placed in the Media Library indexed by date.

This is not a big issue when the website has just a few pages and posts. It becomes a serious problem when your content is large.

There are some good practices you can apply through that will resolve this problem:

  • Name your files wisely as described in the previous section (5.)
  • Create at least one type of custom taxonomy for your media library. You can do that by using a Custom Post Type creator plugin such as Pods or Custom Post Type UI or else. Every time you will upload a media file you can assign a taxonomy to it and this method will help you search and retrieve your files much faster
  • Build a better Media library structure by using a specific plugin that establishes organizing searching and retrieving features out of the box, such as Joomunited  or Media Library Folders
  • Connect your website to your Cloud file server (Amazon S3, Google Drive, One-Drive, Dropbox) for saving and retrieving your files. That way, you’ll save server resources, your web pages will load faster and your WordPress will fly!

7. Work Less - Set up your own System

By organizing your files the correct way and picking the right tools, these are two good practices that will make you more productive and will bring harmony to your working day. In order to multiply this positive effect, it is time to take advantage of all the previously mentioned tools and practices and build a workflow that will be your own Visual Content Management System. A step-by-step system that you will sub-consciously work through every time you start a new project on the web. Think of it as your “secret method” that will give you more confidence and free time.

If your system saves you 1 working hour per day, this gives you at least 24 days less work per year!

1 hour  x 5 days per week = 5 hours less weekly–>
5 hours x 4 weeks = 20 hours less work per month –>
20hours x 12 months = 240 hours or
24 days less work yearly
Do the maths if you work for more than 5 days a week!!!
Nice Eh?

Whatever tools you use, premium or free apps, you can always build a great workflow. But you have to start from something very important. You will need a couple of hours to decide which tools you will use for searching, collecting, editing and organizing your material and then to figure out your own working steps.

You will be grateful for this couple of hours of planning when you realize just how much time you will have saved for every project that you will do.

The chosen tools and resources must be easily accessible since they will constantly be used in various steps.

In order to expand all the steps to a complete design process, I consider as a starting point the creation of a new online identity, including a website development and a social media presence.

To help you out on how to build your own workflow, I have outlined for you below steps you can use if you are not already doing so:

Set up your "FOUNDATION"

Set up your "FOUNDATION"

Collect all the necessary data that should be included into the Foundation of your new project – aka your Persona(s) profile and content mapping on the Buyer’s Journey


Collect and organize all the elements of your Brand Identity in one directory (Logos, Shapes, Color Palettes, Fonts)


Create a Folder for your inspiration resources where you can save reference-files you may need also for your templates (optional)


When you start a new website project, recreate a previous similar project folder. You can also have one ready in advance as a dummy folder-tree which you can copy and rename for every new project.
Collect your CONTENT

Collect your CONTENT

Start creating and/or collecting the necessary visuals, text or other types of content from your own sources or from your client. Organize them into the appropriate folders as you go.
Set up your Visual TEMPLATES

Set up your Visual TEMPLATES

Decide or find out from your client which media platforms you will work on and what kind of visuals you will need and assemble the related template files (you may have created before). Otherwise, create the necessary visuals templates at this point.


Set up your branding color palette and fonts in your design app before starting to create anything.
EXPORT your Files

EXPORT your Files

Design your new visuals and then export your work on the right dimensions and file formats using actions or bulk features there are available on the chosen apps/software
OPTIMIZE your Files

OPTIMIZE your Files

If your files are still large after initial exporting, pick your conversion app and reduce their weight in less than 100 to 200KBs
NAME your Files

NAME your Files

Give your files meaningful names using your own naming system


Save your final files in the appropriate folder of your folders tree that you have created on your hard disk or cloud server.
Set up your WEBSITE

Set up your WEBSITE

Go online and set up globally your website with your brand colors and fonts.
Set up your Files for SEO

Set up your Files for SEO

Upload your files to suitable media-library folders or use tags. Set Titles, Captions and Alt-Names per file or use a plugin to automate this procedure.


Create your basic web pages and setup a layout template per page using your page builder or by coding. Place your basic visuals wherever is necessary (Headers, Footers, Featured Images, Sliders, 404 pages, etc.)
Create RESPONSIVE Layouts

Create RESPONSIVE Layouts

Adapt your page layouts to various devices views. Preview and Test your Responsiveness in various Browsers and Devices. Make any necessary tweaks.
Take care of your post links for Social Media

Take care of your post links for Social Media

Go through the On-Page-SEO settings and use (if any) alternative social media graphics per platform settings.


By now, you might be feeling a little overwhelmed by all the above, since every step includes a group of actions instead of a single one.

From my experience though, the only way to achieve positive productivity results is to practice on your new system and give yourself some time to test and check your progress.

My aim when writing this guide, was to share from my experience, information, resources and ideas for inspiration in order to save you time and effort when building your own system.

I am REALLY looking forward to your comments, thoughts, ideas and… improvements!

Read the First Part


The Ultimate Guide to Manage Your Visual Content the Smart Way

What is your own system?

Download all Cheat sheets, Infographics, and mentioned resources

F Kokkinaki-sml Jpg

Fotini Kokkinaki

Online Branding Developer & Owner of LUSH TEMPLATES FOR WEB 
Working as a WordPress developer for over 10 years, a certified Inbound Marketeer and Growth Driven Designer by Hubspot Academy.

Subscribe to Our Resources

Stay up to date with the latest WordPress tools, development news, tips and how-to resources.


Join Us

We are always working on a great content that we’d love to share it with you.  We daily publish interesting news and tips, in-depth tutorials, and special offers.

Join us on our Blog and our Social Media pages and stay tuned!

Notify of
1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
The Ultimate Guide to Managing your Visual Content the Smart Way Part 1
11/01/2019 05:10

[…] the second part of this guide, we take action!We’ ll see how we can create a smart visual content management workflow […]