So a few weeks ago I tried a different approach — an approach I’ve started to use over and over again ever since. I was asked to make a brand new UI and re-design the entire website for overskrift.dk based on the twitter bootstrap platform. I was to do all the frontend work and they would afterwards do all the backend work to integrate it with their system. I should note before we move on, that they didn’t want it to be mobile optimised.

Overskrift.dk is a danish social media monitoring service that collects data from twitter, facebook, blogs and other media and shows a detailed overview of the content.

Logo / Identity

Before I began with the website I started out with the logo. The client said they wanted the new logo to be clean and still have references to the old logo (the dots).

Old logo — overskrift.dk

I made the new logo in Adobe Illustrator (still working on being better in Sketch). Removed the .dk, the tagline and gave it a more bold and clean font called Noto Sans.

Below here is the result.

New logo — overskrift.dk

The color palette I chose for the entire project was white, orange, black and gray. For the headlines on the website I chose Source Sans Pro and for the body text I chose good old Helvetica Neue. The client really liked the new logo above. With identity in place, I moved on to the next phase…

Wireframes

We had to agree to some sort of structure before we began the design process. Here is picture of what the frontpage looked like before…

Overskrift.dk old frontpage

After analysing the different pages and talking the old site through with the client. I sat down and sketched all the new pages and ideas on paper, before making the final wireframes in Axure. I did that mostly because the drawings looked pretty shitty. Below here are the initial sketches — in the final axure document the navigation and login field was placed differently.

Sketched frontpage for Overskrift.dk

Sketched sales page for Overskrift.dk

Sketched hashtag page for overskrift.dk

Design and Code — no photoshop!

After the client approved the wireframes — with almost no changes. I started to design/code the first template, the frontpage, in HTML and themed twitter bootstrap simultaneously with Sass. And No, I didn’t use photoshop to mockup anything. :-)

There wasn’t really a need for it, since we had already agreed on the structure in the wireframes. Neither did I need to discuss colors with the client, since they had already approved the new identity/logo. So from there on I had a pretty clear idea of what the website was gonna look like.

the new Overskrift.dk in the making!

An awesome thing to keep in mind is, that if they wanted to see a different color on a button for example. I didn’t have to go into each layer in a photoshop document and change it. I could just type in another hex / rgba value in my Sass project and it would change it throughout the entire site instantly — no need to make new jpgs or print out anything… SWEEEET!

Note: If you don’t use Sass yet. DO IT, it’s css on speed! ;)

the color variables in the overskrift.dk sass project. Very easy to change a color. My text editor is Sublime Text 2 by the way…

First template done

So after some time the first template was done — the frontpage.

The design for the frontpage template for overskrift.dk

And we had a meeting again. We sat down and I presented the new layout on a retina laptop so all the icons and text would look razor sharp. We agreed on the overall look of the design, the hover states of the different buttons, things that could animate, icons and fonts. I believe It was a great help that they were able to see the site in action and I think it gave them a better gut feeling about the new website.

Hover state demo

The best thing was that if they approved it, I didn’t have to start slicing a photoshop document and start coding. The code was already made. As you probably can imagine — this saved a lot of time, not only for me, but also for the client.

Before I went home I gave the URL to the frontpage to the client so they could play around with the site afterwards. At this point they were very happy with the result and the day after they approved the frontpage without any major changes.