{"id":66236,"date":"2025-02-17T13:05:49","date_gmt":"2025-02-17T13:05:49","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2025\/02\/17\/my-tips-for-designing-great-website-imagery-with-canva-hubspot-3-more-tools\/"},"modified":"2025-02-17T13:06:48","modified_gmt":"2025-02-17T13:06:48","slug":"my-tips-for-designing-great-website-imagery-with-canva-hubspot-3-more-tools","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2025\/02\/17\/my-tips-for-designing-great-website-imagery-with-canva-hubspot-3-more-tools\/","title":{"rendered":"My Tips for Designing Great Website Imagery [With Canva, HubSpot, + 3 More Tools]"},"content":{"rendered":"

<\/a>\n<\/p>\n

\n

I\u2018ve been designing photographs for web sites for about seven years now, so I\u2019ve come throughout many instruments that make the method easy.<\/p>\n

\"The<\/div>\n

<\/p>\n

If you wish to create or incorporate compelling photographs into your model\u2018s web site for the primary time and also you\u2019re unsure the way you’re in luck.<\/p>\n

\"Free<\/a><\/span><\/span><\/p>\n

On this put up, I am going to share my ideas and favourite instruments for designing web site imagery that may make your website stand out and delight your guests.<\/p>\n

Desk of Contents<\/strong><\/p>\n

<\/p>\n

What’s web site imagery?<\/h2>\n

Website imagery<\/a> pertains to any visible parts on a web site, comparable to illustrations, pictures, movies, or graphics. It enhances a web site’s high quality, expertise, enchantment, share info, and delight guests.<\/p>\n

<\/p>\n

Forms of Web site Imagery<\/h2>\n

Along with the kinds of photographs I discussed above, different kinds of web site imagery are:<\/p>\n

Logos<\/h3>\n

It could be an understatement to say that logos are necessary to your web site. I\u2018d argue they\u2019re essential to constructing model recognition, belief, and credibility.<\/p>\n

Denim firm Levi\u2018s contains its brand in its web site\u2019s banner, and irrespective of the place you click on or scroll, the emblem stays a relentless presence. Levi\u2018s brand lets me, as a shopper, know that the web site I\u2019m visiting is authentic, so I can belief I am buying from the proper model.<\/p>\n

\"screenshot<\/p>\n

Source<\/a><\/em><\/p>\n

Infographics<\/h3>\n

Infographics are photographs meant to share info or knowledge. The instance beneath makes use of a mix of graphics and texts to elucidate the hair donation course of.<\/p>\n

Infographics are a good way to simplify seemingly difficult ideas and make them extra digestible in your viewers.<\/p>\n

\"infographic<\/p>\n

Source<\/a><\/em><\/p>\n

GIFs<\/h3>\n

Some say GIFs are going out of fashion, particularly amongst Gen Z, however you may must pry GIFs from my millennial fingers. GIFs are quick, looping photographs and animations usually used to convey feelings, humor, reactions, or info. My associates name me the GIF Queen as a result of I’ve a GIF for each state of affairs.<\/p>\n

3D renderings<\/h3>\n

3D renderings are 2D photographs created from 3D fashions. They’re usually used to provide digital excursions of buildings or to provide audiences an thought of how a 3D object would look in actual life. I most frequently see them after I’m on-line looking for furnishings, and also you in all probability have, too.<\/p>\n

\"3d<\/p>\n

Source<\/a><\/em><\/p>\n

<\/p>\n

Suggestions for Creating Nice Web site Imagery<\/h2>\n

I\u2018ve realized from my days as a digital journalist and content material creator that creating glorious web site imagery doesn\u2019t must be troublesome. All you could do is the next:<\/p>\n

Use harmonizing colours.<\/h3>\n

Colours that conflict in your web site can create disharmony and distract your viewers. Worse, the fallacious coloration scheme could make your web site obscure or learn. So, attempt to harmonize colours in your web site, particularly when designing graphics.<\/p>\n

I like utilizing Canva’s interactive color wheel<\/a> to find out what colours harmonize. This manner, I solely want to choose a coloration and mixture to design a color-balanced graphic.<\/p>\n

\"screenshot<\/p>\n

Source<\/a><\/em><\/p>\n

I am not going to provide you a full crash course in coloration idea, however I can break down three easy examples of harmonizing colours for you to bear in mind.<\/p>\n

1. Complementary colours<\/strong> are colours which might be immediately throughout from one another on a coloration wheel. For instance, yellow is immediately throughout from violet on the colour wheel. This mix creates excessive distinction and can stand out to the human eye.<\/p>\n

\"screenshot<\/p>\n

Source<\/a><\/em><\/p>\n

2. Analogous colours<\/strong> are adjoining to one another on the colour wheel, like golden yellow, yellow, and chartreuse. Collectively, these colours can create a way of unity and calm for the viewer.<\/p>\n

See the instance beneath. Really feel calm but?<\/p>\n

\"green<\/p>\n

Source<\/a><\/em><\/p>\n

3. Triadic colours<\/strong> are evenly spaced across the coloration wheel and kind a triangle. Examples of triadic colours are purple, yellow, and blue, or orange, inexperienced, and purple.<\/p>\n

Under is a website that makes use of orange, inexperienced, and purple collectively in its imagery.<\/p>\n

\"screenshot<\/p>\n

Source<\/a><\/em><\/p>\n

Use model colours.<\/h3>\n

If you wish to enhance cohesion and model recognition, think about using your model colours all through your web site imagery. Goal, for instance, is acknowledged by its purple and white bullseye, so it makes use of variations of purple and white all through its web site.<\/p>\n

\"screenshot<\/p>\n

Source<\/a><\/em><\/p>\n

Upon getting your colours discovered, guarantee the photographs you create are high-resolution and never pixelated. Excessive-quality photographs are clear, make your web site look skilled and authoritative, and will not flip off your web page guests.<\/p>\n

Use unique photographs moderately than inventory photographs every time attainable, and keep away from utilizing photographs that violate copyright. Unique photographs enhance your web site’s authority and add authenticity to your model.<\/p>\n

Lastly, when attainable, use alt textual content, which describes the content material of your picture and helps search engine crawlers perceive it. This may enhance your website’s visibility and rating.<\/p>\n

Plus, it makes your website extra accessible as a result of display screen readers analyze the alt textual content and convert it to display screen parts, making certain an equal expertise for all guests.<\/p>\n

<\/p>\n

How I Use Canva for Web site Imagery<\/h2>\n

I usually use Canva to create infographics and featured photographs. Its integration with Hubspot is most useful as a result of I can entry Canva immediately inside HubSpot.<\/p>\n

Pre-made backgrounds and pictures are already uploaded right into a folder particularly for HubSpot content material entrepreneurs like myself. I merely begin by selecting a HubSpot-specific background I like.<\/p>\n

If I interview somebody for the put up, I am going to take the headshot of the interview topic and place it in entrance of the background.<\/p>\n

I am going to then modify the headshot by eradicating its background and clicking the \u201cEdit\u201d button, altering its color-grading, and including any impact I feel will assist it pop.<\/p>\n

Then, after I’m happy, I can hit the request approval tab and have my teammates look over the picture earlier than utilizing it. Lastly, as soon as the picture is prepared, I add it into the weblog put up. Simple peasy!<\/p>\n

<\/p>\n

5 Web site Imagery Instruments<\/h2>\n

I\u2018ve been utilizing Canva for nearly 10 years, and it’s my favourite web site imagery device. Nonetheless, I\u2019ve additionally discovered the next instruments helpful, and also you may too.<\/p>\n

1. Unsplash<\/h3>\n

Unsplash provides hundreds of thousands of free, high-resolution photographs which might be approach cooler than your common inventory photograph. I do not use Unsplash for my HubSpot content material, however I’ve used it for my ardour initiatives and private content material creation.<\/p>\n

In my expertise, most contributors to Unsplash are skilled photographers beneficiant sufficient to supply beautiful, distinctive pictures which might be free to make use of underneath the Unsplash license.<\/p>\n

\"screenshot<\/p>\n

Source<\/a><\/em><\/p>\n

2. Pixlr<\/h3>\n

This free photograph editor works lots like Photoshop and permits you to edit inside your browser, smartphone, or desktop. I have never used Pixlr shortly, however I bear in mind loving how simple and intuitive it’s, particularly for newbie editors or creators with no enhancing expertise.<\/p>\n

\"screenshot<\/p>\n

Source<\/a><\/em><\/p>\n

3. HubSpot’s AI Picture Generator<\/h3>\n

So far as text-to-image instruments go, HubSpot’s AI Picture Generator is top-tier and straightforward to make use of. All I have to do is enter a textual content immediate after which select a mode and orientation. From there, a picture will likely be generated, and I can enter it into my HubSpot weblog.<\/p>\n

\"screenshot<\/p>\n

Source<\/a><\/em><\/p>\n

4. Pexels<\/h3>\n

Pexels is a web site boasting royalty-free, high-quality inventory pictures and movies. It is similar to Unspash within the sense that almost all contributors are skilled photographers and videographers attempting to get their work in entrance of others.<\/p>\n

\"screenshot<\/p>\n

Source<\/a><\/em><\/p>\n

Now, you\u2018re prepared to start out designing glorious web site imagery in your firm! Bear in mind, you don\u2019t have to be a photographer, designer, or somebody with a particular eye for coloration to create wonderful graphics and pictures in your web site.<\/p>\n

All you want are the best instruments, slightly persistence, and a willingness to experiment to see what works. Good luck!<\/p>\n<\/div>\n