JellyBean Creations Website

How I designed my website

I wanted to go through how I came up with my design for my website, I have to admit this completed design you see today took me about 6 months from start to finish, but I wanted to go through the process so you can see what decisions and choices I had to make.

Platform

So after a lot of though and throwing designs together I choose to you HTML 5 and CSS 3, the reason for this was I wanted to be able to control all of the design by creating my own framework, this could be done in WordPress and other CMS’s but I choose this as I have a fair amount of coding knowledge from College education and I used it as a testing block to see if I could still do it.

I must admit a lot of this would have been faster in WordPress and visually would have look similar. I finally realised that coding takes time and if you have time then its 100% worth it and you will get to see all the result of your own work. I would like to add that another question I ask when doing a project is… How many people will need to work on the site?, this is important as CMS’s handle this a lot easier and there is no need for FTP to upload files.

Content is Key !

Content is very important, I ask this of client and I also made sure I had my content first as this will help me to come up with a design to incorporate all the design aspects for the types of content you need to display.

This includes images, logos, Maps, contact forms etc… this can be harder to arrange to get together but its all worth it, once you have this information you can move forward with designs, this will also help to come up with concept designs as you can mimic the content in the design allowing clients to visualise what their site will look like.

Designs

So you have all the content and now its time to get the ‘Creative Juices’ flowing, you can now start to put designs together incorporating keys things like logo designs, colour schemes, layouts if required by clients, this may be an area they have left up to you and this can be a great things as you can come up with different designs from minimal to visual to practical.

I never discard a design, no matter if I don’t like it, they can be useful and it may be something that you can incorporate into a preferred design if the client likes it.

Then doing designs I love to create mood boards, call me old school but it helps me visual see the pages and site as a whole and how it will link and work. For my site I actually printed out the final full site design and to this day I still have them rolled up in a tub as reference as this is the hard copy I can refer to if and when I want to change areas or design.

Implementation

I had my final design and now I needed to start implementing it, and for me this meant dusting off my coding knowledge chest and I have to admit it took me a few days to get to grips with everything and with all the new additions to HTML 5 and CSS 3.

The goal is to build the site so it looks exactly like the design, now this may vary at times but I have to say I was certain the design was what I wanted and I knew that I have coding knowledge to be able to build it just as it was designed.

Testing

This is where everything seems to take ages to perfect and the key word is ‘Perfect’, I was testing all the code was firing properly and that it working on all types of devices and browsers, this opens up to having to code for none compatible browsers so that the site will work for all users on all types of device, no matter the age of spec or speed of connection.

This stage did seem to go on for ever but I will say that it was very productive as I found things out that with the new additions of HTML 5 and CSS 3 it was easier to create or style and in turn this make loading speeds faster and easier to style too.

Conclusion…

So I hope this has helped you see how I designed my site and I use this for all my builds no matter how big or small the site I am building. I learnt a lot in the process and this opened my mind to CMS builds for websites as this offers benefits as Frameworks that have been build, tried and tested and optimized by WordPress coders so that you can focus on Styling and Content for the site.

I will add that the Blog on my website is full WordPress and the reason for this is that I can quickly create posts when out and about on my phone and using the WordPress app I can have it live straight away without having to be back at my laptop to write and upload it to the server.

If you would like to see more about my site then please jump over to the JellyBean Creations website https://www.jellybeancreations.co.uk and see how the design has been implemented and used everyday.

Leave a Reply