Some links have been stripped from this article due to age and inaccessibility.
OK so as many of my loyal blog readers know (Actually do I have any loyal readers? Any readers at all would be a bonus. Mmm I digress..) I am in the process of updating this site to drupal 7.
I also feel it is time I updated the design of the site, as it is about 2 years old, and was well a fudged design using [Artisteer [Artisteer.com], a quite good program for knocking up a series of standardised web designs as templates for CMS' such as Drupal, Joomla! etc. I decided however as I want my site to appear in my portfolio of sites built by me (And as such my company [contemporayfusion.co.uk]) I really ought to get a self built design onto my site.
As I can’t draw stickmen, I decided to look on the web for design inspiration. I know what I like and I am able to adapt existing designs to be unique enough to fit in with my style. In the end I found a photoshop tutorial design I could easily adapt to suit a 960 grid, as well as be responsive. Full credit to the designer for the inspiration (Tutorial found here [hv-designs.co.uk] as well as here [1stwebdesigner.com] As you can see in the jpgs below, the colour scheme is more in line with the HV Designs, but the design more form 1stwebdesign. The icons are taken from Paul Robert Lloyd’s social media icon set [paulrobertlloyd.com]
I will post links to a jpeg of my final design once I have finished building it. Please note I have used the above design as inspiration - I have not copied it verbatim, I (re)built the design I used myself - to reflect my style, but also to give me the practise at using photoshop to do more than just cut layers and make a few graphics for the web. I am in the process of finalising my designs and ensuring I have a nicely scaleable design using natural breakpoints (I.E. when the design says a break is needed, not when an iPhone/iPad/Android device says it is) There are many links on the web about this including (but not limited to)
- Responsive Web Design article (An early article on responsive design.) [alistapart.com]
- Responsive Web Design (A book based on above article) [abookapart.com]
- Breakpoints by design (Brief look at reference articles on responsive vs adaptive design) [mrqwest.co.uk]
I will publish in this article later this week (I hope) my final designs as 3 jpegs, showing the 3 responsive layouts I have designed for, roughly covering desktop, tablet and phone. These will be using natural breakpoints which I hope show nicely on current (Jan 2012) mobile devices.
Update 13-01-11 OK So I have uploaded a “work in progress” of my design. It is far from perfect (The Nav bar for starters is incomplete, missing menu options and spacing, and there is no body content) However it allows people to see my 960 grid, as well as the base layout that will (quite successfully as there is 0 body content) go down to fit on an iPhone portrait screen. The file is shown below, and the PSD will be released under a Creative Commons share-a-like license when complete.
View part 2 here (Complete 960, and 720 designs)