09 June 2021

Frankensteining Your Design

What is Frankensteining?

Frankensteining is a rather new concept in the UI design world. It has gained immense popularity and some designers even suggest that this might be a plausible solution to some design problems. When we say Frankensteining we mean exactly what you’re thinking, bringing life to your design by merging several parts of different designs into one design. Basically what you do is you take the good elements from different concepts and combine them into a super concept which ultimately ends up in creating a unique stitch like design. 

GIF of a frankesnteined web page

Another aspect to focus on is bringing life to your design, by frankensteining you can turn even the most inanimate UIs into fun and interesting experiences for your users. We know that in the design world it is sometimes hard to decide which element to choose in order to present a specific function. With the number of possible solutions available on the web and the number of UI component libraries it is easy to get lost and decide which direction you want your design to take. Sometimes it is easy to just make sense of something when you know where you want to go but when you’re completely lost and don’t know what direction you want your design to take it is a good idea to consider frankensteining your design.

Problems with Frankensteining?

Frankensteining can be very helpful in some situations however it is important to note that at times it might not fit into your design specifications. Sometimes it can result in a poor design with no real identity. Because you are using different component elements, it is easy to make a design that looks like it has no direction. It is essential to cater towards the whole look of your design in general, because at times it is easy to mistake a unique design with an over-creative one which doesn’t give the user a sense of what the website or the application is all about. 

Image of Frankenstein in front of a web page

Sometimes when our aim is to create a unique out of the box UI what’s likely to happen is that we create a design that looks pretty unique but it is hard for the user to navigate through our website or application. It is important to note that at times the client understands what you’re going for and what route you want them to take but there is a high probability that sometimes they don’t. We’ve had clients who’ve asked us to pick elements from each route and asked us to combine them together. At times we’ve even had to pick buttons, colors, typography etc from different designs just because our client wanted his design that way and the underlying reason for this is that they want their design to be a bit more creative and unique. Even though the customer’s demands are so, it is still our job to make the final design work out because it is not necessary that the customer gets the desired product which they had in mind at the time they explained it to you and that is why most frankensteined designs turn out to be failures but those that do come out on the top are one of the most unique and creative designs that we’ve seen. 

GIF of Tom Hanks saying Houston, we have a problem!

Solution to the Problem?:

The most important thing to note here is that with frankensteining you need to be careful and watch for any inconsistencies in the visual language of your design. As a designer it is our job to identify which patterns would fit well and which of the UX patterns we need to tweak for every element of the design to work well with the overall design. Another thing to point out is that client concerns need to be addressed in the sense that if they're asking for something that you know won’t provide their users with a good user experience, or maybe it won’t be accessible then these concerns should be laid out to them instead of just doing what the client tells you. Because as a specialist it is our job to tell them what will work and what won’t. Frankensteining can provide creative and unique user experiences however, it needs to be done with care and the patterns as well as the visual language should be coherent and consistent throughout the design. A good way of doing so is by using animations but then again not everything in the design world is a one stop solution, and sometimes we need to come up with new and creative ideas for making the design work. But an important thing to mention here is that frankensteining is much easier for less complex products and for more complex products one should handle it with care or avoid it altogether if the client hasn't specified it’s use. 

GIF of a man saying "Problem Solved"


At times it is hard to design a product according to the design requirements of your client because the image they have of the end product in their mind might be different from the end product itself when frankensteining a design. That is why it is not only necessary to understand what the client wants but also to understand what they expect the final design to look like and the only way to do that is to first get on board with the client and explain to them the details of the design. Even if you use animations to bring life to your design and create context for the user to understand the navigation of the website, you might end up not satisfying both their needs, so it is important to be careful when designing a frankensteined UI and keep in mind the above mentioned points when doing so and you’ll be good to go.

more from tuk

tailwind css components and templates


15 September 2021

A beginner's insight into the widely famous front-end framework today.

tailwind css components and templates


07 July 2021

Importance of designing carbon neutral websites and how they benefit everyone