web analytics

Inspire Website Design

Getting inspired for Inspire: When the inspiration you seek to create a new website design is literally right before your very eyes.

 

This was a lovely project to work on!

I have been freelancing for Inspire for a number of years now and I was delighted to be able to get the chance to create a new website from scratch. Here I reveal the thought processes, challenges, techniques and pleasures that helped bring this website to life.

THE CONCEPT

Every project starts with a spark of inspiration, and in this instance, creating a new Inspire website, there were several sparks of inspiration. An initial brainstorming session rapidly conjured up a strong concept to run with. We wanted to get across to the site’s visitors and potential customers that even though we are living in a digital age, the essence of what we do at Inspire is very much hand-crafted. We are all craftsmen here, our different talents combining to create “Inspire”, which we hope in time will be seen as the creative hub of West Cork.

So how do we get this across in a website design? How can we best showcase our unique talents? How can our ethos of meticulously-crafted design and print work be communicated so that visitors understand us immediately, intuitively? We also wanted our new website to look like nothing else we’d ever seen before.

These were the challenges I faced when considering a direction to take the website. Thankfully, the inspiration I required was literally staring me in the face. My sketchpad sat on my desk with a blank page awaiting my ideas, sketches and carefully considered plan of action…

Developing the Concept

Key to the concept is the transparency of showing visitors our design processes. Rather than show visitors a simple portfolio gallery of images of our work, our portfolio will be our articles, our blog posts, where we all contribute and present the work we do with our own writing styles and design flourishes. This “sketchpad” of ideas, development, processes and showcase of final products will, in time, become a fitting tome to the multitude of talents of those that contribute to Inspire.

So, suitably inspired, I set about sketching the concept of how I could transform these ‘tools of the trade’ into an engaging website that communicated the essence of Inspire and how we help our clients. Having nailed the concept, development was swift, it was literally a matter of taking photographs of what was on my desk. Then assembling the items in such a way that those of us with wider screen resolutions would see the full picture of the desktop concept. Those viewing on smaller screens may only be aware of the sketchpad itself, so I’ve shown the “full monty” so to speak (main image)…

With the montage assembled using Adobe Photoshop, and my virtual desk looking quite neat (I’m not into clutter), I then began visualising how the website content could work within the confines of the sketchpad area.

Elements Creating the Whole

As with any website design, there are key elements that must be implemented. So, starting with the home page, we’d need a way to showcase the work, a navigation system, access to the individual blogs for Branding & Packaging, Publishing, Graphic Design, Website Design and Printing, introductory text, a “featured” post (the most recent blog item), a call to action and copyright and contact information for the page footer.

As we’re using a sketchpad to communicate our work, I wanted as much of the site as possible to have a sketched look as well as a stylised printed look for text and background areas that would house the information. This would mean extra work for our most talented freehand artist, Sophie, but sure… the final results are worth the additional effort and attention to detail.

With the visuals nailed, it was then time to tackle the technical aspects of the site. The process begins with taking our static page images and converting them into living, breathing, clickable, navigable html pages. I always do this coding by hand, I find it gives the leanest and cleanest code possible, which is essential if we are to avoid conflicts later in the project. From a web designer’s perspective, seeing your design come alive is immensely satisfying. Step one is to disassemble the page and sketch out the blocks that will make up the site (see gallery).

Coding and Adding Content

If you go to the menu in your browser, you should have an option in one of the dropdowns to “view page source” this will give you a little insight into this stage of the website build. This is the raw code that I have put together, so when your browser visits http://www.inspire.ie, it translates my code to give us our interactive website. Clever isn’t it? Obviously this is a skill that not many would be aware of when asking someone to design a website for them.

We’re on the home straight now. After the html/css code is tested and bulletproof across a range of Mac and PC browsers, we then create the final code which plugs our website into a MySQL database and a content management system. This means that now the site is running, any one of the designers and printers at Inspire can log into the website via a web browser and add their own content and articles as and when they please.

 

Previous Article:

Next Article:

Top