I think my biggest gain has been going through alot of my old photos and giving them a polish and shine using HDR (high dynamic range) logic. What is HDR I hear you ask? Well when you take a photo it can only capture a certain range of light (and in turn colour and detail). So often to get a good balance of the main subject matter you lose detail in the darker and lighter areas. So true HDR, is to take 3 or more photos capturing the correct exposure for the dark areas, the medium areas and the light areas. Then using some software such as Photomatrix you combine the images to give you a final image that shows the detail across it and with it some fantastic results. You can read more about HDR here, I will admit that alot of my images are only using one image and some digitial magic in Adobe Lightroom, but this was due to the fact I did not take the photos with HDR in mind and so did not have the range of exposures required. Even so it is amazing what you visual information a RAW image contains and the results have been amazing compared to the now quite dull originals, please go see yourself. HDR is something I will have in mind with future photo shoots and I will set up the bracket exposure on camera.

The design page I am very proud of, I still feel it needs some tweaking visually, but then in the words of Leonardo da Vinci ‘Art is never finished, only abandoned’ and a deadline for launch is proof of that. It was a chance to play with unique navigation ideas to view the imagery, again it allowed me extend my coding knowledge through image maps and CSS which is great way to create some fun interaction and still have accessibility in the framework. From here I want to work on design skills and improve what I can create visually using Illustrator and photoshop, maybe one day be featured in those design feeds I keep tweeting or passing on via my google reader shared items.

Anyway, if you are reading this I hope you are at my website already, if you are viewing this through a rss feed, then go have a dig around.

So with the website project relaunch at an end, what is next I ask myself. Well I have a new website to build for a client, need to get my creative writing back on track with posts to Imagine Tales along with a novella. Alongside these as mentioned, more photography and desiging of which the result will be posted up at my website and written about here. And I really do need to get out on my mountain bike.

Till next time.

After a good few days of Photoshop goodness and alot of movies in the background I have finally got a finished design I am happy with, of which you can see below and click on to see the the live test page.

I tried various design elements and whilst I wanted to involve ‘ice’ elements they did not really work with the colour scheme, which I wanted to keep as it is warming and received good feedback. So I concentrated on the floral elements and worked with those to bring the site together.

My observations of adding the design after the layout and base colours is that I can see that there are certain areas that would gain from designing earlier on in the process as I found myself restricted from how I coded it and some ideas would of required alot of going back over covered ground. The main part being the banner, where I wanted design to flow from banner to content area to bring it together, I found myself having to spend alot of time getting elements to line up and recoding DIVs  to lose borders so I could get the backgrounds to run to the edges. If I had a better idea of the final look before I did the colours and secondary layout then I would of been more economical with the images used and improved loading time of the site. Admittedly in these days of broadband it is not so much of an issue but old habits die hard and it’s a good attitude to have when building websites.

Essentially the design was restricted by the layout, which is just as bad as restricting content and layout to the design. So I would recommend doing a basic layout, not adding borders or padding whilst you come up before you do the designing in Photoshop.

I am still very happy with the final results, the build process as a whole and look forward to seeing the final website in all it’s glory. So now for wordpress template and the other pages.

Till the next posting, remember smoking milk can seriously damage your saucepans.

Read Part 4 – Base Colours

At first I thought I could jump straight into the designing, open up photoshop and get creative. But again, cause I had the freedom to concentrate on the design with out the content or layout to fill my head meant I sat back at looked at how I would actually reach the final design. I realised it required some research and inspiration firstly, go look out on the world wide web at all the wondeful examples of good and current design trends.  So I created inspiration or mood boards, something I have not done since college days. But they really help get basic concepts out and also produce more ideas in my own head.

I thought how would this be dealt with in a professional workplace and as a designer you are trying to grasp what the product is and also play to the whims of the client as well, ie favourite colours, etc. Often a client is most happy when you show you have listened to them by putting their ideas into the designs and sometimes client ideas is personal preference, but we are all human and know what we like.

So I had to be me designing for me the client. Nothing quite like dual personalities to get yourself out of the box.

I decided to take two approaches, the first being the product, ie frozendesigns.co.uk and tooked the word ‘ICE’  and then I looked at me the customer and my preferences which whilst I look round my flat is brown aspect ‘CONTEMPORARY’ (inbetween the bits of junk, books, DVDs and toys).  You can see the results below and click on the images to view larger versions.

My thoughts after this process and viewing the boards is that I am drifting towards the brown colours more than the blue, but I do feel that the ‘frozen’ aspect needs to be involved. So I am looking at a combination of the two. I want a brown and white (ish) contemporary feel to the design, use photoshop brushes combined with photomanipulations to create a current modern design feel, but bring ice like shapes into the design alongside the more floral/grunge aspect I had imagined.

Whilst catching up on articles on the web via my google reader, I found something on upcoming design trends for websites and a big impact is CSS3 and HTML 5. So before I start any actual designing I want to look at what can be achieved using these new coding abilities.  So this is where I leave you now, off to do more research and improve my front-end coding knowledge.

Read Part 4 – Base Colours

Read Part 2 – Website Layout

You can see the progression here from content only to layout (please ignore the lurid colour scheme, it is there just to show the different elements and how they fit together).

I have traditionally always used the ‘position’ tag in CSS and then used co-ordinates be it relative or fixed (those who know CSS will understand me), but think about telling a element such as an image to sit in specific place or in relation to something it follows on from. This tended to always give me more problems later on and find myself with gaps later on where the element originally sat. But this layout has none of that, and I have done better coding to make things sit where I want them to. I found it alot easier to understand how to do this, make the HTML changes and get the logic in my head as I did not have to concern myself with fiddle-some design elements at this stage.

The other advantage is that I have hit far fewer compatibility issues between different browsers. It would be nice if all browsers worked the same when rendering a webpage, but they don’t and often you hit issues between how your webpage looks in Firefox, Internet explorer, Chrome, Safari and Opera. The biggest culprit being Internet Explorer, which due to most workplaces using it is still one of the most used browsers. The cleaner code has given me a more stable layout and the only issue I have dicovered so far lies with the twitter app I have used. I would love to have a stripped down feed via feedburner like my journal you are reading now, imagine tales and google shared articles feed, but for some reason trying to put an rss twitter feed in requires a login and password, so if anyone has a suggestion I would be grateful to hear from you.

So with the layout nicely tucked away, I can move onto the design stage and get my creative juices flowing. Whilst builidng the layout, little light bulbs kept lighting up above my head as the shape began to form. I did have a basic idea in mind, but as I saw how it  fitted together I could see the work space I had for being very artistic in Photoshop and the areas where I would need to rely on the CSS to aid the design. So if you look at the screen shot below, I have outlined in red the areas I can make the design flow and bring the page together. I will be able to design in a way that will draw the user to the areas I want, aiding the usability of my website and so the over all experience.

For along time now all these elements of building a website compatibility, usability, accessibility and awesome design seemed so much to think about when I built a website, but using this method of content >> layout >>design makes these things come naturally as you go through each stage and suddenly all becomes alot clearer. I am sure with each new website I build I will discover new revelations, but then it always good to progress and understand.

The next stage forthe build will be to split the design into two sections, firstly still working in the layout area I will change the colours, fonts and link styles. This will give me a rough idea of the feel of the website and also give me definate sizes of areas, from there I can design and bring in the art to compliment. But before I gey on with these elements, a mood board or three.

Till next time.

Read Part 3 – Inspiration Boards

Read Part 1 – Website Redesign and Content Driven Design

Through my google reader feed where I seek daily inspiration and current trends I came across this article about how designing a website should be content driven and so logically built using content as the base, then onto layout and finally the look and feel. Makes perfect sense, but industry has always designed static images in Photoshop first. Whilst at first it makes sense for resources and giving the client an idea of the concept, there are numerous issues involved. These include how fonts render and also trying to make content fit the design, so later on changes have to be made to the design. This format of working is residue left over when content, design and layout were all held on the same page. Today the design and layout are separate, which means you can nail down the content and functionality tesing early on  then build the layout around the content, experiment with the how users read the website, then improve on that with effective design methods to drive website users where you want them, be it looking a some nice photos, buying a toy car or socially interacting.

The other advantages of the ‘content – layout – design’ process is you can take care of those often under-rated issues of accessibility easily. Imagine someone was listening to your website being read out, it needs to make sense and often the layout and design is relied on to help it make sense, no good for someone who is blind. So when you add content without layout or design you naturally order it to make sense. Bingo! Along with certain other attributes in the code like image descriptions, headings and keyboard shortcuts your website becomes more accessible, which in turn also helps search engines get the best information out of your site. It really does make sense.

So frozendesigns.co.uk v7 then, well I am on day 2 of my two week leave from my job as a ‘Web Project’ bod to rebuild/redesign my website and I am already seeing the advantages.  I first listed what I wanted on the site (using my wonderful wipeboard), what would be on the landing page and the menu/website structure. As I began to add content, at this stage mostly just feeds from my twitter account, journal, google reader shared items and creative writing website ‘imaginetales.co.uk‘ ideas of the layout have formed, a natural way for it all to sit together.  I still have more content to add with a summary about what the purpose of the website is along with featured design/photography I have created. Then I can play with layout and finally the even more fun exciting bit of design and making it look awesome. From there I can take the layout and design to the child pages and also my wordpress powered blog to bring that into my website. Up till now I have used templates by others, now I need to use my own.

You can see my progression here and I will posting more on my journal as my journey to build my site and become a better web designer continues.

Till next time…

Read part 2 – Website Layout

Scary Smoke - © Stoffel De Roover / Lumendipity Photography

I found some amazing photo manipulations by Lumendipity. Using photos of smoke he has taken, he has created some amazing imagery in photoshop, now on display for the world in his smoke photography gallery.

His images really capture my imagination, the smoke is hauntingly ethereal and entices you to stare deep into the layers. You could easily mistake the whole image to be digitally created from scratch and when you come across life imitating digital art (with a little help), you have to take a a second look. Truly inspirational! My personal favourite is the ‘Scary Smoke‘ shown here, I can imagine that different people will see different things, a psychologists perception dream!

The artist gives an excellent interview at digital-photography-school.com with the added bonus of techniques. So people like me can grab some joss sticks and their camera and try it out for themselves. I’ll let you know when I have some decent results.

Hamble Refinery by David Atlee

I have posted up some stock photos for use by the deviantART community and also commercial use (with credit). Over the years I have relied on those good folk at deviantART with free stock photos to aid my digital art and photoshop skills, its good to give something back. I have maintained two deviantART accounts over the years, one to showcase and one for stock. Ironically its the stock photos that got noticed and I gained two daily deviation awards with Hamble Refinery and Blue Rust.

Death of Teddy by imaginism

Whilst on the deviantART thing, I did discover this piece of dark childhood goodness, ‘Death of Teddy‘ by imaginism. Personally I think that the chance of a teddy bear being destroyed by a monster dress as a dog is quite likely. But then the sky is purple in my world. Anyway please check it out, if your a deviantART member give it a favourite click (assuming you like it too of course. But I can not accept responsibility from any nighttime visits from said dog if you don’t!!!). I love the colours, shading and the way you have to take a second, third, fourth, etc look to work out what is going on.

Well its time for coffee and pirate partying!  Till next time.