Monthly Archives: February 2014

Group meeting 19/02/2014

We disscussed as a group ho the storyboards will look and to keep them consistent. Slawek was given task to make a storyboard for 360 pan view of chosen locations of the DkIT Carroll’s building. Henry was assigned to do storyboards for the website flow. Alina was assigned to sketch sample of storyboards for interview.

Kevin was assigned to finish Audio script and to extend description of the project.

Alina

  1. Table of content to be updated(rework when the script is updated by other members)
  2. Expand Project Manager guidelines
  3. Gantt chart to be reworked ( more individual tasks for the Gantt chart)
  4. Meetings- expand paragraph about the purpose of the meetings
  5. Shooting script to be reworked
  6. Short description of departments for the website.

Henry

  1. Target audience to be extended
  2. One way example of navigation from main site
  3. Storyboard of website
  4. Update design research by adding some more text between images
  5. General look of the website
  6. Menu icons research

Kevin

  1. Brief description to be extended
  2. Audio script to be extended
  3. Synopsis to be extended
  4. Aims and Objectives of the project to be reworked

Slawek

  1. Site map to be reworked
  2. Technology testing and explanation
  3. Platform testing and explanation
  4. Storyboard of 360 panorama view locations
  5. Images for the storyboard to be taken
  6. Sample 360 view to be presented

Tasks for the Gantt chart to be updated:

Alina – paper work, minuts/agendas, updates, audio recordings

Henry – website ‘main look and feel’, design icons, content, logo

Kevin – Audio recordings, Audio editing, recording interviews

Slawek – images, 360 pan view,  programming

5nd GROUP MEETING with supervisor

19/02/2014

We discussed all scirpt and JJ gave us advice what needs to be change and updated.We’ve been given tasks to reworked it.

  • Project description to be extended.
  • Storyboards to be done for website, chosen locations and interview.
  • Gantt chart to be redone with tasks and deadlines.
  • Audio script to be extended.
  • PM guidelines to be extended.
  • Target Audience to be extended.
  • Site map/navigation to be reworked.
  • Technology pros and cons to be extended.
  • Weekly meetings to be explained before regular times for the meetings

Group meeting 18/02/2014

We discussed script, what needs to be reworked and updated . We talked about our ‘script Google Doc’ to be updated regularly. We also rediscussed first screen of our webste which will be a full screen of panorama view of corridor of DkIT and Heny will design icons to the websites menu. Hot spots will also be designed by Henry. Icons will be hidden if needed. Slawek proposed parallax scrolling to be used in our website and group like the idea. As a timetable changed we need to change suprevisor meeting for another day, Alina emailed JJ and we agreed next meeting for Wednesday 19th February 11 to 12 temporary.

AUDIO script 21/02/2014

3.2. Audio Script

3.2.1. Synopsis

The type of audio we are trying to achieve is all ambiance based over the 360º view tour of the Carroll’s Building. The sound style will be all natural and be created all from stock recordings. The audience is young so we will create sounds that are contemporary and suit the graphics style of the website.

3.2.2. Where is sound needed? Where is it not?

For our project audio is needed in all areas of the website. The emphasis of sound in our project is extremely important in giving the realism and a physical presence of been in the building as the user takes the tour. The sound elements are present in all pages of the website. The type of sound required is around 70% for ambiance recordings of key spaces around the college. This type of audio will sit in with the graphics and photography as the tour is taken. There will be 20% designated to the interaction sounds we will use. This will include the buttons and interactive areas of the tour. The last 10% is designated for the navigation, which is not that big in total. The buttons in the menu and taskbar will be included in this. The navigation sounds are not entirely important and could get frustrating with repetitive use but we plan to use subtle quiet sounds so that the user can hear what they’re clicking but not really realize that the sound is too empowering or loud. The buttons and hot spots will work similar to the navigation sounds. The project is going to have a large sound database because of all the ambient recordings of the building. Another section we will take into consideration with the audio is the shooting and recording of the interviews we plan to have with the course coordinators and students.  The project has a lot of audio in total but will not be hard to achieve a high quality result.

3.2.3. What kinds of interaction is each sound responding to?

This project has interaction but will mostly be required for buttons on the navigation and header. The whole lot will be “click” orientated interaction so this process will be repetitive and require the same sounds. There are also evolutionary objects that will be prolonged sounds throughout the tour. These will be the ambient recordings that take up the majority of the tour and will be the recordings of key spaces. Most to nearly all of the recordings will be similar so the library will not be full of lots of different sound effects. The ambient recordings will be the only files that will build up the library as they will be long and of the different key spaces.

3.2.4. For each instance, what object sound do you think is most suitable?

The audio for the project can be split into three sections.  The first will be the navigation section. Second will be the mini map section and third will be the ambiance and interaction sound effects. As a project there will be a vast amount of sound that can repeat and be reused throughout the website. The sounds that can be repeated the most will be on the navigation, which is iconic and will keep its sounds consistent.

//IMAGE OF ICON NAVIGATION

3.2.4.1. Navigation

The navigation is made up of key icons that will be used for moving the user around the website. The arrows for movement we will create short shallow sounds. The shallow sounds will be quite low pitched and quick. We want it to be quick and of a low frequency like a sound similar to a swoosh would be adequate to recreate the idea of movement.  The rest of the icons will be quite individual so that they can be distinguished apart from each other. The “zoom in and out” icons will have separate sounds and we will create them similar to the movement keys. The idea of keeping this part of the navigation audio short and of a low frequency so that it doesn’t get too frustrating for the user after multiple clicks as it will be used the most by the user. The sound for the “zoom in and out” can be a high pitch to a low pitch for zooming out and the reverse procedure for zooming in.

The options that follow are clickable options that will not be used as much as the other movement icons. These icons are now more option based and these options are “Auto Rotate” which will do a quick rotate of the room that the user is looking in. This sound we can create for this will be a long swoosh noise that can be similar to wind whistling at speed. The next few buttons that we are making will work from similar sound effects but will all be at a different pitch. These buttons are as follows, “Information” which will show relevant information in area the user is visiting. The next button is “Map” which will bring up the mini map in the corner of the screen. The next button is “full screen/reduce screen” and this will bring the tour to full screen if its on small screen and the same reversed. These icon/buttons will have a similar sound but will be different to distinguish them apart. The audio for this will be created using both MIDI and recorded sounds and we will see what works best when we start putting it all together with the graphics. The final button on the navigation is the “Audio on/off” which will play the audio on the tour and the other turns off all sound effects and ambiances. This sound will be straightforward, a sound effect will be created for the audio been turned back on as the audio will always be “on” as the tour is started. Other considerations will be the main navigation that will include “Home”, “About” and “Apply”. These will also be icons but in a different location to the movement and menu tabs. The sound effects for these buttons will go through the same process as the other option icons.

Here is a useful link for menu example sound effects.

http://www.soundsnap.com/tags/menu (SoundSnap 2014)

3.2.4.2. Mini Map

The next section of the audio interface is minimap. This mini map will give the user the option to see where they are in the college and use a quick jump option to quickly move around the Carroll’s building.  This mini map will have its own sound interface and will be different to the other sections. This mini map HUD will be in top left/right corner of the screen. This type of interaction will have a system of hotspots and graphics. For the audio of this we create mostly in MIDI, as it will have all the sound elements we require to create a good sounding interface. The sound type will be a series of beeps and clicks and when a quick jump is initiated it will play a whoosh sound similar to one we will create for selecting the a hotspot to move along the building when on the tour.

3.2.4.3. Ambiance & Interaction

This is the last section where the last of the audio for the project is present. This section will have the ambiance and miscellaneous sound effects. The ambiance is straightforward, wherever the user is on the tour there will be sound playing from that area. An example of this is if the user is in the Starbucks area there will be an ambiance recording playing over the 360º imagery. This will give the impression that the user is physically in the room and put some life into the tour instead of it been quiet and lifeless. This will be the same for every other room we add in the tour. The ambiance will be the key audio throughout the tour as it is key on giving a realistic reality to the tour. The last few parts of audio that we will need to record will be in the smaller interaction sides. We will need to record sounds of items the user might click. Like if the user selects the door we will want the sound of a door opening when entering a room and the sound of the door closing when leaving the room. Other sounds we will take into consideration will be when in the corridors and the user wants to move to the next hotspot. We will want a whoosh sound to jump to give the impression of movement to the next hotspot. There will also be sounds of interaction with the software in some case so we will need sounds of keyboards and mouse clicks. Other sound effects will be needed as the project grows but for now we have all the areas covered. The last audio files to record will be for the interviews with students and coordinators. This is obvious as the video will need audio or the video will be pointless. That is all areas covered were audio is required until the project possibly expands more.

3.2.5. Is music needed? How will you obtain this music?

For this website there will be absolutely no music required. The reason for this is that the project is all natural sounds and the ambiance will act as the soundtrack to each area of the website. The main menu will be quiet but when the tour is initiated it will begin to play the audio files required. If there will be music in some areas it will be due to whatever the students are up to in class or in the corridors.

3.2.6. What theme/style/feel unites your sounds with each other and your visual design? You can refer to film/games/applications that have inspired your choice.

The design for this project is aimed at teenagers mostly so the word that came up mostly in the research was “trendy” and this means what is contemporary at the minute is the graphic design styles. The graphics are warm and cool colours so from here the audio will need to be designed to match this. We will want to keep the audio nice and bouncy but it is an education environment so it will have to be serious also. But the whole majority of our keeping it natural as regards to the ambiance that will make up the majority of the tour. So to create sounds we feel that they will have match the design. The template will always be on full screen sand the graphics that will appear are the icons for navigation, hotspots and the pop up bubbles that will hold the information. As the sounds we are using are created in MIDI or recorded from scratch there will have to be a lot of consideration into how we can make them match. When the designs are finally complete and when it comes to recording and creating sounds there will be a lot of editing involved so until that stage we can simply plan what we might use.

The Langstrasse website was the best example of how our website tour will look and feel. I do believe the website is offline now but here is a link of it working and there is a lot to take from this website and it keeps the nice ambiances of the streets and how their interview and interactive audio is very sharp and matches the design.

http://vimeo.com/33529166 — Langstrasse video in motion. (Volkart 2012)

As regards other applications in this same category there is practically none.  Many tours do not have audio but just cut the audio off and play the voice over. Our project will have warm and cool colours so we will be looking to creating audio to match this so if we use a bronze or steel colour’s in places we can record objects that match that like metal and from here this can create cool sound effects that will match the look and feel. The ambiance will also have a big part in planning what sounds to use as it will have to not sound out of place, as the ambiance will be playing in every page.

3.2.7. How will you obtain your sound? Plan of action? Equipment? Spaces involved?

3.2.7.1.           Equipment

For the equipment we don’t need a too much. For recording the miscellaneous sound effects we require the “Zoom Recorder”. This will give the best quality for recording sounds we need to create. For recording the ambiance of an area we will require the NT4. This is a stereo microphone and will be best for recording all the areas of the college. The stereo channels will be best for playing this type of audio back through the speakers. The last piece of equipment we need will be the shotgun microphone. This will be for the interviews to make the audio clean and so it doesn’t pick up unnecessary sounds.  All of the equipment named above has been used before so we should be able to produce a high quality finish.

3.2.7.2.        Plan of action

The plan of action for our project is once all the planning is complete we will start to gather all of the audio required. We will start with the ambiances. With the photography started we can work in conjunction with each other so that the audio will match the photos.  This will give a better realism to the image. The ambiances will play over the 360º views of the main rooms and the corridors. This will be the procedure until all the ambiances are collected. We will have to make sure that all the recordings are as clean as they can be and not too busy but have enough noise so that it gives the impression that the corridors and rooms are alive. To record the navigation and miscellaneous sound effects we can use both MIDI in Pro Tools to create our own navigation sounds for the buttons and minimap. But we hope to record our own sounds using stock sound noises using props and editing them in Pro Tools for professional use in  the website. This will require as gathering the suitable props and getting a recording room and making sure the stock sounds can be as clean as possible. This will make it easier for us to edit and use. The plan of action is not too hard but there is a lot to do and record so the workload will be heavy and the right amount of time has to be put into the audio so it can be as good as it can be. A rushed project will make the project really bad.

3.2.7.3.       Spaces Involved

The spaces we are recording for the ambiance are quite open with the exception with the couple of small rooms. The corridors will have a lot echos and so will the common areas such as StarBucks and Winter Gardens. We will have to make sure the audio will all be recorded the same and edited so that it will match the other rooms so it doesn’t sound too jumpy and rough.   The enclosed spaces will be the dark room, filming rooms, cinema and editing suites. These will have different sounds have no echo as they are sound proofed so they will sound a lot different to the other rooms. Then there is the main average sized rooms and these include the mac lab, offices and editing labs. All these sounds will all have a different sound of ambiance and it will take a lot of editing to make sure they all run smooth and we have to take into consideration of how busy these rooms might be.

3.3. Technology and Interaction Design

3.3.1. Choose Technology.

Very important role in our project plays technology used to deliver desired informations. As we are planning to design a Website and there is few technologies available to develop and deliver it to our potential customers we need to gain certain informations about the devices, platforms used by the target audience. We have carried a few researches as our project was evolving all the time and the technical and software related aspect is changing.

The main research was done on the usage of mobile devices in Ireland; According to Marketing Institute Ireland (2014) 57% of Irish people have a smartphone.  Among them 82% 18-24years olds, 79% of 25-35 year olds and 29% 0f 55+ have smartphone.

Another survey carried by Thinkhouse (2014) on Irish teenagers shows that 89.9% have smartphone and 59.3% of smartphone users own an iPhone.

According to Our Mobile Planet (2014) General mobile usage of internet is 92% and 67% of smartphone users in Ireland use desktop computers 7 days a week.

Another research was carried on the most popular desktop, tablets and mobiles Operating Systems used within last year.  According to StatCounter (2014) you can observe that:

·         Desktops are mostly using Microsoft Windows 7 fallowing Windows XP and then iOS.

·         The most popular platform for tablets is iOS fallowing by Android.

·         For the mobiles is Android and then iOS.

One of the main technologies used in modern websites supported by Microsoft Windows is Adobe Flash. Flash is a multimedia platform and a Rich Internet Applications tool used for adding intense animation and interactivity, and is the most popular platform for developing RIA, providing a large set of tools that are both powerful and user friendly. There is number of pros and cons of Adobe Flash.

3.3.2 Adobe Flash pros:

  • Adobe Flash is well established technology so is distributed by a major software company. Adobe, a large amount of effort has been invested in making it a stable and feature-rich platform.

  • Provides animated graphical experience because it uses powerful algorithms for rendering graphical content, making the scenes running smoothly. Also it provides various built-in visual effects to enrich the experience.

  • Good performance as is enhanced on most Windows platforms to bring good performance even on less powerful computers.

  • Good pixel-level control as it has the ability to specify measurements in sub-pixel increments. This can result in a crisper and generally more pleasant appearance of Flash applications.

  • Suitable for developing visual effects, 3D graphics as it provides developers with a series of useful tools for creating and manipulating graphical content. Also, it natively supports animations and various transformations and effects, so it is a suitable choice for developing complex graphical applications.

3.3.3. Adobe Flash cons:

  • Requires a “player” application to be installed on the client machine as a plug-in. The device and OS on the consumer side need to be compatible with Flash, and Flash version needs to be the same as the one used for development.

  • It is not supported by iOS this means that a Flash file can’t be run on an iOS device (smartphones and tablets).

  • Search Engine Optimisation problem because texts and links are embedded in Flash, search engines will not read it, decreasing the website’s rankings in search engines. Some improvements in the SEO area of Flash are done, but the issues are still present.

As the flash cannot be run on iOS and Android therefore on many devices as tablets and mobile phones which are used mostly to surf in the internet there is alternative way to display the graphical content of our website. The alternative is HTML5.

Since HTML5 is on the market there has been an increase in its popularity and usage. Many of HTML5′s features revolve around the integration of previously separate technologies, such as Flash, directly into the HTML protocol. Responsive design refers to the ability for an application to dynamically re-size and alter itself for any type of device, whether that be full sized screen, a tablet, or a smartphone browser. The only disadvantage on HTML5 is to have browser up to date as there is an issue challenge to consider is backwards compatibility. Although most major browsers now have complete HTML5 support, including the most recent versions of Internet Explorer, some legacy IE versions still do not have support for it.

3.3.4. Cross platforms

Another aspect of ability to create a website compatible with Android is programming language in our case we decided to use Processing because is free, has many libraries, is easy to use and compatible with:

  • Java

  • HTML5

  • Java script

  • Cross platforms (Windows, iOS, Linux, Android)

Our consideration includes also creation of Website contains elements of jQuery as it is a fast, small, and feature-rich JavaScript library.

As our time for the project is limited and logarithms used to show 360 panoramas are very difficult to work with, we keep in mind possibility to use some sophisticated software to create 360 views and achieve desired high quality effect using only few still images. After research carried on the field of software available on the market, the best for the price and futures is Pano2vr software.

http://ggnome.com/pano2vr/examples/sound

Audio Links:
SoundSnap. (2012). Available: http http://www.soundsnap.com/tags/menu [Accessed 16 February 2014].Hinderling Volkart. (2012) 360º Langstrasse, , available: http://vimeo.com/33529166 [accessed 17 February, 2014].

Group meeting

13/02/2014

Matters:

Each of member is due to find one website each to inspire us of the look and feel of our website.

Task to be reviewed and done from JJ listed in post ‘4rd supervisor meeting’.

Storyboards are assigned to be done on Monday by group members.

Slawek is assigned to bring camera on Monday and we’ll produce some of the images for the storyboard.

Audio Script to be reworked by Alina and Kevin.

Mock up to be done by Henry.

Technology and platforms to be updated on Google doc by Slawek.

Mood board to be updated on Pinterest.

 

4nd GROUP MEETING with supervisor

13/02/2014

We discussed script for the project detailing what needs to be polished and redone. The name of the project was changed for Peek360.

Tasks was assigned to each of the members:

Alina – Table of Content to be reworked, Audio script to be updated,  Shooting script to be updated, storyboard

Kevin – page of description of the project to be finished, Audio script , Script synopsis to be extended

Henry – Target Audience to be extended, storyboard, reference, mood board, logo

Slawek – rework website description of the departments with intro 2-3 lines explaining to each page (paragraph with introduction, reference it to DkIT website), update Google doc with Technology and platforms, storyboard

 

Group meeting 10/02/2014

We were discussing Script- synopsis, Shooting script and Storyboards for our project. We also discussed some details of the site map of the website. Slawek was researching what resolution of the screen would work best.  Tablet, Ipad, phone, PC, Mac was tested. We agreed next meeting date and time.

Group meeting 11/02/2014

We discussed site map of the website once again.

We agreed that shooting schedule will be discussed on our Thursday meeting with supervisor.

Storyboards will be produced when shooting schedule is finished.

We’re still doing Audio research.

Henry did some research on icons for the website instead of links.

We agreed next meeting date and time.