Beautiful backgrounds are not just something that is cool to have on a website; a website background is one of the critical parts of the websites UX design.

Not only can website backgrounds help you create emotional impact for the users, but they can also help you tell your story creatively and appealingly. That being said, if you want a good web background, there are several things to keep in mind.

You can choose website background images, illustrations, a solid block color, or a combination of those, but picking the right website background is a choice that is not to be made lightly.

With that in mind, today we are going to go over all the essential things that you should consider for your webpage backgrounds.

The Best Practices

Choose the right website background images

no-repeat;center top;;

auto

https://cuveerose.com/us/

Desc

For web backgrounds, you should only pick high-quality images (300 dpi). Keep in mind that you need to make a powerful first impression if you want the users to stay on the site longer for just a few seconds.

Cool images can grab your users’ attention even before the other UI elements load on the page. Therefore, only use high quality visual when designing your pretty backgrounds, but be smart with the file type to avoid slowing down your website. You need a high-quality image that will both look great and not interfere with the site’s performance.

And speaking of the file types, if you are using images with lots of detail for colorful backgrounds, you should go with JPEG. JPEG combines the high quality with the compatibility across different platforms, and the lowest possible file size.

Compression

no-repeat;center top;;

auto

center

https://themes.muffingroup.com/be/internet2/

This is a pre-built website included in Be Theme

https://themes.muffingroup.com/be/splash/

center

left

#008afa

#ffffff

2

Desc

The page loading time is something you should always keep in the back of your mind. High-quality images are only good for your website if you do not sacrifice the website’s speed for the quality. You need the right combination of both the excellent performance and the beautiful look.

Luckily, there are some measures that you can take to ensure that your images are the right size for your website. One of the best things to do here is image compression.

If you’re saving images for the web in Photoshop, you can use the ‘Save for Web’ option that will automatically compress the image to fit the web. If you are not a Photoshop user, you can use one of these free image compressors: Compressor.io,Kraken,TinyPNG, Or any other that you like, for that matter.

Choose the right name for the images

no-repeat;center top;;

auto

Desc

When it comes to any kind of content you are adding to your website, you want it to rank high in the search engines. The same goes for the website background images.

Use the relevant keywords and always put the most important keyword first.

Instead of ‘img1034.jpg’, the image above would perform much better with a name like ‘labrador-retriever-diet-exercise.jpg’ with ‘Labrador Retriever’ being the most important term and ‘Diet’ and ‘Exercise’ being additional descriptors.

If you are choosing a background for your online store, choose the name that matches the product you sell. This way, when somebody searches for the product, the images will show up as well.

Use UI color wisely

no-repeat;center top;;

auto

center

https://parkbench.com/

Desc

Colors are a powerful and impactful detail of every design that can influence how the users see your website and whether or not they want to stick around. However, the excellent color choice, in this case, is not just something easy on the eyes but also something practical that will make the text readable.

Make sure that the text and the background textures contrast enough to make the text scannable and readable. However, too sharp a contrast might be too heavy on the eyes. Try to hit just the right contrast ration for the best effect possible.

Position the website background images right

no-repeat;center top;;

auto

center

https://whitetailgin.com/

Desc

Designing cool backgrounds is not only about choosing the right colors and images but also about positioning them right. For example, a full-screen background image can sometimes detract from other UI elements on the page.

It is all about finding the right balance and about the story you want your image to tell. Generally speaking, we use background images and hero images in two different ways. Hero images are pinned to the header section of a website and relate to the content that sits directly beneath. They are used to tell a specific story or deliver a specific message.

Background images, on the other hand, are visible as the user scrolls down the page instead of being pinned to the page. They are used for creating the overall tone of the website rather than for delivering one particular message.

Background images have to be responsive

no-repeat;center top;;

auto

center

https://themes.muffingroup.com/be/fitness2/

This is a pre-built website included in Be Theme

https://themes.muffingroup.com/be/fitness2/

center

left

#008afa

#ffffff

2

Desc

Responsive design is essential, now more than ever with people preferring their mobile phones and tablets for browsing the internet instead of the desktop computers.

When choosing your website background images for your background design, test how they display on different screen sizes and different browser window widths. Keep in mind that the users’ expectations have grown and they expect the content to adapt to their devices perfectly.

Free Images Download

Let’s take a look at the sources of some awesome free desktop backgrounds of all kinds; abstract backgrounds, free textures, cool patterns, and other free background images.

Pixabay

no-repeat;center top;;

auto

0px

center

https://pixabay.com/

Desc

If you are looking for free backgrounds, Pixabay should be one of the first places you should visit. You will get to choose from over 420,000 beautiful images that will adapt to your backgrounds perfectly.

There are no confusing image licenses to worry about. You can use any Pixabay image without attribution in digital and printed form for both commercial and personal use.

Unsplash

no-repeat;center top;;

auto

center

https://unsplash.com/

Unsplash is a great source of awesome backgrounds and background patterns. You can even subscribe to get10 new images delivered to your inbox every ten days. You can get a free background pic here in the form of a free png or free jpg which you can then alter, copy, and distribute in any way you see fit because Unsplash images fall under the Creative Commons Zero (CC0) license. However, if you want to give back to the community, you can always give credit where credit is due.

StockSnap

no-repeat;left top;;

auto

center

https://stocksnap.io/

The images, textured backgrounds, subtle patterns, tile patterns, etc. found on StockSnap are free from copyright restrictions, and they do not require attribution. If you do not find there what you need today, don’t worry – hundreds of new images are added every week.

The useful feature of this site is the possibility to see the trending photos for getting instant access to what is currently popular. All StockSnap images fall under the CC0 license.

Flickr

no-repeat;left top;;

auto

center

https://www.flickr.com/

Flickr has always been around for quite a while, and it has stayed a great source of free background images for websites. However, you have to be familiar with the Creative Commons license attached to the images of your choice. There are eight license categories and not all images on Flicker fall under the same license.

For example, the images in the Free Use Photos section are available for anyone, and you are not required to give credit to the creator. However, not all images found on Flick can be used in this way.

Pexels

no-repeat;left top;;

auto

center

https://www.pexels.com/

Freerangestock

no-repeat;left top;;

auto

center

https://freerangestock.com/

PicJumbo

no-repeat;left top;;

auto

center

https://picjumbo.com/

Conclusion

Unique backgrounds are some of the creative elements that can make your website really stand out and grab the users’ attention immediately. Above, you can find a list of great source of background images free of charge and choose the best website background images that will fit the style and the voice of your website just right.

no-repeat;left top;;

auto

The post Website Background Images: Best Practices and Free Image Sources appeared first on Be Theme Blog.

What helps to make this trend toward using video so effective?

• We are naturally drawn to moving images. After all, that’s how we perceive our world each and every day.
• Besides the beauty contained in the design itself, video helps us to quickly grasp a website’s message through its emotional appeal.

            Video backgrounds can add a provocative twist to your storytelling techniques.

You don’t want to do is use video for art’s sake alone. Nor, should you decide to use it simply to satisfy the need to go along with a popular design trend. Video backgrounds need to align with the website’s objective. Consequently, they need to have a clear purpose; otherwise they may serve as nothing more than distractions.

How Should You Go About Using Background Video?

If you haven’t used video backgrounds before, you might understandably be a bit apprehensive as to where to start, or what tools or techniques you’ll need. If you’re a Be user, you’ve no doubt discovered that Be has already done the work for you.

With Be, it’s simply a matter of uploading a video, and adding text or other graphical elements. Creating awesome pages is no problem; especially if you keep the following tips and suggestions in mind:

Pay Attention to Contrast

It’s not a hard and fast rule, but videos featuring fewer colors are best. Use lightened text with a dark video, and just the opposite with a lighter video, to ensure your text doesn’t get lost in the imagery or spoil the effect of the video.

Make Activation Optional or Mute the Audio

You’ve probably experienced  that while listening to music while on your computer, you suddenly hear the sound from a video mixed in with it. Video backgrounds can be set to autoplay; but if yours is accompanied by audio, it might be best to let the user decide if and when to activate it.

Audio, when unexpected, and unwelcome, is intrusive, and could lead to a significant home page drop rate.

Partial Height Video is Also OK

Just because full-screen background video is the rage, doesn’t mean you must conform to it. There’s no height requirement from either an artistic or technical point of view. It’s for you to decide. A partial-height video provides ready access to other sections on the page.

Browsers Matter

Most current browser versions will faithfully reproduce your background videos. Legacy versions, Firefox and Internet Explorer for example, may not. File size is also important. If your video has the proper file type and a reduced file size, you’re probably in good shape.

Compress the Video as Much as Possible

Isn’t it fun watching a video that stops and starts while trying to buffer its way through? Your users don’t find it much fun either. Background videos don’t need to be impeccably sharp, crisp, and sexy. Compress the video to a minimal, but acceptable, bit rate to avoid excessive load time and/or interrupted streaming.

            Bigger may be better, but smaller is best when it comes to video background bitrates.

Try using a frame rate of roughly 24 frames per second, and the lowest acceptable bit rate between 750k and 1250k, for optimum results.

Limit the Length of Your Video

Website users are at best an impatient lot. Unless your video is so engaging that it goes viral, you should limit it or less than 30 seconds; or opt for a shorter, looping video since longer videos take longer to download. Looping videos are available on some stock image and video websites. If you can, avoid using one that loops forever, since it can slow down the rest of your page. Adding a pause button is something to consider.

Avoid Excessive Movement

Your background video isn’t intended to serve as your website’s centerpiece. After all, it is a background design element. It should exhibit a combination of smoothness and subtleness, and in no way be distracting.

Account for Devices

Settling for an attractive image might be best if your video isn’t working flawlessly on all devices.

Hopefully, things will eventually improve, but at present, background video on mobile devices leaves much to be desired. Videos don’t always play well on Android devices, while on iOS devices, auto-play videos must be opened to play. If your main objective is to capture mobile users, you’re probably better off using static images.

Are Video Backgrounds Appropriate on Landing Pages?

The answer is, “it depends”. There are good reasons for adding video backgrounds, and good reasons for not doing so. It pays to remember that the purpose of using a video background on the homepage is to help the visitor get to know the brand. When visitors can gain a quick understanding of the brand, and what it promises, they are tempted to stay for a while.

• A background video does not serve the same purpose on a landing page, since a visitor is probably already acquainted with the brand. A background video in this case would probably be looked upon as more of a distraction; and not.

This example might be great for a homepage, but on a landing page its entertainment value would be close to zero.

• If the background video and the landing page have the same objective, and the video helps in accomplishing the objective, promoting an event for example; it could not only be appropriate, but be a winner.
• If the subject matter of the landing page is complex, requires a certain amount of reading, or is presenting a set of rules and regulations, a background video would probably be a distraction, and therefore not appropriate. As a web designer, you don’t want to provide a visitor with information that is not needed or distracting.
• A background video would be appropriate, and even desirable, if it strongly relates to the page’s CTA or strongly reinforces the page’s objective.

If you opt to use a background video on a landing page, make sure added text is readable, and keep it short. Never allow it to become a distraction.

The post Trends in Web Design – Video Backgrounds appeared first on Be Theme Blog.

The designer has a choice. Each website can be built from scratch, with a particular audience in mind, or a one-size-fits-all design tool that can be tailored to fit a given client’s needs can be put into play.

An example:

Be Music

Designing for younger audiences requires a certain fast-paced experience – the UX should be simple and intuitive, and the colors and typography should be in line with the latest trends.

Ways in Which Your Audience Affects Your Design

The challenge you face as a web designer is not only understanding the audience profile for a given category; e.g., food or sports, but for subcategories as well – Mexican food, or soccer. You cannot simply create a design that you find appealing, or one that a casual viewer might find attractive. You have to know the audience, and you have to have a basic understanding of the profile that is in some ways unique to that audience.

• Style – Does the web content need to have a dramatic flair (classical music or opera), or follow a modern, minimalist theme (a creative agency)?
• Colors – Bright, active, colors are usually a good choice for a toy store or a sports studio. For a perfume website, pastels that convey a more feminine atmosphere will usually be preferable.
• Degree of Interaction – Is the audience looking for quick facts (price, location, specials), or are the viewers willing to watch a brief video for detailed, in-depth information? Are the viewers willing to take the time to complete a survey or post a comment?
• Fonts – Font types can be every bit as powerful as colors. Choose a font or fonts that will set the right relationship with the audience.

Be Kebab

As an example of how fonts can be used to connect with an audience having passion for food –a handmade font is used to create a sense of familiarity.

Think About Possible Goals Your Audience May Have

You can often help your design process move along more smoothly by putting yourself in the shoes of the audience. This is usually not too difficult for a small business’s online store, where the home page layout tells the audience they’ve come to the right place.

Be Tiles

This home page is quite straightforward. It can serve a variety of audiences, all of which have something in common – tiles, and/or home improvement.

While this often works for smaller businesses, an audience’s goals may be more complex for larger companies or companies that are more sophisticated, or offer a number of services or product lines. Taking the tile company as an example; the design of the site’s inner pages may need to take into account these potential situations:

• A buyer, looking to see what is available, and either wishes to place an order, or simply wants to compare prices.
• An architect, looking for a long term arrangement with the company as a source and provider of tiles.
• A domestic or international distributor, interested in forming a partnership.
• A contractor or construction worker, looking for tips on how to use tiles to create various montages.

It would be awkward to attempt to address all of these audience profiles on a home page. Attempting to do so would add clutter, and is unnecessary. The home page addresses what each of these visitors has in common – an interest in tiles. You still need to take each audience type into account, and address their specific needs, in the website pages.

Defining the Audience

Having an overly simplistic understanding of the audience can be an easy mistake for a web designer to make. Assuming your audience will be mostly feminine, or mostly sports-loving males can result in poor marketing decisions should those assumptions not happen to be accurate. You may feel your web design is the right one, but your client may not receive the amount of traffic anticipated or the conversion rate necessary to make a profit. What you have to do is, starting from the demographics, define your audience in terms of age, gender, and interests – the latter expressed through keywords they are most likely to use when they search.

Be Tea

Notice the way in which this website clearly speaks through the choices in terms of fonts, graphic element, and structure, for a pleasure-seeking audience with a taste for fine products.

The results of your analysis should help you decide on what visitors should see on the home page that would engage them and encourage them to look further.

In Conclusion

With its ability to take into account how different audiences perceive and react to website layout, structure, and interactions, Be Theme, the one-size-fits- all “monster” theme, makes an ideal partner for the web designer confronted with the task of producing winning websites for a wide variety of niches and topics

This theme, the biggest WordPress theme ever, features more than 200 fully-customizable, pre-built websites like the ones shown here. They cover virtually any topic you are apt to be confronted with. They have been carefully engineered, and embed certain nuance details designed to attract and engage website visitors.

Although you can create any type of website you want with this powerful, yet easy to use tool, you still have work to do. You’ll have to understand your audiences, how they affect your design, and what their goals are. Once you’ve done that, and chosen just the right pre-built website to work with, Be Theme makes the rest easy.

The post Addressing Different Audiences in Web Design appeared first on Be Theme Blog.