Soyo is a late bar and premiere pre-club destination located in the heart of Sheffield City Centre. Slick and swanky yet retaining that definite edge that embodies cool – these guys have got a good grip on the importance of effective graphic design in shaping their business identity. They’ve previously drawn on the cream of Sheffield’s design and illustration community working with people such as The Hantu Collective and Kiosk’s (ex Designers Republic) David Bailey to provide awesome corporate ID, signage and promotional materials.

Obviously – we were delighted to be asked to design and build their website. It’s not everyday we get to play (and play we did) with such a cracking little brand and we had a LOT of fun pushing these little Scrabble inspired pixels around.

We decided fairly early on to keep things edgy rather than too slick. Utilising a punky layout that doesn’t define or demand any particular aesthetic language in order that it will happily hold any of the wide variety of graphic styles employed by the bar across their specifically branded promotions. Such an atypical layout does demand a certain amount of work from the user to initially take in the various elements, so we made sure to work extra hard to provide useful and relevant content that’s accessible and easy to access with a structure based on a widely spaced grid to provide maximum readability under difficult circumstances…

Pushing the boat out

In order to give a feel for the venue and bring visual impact we used huge background photographs that showcase the interior and gently fade behind the site content. Easy to read? Errrr. User friendly? Well ummmm… Pretty? We think so – because sometimes the rule book is there to be torn into teeny little shreds and scoffed at like a bully taking a geeks dinner money.

We pushed the boat out a bit with the front-end implementation too, Using lots of CSS3 transitions and effects with transparency, rounded corners and text-shadow / box-shadow declarations being the order of the day. Of course you’ll only get the full effect if you’re viewing the site in Webkit enabled browsers Safari and Chrome or to a lesser extent the very latest builds of Firefox, Opera or Internet Explorer.

Tech wise the site is built around Teleriks Sitefinity Content Management System in order to provide full site publishing and the solution also Event management and offers the user great ways to interact with the site such as Blogs, ‘members-only areas’. Facebook integrated online booking forms complete the package in order that Soyo can continue to engage with its audience in targeted ways.

Of course the most enjoyable and remarkable jobs are always made easier given a remarkable client to work with so many thanks to the guys at Soyo: Efe Omu, Mark Welch, Louis Gadd and Matt Cottrill for their input, understanding and efforts during the entire process. Never have we worked with such savvy people – always interested in the nitty gritty of the design and (incredibly) build process, they’ve been instrumental in shaping the site and it’s aesthetic and we’re confident (like never before) that they’ll go on to successfully shape the site content and improve the SEO with their enthusiasm for web-tech and design.

Soyo says…

When gently poked for some feedback on the madewithpixels experience the guys at Soyo had this to say:
“We’re really happy with the site and had fun working with Michael and Jon – it really felt like we were involved in the process and the end result is exactly what we were expecting. We’ve also learned a bit about stuff like web standards and browser capabilities so we understand a lot more and know a lot more jargon than before which has really helped us to get the best out of it. We’ve got a fantastic end result with every feature we asked for from a price point the other agencies we approached couldn’t even get close to. We’re really looking forward to working with these guys in the future and developing the integration between the site and our Facebook page.”

Check it out at www.soyo.me

Checkout the full list below:

• Smashing Magazine
• Design Shack
• CSS Mania
• Minimal Exhibit
• D-Lists

In early 2010 we launched an online brand and resource portal that helps to connect the Insight Partnership with it’s audience and the wider healthcare industry at large. Providing a platform from which CBT trainers and trainees can meet, interact and gain knowledge and training on the cutting edge of cognitive behavioral therapy.

We used our old favourite Telerik’s Sitefinity CMS to provide full content and user management. Customising the software heavily to add case study Q&A sessions, chat rooms and PayPal payment integration for the varying levels of membership.

It’s fair to say that we’re very pleased indeed with the final outcome. The design is largely atypical and stands out from the crowd while remaining useable. largely this is due to an incredibly trusting and flexible client. Bringing only a single (yes one!!) demand for a ‘logo like an opening door’ (- et voila) the guys at Insight were a pleasure to work with and we had a jolly old time having tea and biscuits in hotel meeting rooms across the north.

Have a look at the Insight CBT Partnership website.

Deciding to ditch the old javascript enhanced menu system in favour of a more traditional approach that relies on nothing other than crisp typography – we’ve given the entire site a new look and introduced some small structural changes. An extended portfolio section retains simplicity but builds individuality into with some pages with large background images. Some pages having a very distinct feel helps the site to feel somewhat like a magazine and rewards the users that explore.

There’s not much else to say about this one so I’ll let ay-pe’s amazing work speak for itself at www.ay-pe.com and  in their glorious showreel below.

The Creswell Object collection contains objects of archaeological importance numbered in the  hundreds of thousands and counting. Objects found during Victorian Britain sit alongside those found in recent times providing a rich and detailed record of Creswell Crags history. Highlights from the collection include stone tools, weapons and bones from Hyena, Bear, the ubiquitous Woolly Mammoth and a 2000 year old human skull.

The Creswell Team were already well underway with the categorisation and cataloging process using the Museum Collections Management tool MODES. Jon wrote a small windows application that when installed into the clients desktop environment acted as a middleman between the internal offline database and the outside world, publishing live changes to their internal database to the public front-end of the website.

We’ve always been incredibly proud of our involvement  with this project, Creswell Crags is one of the most important archaeological sites in Europe and we’ve enjoyed working alongside the Creswell Team and  Jill Cook the curator of pre-history at The British Museum immensely over the years. Now we’re excited all over again at the extension of an already record breaking and award winning learning resource and are delighted that the on-going efforts of the Creswell team can now be accessed and enjoyed by a global audience.

Search the Creswell Object Catalogue.

It’s been a good twelve months since the MWP website had a make-over; and although it’s still wearing the same WordPress undies (rinsed out in the sink though – what do you take us for?) there’s an all new look and feel to celebrate my first successful year as a freelancer.

Things have been gone well this year even if I do say so myself, I’ve worked on over twenty projects. Websites for the pharmaceutical, healthcare, media and tourism industries as well as a number of touch-screen multimedia installations at various Museums and Visitor Centres up and down the country.

I suppose it’s been an odd year to start a business, what with t’old credit crunch and all that malarkey. Not that it’s seemed to effect us too much to be honest – it seems like our backgrounds, portfolios and contacts have stood us in good stead. Our clients have been reporting being pleasantly surprised when receiving our costs, certainly when compared to quotes received from other agencies. The fact that we’re small, agile and have little or no overheads except a world-class web host so that we can pass these savings on to our clients seems to be a concept that’s worked very well indeed. We’ve delivered some big projects, at a cost most agencies wouldn’t get out of bed for. Not only that, but we’ve done very nicely for ourselves and enjoyed the summer sun too. Result!

So what’s with the big long page dude?

Experimentation really; browsing the traffic stats for madewithpixels has always caused some worry, Seemingly suffering from an exceptionally high bounce rate, I wanted to do something to make the content more focussed, accessible and inviting to read.

Admittedly; there was an awful lot of content on the old site. Lots of words and explanations that clearly no-one was reading. So the design rationale slowly became; why make people navigate at all? There’s not that much to see other than a few pics and a bit of blurb about our approach -Spreading the site out over tens of pages simply makes the user expend so much more effort: Click > Read > Decide > Click > Read etc.

I guess we’ll have to wait and see to find out whether it was a good decision or not – I’m mindful about the effect on SEO as the page is now well over 1500 lines of HTML when rendered and with 50 or so embedded images it does take a little while to load. Suffice to say I’ll be keeping my eyes on those stats especially as Google has announced that page load times are to affect page ranks results in its ‘quality score algorithm’.

So I hope you enjoy the new garb. And I’m pleased to report that for once, I’m actually one hundred percent happy with the result! Never an easy thing to achieve when designing your own site somewhat strangely.

It’s all about the grid baby

The eagle eyed designers among you may spot how lovely and tight the grid and vertical rhythm of the typography is.

I hope, at some point in the not too distant future to publish a post I’ve been working on for a while. There are LOTS of great articles out there on grid based layout, but very few with any real practical examples or design rationale from the designers responsible – I’m lucky to have been taught the skill at college in the late eighties but it’s a skill that seems to have slipped past most educators radars since then so I thought I’d dissect a few of my designs and post the results. Watch this space!

And I’d just like to thank…

As always, the most excellent Jon Ward (dude, get that site built… I know you’re busy but I’m sick of not linking to you) for the totally bodacious custom lightbox and smooth as a babies bum javascript page-scrolling sorcery. Without his continued help and downright genius; my designs would remain somewhat static.

Given the hand-drawn nature of ay-pe’s latest and greatest project; an animated flip-book telling the story of the cultural history at Clitheroe Castle. Ay-pe asked if we could reflect the look and feel of their AV production and bring some movement to the page.

Initially, we discussed Adobe Flash (no) and  Javascript animation, but finally settled on a much simple, subtler and; I think, more elegant approach given that the content of the page no t the background deserved to be hero.

Those readers that follow the web-design community closely will have noticed a new trend for parallax backgrounds. There have been a few notable examples recently. The Rissington Podcast and Clearleft’s ‘Silverback‘ to name but two (with an excellent tutorial on how to recreate the effect by Carsonified here).

So; some brown paper, a few fluffy clouds, one friendly Owl and a lovely Quicktime movie were winged over by carrier duck (this is Sheffield pal) and we set to work implementing the effect. I’ll not wax lyrical here about the techniques. It’s all been articulated much better than I ever could on the Carsonified tutorial noted above.

I’ll just a big thank-you very much to the Sir or Madam that was crazy enough, drunk or both to have been messing around with CSS minus margins and wildly re-sizing their browser window!

Odd? Yes. Useful? Very!

Creswell Crags on the Nottinghamshire and Derbyshire borders is one of the most important archaeological sites in Europe and is currently working towards ‘World Heritage’ Status – a label that would see it ranked alongside historical luminaries such as Stonehenge and the Pyramids.

A Limestone Gorge, Cave System, Country Park, Wildlife Reserve, Museum and Visitor Attraction; Creswell Crags, it’s object collections, research, exhibitions and website are supported (most notably) by the British Museum, who’s curator of pre-history; Jill Cook had a large hand in conceiving and planning. In the early nineties I’d worked on the team that put the original site and its award winning content together. Now, more than ten years later – we’d get to improve upon the design, enhance the content and introduce some new ideas of our own.

Take something great, and make it better.

Some excellent re-branding work had been produced by Sumo in Newcastle, along with some suggestions for what the site may eventually look like. We took those early concept visuals and built on the thinking, applying our expertise and beginning to firm up the specification that much to the clients surprise; had a much richer feature set than they’d ever imagined considering their modest budget.

Using Teleriks Sitefinity CMS we delivered a fully managed website that included full ‘in-page’ content management. News and Events sections. Community message boards and polls; and a blog for the Creswell Team to talk about life at the Crags. Integration with Google maps provides a ‘rich media layer’ to head up the site – supporting local businesses by providing relevant ‘places to eat, drink and stay’ information to users wishing to visit the Museum and get a wider view of the surrounding countryside.

Still to come

The feather in the cap, is the integration with the Museums offline object database. Containing hundreds of thousands of objects, scattered far and wide across the country in various public and private collections; the Creswell object database is a goldmine of archaeological information and an incredibly important data set for education and historical research.

Using the Microsoft .NET development framework, we’ve set about creating a connection between desktop and internet that will bring the entire collection of objects to the world wide web. Keep your eyes peeled on the site for updates, but in the meantime you can search the Creswell Object Database as it stands so far: Human Skulls, Bison, Bear, Wolves and Hyena bones all found in rural Derbyshire… Crikey!

When ay-pe, a York based CGI and Video Post Production House approached us with a website brief that comprised: one button, big images and hardly any text. We leapt at the chance to get involved. Keeping it simple means just that; as little fuss and dressing as possible. Let the content sing, let the images shine. So that’s what we did.

Keeping it clean.

We distilled the approach down to a few basic rules:

• No convoluted navigation structure or device
• Images and videos big enough to examine in detail without ‘clicking to view larger’
• No hard sell, no buzz-words, no-nonsense. Let the work speak for itself.

So, simple typography was the order of the day, we used columns to aid legibility; providing design elements that introduced function – as well as form.  To display ay-pe’s incredibly impressive portfolio of work we used either; the whole screen. Or; as much screen width as possible. No need for pop-up ‘larger images’ here.

Ay-pe are a company with a personality, a start-up with a serious ‘can-do’ attitude and the form to back it up. A blog had crossed their minds, and when we gave them the price – they bit our hands off. So with a few hours spent transferring the design approach across to a WordPress template and a bit more technical jiggery pokery. All of a sudden ay-pe were publishing their thoughts on the world wide web; and what a cracking job they’re doing of it too! Take a look for yourself, and keep your eyes peeled for updates soon to come.

Mednet Consult are a Healthcare communications agency based in Leeds. Working closely with pharmaceutical giant Janssen Cilag, Mednet organises and project manages meetings, events and integrated training packages for NHS Mental Health Professionals. They asked us to help take them online.

In January 2009, we designed and built a website that would provide a platform from which Mednet could publish and promote details of its product offerings and communicate its core values to the marketplace. Our bespoke content management system delivers Event Management; Assessed and Certified Case Study E-learning tests and Online Questionnaires; all wrapped up in a contemporary ‘light on dark’ design that was surprisingly well received by what might potentially be perceived as a stuffy industry.

Stuffy? Not likely; that banner…

At the beginning of each project; I, like most other designers tend to get somewhat carried away with all manner of ideas and suggestions for a proposed look and feel. I’m a fan of the old-skool mood board approach; and often send clients sketched ideas for imagery and animation etc.

So taking on board a conversation during an early meeting about the website needing to communicate Mednet’s ability to get the bottom of a problem and solve it, and considering the mental-health focus of the companies market. After the obligatory stock photo/video search I came up with the idea (among other – slightly more sensible ideas) of using animated neurons over-layed with strap-lines as the main site banner. I didn’t expect for a second they’d go for it!

Suffice to say this was one of those ‘what have I done?’ moments; I’ll admit that for a second the fact that this really could end up being VERY cheesy indeed and wondered whether I should re-approach the client, suggesting a different route. In hindsight – and after a few tense hours of pixel pushing; the animation looked spot-on. Different? Sure; but spot-on nonetheless. In fact; ‘that banner’ has caused quite a stir. It’s consistently been the one element of the design that has garnered fantastic feedback; it seems to be universally loved by the client and their audience alike. Result!

An impressively large back-end (Event Management tools – silly)

To compliment the shiny new front-end website; Mednet needed a way to keep things up to date without running back to us every two minutes. They organise events and meetings for NHS health care professionals. So we built a bespoke event management system that creates and publishes online forms, keeps track of event affiliate and attendee details; keeping everyone informed via Google-maps integration, automatic emails and client generated reporting.

We built this system so cost effectively; that employing a third party was out of the question. Our system would comparatively pay for itself within the cost of administrating 2-3 events using the worlds leading event management tools; and would be tailored specifically to the clients needs. A ‘no-brainer’ – I believe; is the correct phrase.

Online test and Questionnaires

Oh, It’s probably worth mentioning; that in addition to the Event Management side of things. We also built a small but perfectly formed e-learning package too! Mednet offer training around changes to the Mental Health Act, so we built a system that based on case study questions and answers tests written by a leading consultant psychiatrist would allow NHS doctors and psychiatric care nurse to be assessed on their level of understanding with important changes in legislation.

The system, tracks, scores and certifies users progress through the case studies. JavaScript enhancements provide important user feedback and aid the users experience; so we employed the same tricks when wrapping up the website and content management package with simple to use, great to look at; health care industry focused questionnaires.

It’s nice to start with a project that changes lives.

Since launch; things have gone brilliantly, hundreds of affiliates, attendees and test users have passed through the system with few incidents bar an early problem with dodgy server technology – cue Rackspace to the rescue; and the site now merrily generates important data, helps Mednet to organise and administrate important meetings for the health care industry and supports NHS staff members all over the UK.