The big idea of showing CSL Blueberry as the centre of everything in a social and trendy person's life will be shown by the background image, which shows splashes of vibrant colours, and logos of prominent mobile features found in smartphones, such as twitter, facebook, yahoo messenger and such. Thus i photoshopped a couple of images and composed them to create the background image.
I also put on top of the image a sort of transparent glass in the absolute middle to act as the base for the div's i am going to put afterwards.
With the background image done, i can start focusing on the main contents of the page.
As i plan to use CSS and HTML, aided with javascripts for dynamic contents, i calculated the suitable width and height of the whole website.
I came out with 950px and did not decide the height yet. My main concern was to fit the whole page inside the 'transparent glass' , so the footer will have around 20-30px margin with the edge of the 'transparent glass'.
With the main container set (div), i put the first thing which is the header image.
Then below it i put the menu bar, which is using in javascript. The javascript used will allow dropdown menus and smooth transitions between menu items.
after that is done, the div i put under the main menu bar is the main banner. i figured it should be big enough to grab attention and be the centre piece of the index page. so i chose 950px X 400px as its dimensions.
by choosing another javascript applet, specifically jquery plugin named Zurb jquery slider, i put all relevant banner images in between the script lines and created a timed banner.
then below that banner, i chose to put 4 big image buttons to link them to what i think users of this website would really like to see (the most important thing of this website).
after that, i used a simpe javascript of a conveyor (no plugin) to put up latest news that moves from right to left, pausing as the mouse hovers over it. I linked the individual news to their respective pages.
then comes the footer. i specifically set the top margin of the footer to about 20px to make sure that it becomes nearer to the edge of the 'transparent glass' of the background image. this creates the compact yet elegant design of the main page.
Then i started to plan on the layout of other pages. After careful deliberation, i came out with 3 main layouts for the rest of the pages.
this is the basic div layout, with 3 variations created by the division of right div. Some pages with image galleries will be divided into two parts for the right div, while others stay as one main div.
Here are some examples of the layouts for each type of pages:
TWO DIVS DIVIDED FROM ONE MAIN DIV
ONE MAIN DIV INSIDE RIGHT DIV AND ONE INSIDE LEFT DIV
ALMOST SAME AS ABOVE, BUT RIGHT DIV IS FURTHER DIVIDED TO TWO STACKING DIVS
so with that, i began to fill all the relevant informations and promotions by using these three main layout and one special layout for the main page.
i also used jquery plugin to call videos from youtube on two pages, video1.html and video2.html.
its a simple script and makes video viewing inside the page without being embeded. (more dinamic).
