First Draft
I thought it would be neat to explain my thought process and show my progress as I went through creating the new CCM theme. I knew I wanted to make the theme have a console feel to it, but still be modern. I am NOT a designer, but I tried ;(.Things I knew from the start, I wanted to use ASCII art, I wanted MINIMAL graphics, and I wanted a fluid layout.
I thought it would be neat to explain my thought process and show my progress as I went through creating the new CCM theme. I knew I wanted to make the theme have a console feel to it, but still be modern. I am NOT a designer, but I tried ;(.Things I knew from the start, I wanted to use ASCII art, I wanted MINIMAL graphics, and I wanted a fluid layout.
Second Draft
Sample data is in, I have a twitter feed pulled in the top, and I am getting the CSS set in place to be able to modify all the links and hx tags.
Sample data is in, I have a twitter feed pulled in the top, and I am getting the CSS set in place to be able to modify all the links and hx tags.
Third Draft
I felt like the solid green color was too.. well.. too terminal. Too much green.. I wanted to have a little bit of color. I tried an orange…
I felt like the solid green color was too.. well.. too terminal. Too much green.. I wanted to have a little bit of color. I tried an orange…
Fourth Draft
I tried more colors.. I just threw everything I had on there and went to ask @steventrotter what insight he could give me into choosing some colors that worked with what I wanted.
I tried more colors.. I just threw everything I had on there and went to ask @steventrotter what insight he could give me into choosing some colors that worked with what I wanted.
Fifth Draft
This is where I got my first thought of layering a low 5-10% transparent color on top of the 70-80% transparent black that I was using.. You can see this on the comments background. Still have a long way to go here….
This is where I got my first thought of layering a low 5-10% transparent color on top of the 70-80% transparent black that I was using.. You can see this on the comments background. Still have a long way to go here….
Sixth Draft
Final Draft
This was where I really felt like I took the colors in the right direction, and I also used the layered transparent PNG files to their fullest here.
This was where I really felt like I took the colors in the right direction, and I also used the layered transparent PNG files to their fullest here.
Beta
Added the footer in, cleaned up the markup, added a few links here and there… tested live on the blog and fixed a few things. I really like the look at this point and am happy enough with it to replace the old theme.
Added the footer in, cleaned up the markup, added a few links here and there… tested live on the blog and fixed a few things. I really like the look at this point and am happy enough with it to replace the old theme.
Beyond Beta
This turned out great so far.. it is really fluid.. scales out really well, it only has one real image (the background) and 5 or so 10x10px transparent png files. It loads quickly, it looks good for something a programmer made, more importantly it was what I WANTED it to be.
This turned out great so far.. it is really fluid.. scales out really well, it only has one real image (the background) and 5 or so 10x10px transparent png files. It loads quickly, it looks good for something a programmer made, more importantly it was what I WANTED it to be.
I need to look at adding a few extras in, blockquotes, and changing up some of the hx tags. I also see it breaks when you make it too small.. though it does scale out really well.
 First Draft |
 Second Draft |
 Third Draft |
|
 Fourth Draft |
 Fifth Draft |
 Final Draft |
 RC1 |