This sentence was once said to me by a UI designer on the client's side when it came to the technical implementation of a complex design element.

My answer at the time: "That's exactly why you came to Jung von Matt."

An hour later, I delivered a working prototype to him. (link below)

As soon as he presented the layout to me, I had an idea for a solution. Specifically, it was a matter of setting a frame within an image between the background and the person in the picture, which dynamically adapts depending on the screen size and the amount of text.

How do you realize something like this dynamically and responsively? I'll show you my solution:

• First, I put the background image in its raw form in a container and made sure that the entire container always scales proportionally in a 16:9 ratio.
• Then I designed the frame and headline. The special thing about this was that the font size scales with the image, so that the text retains the breaks in different resolutions.
• Now I have placed the box with the continuous text and made sure that the frame and box push each other away, depending on how much space is available.
• Finally, all I had to do was crop the silhouette of the person and place it between the layers as a transparent image to achieve 🎉 the overlay effect.

The prototype was very well received and was further optimized by me in the productive implementation. For example, I replaced the cropped silhouette with an SVG mask so that only 1 asset has to be loaded, CSS background images became load-optimized HTML images and much more...

But one question remains: Why did 5 different developers say "that doesn't work"? As developers, we often think very logically and functionally. The design sometimes becomes secondary. Especially when the design becomes more complex than the function. True to the motto "Form Follows Function" (this guiding principle comes from the IT world, by the way). It's easy for developers to dismiss a design request with "can't be done".

But why was I able to solve this so quickly?

My way of thinking is different from that of a classic software developer. I also think strongly in numbers and loops, but also in planes and shapes. I have worked as a designer myself for many years and know first-hand how to deal with masks and layer compositions. That's why I immediately had the idea of splitting the picture into two layers and putting a third layer for the frame in between.

So a "can't be done" became a "can't be done". Customer satisfied, Sebil happy.

⚙️ Link to the prototype: https://codepen.io/sebil/full/mdpRBjJ

✨ If you would like to benefit from my skills in frontend development and rapid prototyping, don't hesitate to write to me.

💚 If you liked this article, feel free to leave me a like or share it with your network.