Journal of David Atlee @ Frozen Designs

David Atlee designs and builds websites, takes photos, plays with digital design and writes stories about odd things.
 
  • Pages
  • Subscribe
  • Posts Tagged ‘web design’

    Stage 5 – The Design

    Saturday, January 30th, 2010

    Welcome world,

    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

    • Share/Bookmark

    Stage 4 – Base Colours

    Wednesday, January 27th, 2010

    Another update to the website build process, after deciding on a general concept from the inspiration boards I worked on the basic colour scheme choosing 3 base colours, adding some wonderful curved corners using new CSS3 code (available only in latest versions of  Chrome,  Firefox and Safari) and finally trying different fonts and text colours for base text and links. You can see the outcome below and click on the image to see the live HTML version.

    Base Colours and CSS3 Elements

    So now into photoshop for lots of creative playing…

    Read Part 5 – The Design

    Read Part 3 – Inspiration Boards

    • Share/Bookmark

    Stage 3 – Inspiration Boards

    Tuesday, January 26th, 2010

    Well the weekend is well over and I have finally finished the next part of my new direction to building a website. I hope you have been keeping up by reading my last two posts about web build process of content - layout and finally design. So I reached the design stage after a very successful start with being able to concentrate on just content which improved accessibility, search engine optimization and clean code, then the layout which helped reduced cross browser issues.

    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.

    Inspiration board  - ICE

    Inspiration board - Contemporary

    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

    • Share/Bookmark
  • Recent Posts
  • Tag Cloud
  • Categories