Design for Digital Media Environments – Post 21 – Production Post 6 – Logged in homepage

I was set with the task to set-up the second home page, which will be the logged in page. On this page their should be;

  • Nav Bar
  • Highest Rated Posts
  • Most Crazy Posts
  • Club News Feed
  • Post a story
  • Footer

Theses elements should follow the same styling, colour schemes and imagery used with-in the rest of the site to create a consistent look all the way through the site.


So to being creating this I created a separate page html page, there was a few reasons why I used a HTML page instead of PHP the major advantage was that I can coastally live previewing the site instead of having to upload the code to a private server, meaning I can make small little changes and quick and easily see the effects of the changes I made. The code that I used to create the layout was HTML and CSS, which can both, be live previewed instantly.


So to start off with I created the basic shapes, colours, sizing and positioning of the 3 feeds without any of the information, which will be, displayed with-in the feeds. To create the layout I first drew the boxes on paper, which represents the divs that will be need to create each element. I did this so I would create my life easier as I can pre-plan the amount of divs and what divs with be inside which, this meant that I had a quickly and easily create a visual representation for what will be needed, making the whole design process quick and easy as it allowed me to mess around with the look with-out spending ages adjusting the code to see the different looks.

Scan 2


Once settled on the final design of the page I went ahead and created the design in HTML and CSS to create the design on my website. At this point the code was just divs with classes and id’s to create the look, which match my design. Below is the code and along side are the looks of the coded design.


Now that all of design has been created and edited to create the desired look it was time to convert the page into PHP, this was so I can using some PHP to add the header and footer which has already been created and saved as a template with-in the template folder, which means I can just use the include code to add the header and footer to the page.


Now that the page has fully created the basic layout I have found an issues of the 3 columns layout. The problem that I have come across is that the columns them-selves are so thin meaning that the posts will be extremely long taking up a lot of room not showing many posts per page. The issue will be raised with-in our next group meeting. In the mean time I have come up with a fix to the problem, which is to create it a 2-column design, which will be the feeds and the club news, but feeds section will have a sort by which will be the two columns, which are designed at the moment.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s