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

BL-Num-1-x2 Png

Part 1

do you know
We spend More than 60% of our Web-Developing Time

on Visuals Creation and Management?

We may find ourselves, feeling overwhelmed while creating content for our websites. A large amount of time can be spent on finding, creating, optimizing and generally managing visuals that will enhance and support our content. Today, content visualization is a process that must be followed since the general audience is increasingly engaged with visual elements. Aiming to attract new leads, we need to regularly nurture our web presence by creating related content to our audience needs. This process includes a lot of visuals creation for our websites as well as for our social media. That kind of work brings plenty of graphics-specifications on the table that we need to manage without losing our creativity.

The good news is that there are ways to manage our web graphics by establishing an effective working system in our content creation process. We can apply specific tactics to work faster and be more organized with a piece-of-mind. We can use practical workflows to create beautiful content that will promote and support our online brand identity and networking activities.

This post is the first part of an in-depth guide, on how to create a visuals-management system that you are going to love working with.

What Types of Graphics Do You Need?

for enhancing your web-presence

Whenever we start working on a project, there are some must-have elements we need to create, either for our website (or our client’s) or for social media profiles and pages.
Below you can find a list and an infographic of all possible types of graphics you may need for enhancing your online presence. Consider it a cheat sheet of all must-have files you may need to find, create, edit and organize.
  • Brand Identity graphics 
  • Website basic elements graphics 
  • Website Content Graphics 
  • Product / Services Images 
  • Social Media Graphics
  • Promotional Material
Types-of-graphics-cheat-sheet Jpg
TYPES OF GRAPHICS - Cheat-Sheet

Not all types of visuals should be treated the same way. Each type will be used either as is in its initial format or it will need to be converted and adapted to in a specific format or dimensions to suit in its final position or element.

For example, o logo may be used as a pure vector file (.ai or .eps) when you add it on another creative project such as a promo banner or on an infographic. But if you use it on the menu header of your website you’ll have to convert it into a .png format and in specific dimensions.

In order to work effectively with your visuals here are some best practices to use per type of graphics:

Recomended-file-Formats-per-graphic-type Jpg
RECOMMENDED FILE FORMATS - Cheat-Sheet

Where can you Find Graphic Elements?

41 Resources for your Content Creations

How to obtain your visual files is a strategic decision you have to make. Whatever you finally decide depends on your actual types of projects, skills, available budget, and your time management.
Some of the common choices you can make are shown amongst the 41 resources listed below:

Buy ready-made visuals from Online Graphic Designers Markets

In the end, you can edit or recreate any previously created or acquired files you have on your hard disk!

How to Decide What Kind of Visuals You Need?

Build the Foundation of your Communication Strategy

Before even start searching or sketching your creative elements there is something very important you should do. Consider this part as the foundation of your online communication strategy:

Get in the right Mindset

  • Your content should have nothing to do about what you want or what you like to design
  • All your efforts should be set on what does your Audience/Persona need

Before designing anything you should tune in to "WIIFH"
"WIIFH" = What's in it for him/her

  • “What” refers to your Persona’s pain and relief considerations when being on a specific stage on the Buyers Journey
  • “Him/Her” is your Persona 

Having your Persona in mind, you’ll be able to combine the ideal visual elements with the right content and together, convert them to strong visual messages.

A Few Words About Personas

example

Persona Png
Persona
Let’s say that your persona is a Woman aged 20-25 years old, that is a fashionista. Let’s call her Melissa.
You Png
You
You are an Accessories designer and you own an e-shop, a blog,  a Facebook page, and a Pinterest Business Profile.

Melissa’s habits and attitude will influence your decisions

  • What does she like to wear?
  • What she is sharing and discussing with her “tribe”
  • What is her main challenge and what is the relief
Your muse should only be Melissa. She will inspire you when:
  • Designing new products
  • Creating web content
  • Deciding about Ads, Social Media and Promotional campaigns

Your visual elements and your content keywords are hidden in Melissa’s world.

  • Your Brand Identity
  • The style of your website
  • Your Content Strategy
  • New Product Development

Everything should “love” and attract Melissa

Your blog, social media posts, pins, and all your website identity should have that kind of style and content that will match Melissa’s lingo, behavioral patterns, interests, and needs.

Tuning into your persona’s world is a milestone That I cannot talk further in this post as I will extensively in another post. In the meantime, you can “play” and get a good idea about what “Persona” is by, clicking on this link.

A Few Words About the Buyer's Journey

As soon as you define who your Persona is, the next step is to map your content on the buyer’s journey stages. This mapping process will form clear objectives in your communication strategy and will help you to better design and compose visuals and text messages.
 
The following infographic shows which are the Buyer’s Journey Stages – you may use this tool as a guide when mapping your own persona’s journey.
PERSONA-BUYER-JOURNEY-fl Jpg
Up until now, you have a basic idea on who your Persona is and which are the stages of the buyer’s journey. These two factors are the foundation of your communication strategy. Understanding your Persona and the buyer’s journey will help you choose and create the right content elements. 
 
But what happens on a daily basis? Your foundation means nothing without applying proven tactics and using effective tools.

All actions for an effective web presence should be ruled by a number of little things you can do repeatedly and consistently.

Visual content is hidden into a lot of these little things that may considerably affect our growth results. That’s why we need a visual content management system that would be guided by the following, proven strategic tactics:
001-keywords Png

Working with Keywords

Keywords are the main ideas of our content – visual material or descriptive text. A keyword can be either a single word i.e. “graphics” or a short phrase i.e. “create the best web graphics”. As soon as we set up our keyword(s) then we can easily build all our content elements around them. While creating our visual content, we should aim to engage our persona. This means that our persona will understand the key-takeaway of our content and may share it, or positively react to it.

If the Keywords match our persona’s needs then we’ll gain his/her engagement.

006-ux Png

Accessibility - A11y - Factors

Web content should be readable to a wide range of audiences. When designing elements for web, we’ve to be short of predictable, clear enough and color conscious for our audience benefit.

For example, using blue color for links – is something predictable or using clear color contrasts to help readers easily preview and understand our message.  Accessibility consideration is about welcoming a wider range of people in our platforms. Very useful information about “ALLY” can be found in the following interesting video: Accessibility in Design Systems by Allison Shaw (36 minutes seminar the rest is a discussion)

009-adaptive Png

Responsiveness

A beautiful layout should also look beautiful in all kinds of devices. We always have to make sure that our graphics and web page layouts are nicely displayed when viewed upon a wide range of devices.

011-search Png

SEO: Optimized Files

Sometimes, creating a visual element may take several hours of work. A lack of attention to detail is a common problem when finalizing a creative project. Finalizing a visual project can be the key factor for turning optimization to a productive habit. It only takes a few seconds to export/save files the right way by answering these 4 simple questions:
  • How should I name my file before uploading it on the web?
  • Should the name include a keyword or the post title?
  • In which format (SVG, PNG, JPG…) should I export it and on which quality (% or dpi)
  • Is it small enough for speed page-loading
015-bag Png

Brand Identity guidelines:

A Brand Identity is not our logo. Brand Identity is how our audience experiences our brand and anything that surrounds it.
  • Do we display our visuals consistently across the platforms we use?
  • Do we respect the general style-guide of our brand?
  • Are the fonts, shapes, patterns, and colors we’ve used, in line with the general style and tone of our Brand? 

If we skip any of those factors we’ll find ourselves going back and forth to edit, retouch, correct, optimize or rename your files.

 
In the second part of this guide, we take action!
We’ ll see how we can create a smart visual content management workflow taking into consideration our foundation and the proven strategic tactics as explained above.
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.

Loading

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!

Comments - Responses

avatar
  Subscribe  
Notify of
Close Menu