‘Refracted’ is the product of three years experience with commercial clients and the implementation of many of these techniques.

Design

I had the idea of the logo image in my head for a while and was quite determined to go with a light and vibrant design. Contrasting significantly with the previous ‘Satin’ theme, a light text on dark background theme, I wanted ‘Refracted’ to feel like a change from the old.

The layout was sketched out with old fashioned pencil and paper (!) and the design was composed in Photoshop with Illustrator being used for the 3D typeface effect in the logo. Then Photoshop was used again for the rainbow striped effect for the backoground to the logo and the footer.

Coding

Using the Sandbox wordpress theme, I was able to rapidly convert the design into the valid xhtml and css WordPress theme that you see on the site at the moment. Using Dreamweaver, the code editor is excellent, I began the process of adding the header image, and then working methodically through the design as I got dirty with the CSS, making use of the semantic mark up included with Sandbox.

With the basic design done, I installed and configured the widgets to the preconfigured 2 sidebars and finally did the cross browser compatibility changes requried.

End Result

With the theme 90% finished, I still need to monetise it asap, I have gone live. More information can be found here or take a look at the site itself, benbishop.me.uk

222 days since I last posted. Some could accuse me of being slack or distracted and it could be a combination of the two. The truth is that, thankfully I have been very busy and I have learnt a lot since I launched this site originally nearly 3 years ago.

When I went live with the first version of the site, it was the first time I had implemented a WordPress driven site and I was naive with the way I planned it all out. With a lack of understanding regarding the architecture of web design and WordPress I installed a ‘blog’ in a sub folder called news. So while updating blog or news posts was done through the dashboard of WordPress making any changes to the site’s static pages was a tiresome job.

Welcome to the new version of EminentStyle.com

The site is written semantically and is valid xhtml transitional. Eminent Style v2 is fully optimised for WordPress 2.6.x and is widget compatible. It also makes use of the hAtom and hCard formats – more on this below.

Adding new items to the portfolio is a breeze with custom fields and the excellent JavaScript library jQuery adding hover effects to the thumbnails. The case study pages also make great use of jQuery with the slide effect displaying screen shots.

The contact page is more useful than just having a contact form. Significantly this makes use of microformats hCard for the contact information and allows users to easily download and store this in vcard format compatible with Outlook and other contact managers.

With the power of WordPress and the ability to use pages making it a valid CMS, Eminent Style v2 is now fully customisable. Making much use of the core WordPress features and a few tweaks I am very happy with the result. I hope you like it! Let me know what you think.

Using the latest web standards and methodology to design and code the site, Freestyled taps in to the social video site YouTube (utilising the api) adding a depth of content unavailable years ago. Take a look.

freestyled.co.uk 

Check it out here and in my portfolio.

I was approached by AEG Worldwide in June about a proposed design for the Los Angeles Galaxy MySpace profile that was to go live in time for the David Beckham press conference. With important time constraints on the project and a complete brand redesign ready to be implemented it was an exciting time to be working with such a prestigious company.

The profile is live and I hope demonstrates what can be done with MySpace and a great brief. Take a look here Official LA Galaxy MySpace Profile.

With such success they are clearly doing a huge amount correctly; enabling people to keep in contact easily with the ability to post photos, video and music it has quickly turned into a successful marketplace for aspiring musicians and film directors.Where MySpace fails is how difficult it is for the everyday user to create an attractive site that doesn’t give their audience a head ache after 5 minutes.

MySpace Overlay

Well here’s my first approach to offering something back to the community and hopefully the sanity of some of the 100 odd million users. Welcome to ‘Seloquent’…. something along the lines of a simple and eloquent design that hopefully demonstrates some of the potential for making MySpace a little less hectic and refined. You can check out Seloquent in action on my page at MySpace.

Seloquent is a MySpace div overlay (or myspace hack) that effectively lies over the top of your page, while still displaying the information to your friends that your want them to see. Including the ability for people to drop you a comment, it should hopefully be a pretty painless way to spruce up your MySpace page for the princely sum of nothing, gratis, FOC or in other words nothing!

Quick Instructions.

This is a quick version of the installation instructions required to install this overlay. Please read through all the instructions included with the download as well and post any problems you have below. I will try to answer all of them though this is distributed without any warranty.

1. Download the Seloquent zip file below.
2. Copy the contents of the ‘aboutme_css.txt’ into the ‘About Me’ section in your profile, making sure to erase everything that is already there.
3. Copy the contents of the ‘idliketomeet_html.txt’ into the ‘I’d like to meet’ section in your profile, making sure to erase everything that is already there.
4. Alter all references of ‘YOURFRIENDID’ with, yep you guessed it, your actual friend ID.
5. Edit the appropriate sections to add your information.
6. Save your profile.

License

This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 License. Woa, that sounds serious, what does this mean? Well you can use it, modify it and distribute it but you must continue to have the small print section at the bottom linking to this page or website. At the very least there should be a clear link to this page displayed in this section.

Download Seloquent Div Overlay

Version 1.3 of Seloquent

Custom MySpace Div Overlays

For more information about having a MySpace profile designed exclusively for your band, group or personal ‘myspace’ page, please don’t hesitate to contact me.

Versions / Changes

Version 1.3 (dated 290307) another small alteration, adding the CC licensing information.

Version 1.2 (dated 020107) a small alteration to the readme file and the ‘Idliketomeet_html.txt – only nessesary to ‘upgrade’ if some of the links at the top of the page are not working.

Version 1.1 (dated 281206) update that fixes an issue with the comment box at the bottom of the overlay. Thanks to Cmoney in the comments for bringing it to my attention. See my follow up comment for those who want to edit the single line of html rather than download the new version and make all the customisations again.

Considering usability was a big part of the brief and AssistIT.net offers ease of use in any number of different browsers and readers. Take a look.