This month, it’s all about the images. All of the design trends we’ve seen relate to the images you choose—or don’t choose—for your project and how you use them.
Here’s what design is all about this month.
1. Floating Images
Sometimes you design the grid on purpose. Other times you are designing on a less clear grid. One of these things is happening with the website design trend of floating images.
Here, you’ll see images and image containers that don’t seem to have any direction for their placement. They may or may not include animation, which further emphasizes the floating effect.
Floating images can include:
- Clips that are not anchored to anything or any container
- Images spread across the canvas
- Images in oddball placements that don’t seem to serve a purpose
- Any image or element with obvious off-grid positioning or spacing
- Images that use different orientations or lack depth of perception
The challenge with this style is that it looks cohesive and organized or it could turn into a maddening mess rather quickly. It can take a lot of user testing to find the right balance.
Replay uses animated, outline-style images in the background with seemingly random placements. The floating effect is further emphasized through the animation and overlay of images and other elements.
HummingYard uses containerized images in the design but the placements have no clear meaning. There’s a floating leaf on the right side of the canvas and a call-to-action button that looks off the grid as well. Each of the elements seems to be placed almost randomly, creating a floating effect for the whole design.
Wealthsimple uses a bunch of different smaller images to create a cascade of floating elements. The three dimensional icons almost look like they are falling down the screen. Some text elements overlap, but most do not. It all feels a bit random, but the images frame and help draw the eye towards the center screen text elements and call to action.
2. No Images
If floating images don’t sound like a trendy design feature to you, the answer may be no images at all.
In this design trend, the aesthetic comes together without any real images. The design uses mostly text with maybe an icon, logo, or small divot. The result can be a rather bare design, but there is a particular focus on the words.
This trend is not that difficult to design, but storytelling and language are key if you want users to interact with the design. Sometimes no amount of images can distract users who are looking for something visual.
Fandes Consulting uses a very simple black and white design with a simple call to action on the home page. The scrollbar cue has a nice animation that helps you get into the design quickly. (There are also more interactive elements and images after the scroll.)
Diego also uses a simple and bare aesthetic for his website. Again, animations are simple for engagement and there is more color and some imagery outside of the scroll bar.
Ashfield MedComms has the most color of these non-image website examples. With a navy blue background and green icon, you can feel your eyes moving more on the screen here. There is also more to read and a scrolling animation to promote engagement.
3. Text and Images Blended
The trend of blending text and images is the most complex of these design examples. Here, designers are creating overlapping layers of text and image (or animated) elements on the screen so that there is a lot to consume visually. This can be a very attractive concept, but it can also be developed.
This design trend can be incredibly beautiful when done well. Layered elements are exciting and have a “design” feel.
The visual challenge is this: Keeping words and letters legible, especially when considering the website’s responsiveness. Animation or motion can add another level of complexity.
If you’re planning a design like this, it’s important to plan for breakpoints and even have a fallback on what to do when readability is a concern. Desktop and mobile aesthetics can have different feelings here to make sure you have a visual theme that is easy to understand for both.
The Most Dangerous Places for Sailors includes text and an image element (the ship) behind an animated layer of water. What is particularly nice about this design is how the water looks as dangerous as the words convey thanks to the motion and shape and color of the graphics.
Meow overlaps text and image in a way that almost blurs legibility, but the word has enough context that it’s generally understood. If you click through, there will also be a fun little animation with the cat.
Champoleon, Valley of Dreams puts some of the text into the mountains for a foreground to add text to a beautiful and unified set of backgrounds. There are many layers to this design, making it much more complex than it appears on the surface. On the scroll bar, the rest of the site continues this layered theme with text and images that overlap and share space.
Conclusion
Which of these image trends appeals to you the most? They are very different approaches to website design and can work in different ways for different projects. They also range in development complexity, from extremely easy to manage – no images at all – to potentially challenging text and image blends.
