This project is about how I combined seven different websites that were being introduced one by one over 10 years of development.
The seven websites has overlapping contents, with different UI and interaction.
I had to come up with one UI/UX system to handle the combined and simplified content with keeping the existing sub-brands as well.
Imre Makovecz (Budapest, 20 November 1935 – Budapest, 27 September 2011) was a Hungarian architect, active since the late 1950s. Makovecz was one of the most prominent proponents of organic architecture.
As such, his buildings attempt to cooperate with the natural environment rather than triumph over it. Frank Lloyd Wright and Rudolf Steiner are both strong influences on him, as are traditional Hungarian art.
Imre Makovecz as a brand was born only after the artist’s death, when in 2012 the artist’s work began to be cared for by the newly established Imre Makovecz Foundation.
The original HTML website has been supplemented with the Foundation’s presentation website; both received their own, distinctive colour with the same logo.
These were connected by a Home screen.
The first WordPress-based versions of the websites were released in 2013 by us, and. Imre Makovecz’s website has been given warm tones, while the Foundation has cooler tones.
Imre Makovecz’s website was a bigger challenge.
As requested by the customer, it was important that the late architect’s desk should appear as the main interface, on which the content would appear.
The Desk stood in the artist’s study, which could not be moved. So, we had to take photos standing on a chair behind the original chair, and from 10 photos we got the high-resolution, panoramic image about the desk and the surroundings that we could be retouched to its final form.
While the original websites have not changed in appearance, two sub-brands have appeared. A separate website was added to the newly opened Makovecz Centre and Archive, and the Makovecz Routes website was created, which presents the artist’s buildings built in Hungary, along routes divided into regions.
In 2020, two new websites were born.
In the Makovecz Book and Gifts web shop, in addition to books published about the artist, graphics and posters can also be ordered.
The Makovecz Map shows more than 550 buildings built around the world.
The seventh and final website presents one of Imre Makovecz’s last works, the Church of the Resurrection, which is considered the pinnacle of the designer’s life’s work by his family, students, followers, and the public.
This year, the Foundation’s website received an updated design, and the Map website received subtle improvements to provide a better browsing experience.
The original — static — homepage was able to keep up with the newly handed over websites.
(The colour of the Makovecz Centre and Archive’s logo changed once along the way)
After the creation of the seventh website, it was clear that both the technical implementation and the communication of the sub-brands had to be put on a new foundation. Over the course of ten years, the newly created websites all had their own administration interface. Not only did this make it harder to update content across websites, but it also resulted in a lot of duplicated content.
The website presenting Imre Makovecz was always omitted from the continuous updates because we could not find a good solution for the responsive design without compromises. The seven websites have been visited by more than 130,000 people in ten years.
The design of the new, unified website was preceded by a lot of research and discussion; years of visitor statistics and feedbacks also helped us.
Different appearances
As The Foundation as the main operator was given the all-encompassing role, which is why the neutral, grey colour of this section became the dominant colour.
Different layouts, UX / UI
The main element of the website has become the Stage, which — thanks to its flexible height — can display various contents.
Represent the old websites
As there is no longer a need for a separate opening Homepage, that has been replaced by the Quick Links navigation.
Make the Imre Makovecz’s Desk responsive
On mobile we show the upper and lower piece of the Desk’s photo before and after the content.
Visitor focused on one topic only
The solution
With the News on Section pages, there is a possibility to show content from any other topic as well; the constant presence of the Quick Links helps in the presentation of other content.
This the first level of navigation with the language switcher. On a large screen it is aligned to the left side of the Stage; only on a small screen it slides in above the Quick Links. At tablet resolution, it switches to a two-line layout.
The second row of menu is the place for the secondary level of the navigation (submenus of the first level navigation items) and a loading place for those separate navigations which are not included in the main navigation but can be opened via the Quick Links, like the navigation of the Centre and Archives, Map or the Church of the Resurrection.
A mouse-over drop-down menu.
Since on some occasion one building can be reached from three different section (Archives, Routes, and from the Map) we needed to modify an everyday breadcrumbs navigation plug-in to be able to handle all three version of view, based on the page the building got visited.
The colouring of a Building page also based on the referrer page.
Of course, there was no longer a need for a separate opening Homepage to represent the main topics; this has been replaced by the Quick Links navigation, which also appears in the footer with simplified design as well.
The collections of logos represent the separate website from the past except the Imre Makovecz Foundation, as it became main website itself. The Foundation’s logo appears only in the footer.
The inverted state of a logo also indicates which section of the website is visited. Within the merged page, these colours also help distinguish between different content.
On a large screen, Quick Links appear outside the left margin, attached to the Stage.
As a first level of responsiveness on the smaller screen, the blank area on the opposite page disappears, and Quick Links has also been aligned with the main navigation, making the stage a little narrower.
As the second level of responsive design, Quick Links are given a single-line layout and moved below the stage.
It has a two-row layout on mobile devices.
The main element of the website has become the Stage, which — thanks to its flexible height — can display various contents. The background colour of the Stage also indicates which section of the website is visited.
We also represent Imre Makovecz’s Desk on the Stage, as it has a particular importance.
All main Sections uses this layout, where the content shares the space with the latest posts of some categories on cards.
This module calculates the number of the selected categories and the contents of them, and chooses one of the best layouts from four option.
There is only one group, and the number of articles is less than 3 articles.
There are even more groups, but the number of articles in each group is less than 3.
There are even more groups, but the first group has 4 articles.
There are even more groups, but the first group has more than 4.
During the work, we combined more than 1060 content of different types and 4500 images, reducing the size of seven websites occupying more than 10GB of space by almost 25%.
This timeline of Makovecz websites is a good example of how a brand can organically become an umbrella brand. Of course, we would have done many things differently if the new sub-brands had been created according to a roadmap, but it is never too late to stop and create a framework that flexible enough for further structured growth.
The new page helps to represent the complete work of Imre Makovecz, presenting one building from multiple perspectives.
Need help? Don’t hesitate to ask me anything.
You can check out the F.A.Q.s to get more information about my services.
Are you an agency or a freelancer? I’m always open to collaborations!
