I'm currently developing a responsive web app that allows the user to create an image collage. The user has a pool of uploaded images that can be arranged in a predefined grid. The upcoming image shows a mockup of the mobile version of the collage designer (I'm not allowed to post more than two images).
The image pool is on the top and contains the uploaded images; the selected images are highlighted in green (one image is not displayed, Figma throw it out). The user can upload an image by clicking the blue button. In the menu below the collage, the user can pick between different aspect ratios ("Formate"), different grid layouts ("Layout") and themes ("Vorlagen").
To transform a single image, the user needs to tap on it. The problem me and my colleagues are facing is how to display the edit options of the selected image.
We have two different version:
When the user taps on an image, a static dialog is displayed in front of the collage on the bottom. It is transparent but could overlay the selected image (here it is the image with the green border).
When in editing mode, the menu items switch from the overall collage options to the specific edit options. No overlay or popup distracts the user from viewing the collage while editing.
Which version would you prefer or is there another options we should consider?