Share on facebook
Share on twitter
Share on linkedin
Share on email

User Interface/User Experience Design: Photos With Graphics Trends

Everyone knows imagery is the central essential element of good web design. This is pretty much the standard ever since it became easier to post quality images on webpages and on mobile screens. Nowadays, though, a mix of that with other media is the new norm for graphics trends.

One recent trend that might seem overdue is a mix of using photos with graphics in the hero and other areas of webpages. Doing this is all part of a bigger trend recently: Bringing more storytelling and personalizing of brands.

For a business focusing on their app’s UI and UX, take a look at how combining graphics with real photos creates a distinctive way to convey information.

Should You Create a Collage Effect for Better UI?

A common trend when combining photos and graphics is to create the look of a collage to personalize a brand. Typically, this involves posting a pic of a person or a model and combining decorative graphics around the photo.

The advantages of this include being able to introduce a personal image with a decorative style to represent branding colors. Those graphics never have to look like they came directly from a computer program. Creating one’s own graphic illustrations from their own hand is a more personalized way to go beyond the ordinary.

When in a situation where available images are scant, drawing freestyle graphics around one photo brings a unique way to do some storytelling. Of course, telling a story is what great web design is all about. In the sense of UI and UX, this is also essential to help a user navigate a site and continue exploring everything there.

What are more specific ways to combine photos with graphics on apps and websites to tell a story or send a compelling message?

Combining Graphics Around Text

Web designers who combine imagery with graphics also do the same with text as a variation. In fact, this might be a photo of text taken from a business. Decorating text with graphics adds a great aesthetic touch that can really pop on hi-def screens.

Or, this could end up being the other way around where the text is the graphic wrapped around a real photo. The compositional aspect of this is sometimes challenging while considering the size of the image in relation to the textual graphics. Testing on mobile needs doing early so the collage looks uniform across different screens.

The use of text and graphics is more effective when one’s brand focuses on a particular word. The real magic occurs combining graphics around an image since it usually sets off the imagination of the viewer.

Adding specific colors and lines enhances emotions in the user, making users think deeper about what the message really is.

What About Adding Animations?

Animated illustrations are also a major UI/UX trend in the last couple of years. Adding this to the mixed media above adds nice touches to UI, like in a navigational tool. Or adding animation in a logo is just as trendy recently, something so easy to do nowadays.

Thanks to tools like Procreate, one can create animations like this there and easily upload them to a webpage. That app also allows the combinations of photos and graphics with ease.

Still, putting it all together so it fits properly on the page still takes expert web design. Adding animations with a photo enhances the user experience further, including the feeling of movement around a static image.

When wanting more attention to a CTA, combining these elements also plays a strong factor to maintain attention spans. Remember that adding imperfect photos often works better because it allows room to fill in with graphics to bring something individual. Personalization goes over so well nowadays in UI and UX when it connects with the user.

Find More Graphics Trends for UI/UX

Visit us at Jaroop to learn more about combining graphics and photos for the best user experiences.

Share this post:

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Share on facebook
Share on twitter
Share on linkedin
Share on email

Related Posts

This website uses cookies to ensure you get the best experience on our website.