The evolution of the Makovecz Imre brand and website - 2025

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.

Introduction

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.

2012

2013

The architect’s desk

2018

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.

Booklets

2020

2021

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.

2022

This year, the Foundation’s website received an updated design, and the Map website received subtle improvements to provide a better browsing experience.

 

The Home page

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)

The problem

The Unified website

The problems that the new website had to solve:

The problem

The problem

The problem

The solution

The problem

The solution


The problem

The solution

Navigation

Main navigation

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.

 Second row of navigation

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 ArchivesMap or the Church of the Resurrection.

Third level of navigation

A mouse-over drop-down menu.

Since on some occasion one building can be reached from three different section (ArchivesRoutes, 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.

Quicl Links

The Stage

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.

Imre Makovecz’s desk

We also represent Imre Makovecz’s Desk on the Stage, as it has a particular importance.

News on section pages

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.

Layout 1

There is only one group, and the number of articles is less than 3 articles.

Layout 2

There are even more groups, but the number of articles in each group is less than 3.

Layout 3

There are even more groups, but the first group has 4 articles.

Layout 4

There are even more groups, but the first group has more than 4.

The outcome

Would you like a similar brand update, website development and wordpress development?
Let's start working together!






    [honeypot honeypot-228 move-inline-css:true]

    Need help? Don’t hesitate to ask me anything.

    You can check out our F.A.Q.s to get more information about my services.

    Are you an agency or a freelancer?
 I’m always open to collaborations!