From Figma To Webflow: A Step-By-Step Guide (2023)

Choose The Right Format

If you’ve been dealing with slow pages, choosing the right format is what separates you from having buttery loading times. 

Before tying together your website with appealing, on-brand imagery, make sure you’ve chosen the best file type to go with your needs. The different usable file types are as follows:

• PNG – This format produces higher quality images, but is also very large file size. We wouldn’t recommend using PNG’s as product images. It was created as a lossless, but it can also be lossy. (We’ll get to explaining the difference between lossless and lossy as you scroll ahead). Complex designs, infographics, images with lots of text in them, and logos can ideally be PNGs. PNGs give you beautiful, crisp lines, allowing you to zoom in and not lose any quality. They also support transparent backgrounds, making it ideal for logos.
• JPEG – This popular format uses lossy and lossless optimization. Unlike with PNGs, there’s a good balance between quality and file size. In eCommerce, JPEGs will be your best bet for your product images, especially if there are several. You shouldn’t have to sacrifice image quality and JPEGs provide the best quality for the smallest file size.
• GIF – This format only uses 256 colors. They are of low quality and can only be used for simplistic images, such as icons and decorative images. It’s also the best choice for animated images. It only uses lossless compression. Never use GIFs for large product images. Use GIFs for thumbnails and decorative images only. Or you could get creative and make custom Instagram stickers for promoting your brand on your IG stories.

PRO TIP: Opt for the 24-bit PNGs instead of the “8 bit” since the former offers better quality and a much more versatile array of colors. But be wary of using too many decorative images since too many of them can affect your load times.

Know The Difference Between Lossy & Lossless Optimisation

You must save your visitors from a less than perfect user experience. To do so, one must optimize images to ensure faster load times. Using a plug-in or script, optimizing images is the process of decreasing image file size. The goal here is to speed up the load time of the page. As you’ve read through the last section, Lossy and lossless compression are two methods that were referred to a lot.

Lossy optimization restores the large file to its original form with minor loss of some unnoticeable data, while lossless compression restores the large file to its original form without any loss of data.

Identify Your Images & Make Alt Texts Your Best Friend

While Google can identify text extremely well, it is still a bit iffy in terms of images. So you must make sure your nomenclature is intact and easy to understand. Alternative text, commonly known as alt tags gives search engines a basic idea of what each image is about. However, they are not visible to your average visitor. Alternative text is a big win for website accessibility since it also helps visually impaired visitors navigate your site with audio-based software. And improving your website’s accessibility is a great way to improve your search rankings. Be sure not to stuff it with keywords. Use plain, understandable language with one targeted keyword. So it is imperative to fill in the Alternative Text field when you’ve added an image to your site.

Now, let’s say we are an exciting new gym, coming soon to your neighborhood. We are trying to find images for our website. We downloaded a stock image off Unsplash and it was named “photo-1534438327276-14e5300c3a48.jpg”. Now obviously, this needs to be renamed. We’d rename it to something simple like “choquer_gym_weight_training_1”. Once we upload it to our hypothetical gym’s website, we have to make sure to fill out the alt text, which would be: ‘Choquer Fitness Weight Training’. Given the example, this should help you understand how to rename and alt tag your images efficiently.

Using SVGs Can Make The Biggest Difference

Another good method would involve the use of SVGs, or ‘scalable vector formats’, with the other images you have on your site. SVG works great for logos, icons, text, and simple images. Here’s why:

• SVGs are known to be super scalable on browsers as well as photo editing tools.
• You can actually see the difference in quality on a small SVG against a bulkier PNG and JPEG equivalent in terms of gradients. The SVG’s gradient is extremely smooth, while banding can be seen on JPEG & PNG’s. (BEWARE: SVG’s don’t work with Illustrator gradient meshes)
• Google indexes SVGs, the same way it does PNGs and JPGs, so you don’t have to worry about SEO.
• SVGs can be your trump card since they are traditionally (not always) smaller in file size than PNGs or JPGs. This can result in faster load times.

Make Sure To Optimize Your Thumbnails

Every good eCommerce site will use well-optimized thumbnail images, especially on home and category pages. The goal is to quickly showcase products without taking up too much space and cluttering your webpage. Thumbnails are great, but can sometimes backfire if not optimized well. In turn, your page load speeds end up taking a hit. If they prevent your home and category pages from loading quickly, you could lose a potential lead. So make your thumbnail file sizes as small as possible. Remember that the collective impact of your thumbnails will have a noticeable impact on your page’s load time.

PRO TIP: Chance your alt attribute text and ensure not to duplicate text that you would use for the larger variants of the same image. In fact, make sure your alt texts are very different for each size of the same image.

Summary & Quick Pointers

• Rename images so that it makes more sense to you. No keyword stuffing. No fluff.
• Use GIFs if you need animated imagery.
• Shrink down decorative images as much as you can. For borders or simple shapes, make them PNG-8 or GIFs.
• If all fails and you can’t seem to compress a JPEG more than what you already have, try SVGs.
• Focus on image dimensions instead of its quality. So don’t worry about Dots Per Inch (DPi) or Pixels Per Inch (PPi) since they only affect an image's print quality, but not how it’s displayed on the web.

It’s no easy feat to create a website that’s crafted to enhance your brand awareness. 

Brand awareness is the degree to which customers associate your brand with a product or service. There are large companies which are perfect examples of this. Consider the following list of scenarios when thinking about fundamental products or services: 

• When considering how to get home when you’re out with friends, did you think “We’ll just Uber back” or “Let’s get a rideshare back?”
• At a restaurant, did you or your friend order a Coke, Pepsi or just a cola? 
• When shopping for new running shoes, did you ever specifically think to get Nike, Adidas, or Reebok branded shoes?
• When searching for something on the internet, did you think/say “I’ll search for it” versus “I’ll Google it?”

The list goes on, but you get the point. If you create a website as a smaller business, it’s fine if your brand can’t reach the eponym level of Kleenex. There are smaller ways to highlight the success of your brand awareness, such as:

• Customers who Google search your branded terms or business name in search queries.
• Customers are selecting your brand over cheaper competitors.
• Target customers have general knowledge of who you are and what you do. 
• A social media user who follows your page knows your next post will be funny.

The second list has more achievable elements. In this blog, we’ll share some sound advice to help you create a website for brand awareness building. 

Write Compelling Blog Content 

Business owners often have too much unnecessary knowledge for their customers. The Curse of knowledge is a cognitive bias which assumes customers have the same level of expertise to understand you. Thankfully, blogs can help you with this problem.

Business owners share their knowledge in long-form writing while sharing blog posts. The positive aspects are continuous and scalable as you create a website. Blog posts are a method to establish credibility and give information to foster customer trust. While writing frequently, businesses remain in the spotlight while educating new and current customers about their competencies. 

How frequently should you blog? Most experts agree at least once a week, but to retrieve the best return, blogging about 11 times a month hits the sweet spot. Make sure you don’t sacrifice blog quality just for the result of more blogs. 

Additionally, blogs are another method to enhance Search Engine Optimization (SEO). To create a website with proper SEO, a strategy needs to be devised first, involving keyword research, traffic and search intent. More can be read about this in our SEO Tactics blog. 

Create a Website With Well-Designed Infographics

Are you drawn to pictures rather than words? Infographics represent information in a format that’s easy to digest at a glance. They involve engaging readers, breaking up text and even for compiling shares on social media. 

Infographics are prime methods build brand awareness. If you create a website with infographics, ensure your brand name and logo are somewhere attached to the graphic. When it’s shared on the internet, it’ll be like a poster for your business. Since it can be referenced, it’ll also grow trust and credibility for your organization. Infographics can be useful for backlinks to your website as well. 

Produce Useful DLC  (Downloadable Content)

Downloadable content is similar to an infographic and a blog post. A very common example is a case study, white paper, a guide pamphlet, or another high-valued PDF. It can be used for qualified and interested clients who are already intrigued by your offering. They’re also trackable and are a useful tool to push leads into paying customers. 

Downloadable Content is often free and is given simply by the customer giving their name and/or an email address. As long as you’re careful not to send too many irrelevant emails, you can use their email address to nurture a lead into a future customer. 

You don’t need just one type of DLC either. Do you have multiple buyer personas? If so, what information do you think they desire most from your website? While you create a website with DLC, ensure you consider all of your buyer personas and even including multiple downloadable options based on what information they want. 

Use Your Social Media Channels

Brand awareness and social media go hand in hand. Customers will follow your brand to see what posts and content you create. Social media outlets, like facebook, instagram and twitter, have methods to boost posts to capture wider audiences. These platforms often have filters to fine tune targeting options for you customers, helping you market more efficiently. When you create a website, don’t forget to have your social media channels linked to it and vice versa. 

If you have any questions, contact us!