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…
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 (below)…
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.
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 (above).
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.
Visit Inspire
This is what I'm working on today... just a teaser!
© 1995 - 2012 Paul Goode: Freelance Website and Graphic Designer • Hosted with Blacknight
