Using AI to improve designs

First off, I never planned to write a blog post about AI but today I used it for something that improved my designs a lot.

A few days back, I posted a link to a website that had hit social and was getting a lot of attention.

I think it’s a lovely well considered bit of work by the designer but I highlighted how hard it is for something to come about if the assets are not right as often the photos are not shot the right way or there are 1000s that might need to be reshot so often, we have to work with what we have which often restricts when designing for eCommerce. Something I have written about before.

At the same time, I have been thinking of revisiting old designs and having another crack at them with Figma and I wanted to see if I could achieve something similar or at least utilise a full size image with an overlapping header. So I got to work.

Trigger warning…these screenshots of designs are midway through the process so not complete or final.

When I looked at the assets I had, some were shot on a nice grey background but because of how they were cropped, there was no space to the top or bottom so when putting the design together, I had two options

Option 1, the header won’t go over the top easily due to the model’s head so have kept it apart. This was how I originally designed it.

Option 2, overlapping the header but as you can see the model’s head is interfering with the icons and logo so not really viable.

At this point, we could say to the client, option 1 is all we can go with or if you want option 2, you’ll need to reshoot the images if you don’t have some with space either side.

A different solution

And this is when I remembered AI. What if I could use AI to expand the photos and fill in space where it doesn’t exist. So I took the photo and brought it into Photoshop, selected the space where I wanted the image to expand to and Photoshop did the rest. This gave me a photo that had space top and bottom to overlay the header and also the product details for a nicer product page design. No reshoot needed.

This for me really demonstrated the power of AI now where it could improve my job tenfold and possibly save the client a reshoot. Sure we need to apply the same treatment to every asset but I am sure that would be easier and cheaper than shooting the whole catalogue again. Also, these are shot on a simple background, would it work as well on something a bit busier. I’ll post some examples up another time.

Having the option to play around with assets so easily will really improve the designs we can do and that for me is a good thing with AI. Here is the design below with the new image applied.

Other real life examples

I said I would add some more examples of images and how we can use AI to assist.