Design for Digital Media Environments – Target Audience

Once we had decided on the main concept of our website, which will revolve around providing deals of all kinds for students, our team almost immediately identified the website’s ideal target audience: university students.

Currently, the demographic for our website can be described as the following:

  • BU students from any course (and possibly AUB students).
  • Not gender-specific.
  • Late teens to early adult.
  • Students who are looking to save money.

One of our first ideas for the slogan of the website was “Student offers (or deals) at Bournemouth University”, which made it clearer that we are focusing on BU students as our main target audience. After a while, we considered possibly giving AUB students access to this service as well. The AUB students already have access to many BU events and facilities, so it would be fair to them and it would add over approximately 3,000 potential users (2011; see here).

Advertisements

Design for Digital Media Environments – Visual Elements and Graphics

After looking at different websites that specialise in student deals and discounts, I noted down how the presentation and visual styles of these websites have helped each of them stand out in their own way. In order for our website to have a similar, professional appearance and look, I will be designing various visual elements of the website (such as logo, headers etc).

Pictured below is the official SUBU (Students’ Union at Bournemouth University) logo. This will be used for inspiration, as our website will be designed to have the appearance of an official BU company website (SOBU, Student Offers at Bournemouth University). My team have advised me to create a logo for our website that takes visual inspiration from the SUBU logo. I will also focus on experimenting with art software (e.g. Inkscape and Photoshop) to produce different SOBU logo variations. This will be done to make our website more distinctive and memorable, as the websites I’ve researched are in their own, separate ways.

subu-logo

Design for Digital Media Environments – Website Research

Our main concept for our group project will be a website on which students will be able to register, log in and post offers associated with different categories (e.g. club and shops). In order to develop a better understanding of, and inspiration from, ways to design a student deals website (as well as the content and presentation of these websites), I carried out secondary research into the subject.

For my research I looked into different websites that specialise in providing students with the best deals. The sites I found (pictured below) specialised in deals for a vast range of different categories and fields, such as food, technology and travel. The most interesting examples of sites that I looked at were SaveTheStudent and NUS extra.

Looking at these sites was particularly useful and interesting, as it gave me ideas about the structure and presentation for all our pages. Graphical elements, such as branding and colour choices help each of these websites stand out in their own ways, despite the fact that they specialise in the same thing. The functionality of most of these websites also depends greatly on user-generated content, in the form of deals and offers for different items and services. The following pages will be very useful to refer to when deciding on the most appropriate and professional-looking appearance for our website.

Web research 1Web research 2Web research 3Web research 4Web research 5

Website sources (in order):

Design for Digital Media Environments – New Blogging System

Over the last couple of weeks one of our lecturers, Garrett has reviewed some very useful points on how to write and present a blog in a professional style and format. My most recent blog posts have taken these points into account; the visual standard has been improved and I intend to bear Garrett’s points in mind from now on. below are the four main categories of improvements in our future blog posts that he recommended .

Images

The use of imagery in my previous blog posts could be improved. I have been advised to enlarge all the images to full size to make them immediately clear and visible to the users of my blog. I should also implement a broader variety of images (e.g. sketches, scans and screenshots) in my posts. Each image I upload should also be annotated and discussed in more detail. I also need to make sure that every image is linked properly, so that anyone can click on it and see a full-sized version. All these elements can help make my blog more visually appealing, as well as more informative for the users.

Video

Like images, video files should be discussed in greater detail, and annotated. This form of visual media should also take up more space, as it makes my blog posts more visually appealing and varied. I haven’t uploaded many video files yet, but I will follow this advice from now on.

Categories and Tags

Up till this point, I have separated all my blog posts into different categories, depending on the coursework units to which they relate. Garrett has told us not to use too many categories, as it makes navigating through our blogs less user-friendly.

However, we have been advised to use as many tags as we wish. They can be an effective means of connecting different blog posts, and they help users who want to search for specific posts on my blog.

Overall, Garrett’s advice has been very useful and I will make sure that my future blog posts follow these points as well as I can.

Design for Digital Media Environments – Logo Development 1

I produced some sketches of my own to help our team decide on the appearance and visual style of our website logo. Early next week, we will be discussing which of my examples is most appropriate for our website. Other topics to consider are various visual elements and design choices, such as the colour scheme and information placement. The following images have been scanned from my sketchbook. Scan 1 I looked at Behance.net for inspiration on the visual style of most of my logos. Behance.net presents visual work from various worldwide artists’ portfolios, making them available for everyone to access and view.Scan 2 Website reference: https://www.behance.net

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

Design for Digital Media Environments – Website Design Plans 1

This week was very productive for my team, as we were able not only to decide what our main website is and what to call it, but also to produce some planning sketches for the design. As can be seen below, most of my team’s sketches follow a similar design format and style. This was because we wanted our website to have a certain box style that interlinked all its pages visually. Our website will be set up as an online service that BU students can use to find out about current deals (clubs, shopping, restaurants etc).

Our current name for this service is SOBU (Student Offers at Bournemouth University). Due to the planned content, our box style will be partly inspired by that of the official SUBU (Student Union) website. As our team carried on drawing sketches for the website design, we agreed more and more that we should use the website to neatly present information and images in an orderly box style. The first sketch below was drawn by me and after that, towards the end of the group session, we decided to aim for this new design style.

2015-02-19-10-50-56-e1424357729372-1

Sketch 1

2015-02-19-10-51-22-e1424357769557

Sketch 2

2015-02-19-10-51-35-e1424357818666

Sketch 3

2015-02-19-11-41-41-e1424357843894

Sketch 4

After coming up with these design ideas, we just needed to put together our ideas on the coding and visual sides of the projects. We decided to meet as a group later in the week to decide on these vital elements.

Design for Digital Media Environments – Group Project “Meet the Team”

During the recent weeks since we started this unit, we have all been assigned to teams of three or four, tasked with one major group project, focusing on our teamwork as well as coding skills. For this task, I’ve joined Adam and Hallam’s team and we will be working on this project until mid-April.

During this stage of the project, we have been assigned to produce a webpage with the suggested title “Meet the Team”. The main purpose of this page is to introduce each team member (myself, Hallam and Adam) to anyone reading, through the use of images and personal biographies. This page will be designed to be part of the website that will be the main project in this unit. This project will be a media space that has a specific purpose for its users and target audience. We will be using our current coding skills not just to add these details about ourselves to the “Meet the Team” page, but also make it as functional as possible. As well as PHP and HTML, another suggestion we’ve received is to use Bootstrap, which I worked with in one of my earliest workshops.

As shown below, we also used websites that help teams work together, contribute and share files as the development process continues.

Github is an online service that will be used frequently in this project to share updated versions of files and folders with the team.

Asana is an online calendar service that groups can join to plan group meetings and events. Both of these websites are examples of media spaces, in which the three members of my team are in charge of using throughout the project.

group2 group3 group5 group4

I look forward to seeing what I can create as part of this team.

Coding Workshop – Styles in Codes

In today’s workshop session, we were given a practical exercise to work on. We were given the task of observing an html page presented on the projector and then recreating it using Brackets. One of the main objectives of this exercise was also to help us understand and master the use of styles in our css codes. As pictured below, a combination of html and css code was used to recreate the webpage we saw on the screen.

Screen Shot 2015-02-19 at 10.13.49

My finished webpage, as close to the original as possible.

Screen Shot 2015-02-19 at 09.35.54

The basic design of my webpage, alongside the css code used to create it.

Screen Shot 2015-02-19 at 09.49.58 "Screen

We were also introduced to Paletton, an online service that can be used to help web designers come up with colour schemes for their websites. This could definitely be a website that I will look into when I’ll be designing my webpages in the future. As seen in the following screenshots, the colours are determined by an adjustable colour wheel on the main page.Screen Shot 2015-02-19 at 09.36.53 Screen Shot 2015-02-19 at 09.36.56 Screen Shot 2015-02-19 at 09.37.19

Design for Digital Media Environments – Contributing to a Public Media Space

In my previous blog post, I briefly introduced open media spaces and what they were used for. Media spaces will be essential to our unit as one of our main projects will be to create one, so it’s important to learn how they work and how they are implemented in a digital environment. Last week, we received our first task from the Design for Digital Media Environments unit, which was to contribute to an online, open media space and document what we added. It was interesting choosing a particular open source media space, as there are so many to choose from nowadays.

OpenStreetMap is another globally used media space, much like Wikipedia. However, OpenStreetMap is vastly different as it gives people access to a map of the world, which is openly available for editing. Users can provide information by adding locations to the map and writing additional details about them. This was the media space that I chose to contribute to for this task. Over the week, I learnt how to use this website as well as the different editing features that it provides for its users. As seen below, I used different functions to label small areas around Bournemouth University’s Talbot Campus.

There are three main features that users can implement when editing the map: Point, Line and Area. Point is used to label very small areas on the map, such as bus stops. Lines are used for roads and Area is used for bigger spaces, such as fields and parking areas (as seen in the screenshot below, I created a grey area for a parking space near Bournemouth University).

10 The following screenshots show my first changes to OpenStreetMap and how I carried out these edits and modifications.

1 2 3 4 5 6  8 9  11 12

I plan to continue adding to this open media space as I carry on with this course; so far I’ve only made three changes to the map, but as I go to different places I can use OpenStreetMap as a way of documenting information about various areas, buildings and landmarks. 7