Website building: purpose, navigation and identity, IDBM case.

When I got the task and had to build the website for IDBM program that would replace the old one (that was down at that moment) I was so excited and had a lot of fireball ideas and wanted to try all of them at the same time. 🙂

In reality I was not able to code anything but very simple html (now I’m a bit better and still learning the basics of coding), and of course my colleagues have had some sort of ideas what kind of website they would like to have (”We need a new website and it is quite urgent. “ :)). Sure, I was able to make a good looking graphics and think about navigation and structure of the whole matter, but in order to make it fast, I had to find someone else who would help me with coding and push it online.

So the brief was: simple website with information about IDBM as a master and minor program in general. Info should clarify the similarity as well as diversity of study plans for different tracks and provide clear guidance for the applicant. There was a need for the contact page that should have all contact details of the people who are in charge of the program info flow as well as directors of the program.

I started with simple framework to see how we can divide information in pages (scroll screens) and what should be the order of it.

structure-idbm-website-pic-1

In parallel I was looking for people to help me with code and we found two amazing guys who did a great job and were really patient while explaining me some details about coding and adding new features while the site was on the go already.

Then, there were some benchmarking and mood-boarding, thoughts about styles and types of the webpage. The long-scroll was quite an obvious choice, because it suited our needs quite well and looked up to date.

moodboard

And at the same time the text for our site was getting ready (thanks to our dear program coordinator Anna-Mari Saari and program assistant Ines Vaittinen :)). There was a small readjustment accordingly to the purpose of every ‘scroll page’ and visual look in general. Well, actually, there was a lot of this, and at some point the ‘IDBM site elements’ file at my computer looked like this:

mess-on-designers-table_website-process

When the site was ready and launched, I really understand the point why the site is never ready! 🙂 And this is actually such a great thing about web. It’s dynamic and requires constant changes, newer technologies, styles and additional elements.

The basic structure and wireframe of the site remains the same now, even though there are some changes in texts and new info coming along. I was driven by minimalistic visuals, clear texts, white (actually black, in this case) space and one of the main goal was fast upload of the page on different mobile platforms. And as a designer my favourite thing is to see how any website built accordingly to the layer structure and see the beautiful order in this chaos of letters, photos and panels, one by one and all together:

structure-idbmwireframe-idbm

Finally, I’d like to show a short video that I took with ‘Active presenter’, software that helps to capture and record in real time your screen. It has quite a lot of good features even with the free subscription, so if you are looking for some tool that can help with your online presentation or capturing your battle in Diablo III online I would recommend it for sure.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s