An iterative improvisation of web templates for IFA (5 hours)

The task was to change the ‘prospective students’ page to give it a more refreshing and cleaner look, all the while maintaining the demeanor of a website portraying an institute of the Arts. The Institute of Fine Arts, NYU is quite well known for it’s conservation centre and Art history. The affluence of historical work is quite evident at the place. The target is to create a ‘template’ which can be used for all content based pages. The current page looks something like this :

I could make a few heuristic inferences at one look. Like for example, the information column is on the left of the page. Usually the most important content is kept on the left of the page since it’s most intuitive for users to go from left to right and in this case, would be the ‘prospective students’ content. Important links like the ‘Apply online’ link is completely hidden in the ill organized information column. Also, prospective students seems to be headlined a couple of times.

The blue and the ox blood red are the official palette colors for IFA. (As it turned out the blue wasn’t. It was about two shades off from the official blue.) That being said, it was wise to use those colors in the website.

Instead of making predetermined notions about the page, I went about talking to some of the people at IFA about the page. IFA has a link on its main menu for each of it’s division. Each division is given authority over the text and the image they intend to use in the page and it’s sub-pages. On talking with people, I figured out that people missed consistency on the site. For example the social media div is not present in a few pages this leads people to co-relate that each division has it’s own social media existence (which is not true.) Even the information div is quite ill-defined, sometimes replaced by pictures of sorts. Clearly a well defined - hierarchical structure was required to avoid ‘surprising’ the user on every page.

Now that some of the striking problems were identified, it was time to work on the template. The first problem was the structure. The site is currently built on a 928/3 px grid. It was quite an odd grid knowing that 928 is not divisible by 3. I went for a more tradition 960px 12 column grid keeping in mind the ‘traditional’ nature of the client.

The biggest hurdle was the menubar. The menubar consisted of, not only the  12 menu-options, but it also hosted the symbol of IFA. My first task was to smartly assign a place for the IFA symbol to exist so that the menu-options can get more breathing space. The IFA symbol came with two options. One with NYU  written below it, the other was just plain IFA. I chose to work with IFA  and NYU separately. Here is a list of my iterations :

Although I came to hate the organized asymmetry of the menu-options, I did like aspect ratio of the image and the way ‘Institute of Fine Arts’ font was accentuated by the classical backdrop which is the main building. My second attempt was to pacify this problem. (I tried an overload of colors to check how the official colors complemented each other as buttons. Not a design choice.)

Although I loved the way the IFA symbol looked, I did hate it for the amount of space it took and at the end – usability supersedes aesthetics. Always. So I scraped the IFA symbol. The ‘information-cards’ really worked well in categorizing the links and were appropriately positioned. The things I did not like about this version was – the huge font-size, the big red heading on the information-cards – it wasn’t minimal. IFA strives to be minimal. I also did not like the multiple hues of blue and the strange disconnection between the two image that are overlayed upon in this template. I still was not satisfied with the menu-options. They were too huge. Clearly another iteration was in order. I tried to improve upon the negative parts and build up another iteration. Which came out like this:

At the end of the day, I concluded with this final iteration. It borrows ideas from different iterations and improves upon them. I would still change a few things that I dislike. For example: the heading on the information-cards is simply bold and black. Coloring them ox-blood will bring coherence throughout the page. I was quite happy with the hierarchal sizing and positioning of the menu-buttons. After playing with a couple of different artistic shape formations, a little entropy inside the structure was a good inspiration point for the menu. It needs a few more iterations but  I am quite happy with what I got at the end. I will post the final version of the template later when it is finished and implemented. In the meantime, let me know what you think!

Leave a comment