In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

6 Easy Tips on How to Use Visual Contrast for Designing Alluring Hero Images

6 Easy Tips on How to Use Visual Contrast for Designing Alluring Hero Images

by Adrian Ababei on Dec 09 2016
How many times did the inspired title of an article made you “reward” the copywriter with a click and then: surprise, surprise! You landed on the website hosting it and you couldn't have found your way out of there any faster?
 
The photo/graphic/video in its header was so “dusty” and boring or, on the contrary, so flashy and annoying, stuffed with clumsily grouped elements, overloaded with information and showing off a totally uninspired color choice!
 
Now, answer to this question: how many times did you open a newsletter or landed on a new website and from that very moment time stopped? It captured your attention and you kept on scrolling and clicking, then did some more scrolling! It was the best “scientific” proof supporting time's relativity theory!
 
The hero image got to you, you wanted more and more of what that site had to offer and ended up spending more time there than you planned (maybe even buying something or subscribing to their “crafted” newsletter)!
 
If you want your own website visitors' experiences to be more like the one in the scenario no. 2, then you should learn to master these contrast-creating design subtitles:

 

Think Through Your Color Choice

 
Color sure isn't the element you should pick in a rush! It can either wow your users and propel your message to them or it can instantly drive them off.
 
Carefully consider the message you wish to convey (your whole's brand's identity) and then make your selection based on that and that only.
 
As a general rule of thumb: you don't need to go for a strong color if it doesn't represent your brand's personality, just to catch their attention. It will eventually be a major turn off.
 
Also, before you go ahead and add splashes of your “winning” color to your hero image, be sure that: it matches the rest of the design (preferably a simple one if you're going for a bold color).
 
With cohesion (with that stunning image or visually-engaging video that you're planning to use) and contrasting colors in mind, feel free to enhance your brand's message by simply adding the right color to your hero image: colored typography, colored user interface elements. Such a subtle, yet effective “trick” when you manage to make the right (color) choice!
 
But what if there's just no “match made in heaven” between the hero image and your brand colors?
 
In that case, you adapt:
 
  • try a color overlay on the photo
  • test a black and white solution for the text or image
  • put the strong colored elements in your navigation bar
 
If you've tried all of these creative “fixes” and there's till no chemistry between image and colors, consider losing the mandated color.
 
Moreover, color alone can be “the hero” of your hero image, you don't need an image at all! Combine it with powerful text lines, featuring beautiful typography, and you have your hero image that impacts users just by its striking (crafted) simplicity.
 
And here we get to the “extreme minimalism” principle again! Such a powerful web design trend!

 

Wow Them With Bold Typography

 
Here's another way of using contrast to catch the eye: beautiful and bold lettering contrasting in size and (or) color!
 
Keep it simple, but carefully craft its simplicity! 
 
Consider the typeface selection and get creative when it comes to choosing your words (that's right, meaningful, powerful words, not a whole paragraph). Go for the true emotions-triggering ones all while relying on:
 
  • fonts that pop out (set against contrasting backgrounds)

     
  • unusual font sizes (either undersized or oversized; the "out of the ordinary" will always catch attention)

     

Think About Light and Dark Spaces 

 
After lots of mixes and matches, rearrangements and a whole dose of creativity you've finally managed to pull off a great “light vs dark spaces” contrast for your hero image and them boom: all your work is ruined when you try to make it responsive.
 
The text, images and buttons are all chaotically displayed now!
 
Does this work scenario sound familiar to you? 
 
Then here are your options:
 
  • go for another image (it's hard, I know, especially if that was “The” one and you've spent so much time scanning though hundreds of images to find the perfect one)
  • go for  color overlay
  • go for another typeface, color and size

     

Do a Strategic Cropping

 
“It's a trap, don't go for it (like many other designers do)!”
 
We're referring to the widely accepted idea that the hero image should “fill in” the first screen!
 
Be better than that! Think outside the box:

 
  • let the content therein determine how you should crop it 
  • accept and implement the idea that your hero header could be either smaller or larger than the browser 
  • give the other elements on the page their due importance, too
  • dare going for an unusual shape (it will certainly intrigue and catch attention)
  • consider an unusually deep image that will only incite visitors look for more

     

Make Your Call to Action Stand Out

 
Here's another trap that you get caught in: losing the whole purpose of your hero image! 
 
You've worked so hard to make your header wow your users with a visually-arresting, engaging graphics, you've strategically picked your colors, your beautiful typography, too, you've added the perfect emotions-triggering/persuasive words: it's a true work of art!
 
And still: haven't you forgotten about the “main character” itself?
 
Yes, the call to action button! It should be there, right into the spotlight! 
 
It should let your visitors know what you want them to do (besides staring and letting themselves be visually “spoiled” by your hero header).
 
How do you make your call to action stand out and grab their attention?
 
You rely on color or size contrast! It should strike a powerful contrast with the backing image and, moreover, you should empower it with clear, simple and readable words.
 
Let them know that they should “buy” or “subscribe” or maybe “read more” in just a few straightforward words!

 

Add Animation 

 
Movement will always catch the eye!
 
Therefore, it makes a highly efficient attention-grabbing element for a hero image.
 
Now don't think that you'll have to pull off an entire cinematographic experience (you shouldn't go that way, you shouldn't make your hero image way too flashy and overwhelming). 
 
Simplicity is key, remember?
 
Therefore consider going for subtle movements for your header, one that should aim at:
 
  • surprising the users 
  • standing out (from the other “just” text or “just” video featuring ones)

 
How about you?
 
Are you making the most of contrast when you create your own winning hero images? Have you, maybe, discovered other ways of using this deign concept to engage your visitors and to make them “stick around”. “Other” than the ones we included in our list above, maybe? Feel free to share them with us in the comments below!
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

5 SEO Best Practices When Building Your Magento Store
  The eCommerce market is getting more competitive. As the digital world expands at a rapid pace and online stores become the norm, eCommerce retailers must find new ways of differentiating their brands from the competition. A reliable method of building a solid online presence is search engine optimization (SEO).  To generate more organic traffic on your website, you need to improve your search engine rankings. With the right SEO strategies in place, you will not only rank higher on Google but also get more value from your Magento eCommerce store.  Keep reading this article to discover five SEO tips for driving better search engine rankings and organically grow your business.   Tip #1: Optimize Meta Tags.    Title tags and meta descriptions help search engines understand the content on a page. Optimized and well-written meta tags can attract more visitors to your site and increase your organic traffic.  SEO-friendly page titles have between 50-60 characters and include the main keyword from a particular page that you target. When it comes to meta descriptions, their length should be between 50-160 characters and incorporate primary and secondary keywords. Although inserting keywords is essential to improve your SEO, it's also important to pay attention to the way your description sounds. It shouldn't be forced or unnatural.    Tip #2: Realize an SEO-Friendly URL Structure.   When working with Magento, it is advisable to use the following URL structure for your pages:  website.com/category-sub-category/product name/ for product pages website.com/category/ for category pages website.com/category/sub-category/ for sub-category pages   To remove the "index.php" part from your URLs, you need to enable URL rewrites. You can do this by clicking on Stores - Configuration - General - Web, then enter the Search Engine Optimization tab and then click on YES in the Use Web Server Rewrites section.  By doing this, you'll create cleaner, more readable URLs, which will make it easier for you to complete a website migration in the future if that will be the case.    Tip #3: Spend Some Time on Product Descriptions.   As many eCommerce sites sell products manufactured by other companies, the product description they receive from the manufacturer is often the one actually used on the site. Consequently, product pages may end up containing little valuable content that doesn't provide significant insights to visitors. Also, Google doesn't usually rank these websites very high, so you need to start creating your own unique product descriptions.   Tip #4: Accelerate Your Site's Speed.   Today, speed and accessibility are what digital customers are looking for. Around 40% of people abandon a website that doesn't load in less than three seconds. A ranking factor used by Google for mobile is page speed, so it's essential to take all the measures to accelerate your loading speed. Here are some tips for this: Migrate to a new host. Try searching for a Magento hosting package as it will be optimized for Magento's infrastructure and capabilities.  Use browser caching. By doing this, users that visit your website won't need to download the same files each time they enter your site, which improves load speeds.  Don't forget about a content delivery network. There some free options on the market that you can use with confidence.    Tip #5: Leverage Magento SEO Plugins.   Fortunately, Magento has high-quality extensions for boosting your website's SEO, like ReloadSEO or SEO Suite Ultimate. Investing in SEO extensions is a great way of taking your SEO efforts to the next level and improve your SERP rankings and organic traffic.  Or you could let a team of experts like Optasy do the hard work for you. We can help you build your SEO-friendly website and grow your business in the digital world. Don't hesitate to contact us for more details.  Photo credit: Myriam Jessier on Unsplash.     ... Read more
Raluca Olariu / Apr 22'2021
These Magento Extensions Will Boost Your Sales - Part Two
  Our last article discussed some of the critical Magento extensions for marketing and customer experience. This blog post contains valuable insights into other essential Magento plugins that target financial, shipping, and analytics aspects. Keep reading to discover how these extensions can improve your conversion rates.    Magento extensions for payments    Stripe Payments This Magento extension is used for processing credit and debit cards, as well as mobile wallets. If you want to position yourself as a trustworthy seller and deliver safe and secure payment options, Stripe is a must-have.  Benefits: Great integration. Stripe recognizes and accepts all major credit and debit cards and a wide range of currencies. Modern features. With Stripe, you can also use mobile wallets such as Apple Pay or Google Pay.  Compatible with a multi-store scenario.  Provides secure payment processes by using advanced machine learning algorithms.   OneStepCheckout This is a very handy extension that simplifies the checkout process of your Magento store. Shopping cart abandonment is a real problem for online retailers nowadays, and the Magento eCommerce platform offers an overwhelmingly complicated checkout process.  By installing OneStepCheckout, you'll make it easier for your customers to complete a purchase and increase your conversions. Benefits: Accepts all major payment providers. Cost-effective checkout solution. User-friendly and responsive design. This extension looks and works great across various screens and devices. Highly customizable. Adding and removing fields is easy with OneStepCheckout.   TaxJar Sales Tax Automation Sales tax can be a burden for many business owners. Fortunately, TaxJar can do it for you. With its automation capabilities, this Magento extension helps you prepare returns and calculate your taxes more efficiently.  Benefits: Real-time sales tax rates and calculations. Access TaxJar's APIs and real-time sales tax rates at checkout without compromising on the performance of your website.  Seamless and automated filling. With TaxJar's AutoFile feature, you can rest assured that your returns will be submitted correctly, on time.  Global rates. You can also use Tax Jar for taxes across multiple countries with accurate rates.    Magento extensions for shipping   Delivery Date FIne-tuning the delivery schedule for your customer needs will definitely boost your store's credibility and profitability. With Delivery Date, there will be no more missed packages due to the ultimate shipping customizability feature.  Benefits: Flexible. Allows the customer to select the date and time of their delivery.  Delivery notes. Customers can leave comments and provide additional instructions for the delivery.  Exclude dates. Delivery Data allows you to exclude any date from your delivery options.   ShipStation ShipStation powers shipping efficiency of all sizes. Order management is essential for large eCommerce stores, and it can become challenging. This Magento extension supports businesses in managing their shipping without headaches. Benefits: Returns are easy. Returns and refunds are streamlined for better customer experiences. Centralized orders. With ShipStation, you get to keep all your orders and shipment details in one place.  Order confirmation.    Shipping Suite This complex Magento extension provides customizable shipping and logistics for eCommerce stores. Shipping Suite is a 3 in 1 solution that allows you to take complete control over your delivery process through 3 innovative shipping management tools: shipping table rates, rules, and restrictions.  Benefits: Shipping approximations. Your customers are well informed about their shipping in advance thus reducing cart abandonment.  Highly customizable. You can choose which delivery providers to use and select the rates based on location.    Magento extensions for analytics   Google Analytics plugin for Magento 2 Easy yet powerful, this extension helps retailers track their web store's traffic more efficiently.  Benefits: Better customer insights. This extension allows you to track your customer's activity in your store.  Enhanced marketing. With better customer visibility comes better monitoring of your marketing campaigns.   Improved personalization. By understanding your customer's behavior more clearly, you can act upon personalizing their experience on your site.    Advanced Reports This Magento extension helps marketers with data visualization and management. It includes several reports and monitors different sales performance metrics in your store.  Benefits: Specific reports. You can analyze your reports based on categories. Payment and discount tracking. With Advanced Reports, you'll be able to see how your discount codes are performing and which payment methods lead to the most conversions.    Magento extensions for security As security is getting more and more critical in the digital environment, security extensions are a must to keep your online store secure.    Two Factor Authentication  Through this extension, you can improve your protection against fraud and identity theft. The Two Factor Authentication (TFA) algorithm adds an extra layer of security to your website and reduces the risk of cyber theft. Benefits: High compatibility. TFA works with several operating systems.  High security. The secure code sent to your configured smartphone to complete the log-in process is only available for 30 seconds. This prevents someone from hacking your website.  Failsafe. With TFA, your eCommerce site will be secured even if the security of your passwords is jeopardized.    Fraud Prevention To avoid fraudulent purchases and payments, installing this Magento extension is a must as it helps you track and block suspicious payments. Benefits: Automatic fraud detection. The extension automatically blocks purchases that match previous suspect purchases.   Custom blacklisting rules. You can create blacklist rules based on various customer attributions like name, address, ZIP, or IP address.    Conclusion Magento is a reliable choice for building and managing robust eCommerce stores. However, to make the most out of its capabilities, installing Magento extensions is necessary. You're now familiar with the most popular and useful plugins for enhancing and securing your website.  If you're still unsure which extensions you should select for your site, send Optasy a message. We'll gladly support you in your journey towards building your successful eCommerce business.   Photo credit: geralt on Pixabay.  ... Read more
Raluca Olariu / Apr 19'2021
These Magento Extensions Will Boost Your Sales - Part One
  As one of the most popular eCommerce platforms, Magento empowers retailers to build engaging, shoppable customer experiences in the digital world. By leveraging next-generation technology and a massive extension library, Magento helps B2B and B2C organizations create highly personalized shopping experiences for their customers.  Since the level of customization is so high for Magento users, they can often find it hard to choose from so many options and decide which plugins and extensions are truly efficient for their business needs. That's why we've created this article, to shed a light on some of the most useful and reliable Magento extensions that can help you make the most out of your Magento eCommerce website.    Magento plugins for marketing    Facebook Pixel for Remarketing This Magento extension collects data from your customers that browse your products and then runs your ads to those users when they enter the social media platform. You want to keep your product in front of your customer's eyes and here's where retargeting and remarketing play a crucial role.  Benefits: Automatic. Collecting user details is done automatically by Facebook Pixel—no installation is required on your end.  Easy exporting. Facebook Pixel lets you easily export products you want to promote on Facebook. Event tracking. You can personalize the way your customers interact with your brand and content by tracking events in your store and sending that information to Facebook.    Omnisend If you're searching for an all-in-one omnichannel marketing automation tool, then this suite is the right choice for you. Keep in mind that this is not a typical email marketing tool. Omnisend allows integrating multiple channels (email, SMS, web push notifications) in the same automation workflow. This extension can be integrated via an open-source plugin developed by a 3rd party.  Benefits:  Robust automation. In the era of digital workspaces, being able to bring all your channels together and integrate several channels in the same automation workflow is a must.  Easy message building. The visual email composer offered by this extension allows users to use a template or build their content from scratch in minutes. Streamlined targeting. By using segmentation based on profile data, shopping behavior, and customer engagement, targeting is much easier to manage.  Contact capture. With the help of landing pages, embeddable forms, and dynamic pop-ups, you can capture contacts more easily.    Mconnect Customer Specific Product & Price Personalization is a big deal in today's digital world so this extension should be part of your arsenal. How does it work? Let's say you want to personalize a particular segment of customers to receive a specific sale. With this extension, you can update it so only particular customers see your sale prices. The same way goes for on-site product listing so you can show customers only the products they are interested in.   Benefits: Persoalization, personalization, personalization. If you want to thrive in today's competitive digital landscape, your site content and your omnichannel campaigns must respond to your customers' needs. Customization. With Mconnect Customer Specific Product & Price, your customization capabilities are endless and will allow your store to respond to customers with products, prices, and relevant content.  Priority for prices. You have the power to decide which price gets priority for a particular segment.   Magento extensions for user experience   Yotpo Reviews According to a recent study, 91% of 18-34-year-old consumers trust online reviews as much as personal recommendations. Customer product reviews are an invaluable resource for developing customer trust. Yotpo's Magento extension supports you in collecting and publishing reviews on your website from customers that have made a purchase from your store.  Benefits: Social media integration. You can easily share your reviews on social media. Product images. Any customer can upload images with the items they've purchased for more credibility. SEO boost. Use snippets, Google Seller Ratings, and Product Listing Ads to boost your reviews index.   LoyaltyLion Any successful eCommerce marketer knows that a loyalty program is essential to transforming customers into a community. This Magento extension improves the customer experience by allowing you to provide referral codes and rewards to your customers thus encouraging them to share your services with friends and family. Benefits: Loyalty points. With this extension, your loyal customers have the opportunity to earn activity points which they can use later to claim special rewards. 100% customization. You can personalize your shopping program so that it fits your business and customers. Loyalty tiers. Your most loyal users will earn the best rewards which will motivate your shoppers to interact with your brand on a constant basis.   These are the most powerful Magento extensions for eCommerce websites that target marketing and user experience. We'll be back with part two of this article to discuss more details about Magento extensions for payments, shipping, analytics, and security. If you want to expand your Magento web development capabilities and empower your website to build robust digital experiences, check out Optasy's leading services in developing thriving web experiences.   Photo credit: geralt on Pixabay. ... Read more
Raluca Olariu / Apr 16'2021