- Design Trend: How To Use Blurred Images On Your Website Without
- Design Trend: How To Use Blurred Images On Your Website Page
- Design Trend: How To Use Blurred Images On Your Website Url
- Design Trend: How To Use Blurred Images On Your Website Free
Something that was modern yesterday is completely out of date today. Thus, when looking for contemporary website design, be sure to inspect the trends in web design. New types of modern website examples are appearing every day, and we could share them with you every day. Let us name the best modern website samples of a week for you. Let’s Enhance is a new free website that uses neural networks to upscale your photos in a way Photoshop can’t. It magically boosts and enhances your photo resolution like something straight. The color scheme is rooted in the main image – in this case a video – rather than a background or colorful user interface elements. This trend in color is becoming more common because designers are using full-screen images to tell a brand story. Blurring an image completely and adding text on top of that is a great way to capture people's attention easily. Use Fotor's blur image tool to sharpen your images first. On the blurred image, you can add the text font and color to the photo, make the mysterious atmosphere your photo exudes.
Summary: If you place text over a background image, make sure it’s readable by providing adequate contrast. Subtle tweaks can increase the contrast without affecting the overall aesthetic of the site.
A well-chosen visual adds interest and can set the tone of a website, in addition to (hopefully) conveying some meaning. Eyetracking research has shown that people are attracted to information-carrying photos, when the images are related to the user’s current task. (If instead the images appear to be purely decorative, they will likely be completely ignored.) Images can quickly prompt an emotional response in viewers and can spur them into taking some type of action. This ability of an image to elicit a positive visceral response has caused many designers to create interfaces that are highly visual, downplay text, and often contain large background images or videos. (Large pictures are frequently encountered in conjunction with minimalism, although they do not quite define this design trend.)
Because images play such an important role, often designers end up placing text over an image to leverage the attention-grabbing aspect of the photo while providing text-based content to communicate actual information. However, these endeavors commonly backfire, usually when the contrast between the text and the background is too low. According to accessibility requirements for color contrast, text that is not purely decorative or part of a logo should have a contrast ratio of at least 4.5:1 (or 3:1 for large characters, defined as an 18-point font, or a 14-point bold font).
Subtle Tweaks Make a Big Difference in Usability
Placing text over an image need not be completely avoided, but special care must be taken to ensure that the text is both legible and readable to users. (As a reminder, legibility refers to the ability to distinguish the individual characters, while readability refers to the ability to actually process the meaning of the words.) When text is difficult to decipher, readers are forced to choose between straining their eyes and skipping over the content. Rather than risk that users ignore your text, implement small changes to the design to increase the contrast between the text and the background.
Don’t:
Do:
When choosing to place text over an image, consider both the text color and the main color of the image. Images with mostly light-colored backgrounds—or images edited to appear faded—are not well suited to white text because the colors are too similar. In these situations, the background will need to be darkened in order to provide enough contrast. This can be done either by processing the image itself, or by adding a semi-transparent black gradient over the image in the CSS. A tool such as the Color Contrast Analyzer Chrome browser extension from NCSU can help determine when the background has been sufficiently darkened to provide adequate contrast for the overlaying text.
Don’t:
Do:
Adding a blur effect to photos certainly affects the aesthetics and the branding of a site, but is a good alternative to darkening every image. Additionally, blurring the portion of a photo over which the text will be displayed minimizes likely legibility issues, since the large variation of colors and of brightness levels diminishes the ability to distinguish the clear outlines of the characters. Positioning the text area in a consistent location near the edge of images allows the contrast-adding blur effect to be confined to that particular area, and thereby affect the image to a smaller degree. The lower portion of photos in particular tends to lend itself well to added effects such as a blur, a darkening-gradient overlay (AKA “floor fade”), or a semitransparent colored background for that area of text.
Don’t:
Do:
Consider the full range of possible images that may be used before deciding on a technique for handling the contrast of overlaying text. Often a solution may work for one type of image—for example, those that are mostly dark or which have a shallow depth of field—but not work well for others. If both dark and light images may be included in a design, ensure that the chosen method will provide a high-enough contrast for the worst-case background image and text placement. Just because you did something to help increase the contrast doesn’t necessarily mean that you’ve added enough contrast to make the text truly readable.
Conclusion
There is no need to choose between creating a usable design and an aesthetically pleasing design—both can be achieved simultaneously if attention is put toward both goals. When combining emotion-provoking imagery with informational text, ensure that the text is readable by creating a high-contrast ratio between the text and its background. Use effects such as a semiopaque overlay (either covering the entire image or just the text portion), a blur, a text shadow or outline, or a combination of these techniques. Remember that it’s not enough to make it possible for people to use the site, which is the definition of accessibility. The site must also be easy and pleasant—qualities which require good usability and little eyestrain.
Blurred backgrounds have become popular on the web, riding on the trend to large images. Blurred backgrounds are characterized by soft colors and faded, unclear photo backgrounds. Page loading times tend to be faster as the image resolution in a blurred image does not have to be as high as an in-focus image. Text (or a sharp-focus foreground image) on top of a blurred image is more readable than text overlaid on a sharp or detailed image. The blurred background image does not distract attention from the main content.
Design Trend: How To Use Blurred Images On Your Website Without
When can you use a blurred background? When you want to create excitement; when you want to leave something to the imagination; when you’re hinting at the future without disclosing too many details… such as a project , through a “Work in progress” page; a performance; a product, app or website to be launched, through a “Coming soon” landing page; when you want to focus on the promise of what a political candidate can do for the country – in a campaign website, for instance. Think of the content of your web page or website when you decide to use a blurred background in your design. When you’re hinting at “more“, when you’re communicating “”many“- a range of products, or different kinds of people – say “all categories of riders“, or a number of restaurant reviews – then you may decide to keep the details of your image indistinct and thereby simplify the design. For example, you may choose not to show a particular group of people, or a particular restaurant in sharp focus as this would exclude others, and also make your background “too busy”. A blurred image works well to provide a context for your content, while leaving the details unclear. At the same time it helps text and foreground images to stand out more clearly.
Why use blurred backgrounds?
- Page loading times tend to be faster as the image resolution in a blurred image does not have to be as high as an in-focus image
- Text (or a sharp-focus foreground image) on top of a blurred image is more readable than text overlaid on a sharp or detailed image, as the background image (if in sharp focus) would then divert attention from the main content.
- Create excitement – convey something new or coming soon: for instance, brand launches, special offers
- Create a feeling of movement in a static picture, especially effective for sports, games and dance websites
- Suggest energy
- Stay within the realm of the imagination – for example, in websites for artistic or creative people, or a theme park, or a movie, or projects in progress for an engineering, technology or interior design firm
- Create a distinctive look
- Create a cool effect
Ways to handle blurred backgrounds and images
- Selective blurring of image components: Here you may be working with a single image or with more than one. You could decide to partly blur an image so that your text stands out on it better. Or you may superimpose several sharp focus image components on a blurred background.
Featured here are some great-looking website templates with blurred backgrounds. Check them out!
OneGenius – One Page Flat Portfolio PSD Template
Raaga – Responsive Parallax Template for Bands
County Government Responsive Website Template
Elevate: Background Oriented Portfolio WP Theme
Millenium Responsive OnePage Portfolio
Design Trend: How To Use Blurred Images On Your Website Page
Corsica Responsive App Landing Page
Design Trend: How To Use Blurred Images On Your Website Url
Cycling Adventure Club Responsive Website Template
Design Trend: How To Use Blurred Images On Your Website Free
A blurred background brings a clear image in the foreground into sharp focus while keeping the nuances soft and appealing. The portrait of a person – a software engineer, architect, designer, sportsman, musician or other professional becomes more likeable and friendly against a blurred background, which can put the person into the context of his work milieu without letting it distract the reader. A product like a camera, teapot or a cellphone acquires a sophisticated and elegant look against a blurred background. Blurred header slides work well to invite a visitor into a website, as they provide a softer approach and broader appeal. The rest of the site design uses other elements of good website design to present selling content and information and convince the user to try the product or service.