First Workshop in Second Year – Xcode and Swift

1 2 3 4 5 6 7 8 9 10
1112

Advertisements

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 – Updated Navigation Bar

One of the latest improvements that Hallam has contributed to our updated project is a fully responsive and functional navigation bar that allows users to go to the various pages and sections of our website.

As shown below, our navigation bar uses a combination of hyperlinked buttons and drop-down boxes for the “Social Media” and “Login” tabs. These tabs become highlighted when the user clicks on them.

We also have logos hyperlinked to the following social networking websites: Facebook, Twitter, Google Plus and Instagram. My team and I agree that the navigation bar is appropriate and fit for the purpose of easy and quick website navigation.

updated nav bar

Design for Digital Media Environments – Website Development 3

Our master version of the code and elements of our website has been uploaded to the dakar server, so that we will all be able to access it online. There have also been numerous different changes made to the code and design of the site since the previous Website Development post.

Text is now displayed in the different boxes containing student deals and offers. We also have two new categories to display student offers with: “All” and “Other”. This will make categorising the student deals easier when there’s an offer that’s difficult to classify. All the student deals and offers posted will now be stored in an online database that Hallam has set up for the website.

Much like the previous version of our website, we’re keeping a curved design with rounded corners for the text boxes and buttons. We’re also keeping with the same colour scheme of white, pink and blue for all the pages.

Displayed below are our current webpage designs as well as some of the source code that the “Welcome to SOBU” page is made up of.

Screen Shot 2015-04-13 at 21.24.16 Screen Shot 2015-04-13 at 21.24.36 Screen Shot 2015-04-13 at 21.25.06 Screen Shot 2015-04-13 at 21.25.11 Screen Shot 2015-04-13 at 21.25.16

Design for Digital Media Environments – Website Development 2

Ever since our work on the “About“/”Meet the Team” page, my team and I have been working together in coding and designing the other main pages for our website. The other important pages that we’ve been working on include the following: the “Welcome“, “Home” and “Register” pages.

Our website now has a page that welcomes users to SOBU. The main purpose of this page is to quickly introduce the users to our website and what it does. Our users can then navigate to the main homepage with the button labelled “Enter SOBU”.

On our homepage, we have basic fields with blue headers to display available student deals and discounts. As we carry on with the project, the fields will be modified so that students can log in, create and post offers of their own. This section of our homepage will act as a live feed which will be populated with student offers and deals for the following categories:

  • Food
  • Night Clubs
  • Clothes
  • Gyms
  • Electronics

Our project also currently has a registration page in which users can create accounts and log into our website. We’re also thinking of having a login page that will have a similar appearance to the register page. We’re currently unsure of our design for the register page and so we’ll all be providing ideas and code to make the design less blocky and more visually appealing for our users.

From here on, we’re going to upload all our source code to the dakar server so that we’ll be able to access our webpages online. We will also be working on key elements such as the responsiveness, functionality and presentation of our group project.

Screen Shot 2015-03-16 at 10.10.48

Welcome page

Screen Shot 2015-03-16 at 10.11.01

Our homepage with the category “Gyms” selected on the right.

Screen Shot 2015-03-16 at 10.11.02

If you look at the file URL at the top of the screenshot, you can see that the “Gyms” page has been loaded.

Screen Shot 2015-03-16 at 10.11.07

Our current register page.




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>

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 – 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