Design for Digital Media Environments – Final Evaluation

As the Design for Digital Media Environments unit is coming to an end, I feel that my team and I have appropriately and successfully met the unit-brief requirements set for our project. These were to create a Web-browser based application that satisfied the specific needs of our target audience, and to use database scripting language to link our application to an online database that would be affected by user input.

With these requirements in mind, my team and I designed and coded a website called Student Offers for Bournemouth University (SOBU), using a variety of PHP and CSS code. The website we created allows the user to see available offers and deals on a live feed. It also allows the user to sign in and post offers and discounts located in Bournemouth. I think our final website has a very clear target audience, with obvious needs that our website properly addresses.

The members of my team were myself, Adam and Hallam. I think we worked very well as a team since we all took an active part in creating the website and our attendance was great: none of us missed any of the important group meetings. We also went about working on the elements of our website in what I believe was the right way, as none of us spent too much time on just one task. This allowed us to focus on making sure that important aspects, such as functionality, were properly organised before we worked on the visual elements, like the appearance and design of the website.

The images below show our final version of the updated website for SOBU.

Screen Shot 2015-04-13 at 21.24.16

Welcome Page

1

Main Home Page

2

The Offer Posting System

3

My Posts

4

Social Media Dropdown Menu

5

About Page

6

Register Page

updated nav bar

Full Navigation Bar

Our team combined our strengths in coding and design to create a website linked to a database. This allowed us to keep track of all of the users’ posts online. I find this one of the most effective and interesting aspects of our website, as it shows instant results that we can monitor.

When I started working on this project, I found coding in PHP somewhat challenging. However, in the course of the unit I developed a better understanding on how it works, as well as other websites and coding languages we used. These included phpMyAdmin, GitHub and Bootstrap.

If I had chosen to do things differently, I might have added some more visual elements on the sides or at the top of the page (e.g. more stylised logo or banner), as in the other student deals websites explored in my website research. However, this would have overcomplicated the overall website design. We decided that streamlined simplicity makes the presentation more user-friendly, clearer and aesthetically pleasing.

Overall, I am satisfied that our website has properly met all the requirements in the brief and pleased with how the final result turned out, in terms of its responsiveness, content and design.

Design for Digital Media Environments – Website Development 4

As our unit is coming to an end, we have uploaded our final designs and code for our group website to the dakar server. Since the last Website Development post, the general design and house style of our website have been modified. The images below show our final updated designs for our “Home” and “Register” page. Our “About” page generally has the same appearance as before with very few changes.

A different background colour for our live feed posts has been chosen to make the various offers stand out more. A drop shadow has also been added to the text boxes to give more depth to the design of the page, as well as make it look more professional and visually appealing. Features such as the navigation bar and drop down menus have also been improved. These elements are more responsive and they make website navigation easier and more user-friendly.

Screen Shot 2015-04-15 at 19.34.14Screen Shot 2015-04-15 at 19.34.17Screen Shot 2015-04-15 at 19.34.34In the end, we decided not to use a to use a fancy, detailed logo on our website, as the most important objective of the unit is to maximise functionality and responsiveness. Each team member’s copy of the website and the source code required to make it has been uploaded and is almost ready to be marked.

Design for Digital Media Environments – Current PHP and CSS Code

Pictured below are the PHP and CSS codes that were required to make most of our main pages on the website. As stated before, Bootstrap was also frequently used to help with the coding and designing of the project. Our current code contains a combination of PHP, CSS and bootstrap. The connect.php file isn’t included in the following screenshots since it contains login details that directly access the database in which we store our source codes and user posts. Screen Shot 2015-04-15 at 14.17.47 Screen Shot 2015-04-15 at 14.17.50 Screen Shot 2015-04-15 at 14.17.56 Screen Shot 2015-04-15 at 14.17.57 Screen Shot 2015-04-15 at 14.17.59 Screen Shot 2015-04-15 at 14.18.03 Screen Shot 2015-04-15 at 14.18.14 Screen Shot 2015-04-15 at 14.18.15 Screen Shot 2015-04-15 at 14.18.18 Screen Shot 2015-04-15 at 14.18.23 Screen Shot 2015-04-15 at 14.18.27 Screen Shot 2015-04-15 at 14.18.37 Screen Shot 2015-04-15 at 14.18.51 Screen Shot 2015-04-15 at 14.18.58 Screen Shot 2015-04-15 at 14.19.01

Design for Digital Media Environments – Net Neutrality

Throughout the lectures in this unit, we have learned how common and important Net Neutrality is not only to us and our course, but also to the digital media environment we live in. Net Neutrality is a system which is used in network design by an Internet Service Provider (ISP). This system was set up with the aim of giving equal priority to all forms of data accessed by web browser users. The original term of Net Neutrality (also known as “Network Neutrality”) was created in 2003 by Tim Wu, a professor at Columbia University.

Net Neutrality ensures that all online applications, websites and services that users visit take an equal amount of time to access and load. This is how this system prioritises information on the internet so that the public can experience browsing it in a consistent and fast way, without any lagging, freezing or irregular browsing speed. Net Neutrality affects not only all forms of online content but also the ISPs that provide the services for net users.

Because of Net Neutrality, ISPs (e.g. BT and Virgin Media) currently have no right to forbid users from accessing any particular online content. While ISPs can monitor what users access, they cannot limit or restrict this access to online content without facing legal issues. If Net Neutrality wasn’t established, ISPs would have full control of what users can see and access on the internet; they would also have the ability to block any websites of their choice. Buffering and loading speeds on websites from competing ISPs could also be slowed down on purpose so that users are forced to go onto websites from other service providers.

Net Neutrality also legally states that all ISPs should spend an equal amount of money to manage and provide internet services for their users. However, a recent scandal in the media occurred when Comcast (the world’s largest mass-media, broadcasting and cable company) carried out a paid deal with Netflix, in order to give Comcast users quicker and better access to Netflix’s services.

Netflix reached a deal with Comcast to pay a fee which would allow its Comcast’s customers quicker and more efficient access to Netflix. This gave Comcast users faster network and downloading speeds for the streaming media that Netflix offered. The reaction to this unfair prioritising of Comcast users (compared to everyone else), was of public outrage. This breach of Net Neutrality caused protestors and companies (e.g. Google) to take action and campaign for free, open internet services for all of its users.

Since then, Net Neutrality has been a major point of discussion from organisations such as the US Telecommunications Industry Association and the Federal Communications Commission (FCC). In February 2015, a list of new rules has been established, affecting Broadband providers and ISPs.

Additional Sources:

Design for Digital Media Environments – Logo Development 3

After reviewing the visual style and elements we will be using for the website, my team decided that the logo we are going for will be closer to my original sketch (see Logo Development 1). This was because we wanted a design that was simpler and consistent with the aesthetics of the rest of our website.

As shown below, I scanned an image of one of my sketches, and then used Inkscape to digitally enhance the shape in finer detail. Next, I experimented with different colour schemes that could fit in with the rest of the website. All of my current trials with the logo can be seen within all of these images in this post.

a b c d e f g h i j k l

Design for Digital Media Environments – Logo Development 2

During the course of the week, I have been working on and developing some of the main visual elements of our group website. As shown below, I have been using Inkscape to digitally enhance the logo sketch that my group and I found most suitable for the project. This creative design process of designing our first logo draft involved using vector graphics and the visual design tools available in Inkscape.

I used the circle/ellipse/arc tool to draw a circle in which our logo text will be displayed. I then used the pen tool to draw a single triangle to go around the circular shape of our logo. I duplicated the triangle and slightly rotated it several times, in order to create a jagged, ribbon-like border around our logo. The simple handwritten style of “SOBU” has been taken directly from a scanned page of my sketchbook, as illustrated in the screenshots below.

Screen Shot 2015-03-01 at 21.22.34 Screen Shot 2015-03-01 at 21.22.35 Screen Shot 2015-03-01 at 21.22.38 Screen Shot 2015-03-01 at 21.49.40 Screen Shot 2015-03-01 at 21.51.56 Screen Shot 2015-03-06 at 10.02.58 Screen Shot 2015-03-06 at 10.05.50 Screen Shot 2015-03-06 at 10.12.30 Screen Shot 2015-03-06 at 10.14.34 Screen Shot 2015-03-06 at 10.16.19 Screen Shot 2015-03-06 at 10.19.56 Screen Shot 2015-03-08 at 20.56.41 Screen Shot 2015-03-08 at 21.05.28 Screen Shot 2015-03-08 at 21.05.36 Screen Shot 2015-03-08 at 21.05.54 Screen Shot 2015-03-08 at 21.06.05 Screen Shot 2015-03-08 at 21.06.49 Screen Shot 2015-03-08 at 21.07.58 Screen Shot 2015-03-08 at 21.10.42 Screen Shot 2015-03-08 at 21.12.50 Screen Shot 2015-03-08 at 21.12.55 Screen Shot 2015-03-08 at 21.15.21

Design for Digital Media Environments – Digital Versions of our Sketches

In order to give our design ideas and sketches a clearer, more focused appearance, Adam redrew all of our design sketches and created some new ones in Inkscape. Inkscape is a free vector graphic design software package that all users can access for their own design purposes. The software is free and downloadable at their main website.

We previously used Inkscape in our last unit Development and Realisation, where we had the choice of using it or Adobe Illustrator to design our infographic posters. The use of Inkscape has helped us come to a better understanding of how to achieve our final design objectives. Currently, we have decided to stick to the ideas presented in image 6, due to its orderly and clear box style. At this point, we’re going for the designs that seem likely to be most aesthetically pleasing for users.

1

Image 1

2

Image 2

3

Image 3

4

Image 4

5

Image 5

6

Image 6

7

Image 7

8

Image 8

Development and Realisation – Poster Development 1

So far, I have been experimenting with the pen tool in Adobe Illustrator, to make clear shapes and images; in this case, I have sketched out all the countries of the world. This will be an important factor in showing the life expectancy of the world.

Screen Shot 2014-12-21 at 18.54.51 Screen Shot 2014-12-21 at 18.56.10

More specifically, I’ve used the pen tool to draw pre-existing images, the example above being from one of the issues of National Geographic that I previously used for research. As I go on, I plan on experimenting with different ways and methods of presenting the world in clear ways on a poster.

Screen Shot 2014-12-18 at 16.13.06 Screen Shot 2014-12-20 at 20.15.24 Screen Shot 2014-12-20 at 19.22.09 Screen Shot 2014-12-20 at 17.43.48 Screen Shot 2014-12-20 at 17.40.10 Screen Shot 2014-12-20 at 17.30.44 Screen Shot 2014-12-20 at 17.29.45 Screen Shot 2014-12-20 at 17.26.06 Screen Shot 2014-12-20 at 17.25.48 Screen Shot 2014-12-18 at 16.16.45 Screen Shot 2014-12-18 at 16.14.19 Screen Shot 2014-12-18 at 16.13.32 Screen Shot 2014-12-18 at 16.13.11

Adobe Illustrator Practice – Practising 3D effects 2

During this week’s workshop, we went over Adobe Illustrator one more time before we broke off to carry on with our work in the Christmas holidays. We were trying out the same 3D effects as before, but this time we were advised to experiment with them over the holidays and post what we’ve done onto our blogs.

We were tasked to work in a separate document and try out the three different 3D effects (Revolve, Rotate and Extrude & Bevel). As seen below, I split the document into three sections, one for each effect.

Click to view in full-size

3d trials

I found that the 3D effect I enjoyed experimenting with the most was Revolve, as it was quicker, easier and more efficient when it came to making recognisable objects (e.g. the Christmas tree, water drop and wine glass).

Screen Shot 2014-12-10 at 20.05.02

This particular effect was easy to use as the software can take a single drawn line (as seen above on the right side of the glass) and convert it into a complex 3d shape.

Below are images that show my finished work during the production stage, and how I managed to create the 3D objects and text.

Screen Shot 2014-12-10 at 20.03.25 Screen Shot 2014-12-10 at 20.03.43  Screen Shot 2014-12-10 at 20.05.09 Screen Shot 2014-12-10 at 21.24.38 Screen Shot 2014-12-10 at 21.24.44 Screen Shot 2014-12-10 at 21.46.33 Screen Shot 2014-12-13 at 20.13.44 Screen Shot 2014-12-13 at 20.23.12 Screen Shot 2014-12-13 at 21.43.15 Screen Shot 2014-12-13 at 21.45.11 Screen Shot 2014-12-13 at 21.46.34 Screen Shot 2014-12-13 at 21.46.57 Screen Shot 2014-12-13 at 21.46.57 1 Screen Shot 2014-12-13 at 21.52.46 Screen Shot 2014-12-13 at 22.25.15 Screen Shot 2014-12-13 at 23.22.33 Screen Shot 2014-12-13 at 23.22.54 Screen Shot 2014-12-13 at 23.25.53 Screen Shot 2014-12-13 at 23.49.26 Screen Shot 2014-12-13 at 23.59.20 Screen Shot 2014-12-14 at 00.36.45

Adobe Illustrator Practice – Practising 3D effects

I recently decided that Adobe Illustrator would be the design software I’ll be using to design my poster for the Development and Realisation Assignment. I found it interesting to try and go over the software again, in order to practise features I’ve already tried, as well as new features, including the available 3D effects. I wanted to try these effects out, just in case I wanted to use 3D graphics on my finished poster, to add a more aesthetically pleasing effect.

I experimented with different shapes, as well as the brush tool, and then applied effects to them. Illustrator provides three effects, each with very different results. As seen below, there are different results you can get with the 3D tools.

A sample of 3D objects I created with Illustrator

A sample of 3D objects I created with Illustrator

In the picture above, I used the effects “bevel & extrude” (used for the green shape), “rotate” (for the blue hexagon) and “revolve” (for the yellow and orange shapes). These complex shapes came from drawing a few quick lines and then selecting the effect I wanted, making it a very easy process.

My favourite effect is “revolve” as it can create a smooth 3D image that also has built-in light and shade physics that can be changed manually.

It was fun exploring these effects, as they allowed me to quickly and effectively change the properties and appearance of shapes, as well as text, as I found out later on. Overall, I plan to incorporate a mixture of 3D graphics as well as 2D pictures into my final poster.

Screen Shot 2014-12-08 at 15.07.23

As seen here, the highlighted blue lines show the original drawing before the revolve effect was added.

Screen Shot 2014-12-08 at 15.11.45 Screen Shot 2014-12-08 at 15.11.37 Screen Shot 2014-12-08 at 15.11.16 Screen Shot 2014-12-08 at 15.10.58 Screen Shot 2014-12-08 at 15.09.01 Screen Shot 2014-12-08 at 15.08.47 Screen Shot 2014-12-08 at 15.08.36 Screen Shot 2014-12-08 at 15.13.18Screen Shot 2014-12-08 at 15.41.45 Screen Shot 2014-12-08 at 16.51.50 1 Screen Shot 2014-12-08 at 16.51.50 Screen Shot 2014-12-08 at 16.51.52

wires

An example showing a shape and text after a 3D effect has been applied to them.