Part 2
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
Firstly, let me define the framework and some important terms that you will need to know:
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).
7 BEST PRACTICES TO USE
on your Visuals Content Management system (VCMS)
Contents
- Find the software or your favorite online applications you feel comfortable to work with and get married to it
- Choose the right dimensions and sizes for your visuals when considering the consistency of your web pages across the same project
- Follow the guidelines of the Brand Identity you are working on
- Optimize your graphics for the web before uploading and publishing. Use bulk or batch actions to quickly edit, rename and convert your files to the chosen formats
- Organize your files in meaningful folders on your devices
- Upload your files in an organized Media Library to ease your future searching and retrieving
- Work Less – Set up a smart workflow to save you time and effort
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.
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 free! Sketch 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:
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
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
HERO HEADERS
A visual in 16:9 ratio (1920px x 1080px) or in 21:9 (1920px x 823px) is ideal for hero headers
IMAGE GALLERIES
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
POST FEATURED IMAGES
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
HERO SLIDERS
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
TEAMS - AVATARS
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
- 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:
- Web-page loading speed
- Accessibility to a wider range of audiences
- Easier search engine crawling
- A better content display on specific platforms
- Responsive Page Layouts
How to optimize your files before uploading them on your Website:
Use PNG file format only when your graphics have transparent parts or special curves and shapes or when you need to showcase artwork
Use JPG file formats for most of your website and social media elements and posts
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
Preferably, delete EXIF metadata before exporting images from the app you use
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
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
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
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
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)
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
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
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:
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.
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.
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.
Export your Vsuals with GIMP
Here is a video showing on how to save and export images when using GIMP for creating images
Export your Visuals with INKSCAPE
Here is a video showing on how to save and export images when using INKSCAPE for creating visuals
Use FOTOSIZER to Optimize your visuals
Fotosizer is a FREE software for Windows that bulk optimizes your visuals anyway you need.
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 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.
1st FOLDERS TREE
- Site-Wide-Graphics (Banners, 404, Headers...)
- Pages
- Page-1
- Page-2
- Page-3
- Posts
- Post-1
- Post-2
- Post-3
- Custom-Post-Types
- Products
- Services
- Events
- Listings
2nd FOLDERS TREE
- Artwork (files used as a base for other graphics i.e. backgrounds, textures, masks)
- Headers
- Sliders
- Pages
- Posts
- Products/Services
- Members/Users
NAMING FOLDERS AND FILES
You can use the following ways to name your folders and files for faster retrieval:
FOLDERS
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
FILES
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:
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
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!
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:
Conclusion
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
of
The Ultimate Guide to Manage Your Visual Content the Smart Way
What is your own system?
[…] the second part of this guide, we take action!We’ ll see how we can create a smart visual content management workflow […]