The Residency – Web Portal

Something that I never got to do before for The Residency is give it a web presence, so I decided back in September that I would buy the domain name with a view of building a site. Now with my major project centring around the The Residency in the form of an info-graphic styled site, by May I will have this in place, but in the meantime I would only have a holding page. So what I decided to do, is to build a portal, which would link to the show’s other online presences.

So my thoughts in terms of styling for this portal, were initially for a minimal design. I had the idea of using icons for each of the links, with the name of each link appearing as the user hovers in the icon, The Residency logo would appear above these icons, at the top of the page. So I mocked it up in illustrator and the results are below!

Residency Portal Mockup 1

I was happy with how the mock-up looked, however it did need some tweeking. First and foremost, the type needed to be changed to Univers as it is the brand typeface. The next stage was to change the appearance of where the title of the icon would appear, I moved it to above the line and this looked a lot better in my opinion, as it gave the icon and the title more of a link (see below).

Residency Portal Mockup 2

So now that I was happy with the look of the site it was now time to build it, I knew this wouldn’t be too difficult, the only problem could come with making the titles appear upon hover, when I began building this however it was easily solved by using two span classes, one containing the unhovered state and one with the hovered state, with the relevant viability set for each state. I also added some CSS3 transition effects for each hover state, just to add a nice interactive feature for the user, this feature of course does not function properly in IE (because its rubbish) but it does on every other browser, so I was happy enough.

And you can see the working version on The Residency Website