Mockups for website home page, here goes… firstly structure > this is the basic container for web page content, based on the simple grid:
Adding boxes into the grid areas, to hold the content:
Thinking about how the boxes will behave in the containers when the web page is resized in the browser (think wide screens, tablets, phones here). My idea is to make the top menu and footer containers fill the width of the screen, with the content centred on the screen. Ideally, boxes in the main content areas (article, footer, sidebar) will re-arrange themselves in the horizontal space from left to right, and top to bottom. Non-essential boxes can disappear if there’s not enough space.
For the home page, the main article space under the header (in the blue box) would have an intro section at the top, and updateable news items underneath. The right hand sidebar green box would contain key links to the main areas of interest for users and volunteers. Essential details are in the footer boxes. Medium sized screens would display like this:
Wider screens would have more detail in the header, and the articles container would be wider, allowing for a bit of re-arrangement of boxes:
Smartphones would see a single column display without the furniture header illustration to use the space better: