Design for Digital Media Environments – Website Development 1

We have finished putting together the resources for our “About” page. This included deciding on the final images, code and colour scheme that we needed to build this page. Now that we know what our basic layout will be for the time being, we know how to code, structure and present the remaining pages of our website. As well as creating these new pages for our website, we will also need to add and improve some additional details on our “About” page. For instance, instead of the word “SOBU” at the top of the page, Hallam will replace it with our final design for the official logo. Our final layout for the “About” page was based on our sixth sketch that we came up with as a group, near the start of this unit. The sketch is pictured below. 6 After Adam, Hallam and I contributed our own elements to this page (while working as closely as possible to the design in our sketch), this is what our “About” page currently looks like: Screen Shot 2015-04-13 at 20.45.59 Screen Shot 2015-04-13 at 20.46.11 The following code alone was used to create the infoboxes with the blue headers, next to our group image at the bottom of our page:

<div class=”col-md-6″>

<div class=”list-group”>

<a href=”#” class=”list-group-item active”> Adam’s Role </a>

<a href=”#” class=”list-group-item”>Adam helped with the code of the about page, our Wiki and our GitHub.</a>

</div>

<div class=”list-group”>

<a href=”#” class=”list-group-item active”> Hallam’s Role </a>

<a href=”#” class=”list-group-item”>Hallam coded the main page of the site, where each item can be seen.</a>

</div>

<div class=”list-group”>

<a href=”#” class=”list-group-item active”> Robin’s Role </a>

<a href=”#” class=”list-group-item”>Robin helped with the visual elements, coming up with concepts for branding.</a>

</div>

</div>

</div>

</div>

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s