Style and Experience - Erhvervsakademiet Lillebælt

MMD
Odense
Deadline 2th December 2011
Style and Experience
Odense VinterJazz
Group 16
Councilors
Örn Bender Erlendsson
Mona Lyngs Kjærgaard
Marcel Heijmans
Merete Østergaard
Bjarne Slipsager
Pavels Kusnarjovs
Anni Grøndal
Kirsten Kasch
Adam Mortadon
Pernille Christiansen
Jens Berg
Peter Storm-Henningsen
0
http://odensevinterjazz.mmd.eal.dk/group16/site/index.html
Table of contents
Summary ....................................................................................................................................................... 2
Introduction .................................................................................................................................................. 2
Thesis statement ........................................................................................................................................... 2
Communication ............................................................................................................................................. 2
Target group.............................................................................................................................................. 2
User profile and scenario .......................................................................................................................... 3
Survey........................................................................................................................................................ 3
Our ideas for Odense VinterJazz ............................................................................................................... 3
Mission statement (communication) ........................................................................................................ 4
3 essential components: ....................................................................................................................... 4
Commercial mission statements often include the following information: ......................................... 4
Design............................................................................................................................................................ 4
Pop Art ...................................................................................................................................................... 4
The Style .................................................................................................................................................... 5
Similar webpage ........................................................................................................................................ 5
Business ........................................................................................................................................................ 6
Observation based research ..................................................................................................................... 6
Interaction..................................................................................................................................................... 7
Example of code ............................................................................................................................................ 8
Conclusion ..................................................................................................................................................... 9
Reference list .............................................................................................................................................. 10
Appendix ..................................................................................................................................................... 11
Gant Chart ............................................................................................................................................... 11
Pictures from the Jazz event ....................................................................................................................... 12
.................................................................................................................................................................... 12
Android App ................................................................................................................................................ 14
Site Map ...................................................................................................................................................... 15
Code Example 2........................................................................................................................................... 16
Learning styles ............................................................................................................................................ 18
Research ...................................................................................................................................................... 19
Page 1 of 23
Summary
In this project we have to use all the tools we have been taught over the last four months. By creating a
new webpage for Odense VinterJazz we have to use the tools we have been taught in the interaction
classes. Making a stylish and clean web layout we use the knowledge our teachers have taught us in
design and web layout. In regards to our target group we had to use the tools we have been given
throughout our studies in business classes to do research and then apply that research to new ideas like
we have taught in communication. We hope you enjoy our project as much as we enjoyed working on it.
Introduction
In this project we got the task of making a website for a music festival here in Odense. It is called Odense
VinterJazz and is an annual Jazz festival held every October in various pubs and music facilities in town.
The main requirements for the project were to get younger generations interested in Jazz music, also to
make a clean and stylish layout for a website and then implement it in ether html or flash. We have to
make at least 6 subpages. These pages have to contain things like news and important information as
well as one interesting idea, specially made for the target group. We got to choose from four different
graphical styles that we have learned in school and we decided to make a pop art styled website in
HTML.
Thesis statement
The existing website for Odense VinterJazz looks horrible. It is black background with no pictures but
only a flow of text with information about last year’s venue and a few links to other websites and one
pdf document which had clearly been used as a flyer. The page does not contain any news about the
festival, useful information or entertainment. If a anybody, our age would stumble into Odense
VinterJazz’s site he or she would probably click the back button in the speed of light, unless that person
were a hardcore Jazz enthusiast or simply an old soul. We want to change that, but how? We are going
to use a layout on the website that we think will compel to younger generations. We want to implement
new technology like mobile phones to invoke their interest and make the fun so they stop and browse
the whole website.
Communication
Target group.
Our main target was to help Odense Vinterjazz to reach young audience. By doing that we would
familiarize young people with old music. We tried to make our website as attractive as we could.
Another important target area are the existing visitors. We wanted to make the content of the page
useful for both: new and old visitors.
Page 2 of 23
User profile and scenario
Name:
Henriette Høyer
Age:
20
Gender:
Female
Henriette is 20 year old danish girl originally from Nyborg. She now lives in Odense where she studies
multimedia design at Erhvervsakademiet Lillebælt. Henriette is interested in drawing, design, anime,
music and movies. She has been twice to Roskilde festival and she is planning on going again next year.
Henriette did not listen to Jazz music until recently when her friend introduced her to Ray Charles. She
has never been to Odense VinterJazz, but her newfound love for Jazz music has changed that, and next
year she wants to go with her friend to the festival.
The main reason Henriette wants to go to the festival is that she loves to go to concerts. In her opinion,
seeing a live performance of a band or music is a new way to discover the music she already liked. Since
We added many innovative ideas to our website such as mp3 player where you can listen to your
favorite jazz song, also you are able to like the website within the Facebook.
Also we added a QR code to our website which gives you the opportunity to install the application to
your smart phone and see the schedule of the events on your mobile phone!
Survey
Our group did the survey in order to find out how popular the music festivals are, what kind of music
people prefer and how we can make it more attractive. We have got a total of 48 responses. From those
we have figured out that 44 people ever been to a concert but only 18 people ever been to a Jazz
concert. Furthermore, the majority answered that they either love Jazz music or find it nice. That made
us think that it should be improved. In the next questions we asked people if they have ever scanned QR
codes, the majority (60%) answered no. However, on the next question all the people said yes to QR
codes if it could benefit them, that is why we got the variety of answers on what would be the best idea
to use QR code at.
Our ideas for Odense VinterJazz
Based on the survey we made people seemed to be very interested in our ideas of implementing QR
codes to our web site. We came up with a few ideas on how to use QR codes to attract younger
generations to the website as well as the festival itself. We made one subpage that we called “mobile”
there we implemented two of the ideas we had. They both come in forms of QR-codes.
Page 3 of 23
The first one a mobile application we made in flash for android smartphones. With this application you
can find information about; what bands are playing, when they are playing and where. We made it both
in English and Danish. By scanning in the code you get the application sent straight to your phone.
The other one we did was to give a song away from free. Örn Bender talked to his friend in Iceland that
is in a band called Musik Zoo and they gave us permission to give away one of their songs that has yet to
be released. By scanning the code you get the song “Cold Killer” sent to your smartphone. Musik Zoo is
influenced both by Jazz and Blues, mixing it with some Hip Hop, we thought this would an ideal song to
give away to the younger crowd to make them more interested in Jazz.
We had a couple of more ideas that we had no time to put to reality. We wanted to make glass coasters
with QR codes for places that host Odense VinterJazz festival and some of them would contain free
tickets to the festival. We also wanted to print QR-codes on the back site of the festival tickets and some
of them would contain “free beer” at the venue bars.
Mission statement (communication)
A mission statement is a statement of the purpose of the company or organization. It guides the actions
of the company, points out the overall goals, shows a path, inspires and helps making decisions.
3 essential components:
1. Key market – who is your target client/customer? (generalize if needed)
2. Contribution – what product or service do you provide to that client?
3. Distinction – what makes your product or service unique, so that the client would choose you?
Commercial mission statements often include the following information:
•
Purpose and aim(s) of the organization
•
The organization's primary stakeholders: clients/customers, shareholders, congregation, etc.
•
How the organization provides value to these stakeholders, for example by offering specific
types of products and/or services
Design
Pop Art
It is uncertain where the term Pop Art came from, but the artistic movement of Pop Art started in 1950s.
It became one of the most popular artistic movements in twentieth century. 1 In USA the years after the
second world were full of optimism and an drastic change happened in consumer behavior. Suddenly
more people were able to buy things that they could never have afforded in the years of war and
depression. This sudden change in the consumer market was the initial spark of the artistic movement
1
http://www.arthistoryarchive.com/arthistory/popart
Page 4 of 23
we now call Pop Art. Pop Art came in many forms but unlike other artistic styles, Pop Art was focused on
making popular everyday things into art as well as well-known individuals.
The Style
Originally we wanted to use surrealism as the style for the webpage. But after a while we agreed that it
wouldn´t be the right style for the ideas that came up during our brainstorming and mind mapping
session. The style we eventually choose for this project is pop art. The reason we choose that style was
because we thought it would be most appealing for the younger generations. It gave us the opportunity
to mix black and white with color as well as using pictures that looked old with our background which
consists of graffiti of a man playing a saxophone. The idea of using graffiti as a part of pop art is mainly
inspired by artist like Banksy. On the colored pictures we tried to apply cartoony effect similar to Andy
Warhol’s Marylin Monroe.
We thought that the usage of black and white (background) mixed with color images fading to black
(menu bar) would best suit our project to create the atmosphere of Jazz, which relates to the period
when Jazz music was becoming popular.
The background image consists of two images we got from free stock photo side 2. It is just a basic wall,
which we changed into black and white. The man playing the saxophone we got from the same webpage
and changed him so he would look like graffiti on the wall, then we added some notes by using custom
shape tool. All the graphic on our site was done in photoshop.
The font we used for the logo was Showcard Gothic mixed with a font we found on a free font
webpage 3 called dafont. We tried to use soft font similar to “showcard gothic” on the menu bar but it
didn´t come out very well so the font we ended up using was Arial. The reason why is because it’s one
of the most common font on websites, it’s very clean and every computer can read it.
We were very happy with the background we made so we decided to have the menu aligned in the top
and to the left.
Similar webpage
In designing the webpage we searched for a lot of Pop Art sites that we would have wanted to use to
compare ours with. Despite our best efforts we did not seem to find anything that looked like the page
we were creating, until the very last day. Then we found this stylish black and white, retro looking web
site with a theme that we found to be very close to what we have created. But since we had already
2
3
http://www.sxc.hu
http://www.dafont.com
Page 5 of 23
done most of the design work we couldn´t use any ideas from that site to inspire ours. Here is a
screenshot of the web page 4.
Business
Observation based research
Our group went to the Jazz concert which took place at MMD Odense on the 28th of November. We
have noticed that they used a mix of different kind of instruments which are not common for the Jazz in
a traditional view. What they did was the mix of old music and modern electro music. We realized that it
would be a good push for us to make the Jazz festival enjoyable for the young audience as well as
making it more interesting for those who liked Jazz music before. Therefore, in some songs modern
music was dominating, though this did not make it sound worse but even gave it the new look and
charm.
Our group decided that we could use the experience we got during the concert and include some of the
ideas in making our website. Also it pointed out which style would match our project the best. They
were a band of 3 people and each of them knew when to start playing and when to stop even though
4
http://www.theoldstate.com/
Page 6 of 23
Jazz music is based mostly on the improvisation. We thought that it would be a perfect example on how
team should work, when each of us would help the other group mate.
Interaction
We decided to make our web page in HTML using CSS styling cascade. The reason we wanted to make it
in HTML but not flash is simply because Marcel is quite good at HTML coding. We also thought after our
brainstorming that because of how complex we wanted to make our site, it would be better for us to
make it in HTML. By picking HTML instead of Flash we don´t have to worry about people having to install
flash player to see our web page. To make the page we used the following tools; Dreamweaver CS5 and
notepad++.
Although we did do the page in HTML there are some two parts of our project that use flash elements.
One of those is the music / video player that we use and the other one is the android mobile phone
application that we made. The video / music player is coded into our HTML for navigation purpose of the
player. The mobile application we did by using Adobe´s flash for Air devices. We created a sitemap to
get an idea how we wanted the webpage to navigate from one page to another. 5The wireframe we
made in Photoshop by using many layers to display the different pages of our sites.
5
See appendix, page 15
Page 7 of 23
Example of code
HTML
<!--With this following code namely the div, we are taking certain elements of our HTML
and we imbedded in a devision in this case the devision is cc_menu(id) wich is used
for our main menu, you will also see that you can put more than one devision in a devision
think of it as a box inside a box inside a box, so at the end you are only carrying one box
We also make use of the z-index function and to explain it, think of it as a deck of cards,
the one with the bigger value is the one that will be on top (like putting cards on top
of each other)-->
<div id="cc_menu" class="cc_menu">
<!--you can also style these classes individualy in an external CSS preferrably-->
<div class="cc_item" style="z-index:6;">
<img src="images/11.jpg" alt="image" />
<span class="cc_title">Home</span>
<div class="cc_submenu">
<ul><li class="cc_content_1"><u>About us</u></li> </ul>
</div>
</div>
<div class="cc_item" style="z-index:5;"><!-- As you can see we make the value decrease-->
<img src="images/22.jpg" alt="image" />
<span class="cc_title">Events</span>
<div class="cc_submenu">
<ul><li class="cc_content_2"><u>View Schedule</u></li></ul>
</div>
</div>
</div>
Scripting Language = Java
/* Ok we would like to show you the CSS for this but we think that the Jscript part is a bit more exiting.
In the following code snippet is the example on how to animate the the sliding effect that we have with
the images. Ok so first off you start by initializing a Jscript*/
<script type="text/javascript">
$(function(){
// this here selects all the menu items
var $items = $('#cc_menu .cc_item');
// this here counts the number of menu items
var cnt_items = $items.length;
//when you click on a menu link
//the cc_content will expand
//and this is just to test
//if menu is expanded then folded is true
var folded = false;
var menu_time;
//timeout to trigger the mouseenter event on the menu items
Page 8 of 23
/* You must bind the mouseenter, mouseleave to each item: because this will show / hide images and
submenus. Here you bind the click event to the list of elements (submenu):And this hides all the items
except the one that has been clicked, and then shows the content for that item*/
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave)
.find('.cc_submenu > ul > li')
.bind('click',function()
//Here we unbind the items
//And here we bind it on an mouse enter event
//Same procedure for the leave
//And here it is on the mouse leave
/*P.S Think of it as a mouse over If the mouse moves
over the menu then it binds to that specific item(menu)
and it unbinds when it leaves*/
//This piece looks at if the menu is already folded then you just replace the content
{var $li_e = $(this);
if(folded)
{hideContent();showContent($li_e.attr('class'));
}
else
//Otherwise fold and show the content
fold($li_e);
});
/*We also have the rest of the the code that actually does the animation (where everything slides)
But unfortunately due to restriction we cannot reveal our secrets as of yet but we do hope that
you all get the basic idea of how the animation will work*/
Conclusion
We are confident that what we did with our website will attract younger audience to the Odense
VinterJazz festival. We did used both desk and field research to confirm that our ideas would be
successful and then implemented them by using new technology and making the site more appealing
and stylish. We enjoyed this project to the fullest, and if we have failed to satisfy the needs of Odense
VinterJazz organizers one thing is clear, our interest in Jazz has increased drastically over the last week
working on this project.
Page 9 of 23
Reference list
Art based on popular history http://www.arthistoryarchive.com/arthistory/popart
Free stock photo site http://www.sxc.hu
Free font site http://www.dafont.com
Dallas web design http://www.theoldstate.com/
Page 10 of 23
Appendix
Gant Chart
Page 11 of 23
Pictures from the Jazz event
Page 12 of 23
Page 13 of 23
Android App
Page 14 of 23
Site Map
Page 15 of 23
Code Example 2
HTML
<p>
<!-The following code enables us to have a scroling text area with our own custom scroll bar
defining how many rows we have before we have to scroll and how many colums we have (sideways
scrolling if needed)
and the disabled function is there so that you cannot click on the text field on the user side
(prevents the user from fucking around)
-->
<textarea cols="60" rows="20" class="custom-scrollbar" disabled="disabled" style="resize:none">
October
Friday 8 October
21:00 Fresh / Beirach / Mogensen – Dexter
Saturday 9 October
19:30 Torben Ulrich / Søren Kjærgaard - Musikbiblioteket
20:00 Tip Toe Big Band - "Swinger Magazine" - Posten
21:00 Chris Minh Doky Quartet w / Dave Weckl - Posten
Sunday the 10th October
14:00 Oriental Jazz Band – Grønttorvet
</textarea>
</p>
CSS(External)
Page 16 of 23
/*
This little piece of code here style every paragraph in our content pages ( <p> ) to a black
background with a padding
to make shure that it is in a certain position at all times
*/
.cc_content p
{
background:#000;
padding:20px;
opacity:0.7;
}
Page 17 of 23
Learning styles
Pavel – Pragmatist, Activist, Reflector
I am a very flexible person. I am pretty good at every learning style that is why it was easy for me to
agree with the ideas my group mates came up with as well as making my own decisions and facing
different kind of problems with enthusiasm.
Marcel – Activist
Being an activist I am really comfortable at getting my ideas out there and I learn mostly by instead of
going through the manual I would rather figure it out on the way as you would say “grabbing the bull by
the horns”.
I like problems, because I found that sometimes well most of the time I am pretty comfortable at solving
them and facing them head-on.
In this project I found that my strengths lead towards development and problem solving and also
creating new ideas with the group, I found that very comforting that my group member and I got along
very well in the fact of thinking up new ideas and coming to an agreement on everything we discussed.
Örn Bender – Activist
I am an activist, I function best under pressure. If there are problems or difficulties I like hands on
approach. I learn best by trial and error but not by gathering data. I like big challenges. But through both
my assignments here in MMD, I have been chosen the project leader.
I have to say that the responsibilities of this role is a completely new experience for me and also
surprisingly a very pleasant one. I have gone from being the one that takes commands to the one that is
planning and taking responsibility that everybody is doing their work. This is something I want to
develop and increase my skills in, and I will try to focus on this in the time I am studying here at MMD.
Page 18 of 23
Research
1)
What is your gender?
Percent Respon
age
ses
Male
60.4
29
Fem
ale
39.6
19
Total responses:
2)
48
How old are you?
Perce Respo
ntage nses
>
1
8
4.2
2
1
83
0
79.2
38
3
05
0
12.5
6
5
0
+
4.2
2
Total responses:
3)
48
What kind of music do you prefer?
Percentag Response
e
s
Rap
14.6
7
Rock
43.8
21
Page 19 of 23
Electr
o
10.4
5
Jazz
10.4
5
Other
20.8
10
Total responses:
4)
48
What is your opinion on Jazz?
Percenta Respons
ge
es
I love
it
43.8
21
It's ok
47.9
23
No
opinio
n
4.2
2
Not so
good
4.2
2
I hate
it
0.0
0
Total responses:
5)
48
Have you ever been to a concert?
Perce Resp
ntage onses
Y
es
91.7
44
N
o
8.3
4
Total responses:
6)
48
If yes, do you like going to concerts?
Perce Respo
ntage nses
I
76.1
Page 20 of 23
35
love
it
It's
ok
19.6
9
No
opin
ion
2.2
1
Not
so
goo
d
2.2
1
I
hate
it
0.0
0
Total responses:
7)
46
Have you ever been to a Jazz festival?
Percent Respon
age
ses
Ye
s
40.0
18
N
o
60.0
27
Total responses:
8)
45
If yes, how did you like it?
Percentag Response
e
s
I love
it
40.7
11
It's ok
29.6
8
No
opinio
n
29.6
8
Not so
good
0.0
0
Page 21 of 23
I hate
it
0.0
0
Total responses:
9)
27
Do you own a smartphone?
Percent Respon
age
ses
Ye
s
57.4
27
N
o
42.6
20
Total responses:
47
10) If yes, have you ever scanned in QR codes?
Percent Respon
age
ses
Ye
s
40.0
16
N
o
60.0
24
Total responses:
40
11) If yes, would you scan in QR code if;
Percentage Responses
You could get a the
concert venue straight to
your phone
20.0
14
You could win a ticket
to music festival?
25.7
18
You could win a free
beer at the festival?
20.0
14
You could download
free song straight to
your phone
18.6
13
Page 22 of 23