How we designed the new Line and Form website


In a smartphone

Designing your own website is never easy.  When you are a web designer by profession it is surprisingly difficult.  Generally I’m  busy designing  for other people and when I am my own client, the pay is not very good either.  But as the old Line and Form website was over two years old I knew it had to be done.

Choosing a responsive framework

Of course the website had to be responsive.  The old website was, although I always felt it was a little plain when in the smaller sizes.   I decided to use the Bootstrap framework to make the design responsive.  I’ve already used Bootstrap on a fair few client websites, so I knew it worked with my design style.

Keeping key branding elements for continuity

In a tablet

In a tablet

The cartoons were popular and I needed to keep the same logo. I had definite elements I wanted to incorporate in the new design.   I purposely chose not to have a slider this time around, but I did want some animation in the header.   After some messy around, or skillful design decisions, depending on your point of view, I came up with a series of interactive elements. The header includes a talking computer screen animation.  Keep your eye on the screen over the next few months as I will be playing with the messages. Let me know if you spot them when they change. I made the cartoons grey-scale but if you mouse over them they change to full colour. I wanted the front-page to feel interactive but still have a cleanness about it. Hopefully the new design achieves that.

Does it work?

Overall, I think the design is clean and simple, giving a good canvas for my blog posts and portfolio.  Time will tell if it is more effective than the old design.  I will be keeping a close eye on my analytics, to see if the behavior of visitors to the website changes.  I’ve included some screenshots of the tablet and smartphone view so you can see the difference.

Let me know what you think!