After giving some thought to my current project yesterday, I decided that the current design style is too bland. I would either need to work on the weight and balance of the site, or reconsider the design approach altogether. Here is the current version of the site:
Rather than emphasize the Socialist / Communist theme of the site in terms of design, I decided that to try a completely different approach, and have emphasis on the Homemade Food / Farmers Market / Wholesome elements – and create a fun, light, Vector cartoon style site that seems to be incredibly popular these days. My natural default seems to be to veer toward the minimalist, clean, crisp style – so this would be a good way for me to branch outside of my comfort zone and get some much needed practice creating graphics.
First, I sketched some plans for the new version of the site:
For this I would need to create some bold Vector graphics in Illustrator. I haven’t used Illustrator for a number of weeks (since the previous project) so I thought I’d have a few practice sessions. I was shocked to find that already I could no longer remember how to perform the most basic of functions. Therefore, I immersed myself in some online Youtube tutorials. There were some great videos of people creating logos which I found really inspiring.
To create a ‘Hills, Sky and Clouds’ landscape I followed this tutorial (http://www.youtube.com/watch?v=9raEbBMHq4E) step by step. This was a really good way of getting used to a number of techniques. The Youtube tutorials are intentionally very fast, but by pausing the at each stage and following along in Illustrator I learned some of the fundamental processes.
Below is the result of my practice session for a basic background:
My plan for the site is as follows:
- Copy the Vector elements over to photoshop as separate png image per layer (Hills / Sky / Sun / Individual clouds
- Each layer would have transparency on background
- Stack these images up in the header (Position:absolute)
- Apply CSS3 transform to clouds to have them slowly move across the screen
- Apply CSS3 transform to the sun to have it slowly rise from behind the hills
- Maybe a plane that travels across the screen with a banner displaying “Social Change Through Condiments” – this is likely to push my drawing skills though!
- Illustrator hills have a gradient (top to bottom). The main body of the content that sits under the header will have a ‘linear-gradient’ applied to the background-color – the gradient will start with same green of the bottom of the hills in the header and will darken toward the bottom of the site