On the final version of my first website I made some changes from my original roughs, but I also left a lot the same. The focus of the site became how the color green's association with nature has influenced other, seemingly unrelated, aspects of our lives. I decided that creating what appears to be a static page (though it's actually ten pages in all) with changing facts and pictures would be an interesting way to draw user attention and create user interactivity. I wound using an external style sheet because it is ten pages and any changes would only have to be made once, instead of ten different times. I created four tabs, using artwork I created in Illustrator, to denote various categories. Each category has three sub-categories with detailed information relating to how it has been influenced by it's green's association with nature. The sub-category menus on the left side were all artwork created in Illustrator. None of the edges of any of the boxes and pictures are square - I soften every edge in an attempt to give it a more more natural and organic feel. The paper container was created in Photoshop using various filters to achieve the look of old parchment, as well as the burn tool and dodge tool for areas of light and dark, and a layer mask to achieve the distorted edges.
DESIGN: Great job Josh!!! THIS IS SIMPLE AND very effective. I really enjoy the connectedness of your imagery to the buttons and the information, creating an interesting website. The user interactivity through the sight is seamless. You have got rid of the boxes that were evident in your first website, so that it reflects the soft organic, environmental quality of the site. The layering of the images softens the grid and flow between the sections of the page works more effectively. I do agree the background could be a little lighter, perhaps picking up the green with the green in the header and menu.
ReplyDeleteTECHNICAL, CODE:
If you had not told me about the text dropping down I would not have notice – this can be styled in the CSS format box > positioning > under the overflow and then choose, visible scroll etc. Just remember the least code the better – that means setting up as much of your generic code in the wrapper as possible. Also name the closing divider tags as well. Good commenting out!!