My tips for designing great website pictures (with canva, hubspot, + 3 other tools)

My tips for designing great website pictures (with canva, hubspot, + 3 other tools)

I have designed pictures for websites for about seven years, so I came across many tools that simply make the process.

When you want to create or integrate convincing images for the first time and are not sure how you are lucky.

Free download: 77 examples of brilliant web design

In this post I will share my tips and favorite tools for designing website pictures with which your website stands out and inspires your visitors.

Table of contents

What are website pictures?

Website pictures refer to visual elements on a website such as illustrations, photos, videos or graphics. It improves the quality, experience, calling, exchange of information and inspire visitors.

Types of website images

In addition to the types of images that I mentioned above, there are other types of website pictures:

Logos

It would be an understatement to say that logos are important for your website. I would argue that they are crucial for building brand recognition, trust and credibility.

The Denim company Levi’s contains its logo into the banner of his website. Regardless of where you click or scrolling, the logo remains a constant presence. Levis Logo lets me know as a consumer that the website that I visit is legitimate so that I can trust that I buy on the right brand.

Screenshot of the Levi target side that shows his logo in the corner

source

Infographics

Infographics are images that should exchange information or data. The following example uses a combination of graphics and texts to explain the hair donation process.

Infographics are a great way to simplify apparently complicated concepts and make them more digestible for their audience.

Infographic shows how to donate hair

source

Gifs

Some say gifs go out of fashion, especially under gen, but they have to delete gifs from my thousand -year -old fingers. GIFs are short, loop images and animations that are often used to convey emotions, humor, reactions or information. My friends call me the GIF queen because I have a gif for every scenario.

3D renderings

3D renderings are 2D pictures created from 3D models. They are usually used to give virtual tours through buildings or to give the audience an idea of ​​what a 3D object would look like in real life. I see them most often when I can shop online for furniture, and you probably have it too.

3D rendering of a living room

source

Tips for creating great website pictures

I learned from my days as a digital journalist and content creator that creating excellent website pictures does not have to be difficult. All you have to do is the following:

Use harmonizing colors.

Colors that collapse on your website can create disharmony and distract your audience. Even worse, the wrong color scheme is difficult to understand or read your website. So try to harmonize colors on your website, especially when designing graphics.

I like to use it Canvas interactive color wheel To determine which colors harmonize. In this way I only have to select one color and combination to design a color graphic.

Screenshot of the canva coloring tool

source

I will not give you a complete crash course in color theory, but I can break down three simple examples of harmonizing colors so that you can take into account.

1. Complementary colors Are colors that stand directly from each other on a color wheel. For example, yellow is directly opposite violet on the color wheel. This combination creates a high contrast and stands out from the human eye.

Screenshot of the La Lakers logo

source

2. Analog colors are side by side on the color wheel, such as golden yellow, yellow and chartreuse. Together, these colors can create a feeling of unity and calm for the viewer.

See the example below. Do you already feel calm?

Green and yellow picture of flowers

source

3. Triadic colors Are evenly around the color wheel and form a triangle. Examples of triadic colors are red, yellow and blue or orange, green and purple.

Below you will find a place that uses orange, green and purple in its pictures.

Screenshot of the website with green, purple and orange colors

source

Use branded colors.

If you want to promote cohesion and brand recognition, you should use your brand colors in your website pictures. The goal is recognized, for example, by its red and white Bullseye, so that it uses variations of red and white on its website.

Screenshot from Target.com Landing Page

source

As soon as you have found your colors, make sure that the images you create are high -resolution and not pixelated. High -quality pictures are clear, make your website look professional and decisive and your side visitors do not switch off.

If possible, use original images instead of storage images and avoid the use of images that violate copyright law. Original pictures increase the authority of your website and give your brand authenticity.

If possible, use the old text that describes the content of your image and helps search engine crawlers to understand this. This can increase the visibility and ranking of your website.

In addition, your website will be more accessible because screen readers analyze the Alt text and convert it into screen elements to ensure the same experience for all visitors.

How I use canva for website pictures

I usually use Canva to create infographics and pictures presented. The integration into Drift Kings Media is the most helpful because I can access Canva directly in Drift Kings Media.

Prefabricated backgrounds and images are already uploaded to a folder for Drift Kings Media content. I just start choosing a hub-spot-specific background that I like.

If I interview someone for the contribution, I will take the head shot of the interview and put it against the background.

I will then adapt the headshot by removing its background and clicking the “Edit” button, changing its color gradation and adding every effect that I think helps to pop it.

If I am then satisfied, I can agree to the request tab and let my teammates look over the picture before I use it. As soon as the picture is finished, I upload it to the blog post. Just peasy!

5 Website pictures -Tools

I have been using Canva for almost 10 years and it’s my favorite website -Imager -Tool. However, I also found the following tools useful, and they could.

1.

Unsplash offers millions of free, high -resolution images that are much cooler than an average stock photo. I do not use Unsplash for my lifting spot content, but I used it for my passion projects and my personal content creating.

In my experience, most participants in Unsplash are generous enough to provide beautiful, unique photos that are free to use under the license of unsplash.

Screenshot of the Unsplash website shows a variety of concert pictures

source

2. Pixlr

This free photo editor works Photoshop and enables you to edit your browser, smartphone or desktop. I haven’t used Pixlr for a while, but I remember how simple and intuitive it is, especially for beginners editors or creators without processing experience.

Screenshot of the Pixlr target side

source

3. Drift Kings Medias KI image generator

With regard to text-to-image tools, the AI ​​image generator from Drift Kings Media is first-class and easy to use. All I have to do is to enter a text request and then select a style and an orientation. From there, a picture is generated and I can enter it in my Drift Kings Media blog.

Screenshot of the HubSpot -Ai -Ai -Agora Generator

source

4. Pexels

Pexels is a website with royalty -free, high -quality stick photos and videos. It is very similar to Unspash in the sense that most participants are professional photographers and videoographers who try to present their work before others.

Screenshot Pexel Landing Page

source

Now you can start with the design of excellent website pictures for your company! Remember that you do not have to be a photographer, designer or someone with a special eye for color to create amazing graphics and pictures for your website.

All you need are the right tools, a little patience and the willingness to experiment to see what works. Good luck!

Want Latest Updates in Your Inbox?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top