I will use this weblog as documentation of my progress through out this project – I named the category after the unit title – DESIGN FOR DIGITAL MEDIA ENVIRONMENTS so all posts related to this topic will be easy to identify.

I am also going to tag all the appropriate pages with ‘Group Project’ these will be the pages directly linked to the development in design of the web application.

I will use the same format for every page.

  • title in caps lock 
  • images centred 
  • images captioned – brief explanation and link 
  • images all of the same width
  • all sketches will be scanned in 
  • all text aligned left
  • all text justified 


This is the initial page of development ideas that me and Ashely came up with. It shows the basic structure of the site – with pages and links (with theoretical ideas at the bottom of how to expand if we could). 3

We then started to map out a potential layout for the home page although the sketches display our initial ideas well, I wasn’t sure how clear they would be to someone else. If I needed to refer back to the sketches a few weeks later well into coding the site I wasn’t confident they would be clear enough.



I then used illustrator to map them out more clearly so when writing the code it would be easier to understand.


unigram sport


A task of setting up the about page was set to kick off the project. We had to create a small bio about each of our other group members, this helped to get to know are team members better. It also got the discussion goes about the concept behind the website.

As this is the first page we created it was mostly about forming a basic design layout in html in which we could insert our bios.

Screen Shot 2015-02-21 at 15.08.12

I set up a navigation bar as well that would link to the other pages. I created folders for the other pages in brackets to test that the link would work – although they had no content.

Screen Shot 2015-02-22 at 00.14.55

Screen Shot 2015-02-22 at 00.15.16

Screen Shot 2015-02-21 at 15.07.57

I used the theory of the Box Model to set up the page. I played with different colour schemes in css but Ashley and I were still in discussion about this – so this theme was just temporary.

Screen Shot 2015-02-21 at 15.08.22


We used the site to play around with potential colour schemes. ( Shot 2015-04-19 at 11.29.01


‘An entity-relationship diagram (ERD) is a graphical representation of an information system that shows the relationship between people, objects, places, concepts or events within that system. An ERD is a data modeling technique that can help define business processes and can be used as the foundation for a relational database.’  []

Information that is needed from users such as:

  • ID
  • NAME
  • DOB
  • CITY

This helps to identify the users so when they contribute/login/post on a a site this information can help to identify the user.

Entities are objects or concepts that can have data stored in them, the relationship between those entities is what is displayed in a ERD.

The three main relationships are:

  • One-to-one (1:1). For example, if each customer in a database is associated with one mailing address.
  • One-to-many (1:M). For example, a single customer might place an order for multiple products. The customer is associated with multiple entities, but all those entities have a single connection back to the same customer.
  • Many-to-many (M:N). For example, at a company where all call center agents work with multiple customers, each agent is associated with multiple customers, and multiple customers might also be associated with multiple agents.


New media is ‘modular’ compared to old media which is ‘linear’ – this is the main idea/concept that I took form the lecture.

New media provides modular information as it is made up of smaller and smaller components until binary code is reached.

Lev Manovich – ‘modularity is one of his five principles of new media:’

  1. Numerical representation
  2. Modularity
  3. Automation
  4. Variability
  5. Transcoding


One of the problems that was highlighted in the seminar is how to visually represent new media database. There are two main ways in which they choose to try and show it:

  1. connector lines (literally just draw a line between two variables)
  2. tables (use the x and y axis to navigate around the table)

Both ways show the most simplistic representation of the relationship between the two variables with in the database.

New media allows interactivity – the database being modular enables choice/interaction; where as traditional media narrative has no interaction. Interaction and narrative are at opposite ends of a fulcrum where when the level of one increases the other decreases.


We were posed some questions at the end of the seminar to think about and discuss:

  • Does visual representation limit the databases possibilities?

Yes – I think that attempting to represent something so complex as a database visually so that humans can read it just stunts the complexity that computers could process/understand.

  • Is the database and its visual representation for navigation inherently a contradiction?

Sort of – a database is a three dimensional complex structure with more information than any human could process (at same speed) so attempting to represent it would work and it does work thats how humans know how to set up and control databases in new media – but the representation is much more simplistic that the actual thing.

–What do we mean when we say meaningful navigation of new media and to whom is this navigation meaningful?

–If interaction and narrative are opposites, is the database an anti-narrative form?

No – they have to link in some was as they are both part of the same database. They may provide different purposes with in the database but it is all contributes to the same system.


A first group meeting was arranged for the beginning of February, when Ashely and I discussed ideas for our website.

We went through the brief, making notes and jotting down ideas as we went so when we finished we had a thorough brainstorm of ideas on paper that we could develop further online. (Assignment brief.)

Eventually we came to a very rough idea of ‘Unigram’ (name isn’t set yet.. still thinking). The idea is basically a combination of current application Instagram, Pinterest, Tumblr and BU app. It is a social photo sharing site but it is exclusive to the University you attend. The exclusivity is what makes it stand out from the current photo sharing social media sites. There will be a login page where you have to select your University and then sign in using your student ID. [If you have big enough database you could store student IDs from every University in the UK-maybe even USA if we wanted to come up with ways of how far development could go!]

There will be 3 basic pages – Home, About, Contact.

However on the home page there will be different categories.

  1. FOOD
  2. HALLS
  5. SPORT

Each of these categories takes you to its own page. This is where you can post and view images related to that topic. When you post your image you can tag it more specifically. So for example on the Halls page you can tag ‘Purbeck House’ or on the sports page tag, ‘Lacrosse’ or ‘Womens Lacrosse’.

There will be a search tab where you can search for images that have been tagged by the team/society/course you are involved in.

There is already a BU app however its purpose is informative whereas the web application that we want to make is entirely social.


In the first lecture for this new topic (digital media environments) we were introduced to a few new concepts:

  • WEB 2.0:

I previously wasn’t aware of this idea as I have grown up with the internet so I don’t remember a time when it was any different. The idea of Web 2.0 is that it is interactive, it allows people to update the data available. So the more people use it the better it becomes as more and more data is continuously being added by multiply sources. All of which comes together to provide a better user experience.


Wiki is a big part of Web 2.0 as it is all about multiple users adding and interacting with the software. ‘Collaborative modification’  which allows for the development/deletion of content. There is an undefined owner of the network which is what makes it so different from any other kind of network. Wiki is essentially an open source software.

This simplistic structure really helped me to visualise the architecture of the network and how the social software worked: Screen Shot 2015-02-23 at 14.26.23


A new approach to design to ensure that the results meets the user requirements. This term is not only used in the field of digital media design but also architecture, product design and urban design to name a few. Its aim is to have people more involved in the design process, it takes into consideration the medium of design as well as the objective of the people.


To make an open architecture for collaboration:

  1. DATABASE – where you get the information from
  2. ‘BUISNESS’ LOGIC – request from the server “submit”
  3. INTERFACE – the interactive web browser the the client inputs the forms

EXPERIMENTING WITH OPEN SOURCE SOFTWARE: After creating an account with OpenStreetMap I found my current address in Bournemouth and added the House of flats that I live in.

Once I found the building I edited the address to show: Cardigan House.

Screen Shot 2015-02-09 at 15.30.45 Screen Shot 2015-02-09 at 15.31.16The screen shot above shows the final view of OpenStreetMap which now comes up with the symbol for apartment block and when you click on it it shows more details of address and building information, such as stories.