Month: February 2015

Design for Digital Media Environments – Meet the Team Page

As you can see from the image below Adam has very nearly completed the ‘Meet the Team’ page. Adam used Bootstrap to create the webpage, this being a far easier coding method than writing all our code from scratch. The ‘Meet the Team’ page also shows how our research led to the final design as we did indeed use one of the sketches. 11025405_10203905932713893_1414707226_oWhen it comes to the design of the page we will try to stick with this theme throughout the whole website as it will create a more professional look. The final step in completing the page will be adding the team image and possibly some team roles. Next up is creating the website, I will post some sketches of possible webpages that we will need.

11028433_10203931629476296_2058552503_o

Design for Digital Media Environments – Researching the Idea

Now we have decided on the basic idea of our website its time to start looking a bit deeper. While brainstorming with Adam and Robin I produced a mind map of some of our ideas. It really helped us think outside the box and come up with ideas we otherwise may not have.

 – Concept

In terms of the concept for the website its very important as this what the student will interact with and see. One idea that could work well is that of a live feed. Having a live feed of students posting means students will get latest deals. A live feed is also very similar to Facebook and Twitter meaning that it feel comfortable and familiar to students.

 – Accessibility

When it comes to accessibility this is a good opportunity to draw on our knowledge of the Bournemouth area. Once again similar to how Facebook started we can make the website just for Bournemouth students. We can make it seem personal to them by having them login with their student ID’s. We will also be able to find the small and large business that have student deals, something a larger scale website wouldn’t be able to offer.

 – Branding

Branding is obviously hugely important as this is how student will recognise us. One approach that we all liked was to merge the brand of SUBU and the Bournemouth website. The blues and pinks used by both will websites will be recognisable to all students as they have all visited SUBU and BU’s website.

Screen Shot 2015-02-19 at 14.40.13 – Competitors

I went online to see if this kind of idea had already been done. In general many websites focus on one aspect, such as travel, homes or just where students can find 10% off. One website that was similar was ‘Save the Student’, on their website they show the lasted deals of certain products. They also have many categories and also a ‘Just Added’ page. The overall idea may be similar but a few ways we will take it further, such as students being able to posts and deals specific to Bournemouth.

Screen Shot 2015-02-21 at 17.23.27

 

References:

Save the Student,. ‘Save The Student – The Student Money Site’. N.p., 2015. Web. Accessed from: http://www.savethestudent.org. 21 Feb. 2015.

Design for Digital Media Environments – Meet the Team Page – Design Plans 2

As I said yesterday I would do a post showing the digital versions of our sketches for the design of the ‘Meet the Team Page’. Adam created these digital versions through Inkscape, which is a free vector graphics package. This really help visualise what the page will actually look like. At this moment in time it looks like  we will choose image F.

Design for Digital Media Environments – Meet the Team Page – Design Plans 1

Today was a very productive day with my group, we were able to brainstorm some great ideas. A bunch of these ideas were for the design of the ‘Meet the Team Page’. As a first step we drew some ideas out on paper just to get a quick idea of what we were going for.

2015-02-19 10.50.56

Image A

A clear theme that ran through out all of our sketches was to have the three bios placed in the middle of the page side by side.

2015-02-19 10.51.22

Image C

One aspect I really liked about Adam sketch was the meet the team banner that ran across the whole width of the page. This technique can be seem among many professional websites designs.

2015-02-19 10.51.35

Image D

What I think works well in this sketch is the use alignment, making everything look more organised. I drew from my research on Apple’s website when doing most of my sketches.

2015-02-19 11.41.41

Image E

My final sketch comes from combining Adams use of the banner and my use of the alignment. Overall I think this might be the design we go ahead with. Adam has gone away and made digital versions of these sketches to help us visualise the end result better. I will post about this tomorrow.

 

Design for Digital Media Environments – Blogging System

In our last lecture Garrett went over some useful points to creating and maintaining a professional standard web blog. This proved to be very useful as a better looking web blog can only enhance our overall grade. Garrett went over the subjects text, images, video, categories and tags and it turned out it was the little changes you make to these aspects that help produce a higher quality.

Text

Firstly was text, one of the most important parts to a web blog as it will always be used. Garrett first pointed out that we shouldn’t use massive chunks of text but instead shorter to the point sentences on a more frequent bases. In no way should we be writing an essay, topics should be split between two or three posts. Bullet points were also suggested as a good way of breaking up text. A technique I’ve never done before so am trying for the first in this post. I will defiantly take this on board with my system and also carry on a trend of using the justify text alight.

Images

In terms of imagery there are a few aspects that I need to improve on and some that I can carry on using. The first being the use of varied imagery from sketches, photographs and diagrams. I feel I have done a good job in a variety of images from mind maps to screen shots. One aspects I feel really works in my system is how I fill the space of blog and also keeping it aligned with my text. This adds continuity, professionalism and a organised look to all my posts. Two techniques I will need to add to my system is scanning any sketches I produce and also annotating all my images. Both these will result in making the blog easier to read and understand.

Video

One thing I really took away from Garrett’s seminar was the way in which I can post videos as research. I have been fairly narrow-minded up to this point by only really using images. Videos will add another medium of media into my blog and add further interest.

Categories

Up to this point I feel I have been fairly organised with my categories or maybe to organised. Garrett stated that our blogging system shouldn’t have to many categories and yet I have twelve. Categories such as ‘Time Lapse’, ‘Animation’ and ‘Typography’ could perhaps be all combined into one category, such as ‘DMD Tasks’.

Tags.

In the case of tags I will carry on with my current system of tagging the key words from blog posts. So far I have amounted a varied tag collage with my current system.

Design for Digital Media Environments – Coding Progress

In the last few weeks with Kyle we have been making the backbone to our websites. The first week was relatively simple with just creating and organising the project files. This week I came to a slight halt when trying to connect our PHP to the database. Screen Shot 2015-02-17 at 09.48.06The concept is that whatever is input into the username and password form will then be shown in the database. It may sound simple but I just couldn’t get the two to link together. Screen Shot 2015-02-17 at 10.15.59

As you can see in the image above I was finally able to get the two linked together as you can now see data in the user and password fields. The image below shows the reason why I was able to connect my database. I tried to narrow what might be the main problem and found the two were in fact connected but any data being input in the form wasn’t showing up. I was missing the code between lines 10 and 17, meaning that the now the data input into the form would show in the database. Screen Shot 2015-02-17 at 10.15.13

The ‘echo connected successfully’ code on-line 15 was what I used to narrow my problem. When pressing submit on my form this would display next to the form meaning that it had connected to the database. When try a ‘echo input successfully’ it did not display’. This has given me quite a bit of confidence as I was able to find the issue without having to ask Kyle. Screen Shot 2015-02-17 at 10.15.29

Design for Digital Media Environments – The Team

On Friday we were put into groups, I will be working with Adam and Robin. Just from early conversations its obvious that we all want to create something that’s new, simple and most importantly something that works well. Working in a team is something that I have always enjoyed, I will do my best to make sure we work well. It may seem a little cliché but we are only as strong as our weakest member so its important that we all pull our weight to produce a professional website.

Communication is one of the most important parts to successful team so we have decided to use a few tools to make this easier. It maybe simple, but first we created a group chat on Facebook and our phones, this way we can communicate whenever we need to. The next tool was more professional in the way of Github, through the use of Github we will be able to store, backup and access any coding, graphics or information we wish to store there. This will be particularly useful when perhaps we aren’t all in University or when we split up for the Easter break. For instance one of us may produce the logo but another may have to insert it into the webpage. Even if we aren’t all together we wont be hindered by any logistical problems and will be able to continue with any work we are doing.

Screen Shot 2015-02-17 at 12.16.28I also decided to set up an Asana account where I could create a group for the three of us. Asana has the ability to set to-do lists, tasks and post important dates on a calendar which can be seen by me, Adam and Robin. I have already set the submission date for the unit and our first group task of creating the ‘Meet the Team’ page. Asana is further useful as we can all download an app on our phones, meaning that we can always be updated on tasks and further have less chance of missing a post from one of us as we look at our phones more frequently.

Screen Shot 2015-02-17 at 13.10.19The first task that has been set for us is to create a “meet the team page”. Adam has been helpful and has already started a page so it’s just a case of me and robin adding to it.

In terms of the idea for the website we have decided to go with my idea of cheap living for students. Mainly because it meets a clear target audiences need and furthermore hasn’t been done in a way that is specifically targeted at students. Next comes the process of creating a strong brand, from the logo, name, style, colour scheme and graphics. On Asana I have given us till next week to decide on a few of these. My mind-set is that the earlier we decide on things such as this then the easier the making of website will be.

Design for Digital Media Environments – Entity Relation Model (ERM)

In last weeks seminars we looked into how databases functions through the Entity Relation Model (ERM). An ERM is a diagram that represents the relationships between entities which create the backbone for any database. Entities are (Rouse), “the equivalent of grammatical nouns, such as employees, departments, products, or networks. An entity can be defined by means of its properties, called attributes”.

We also looked into how our databases, PHP and HTML will all link together to display the website. Below is good demonstration of how each component of our website works alongside each other and without one they would all fail.

4_tierGoing away from our seminars Simon told us to produce our own ERM model for a recipe book. Even though we were told to make our ERM of recipe book I wanted to put my own twist on it. I thought it would be interesting to have my ERM of one of my early ideas so therefore have based my ERM on my holiday idea of posting where you’ve been in the world.

Screen Shot 2015-02-16 at 15.11.44

The first category is member and is made of largest amount of data as it must store the vast amount of information that a single user may have. Each of these pieces of data are entities and will be unique to the user. Data such as username, email and password will be essential to the user accessing their account and therefore being able to post on the site. The username along with the avatar will be further useful when differentiating user from user.

The photo and video categories contains certain data about each specific photo and video that is posted on the website. The entities will also be used to identify the image and video, such as photo_ID, filename, description and date stamp. Certain entities from each category need to be linked together so for instance an image can be tracked back a user. The way this is done is through a foreign key. Photo_member_ID is an example of a foreign key I have used. The job of this is to link the member to the image.

The holiday category is the holiday itself. What the user may say about the holiday, for example holiday_text. I also have to add three foreign keys which will link the ERM together. One aspect I added that maybe slightly different to a recipe book ERM is the ‘holiday_video_ID’. In a recipe book website a video may not be necessary but my idea for the holiday posting videos will be core part in the website.

References:

SearchSQLServer,. ‘What Is Entity-Relationship Model (ERM Or ER Model)? – Definition From Whatis.Com’. N.p., 2015. Web. 16 Feb. 2015.