Stocktips.com design

Before venturing off to travel around the United States recently, I was asked to create a website for Stocktips.com – a group of young industry professionals looking to provide a fresh prospective on investing in stocks.

Stocktips were looking for a clean, professional and engaging WordPress driven blog with an emphasis on utilising social media to get their information out there and shared with the world.

The website uses responsive web design techniques to allow the website content to fit comfortably into any browser size (and mobile devices) as well as many of WordPress latest features to allow for StockTips to concentrate on their content and have the website take as much of the legwork out of content update as possible.

You can view the development version of the website by clicking here.

Stocktips were looking for a clean, professional and engaging WordPress driven blog with an emphasis on utilising social media to get their information out there and shared with the world.

The website uses responsive web design techniques to allow the website content to fit comfortably into any browser size (and mobile devices) as well as many of WordPress latest features to allow for StockTips to concentrate on their content and have the website take as much of the legwork out of content update as possible.

MoreVirbant were looking for a bright, eye-pleasing web design that utilises their brand colours as well as an easy to use eCommerce platform and Content Managment System.

The website also features community-driven areas where customers can upload images of how they use their products and get the chance to win cash for their efforts.

MoreVibrant Homes

The website I have designed and developed for MoreVibrant Homes has now left the safety of the dock and is sailing out valiantly into the internety-sea.

The website has been in development on and off for a few months while the client finalised copy, sourced photography and generally sorted everything out to get their eCommerce store up and running and will no doubt be tweaked and improved as time goes on.

MoreVibrant specialise in designing and producing fresh, zesty (and vibrant) product to liven up your home and are keen to push the social edge as much as possible, creating an online community for home lovers, rather that simply an online outlet.

Techniques such CSS3, jQuery and @font-face (a technique for using non-traditional fonts on the web) were used heavily to give the website a modern feel.

You can have a browse around the website by clicking here.

They are positioned to take advantage of new emerging technologies and content distribution channels to create a library of original and licensed hits that could be popular across all mediums.

The company has grown rapidly over the last few years and were looking for a website resign that would reflect their forward-thinking approach as well as show off their production values and creativity.

The website moved away from utilising Flash for animations and instead used jQuery to provide a more accessible and easily update-able layout and animation. The main navigation uses ‘fancy’ drop downs to allow customers to quickly find the information or product they’re searching for.

Qwota

Recently I decided I would free up some time to work on a little experimental website I’d been thinking of called Qwota.

The concept behind Qwota is to provide a method of collecting and displaying people’s favourite and most inspiring ‘one-liners’, whether that be a lyric from a song, a line from a film, a snippet from a newspaper or just… anything that excites.

Each quote comes with further information about who said it, when they said it, and hopefully a interesting link to where people can find out more information on the text. Also, as a finder’s fee, contributors can include their own name and website address to each quote they add. If people like and decide to vote for their contributed quote, then they and their quote can sit pretty at the top of either the Popular Quotes or Top Contributors leaderboard.

Qwota was made using HTML5 Boilerplate, CSS3, jQuery UI,Modernizr, Quicksand plugin,WordPress, and with help from the kindly Stackoverflow community.

You can view the Qwota website by clicking here.

Each quote comes with further information about who said it, when they said it, and hopefully a interesting link to where people can find out more information on the text. Also, as a finder’s fee, contributors can include their own name and website address to each quote they add. If people like and decide to vote for their contributed quote, then they and their quote can sit pretty at the top of either the Popular Quotes or Top Contributors leaderboard.

Qwota was made using HTML5 Boilerplate, CSS3, jQuery UI,Modernizr, Quicksand plugin,WordPress, and with help from the kindly Stackoverflow community.

Recently I was lucky enough to be contacted by .Net Magazine and asked to redesign one of their reader’s websites for their Makeover feature…

I chose to redesign the website for a small independent record label based in San Francisco called D-Fault Records, and wrote about why I made the design and development choices I did.

To give you a flavour of what I did, I was quoted thus:

D-Fault Records needed a clean, simple and elegant way of promoting itself, and a well thought-out CMS

Also, in the same issue, Ghost Horses was featured in the Gallery section, showing some of most interesting CSS based websites from that month.

If you’re interested to see what I came up with for the .Net Makeover feature, you can view it by clicking here.

The images above are taken from the May 2011 issue (214) of .Net magazine, available at all good outlets!

The logo
The logo has been redesigned as well as reduced considerably in size with the effort to convey a more established, professional brand with the juxtaposition of a bold, black sans-serif against the negative-space cut through an audio-speaker to create the ‘D’ of D-Fault. The overall shape of the logo has remained the same as to not stray too far from the established brand.

The navigation
The header of the website is to sit fixed to the top of the web-page while the viewer scrolls to allow for easier access to different sections of the website. This section includes the logo, the navigation, the navigational breadcrums and the search box. The white of the header will have an RGBa (transparency) value which will allow the scrolled content to appear subtlety behind the header. This is a feature of progressive enhancement which is not vital to the functionality of the website, but rather a nice touch for owners of more advanced browsers.

The intro
The introduction to the website has gone from ‘Hey everybody!’ to ‘We are D-Fault Records. We bring you new electronic music.’ in large League Gothic @font-face to succinctly and confidently establish brand identify as well as project the intentions of the website. There is also an arrow button to the right of the text which, when clicked will animate open using jQuery to give more information about D-Fault to anyone who requires it.

The banner
The main banner of the website features a large close up of a fictional DJ who has been awarded ‘Record of the Week’, which would be a new feature of the website, allowing visitors to listen to the new releases and vote (using the new Vote page) for the record they liked the most. This is just one frame of the banner, which could also be used to promote the latest releases, their iPhone app, or anything D-Fault required. The banner navigation is controlled by the split speaker symbol in the bottom right.

Latest Updates
The Latest Releases section and the Latest News section now have an automated system which will crop thumbnails of album artwork, retrieve only a limited number of words from the news update and apply icons for feedback and interaction such as a link to the Store page for purchase, a playback icon to listen to a snippet of the music, a ‘tweet-this’ icon, and a ‘love this’ icon which will automate the ‘Record of the Week’ feature. There are also scroll buttons to allow lots of updates to be presented without too much screen real-estate being used.

Threepenny Editor

After recently completing the design and build work for The Threepenny Editor, I’ve now put the website live on the internets.

The Threepenny Editor specializes in editing fiction and literary nonfiction. We provide copyediting, manuscript critiques, developmental editing, and mentorship. If you plan to self-publish, explore the site to learn about our many design services. Best of all, we offer free sample edits, and without exception, great editing.

The client wanted to keep the typewriter theme from their previous website design as well as exude a retro and boutique feel, staying approachable whilst looking back the golden age of print.

Techniques such CSS3, jQuery and @font-face (a technique for using non-traditional fonts on the web) were used heavily to give the website a more modern feel.

The client wanted to keep the typewriter theme from their previous website design as well as exude a retro and boutique feel, staying approachable whilst looking back the golden age of print.

Techniques such CSS3, jQuery and @font-face (a technique for using non-traditional fonts on the web) were used heavily to give the website a more modern feel.

Paperhouse Lettings.co.uk

Today, I’ve put the website I designed and built for Paperhouse Lettings live for the interweb’s perusal.

Paperhouse Lettings is an online letting agency that uses its website to reach potential landlords and tenants and PayPal to recover service fees, so if you’re looking to let your property, Paperhouse Lettings can make it easy!

Paperhouse Lettings were looking a simplisitic, yet professional looking website that would gain the trust of potential clients.

Techniques such CSS3 and @font-face (a technique for using non-traditional fonts on the web) were used heavily to give the website a more modern feel.

Visit Paperhouse Lettings

Paperhouse Lettings were looking a simplisitic, yet professional looking website that would gain the trust of potential clients.

Techniques such CSS3 and @font-face (a technique for using non-traditional fonts on the web) were used heavily to give the website a more modern feel.