mexicanfrog's posterous

  • Web Page Rationale

    • 12 May 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost
    Web Page Rationale

    My flat web page design in relation to my final site submission is not exactly the same. The main

    design elements that I have kept are the background image, the header, the main navigation

    boxes and the sub-navigation side bar.


    The main navigation boxes in my flat design were of different proportions. The idea for this came from one

    of my reference sites. Unfortunately though due to lack of capability and patience with using CSS I was not able to replicate the idea from my flat design onto my final site. Instead I choose to keep the main navigation boxes of the same proportion with a drop shadow below them, which I believe is still effective.


    Another design element that I scrapped was the different coloured boxes placed behind the main content of the page.

    Instead I decided to keep this entire section plain white with no design so the text in the in the main content section is easier to read.


    My original footer colour on my flat design was yellow, but on my final submission I changed the colour to the same blue used for the main navigation boxes. I did this because I wanted to keep a simple a clean colour flow throughout the site using the colours blue, black, grey and white.


    The last section of my flat design that I changed in my final site submission was the side bar. Originally my idea was that when you clicked on the course page you wanted to view it would pop up as a blue box. Once again due to limited CSS skills I wasn’t able to replicate this. Instead I just got the font to change from white to blue when you clicked on the page link.


    In the end I am happy with the final design of my site. I believe it is a lot cleaner and simpler then my proposed flat design idea. The only main issue I had during this part of the assignment was figuring out how to get CSS to do the design things I wanted it to do.  

    • Tweet
  • Visual References

    • 14 Mar 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost
    So here is a visual reference of some of the different sites I looked at explained in my rationale.

    (download)
    Click here to download:
    Visual_References.zip (419 KB)

    • Tweet
  • Rationale

    • 14 Mar 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost
    Click here to download:
    SITE WIDTH IN PIXELS AND POSITION.docx (13 KB)
    (download)
    Click here to download:
    SITE WIDTH IN PIXELS AND POSITION.docx (13 KB)
    • Tweet
  • Web Page

    • 14 Mar 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost
    Webpage
    • Tweet
    • 14 Mar 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost
    • Tweet
    • 14 Mar 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost

     

    • Tweet
    • 13 Mar 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost

     

     

     

    • Tweet
  • Site Structure

    • 11 Mar 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost

    Click here to download:
    WD site structure.pdf (260 KB)
    (download)
    Click here to download:
    WD site structure.pdf (260 KB)

    So here is the site structure that I'm going to follow. It has 1 section, 1 sub-section and 1 sub sub-section.

    • Tweet
  • Pattern

    • 23 Feb 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost
    Oliverpattern2


    http://www.goslingo.com/

    So this is a personal web site for a web developer. The design element I like on this site is how the whole site gives the illusion that it's one big piece of folded paper. When you click on the different navigation points on the top of the screen, it scrolls down to the folded section that you're after.
    It's a really easy site to navigate around and provides all the information you need to know about him and it's a really interesting concept.

    • Tweet
  • Backgrounds

    • 23 Feb 2011
    • 0 Responses
    •  views
    • Edit
    • Delete
    • Tags
    • Autopost
    So here are a couple of screen shots of backgrounds that I liked the idea of would want something of a similar style on my site.

    I especially like the 'matthew and sara' background. I think the wall paper effect that they have in the background and the hand drawn vines in the foreground combined together creates a really nice simple effect.
    http://matthewnsara.com

    Background 2 follows that same earthy feel that the 'matthew and sara' background has.
    http://www.sproutfund.org/spring/

    (download)
    Click here to download:
    Backgrounds.zip (135 KB)

    • Tweet
  • About

    25 Views
  • Get Updates

    Subscribe via RSS