Flexitive Blog

5 Graphic Design Essentials for 2022

Interactive Elements & Animations

Engaging consumers through motion and animation. Static graphics don’t always cut through the noise. With the increase in digital platforms, brands can use motion in design to better the way they approach storytelling and deliver memorable experiences to customers.

Accessible Designs

Have you ever increased the font size on your phone or in your browser? You’re benefiting from an accessibility feature. Accessibility design fundamentals such as color contrast, font size and defined heading structures have been around for years. Now, brands and their agencies must focus on improving digital accessibility further. Designers should ensure elements are available for screen readers through adding image descriptions, determining the tab navigation order, and enabling text scaling to name just a few. Flexitive has each of the features built-in, so you can easily ensure all of your designs meet accessibility requirements.

Reusable ‘Global Assets’

Global brands operating across the world often have a huge number of design elements and lock-ups to meet certain market requirements. One of the best ways to avoid repeating work and to ensure consistent brand experiences is to develop reusable components or ‘Global Assets.’ When you make updates to a Global Asset, the asset will instantly update across other designs where it is embedded. Now just think of those extra hours you’ll have back!

Expandable Designs

Busy lives, shorter attention spans and information overload has made it more difficult for marketers to compete for people’s attention. Expandable designs provide the opportunity for designers to communicate a message in a more interactive format. Clearly display the key information on the part of the design visible and allow your audience to click to expand either within a design or outside of the fixed size.

Illustrations and Colorful Icons

Illustrations allow an audience to interpret their own meaning, while icons convey a message quickly and clearly. Both act as powerful visual communication tools for designers and marketers. Icons and illustrations are also vital for accessibility as they provide visual cues for disabled visitors.

If you’re ready to start incorporating some of these design essentials, request a Flexitive Enterprise Demo and our solutions team will contact you to arrange a time.

Want to learn more about design automation? Visit flexitive.com
Questions? Contact us to get in touch!

Choosing the Best File Types for Web Image Optimization

It’s super important to consider web image optimization when creating designs, and choosing the best file types to use for individual elements. Even though Flexitive makes this process easier with automated image resizing and smart compression, we’ve put some tips together to help designers identify the best file types to use when building static, or animated designs that are both high quality, and load quickly on all devices.

JPG

Best for realistic photo compression (i.e. mountain landscapes), or complex static designs
Images with solid color bands (illustrations) can also be exported as JPG if they have many colors and are complex.

PNG-24

Best for images with transparency that also have your asset sitting above various colors. Great for product images that have transparent backgrounds, within HTML5 content.
PNG-24 is also a good alternative to assets that would otherwise be in SVG format since they offer more compression. However, the downside is that you have to make sure the image resolution is high enough for your purposes.

PNG-8

Best for images with fewer colors and solid color bands.
PNG-8 is also a good alternative to assets that would otherwise be SVG format since they offer more compression. However, the downside is that you have to make sure the image resolution is high enough for your purposes.
Is similar to GIF in that you must have a “matte” around your asset if there is transparency, but it greatly reduces file size.

GIF

Great for animated images within emails, or for memes!
The best way to create and showcase simple, short animations. Keep in mind, the file size may escalate quickly!
Best for images with solid color bands (illustrations), not for images with many colors eg. gradients.
GIFs are also a potential alternative to assets that would otherwise be SVG format since they offer more compression; however, the downside is that you have to make sure the image resolution (pixel size) is high enough for your purposes.
Like PNG-8, requires a “matte” around your asset if it is transparent, but you can achieve smaller file sizes.

SVG

The best format for vector shapes/illustrations/text/ because it offers infinite scaling without loss of quality. Use SVGs for high-resolution screens such as 4K+, if the image will be within HTML5 content.
If your vector is too complex (too many curves/vertices) and requires transparency then it would be best to save a large-resolution PNG-24.
Keep in mind that SVGs do not compress – they are one file and file size regardless of their physical dimensions. If there is a lot of text in your SVG or you are creating a button for a CTA and are worried about file size – consider using an auto-resizing text element within Flexitive rather than uploading an SVG.

To learn more about design automation visit flexitive.com or if you have any questions contact us to get in touch.

If you work for a brand or agency, request a Flexitive Enterprise demo and our solutions team will contact you to arrange a time.

If you found this post helpful, please share using the icons below!

Pitch #1: 3 Solutions That Marketing Agencies Can Pitch To Brands

One of my main focuses when working with agencies is collaborating to find new solutions to pitch to their existing clients. The focus of this article is the solutions we helped agencies develop to either win new clients or expand their existing business.

One of the major goals for agencies is to find new, innovative solutions that solve a pressing client challenge.

With new collaborative tools available, there is endless opportunity to achieve the above goal. Let’s look at our first example of a pitch an agency used to a client.

Custom & Localized Design Templates for Franchisees.

For this example, we’re using automotive dealer franchisees.

Challenge:

The current workflow between individual automotive dealerships and agencies providing digital assets for franchisees wasn’t very efficient.

Dealerships want to be able to localize their own designs (address, logo, pricing), without producing designs from scratch or requesting the agency to provide them.
The global brand marketing team required all trafficked designs to be consistent and on-brand.
The agency needed a way to allow dealerships to maintain localization while locking down brand guidelines in the design.

Solution:

Using master custom templates, the agency creates templated designs where they can lock down certain non-editable areas. For example, the brand’s logo will always be in the top right-hand corner in a locked position.

The dealers can access multiple custom templates, where only particular areas can be edited. Within the templates – dealers can change prices, swap in their custom logo, and add their location but not change the background photo, company font, etc.

Using responsive design technology, any changes made by a dealer would apply across all sizes within a master design.

From the dealer’s side, it’s a win-win. Login, access a premade co-op approved design, add in your local details once, and export for display ads, social media, website, or digital signage.

Agency Benefit:

Agency can focus on providing high value, specialized services.
Streamlined workflow allows for more agile production/delivery.
Expand production services for franchisees to all channels.
Increases their positioning as a strategic partner.

Client Benefit:

Improves communication with customer segments.
React faster to competitor offerings.
The central marketing team can streamline workflow with local franchisees.
Improved localization capabilities and customer segments for individual franchisees.
Improved communication and workflow saves time and increases overall efficiency.

Video Example of Dealership Solution

If you’re looking to grow your revenue base as an agency, let me know. I continually work with teams to expand their services to their clients. Contact me at marty@flexitive.com.

The 80/20 Rule Applied to Digital Production

Each week I have anywhere between 10-20 conversations with marketing, creative, and ad operations leaders. These posts contain what I’ve learnt about current challenges in the industry, solutions, and ideas. No brand or names will be mentioned for privacy purposes.

Developers are immensely valuable. In fact, they’re probably one of the most in-demand professions right now.

They are highly paid, smart, and in my experience, always looking for new challenges.

So why do brands & agencies often waste their developer’s talents?

This topic came up recently when I was sitting down with a Technology Director & Creative Director.

During our conversation, they mentioned that it wasn’t scalable for their developers to be hand-coding simple HTML5 designs.

The Creative Director was frustrated that his team couldn’t turn around their work fast enough without going through the technical team. There simply weren’t enough resources available to keep up with demand.

Not to mention their team was spread across the country, causing a communication disconnect and slow production times.

The Technology Director was frustrated that his team didn’t have the time or resources to engage in complex projects, and with more clients requesting personalized variations, their workload was always growing.

The conversation eventually turned to the reason we set-up this meeting.

How much of the overall work could be streamlined so that the non-technical creative team members could create HTML5 designs?

We came down to an 85/15 percent split.

Both the Creative Director and Technology Director agreed that 85% of their HTML5 development work could be switched to a platform and streamlined, allowing/freeing up time for creative team members to create HTML5 designs.

The Creative Director was satisfied because he could enable creative and production team members to create HTML5, animated designs.

The Technology Director was satisfied because he could engage his team with complex projects and keep them highly motivated.

It’s similar to the 80/20 rule — you just need to find how to leverage it.

If this hit a pain point for you let me know. I continually work with teams to solve these types of problems. Contact me at marty@flexitive.com.

The 5 Best Free Stock Photo Sites On The Web

Want to create designs that balance professionalism and creativity? Beautiful stock photography delivers outstanding results through amazing imagery. Having a large library of professional stock photos also enables you to create unique design variations and test different visual elements to see what works for your audience.

To help you start building amazing designs, we’ve shared a compilation of our favorite sites that aggregate free stock images to use.

Here’s our list:

1. Unsplash.com: Unsplash’s collections are great for locating similarly themed images. Collections are also a fantastic tool to draw inspiration from for your own designs.
2. Pixabay.com: Pixabay’s enormous library is all published under Pixabay’s license. Photos are safe to use without asking for permission or giving credit to the artist – even for commercial purposes.
3. Pexels.com: Pexels has a wide range of amazing stock images available for free without attribution. Their chrome extension is also a nice little touch that delivers a tiny bit of inspiration every time you open a new tab in Google Chrome.
4. Visualhunt.com: Looking to keep colors consistent within your design? With Visualhunt, you can sort images by color through the top toolbar. Very neat.
5. Picjumbo.com: With a focus on quality, Picjumbo doesn’t have as large a library as other sites. Site owner, Viktor, however, has a stern focus on quality and beauty in his (predominantly) free image library.

Looking for some stock photo, design inspiration? Look no further. Check out a design showcasing different content sizes utilizing the same, beautiful stock image in unique ways with different focus points. Click here to see the design.

Want to revolutionize your design workflow, build amazing designs, and be more productive than ever with stock images? Flexitive allows you to build multiple designs efficiently with external assets created outside of the application, including stock photos, to build amazing designs. Start building professional and engaging designs (with your new stock photos) by clicking here.

Adding Custom Sizes

You can add any custom size that you require to your Flexitive account. When you add a custom size, it’s added to every design in your account, so they’ll always be available to all users within your account.

By default, you’ll have access to a wide variety of responsive, fixed and social sizes to build your designs with. See a full list of all the default sizes available in Flexitive.

Filtering & Adding Custom Sizes:

Filter Sizes:
You can search for your required size by entering the width and height in the filter option in the Sizes Panel.

2. Add a Custom Size:
If a size you searched for is not available, you can add the size by selecting the button ‘+Add Size for all users).

Flexitive is a Google Certified External Vendor

You can export your HTML5 Flexitive designs for over 40+ different ad servers.

As Flexitive is a Google Certified External Vendor, so you can also serve your Flexitive designs on the Google suite of products that support 3rd party tags, such as Google Ad Manager (DFP) and DoubleClick Campaign Manager (DCM). Designs served as tags can be updated in real-time directly from Flexitive, giving you more control over your live campaigns.

Being a Google Certified External Vendor means Flexitive meets Google’s requirements for third-party ad serving with regards to user privacy, the accuracy of measurement, latency, and compliance with Google’s creative policies.

Check out our article Exporting for Ad Servers for more information.

Zoom and Crop Flexitive Elements

Reduce the time you spend preparing assets outside of Flexitive and maximize the potential of your assets with Zoom.

Zoom is particularly useful when working with images across a wide variety of sizes. With Zoom, you can focus on a specific area of an image and easily create variations of your image across all of your different sizes in your design.

Apply Zoom to an Image

To apply Zoom to an image, select the image and open the Size and Position Panel on the left-hand side. Ensure the Position of Element is set to Fill and Crop. You can then use the Zoom Slider to zoom in or zoom out of your element.

See our article Fit, Fill and Cropping, & Zoom for more information.

Customize Elements Using Flip

In Flexitive, there are multiple ways you can customize elements added to your canvas, including size & position modifications, crop, opacity, and orientation using flip.

Flipping an image vertically and/or horizontally allows you to use one asset in a variety of different ways. Across different sizes and designs, flip can be used to adjust/change the orientation of an element, modify a shape to fit the design or create a design element, like an image reflection.

The Flip option can be found in the Size & Position Panel on the left-hand side. For more information, check out our support article Flipping an Element.