Week 12 | #buildabrand
This week is the final week of DES511 Semester 1 module which we have to finish the live project website which I have to admit was delayed until January thank to festive season that is Christmas.
Visual Composition
First I start out by deciding on width of the content in my website with 800x600 for standard default which I use to design most if not all my websites at the moment.
I initially went for 600 pixel width for the content itself but due to certain design idea such as having top menu section need to be in one rather in two lines due to lack of width within 600 pixel limit, I raised it to 650 pixel wide.
I start creating the visual composition of the site in Photoshop with uses of the tools, which guides lines is most important for me to manage the placement of the content. I start with header section by adding 50 pixel height bar with 3% noise to provide more of grain effect than being completely smooth, and add in bevel effect to 1 size to create shadow line effect on the bottom of the bar.
Figure 1 - Header background image
Then I create indent nav bar which you would find inspiration from search bar that normally sit on top right but I will add in links for each of page within GROW website, with uses of colours to highlight the mouseover and mouseoff effect to add interactivity to navigation that sit to right hand side of header.
Figure 2 - Nav Bar for the header section
I add in the logo which been changed with the difference between first and second screenshot which you can see below in Figure 3 to show the difference between it didn’t seem to work well because of having a banner with “GROW” and another “GROW” sitting on left hand side of the nav bar. I decide on the tab with inspiration from www.simplebits.com website with the bookmark so I alternate the first version into second version which proved to work to better effect with the white combining with green background rather having variety of colour of green in the logo in contrast with the white background.
Figure 3 - First Version of the GROW logo and banner
Figure 4 - Final Version of the GROW logo and Banner in header section
The content section for the homepage took me bit of time deciding on what and where the content should be placed and what font and colours I should use. I want to use a slideshow but the issue was the image was drowning out the content, as in taking too much space and turning the column of text too short in width. So I reduce the scale of the image and add in the box with drop shadow around the image, act as a container, creating more focus despite being smaller which you can see on live site in comparison to screenshot below:
Figure 5 - Content Section of Visual Composition
I have decide to create images of title of each page as in “HOME”, “ABOUT US” etc. because of the risk of font not being available (Brush script std) in users computer so it would be much safer to use image instead using header tag.
I use colours of dark green for the header tag which using black in default norm for text instead of which because it would create less focus in white with contrast of white background instead of black colour creating more of focus onto the text itself. Sub header would be in paragraph with strong tag instead of using header.
The box shape I have create for the content container is to create a focus onto centre of the page rather having complete white background, risking drowning out the content with the sheer volume so it need to be divide into their own area.
Figure 6 - Screenshot of Content Section of Home Page in Live Project
The footer section which after I read the specification created by our lecturer, I add in the funders logo but after feedback of adding round corner, I alter the funders logo with round edge and that improve with huge difference which you can see below with two image.
Figure 7 - First Version of Funders/Sponsors Section
Figure 8 - Final Version with changes to Funders logo in footer section
I did similar effect of the background of the footer to the header accept the shadow facing north side of the footer bar. It does seem to produce the effect of the white background in content sticking out rather creating shadow effect of the bar sticking out – it could work both way depending on how the user see the overall display of the website.
Figure 9 - Footer Background Image
The Garden page contain the Google map in same dimension as the slideshow in the home page but I feel it was too small and need to modify the scale if this project is actually being considered by the client which is not.
Implementation of the live project
I am implementing the design onto HTML document rather creating with Wordpress so it is static but the function of the blog is a placeholder sadly and I will be honest, this website took me 6 hours to design and coded which is pretty quick but again that the difference between implementing into static format rather doing dynamic sites with features of the blogs and what missing from the features the clients want.
You can visit the live project site below:
www.chriskeeley.net/grow/index.html (best viewed in Firefox browser)
Also you can see the three screenshot below highlighting the difference of visual composition and the live project on web browser.
Figure 10 - First Version of Visual Composition of the Live Project
Figure 11 - Final version of the visual composition with changes from first version
Figure 12 - Screenshot of the "The Garden" page from the Live project site
Conclusion
I feel I should have done more work and spend more time in effort of learning and implement within the Wordpress and try creating features such as weather feeds that is potential feature that the client want.
However I feel that with result of the live project, the scale of the content is too small and should have expand to width of 800px width for the content of the website itself, enlarging the slideshow or in fact given a section row above/below the text on the home page.
The garden should be done in similar effect creating larger view of the Google map with details of the bubble indicating what and where is the GROW gardens is rather just being a marker on a map.
Blogs features should have more details, creating more of bubble/box around it with details, similar to the slideshow container. I am disappointed with myself that I should have spent more time on DES511 module but alas I need to work harder on my major project in next semester so I will take it as lesson and work harder than before.
P.S. “Thank for your patience for not attempting to injury/kill me for murdering your eye sights or brain cells with my attempt to murder the English language.”
















