Fyns Kunstmuseum

Style & Experience Project November 2008
Fyns Kunstmuseum
Style & Experience 1
Group 7, international
Rimvydas Ivoskis,
Jurga Tizinhauzaite,
Xiaolu Jiang(Lulu),
Andrea Arto,
Jesús Javier Sánchez

Content
Style & Experience 2
Introduction........................................................................................................................................ 3
Communication and design.............................................................................................................. 4
Characteristics of modernism ...................................................................................................... 4
Example of a Modernism Web Page........................................................................................... 5
Why this design for our website?................................................................................................ 7
About our website ......................................................................................................................... 8
Target Group.................................................................................................................................. 9
How to make the Fyns Kunstmuseum more interactive?...................................................... 10
Project management....................................................................................................................... 11
Commercially:............................................................................................................................... 11
Financially ..................................................................................................................................... 12
Technically .................................................................................................................................... 13
Content.......................................................................................................................................... 14
The use of site map .................................................................................................................... 15
Evaluation of the group process ................................................................................................... 16
Interaction ........................................................................................................................................ 18
Code examples............................................................................................................................. 18
References ........................................................................................................................................ 20
Appendixes ....................................................................................................................................... 21

Introduction
Style & Experience 3
In the Style & Experience project of this year, we have to redesign the website of the Fyns
Kunstmuseum of Odense, to focus on communicating both their history and their
collections. Our main objective of this project is to make simple and user friendly website,
make aesthetically pleasing and clear search facilities for webpage visitors.
We chosen modernism style to help us to get closer to our objectives. And we design our
webpage combined with the PLUS-values. In the project management part, we make a
detailed Web Project Brief, giving our client an opportunity to evaluate what it is our
planning to produce for the website.

Communication and design
Characteristics of modernism
Style & Experience 4
Modernism is a term used to describe the style and theory of art from the period
beginning in late 19th century and lasting into the mid 20th century. The modernist
movement is closely associated with the term modern art, both characterized by a
departure from emphasis on literal representation. With invention of photography, the
realistic approach to painting and sculpture became unnecessary, thus artists began
searching for new ways of visualizing and thinking about the nature, materials and
function of art.
Modernism rejects tradition and advocated a return to the basic fundamentals of art.
Artists embraced their newfound freedom of expression, experimentation, and radicalism.
They believed that art should stem from color and form and not from depiction of the
natural world.
The main characteristics about this style are the next below:
� Creative freedom.
� Rejection of vulgarity.
� Formal perfection.
� They work with exquisite, colorful, exotic and decorative topics.
� The main items they worked with were the Middle Ages, Middle East and the Old
Greek.
At the end, the Modernism added a new definitive change in the way to use language.
Some of the most important authors of Modernism are Alfons Mucha, Aubrey Beardsley,
Antoni Gaudí.
Nowadays, the Modernism has arrived to the design of web pages, like Pop Art,
Deconstructivism. In this design, the characteristics are a little bit different, but always
with reflects from traditional Modernism. By that, the characteristics of modernismare:
� Reduction
� Contrast (dark and light, dynamic and static, big and small)
� Repetition

� Vertical and horizontal lines
Style & Experience 5
� Photography + design elements + text serve the purpose to present the information in
a plain and factual way
� Basic form elements: circle, square and right-angled triangle.
� Dividing space into harmonic parts –mathematically arranged patterns
� Clear margins
� A lot of space (white or monotone areas without text)
� Clear separation between type / text and illustrations
� Emphasis on the elements being in line
� Black/ white/grey + signal colors (red, blue, yellow and green,)
� Sans serif typefaces
Some examples of modernism:
The Gate,, Hans Holmenn, 1959 Combine, Robert Rauschenberg, 1963
Example of a Modernism Web Page.
We have been searching about several modernism web pages examples, but it was not so
easy as we thought, because there are a lot of web sites that mixed several styles (pop art

Style & Experience 6
with deconstructivism, modernism with pop art ). At the end, we think that the best
example we could find is the next below:
http://www.schirn-kunsthalle.de/index.php?do=exhibitions_home&lang=en
This example have following characteristics of the modernism. At first, we see a lot of
spaces, and the principal colors are grey and white. All the words are writing with the
same typography, san serif typefaces, although the sizes of these words are not the same,
most important words are bigger than others to present information in a plane and factual
way. When we are surfing on the web page, there is a connection between pictures on the
web site and the words, because of the repetition of colors, this situation reflex too
modernism style.
Besides this web site has a straight lines and clear letters, words, shapes, just a few
pictures. Everything is very clear and simple 1 , this web page is easy to use because you
can find all there is in the page from the first glance. Definitively, we have considered it a
good example of Modernism style.
Here there are some screen prints of the web page we have been explaining in the
preceding paragraphs.
1 Less is more.

Why this design for our website?
Style & Experience 7
At the first of the project, we didn’t know what style we should work with. Finally, when
we had the opportunity to visit the Fyns Kunstmuseum and explore it, we decided to use a
Modernism because in our visit to the museum we saw that a lot of pictures reflect to this
kind of art. 2
Besides, we considered all the styles we had: Modernism, Deconstructivism, Pop Art and
Street Art. We do not see anything on the museum from Street Art, and from
Deconstructivism either. So, in this moment, we only had Modernism and Pop Art. We
started to think about our target group, and we agree that they would prefer a very clear
and simple webpage, where they could find what they want just in the first glance.
Because of this, we rejected Pop Art, because maybe it would be very over elaborate for
them and chosen modernism, because one of these style characteristic is that in this style
all text, pictures and design elements serve to present information in a plane and clear
way. Using this style will not be so much detail which could distract attention from the
main thing, such as main menu.
We considered Pop Art more appropriated for young people and our target is people
2 Harald Giersing, Vilhelm Hammershøi, Karl Isaksson, Karl Larsen, Vilhelm Lundstrøm, Edvard Weie,
Gerhard Henning

Style & Experience 8
between 25 and 60 years old, people who maybe don’t know how to use a complicated
web page.
On the other hand we could see that from the beginning of the Modernism to nowadays it
has experiment a huge change. Tats why we want to learn as more as possible about it.
About our website
The main aim is to create interesting web page to Fyns Kunstmuseum visitors and tourist
of denmark, or just for people who are interesting in art. The characteristics of the website
are in the way of Modernism, because is the style we have chosen.
Our webpage is divided in seven subpages: Home, Building, History, Styles, Artist,
Museums. The dark background is always the same. The color of the line of the categories
changes when you press menu buttons 3 , so you easy can see where you are in the
website, because all subpages have its own color of menu line.
In the Home page you can see the events of the Museum. Information in this page often
changes according to the events and exhibitions in the museum.
We decided to take likeability and usability as the most important PLUS values for our web
page, and target group. So we developed it most. From the likeability part, it is that
webpage is attractive for our target group. A simple page with a lot of space, with straight
vertical and horizontal lines, information about the works and they authors. From the
usability part, is that is very easy to navigate in this page because of clear menu and
information architecture. You can easy find whatever you want about the museum
building, museum exhibitions and artists. For example, in the building subpage, you can
choose the floor of the museum, then room of chosen floor. Every room has his theme
and you can see it all when you are looking into 3D model of chosen floor. When you
press on a room, you get to another page where you see virtual gallery. You can scroll the
wall with paintings and chose one you like. When you chose a painting you get to another
page where you see all information 4 about painting. This way of choosing a floor, a room
and a picture put some playability value into our webpage. Also you can reach all these
3 Home-blue, Building-orange, History-dark blue, Styles- Green, Artist-Pink, Museums-Dark green
4 Name of the work, author, style, year, who gave it to museum.

Style & Experience 9
things and in a simple way, jus clicking a menu button. The last one, sociability, is
represented with the contact of the Museum and a link to Facebook. The contact of the
Museum is always present in the page, in the part below.
In our webpage we used all four main design principles 5 . Almost everywhere we used left
alignment. There is a lot space, but we keep a principle of proximity, seems that all
elements have relationships with each other. All subpages have the same menu, changes
only content in the page. They have the same concept, the same style and always the
same background. That is the principle of repetition. We used a lot of contrast. Our text is
white, colors of the line which always follows menu buttons is bright, but background is
dark.
All we can say about the design principles on this website is that all of them reflect
modernism at all. The font is always the same, all the elements are well structured and
the menu is always in the same place, is not constantly changing. The only part that is in
constantly updating are the events of the home page.
Target Group.
Target group is people interested in cultural things such as art, literature, theatr. They are
men and women between 25 and 60 years old,who like to go to museums to improve their
knowledge around this areas and have fun doing this. They usually live in the cities, not in
rural areas. This group get use to have a high level of studies, at least, a basic level, in
fact, they usually are cultured people 6 . They want to know more about the city, their
country history, and about everything whats going on around them, cultural events, politic
actualities. They like to spend a lot of time between the walls of the museums, they know
they are cultured people and they like to be it.
The average of people that normally go to museums is not to high because nowadays,
culture is decreasing, new generations prefer another kind of culture, like go to the
cinemas, listen music, go out with their friends and so on. Definitively, street culture.
The target group can be families who go to the museums with their children (mainly in the
5 Aligment, proximity, repetition and contrast
6 Look in appendixe 3 target group collage for visual promotion of target group.

Style & Experience 10
weekends), single people who go to the museums with his/her class partners or with
his/her friends or persons who go to the museums alone to learn more things about it, to
relax. In general, the entrances of the museums are not very expensive, but the truth is
that the people who go to the museums have a medium or high level of incomes and they
usually spend their money in things related with culture (books, cinemas, theatre). There
are some people who dont like art in general but they like one artist, because he/she is
from his city or country, or because they like the way she/he paints. 7
About the conexion between this target with new technologies, we can say that the most
frecuently pages on Internet they visit are on line newspapers and sites like facebook.
They usually have their own mail box and they check it everyday.
How to make the Fyns Kunstmuseum more interactive?
Our main aim is to implement modern technologies in the diary life of the Fyns
Kunstmuseum, in order to make it more interactive and attractive to the visitors. In this
way, we have been thinking about a lot of things how to do this. That's why we are going
to propose some ideas below to make the museum better. The thing is that we have to
know that technologies should be implement just a few, because new technologies are not
so easy for adult people, the main visitors of the museum, because a lot of them don’t
know how to use these technologies.
Principal idea is to put some 3D TV set in rooms which has the most interesting story to
tell about panting, artist and its history. History about how museum get hem. Person who
wants to know more steps behind the TV and can get information in the exiting way,
hearing that story and watching 3D movie supporting it. This technology could be used
like electronic guide.
Other idea is to put projector wirh motion sensors in the third floor to chow Olympic
games on the wall. (Now Olympic games is shown on TV) When person comes into that
room, motion sensor detects movement and starts to play video.
We would like to make the museum more attractive to senses of the visitors, that's why
we are going to install speakers over the walls of the museum in all of the rooms with
7 Information about target group based on information from www.stantbank.dk

Style & Experience 11
different kinds of music, depending of the collection there is in each room.
We would like to put the main picture of the museum 8 , as a projection in the floor, just in
the middle of the principal room, like if its would be water. If you walk over there, you will
see how the picture is moving like it would be water and you will listen the sound of the
water in movement. We can find the picture we are talking about below:
Project management
Commercially:
In this case, we are going to use the technical, commercial, and creative resources to
involve on the project. We need to show the whole plan to our client. Of course, having
the client’s agreement and sign-off at the end of the work is very important. So we need
to make a great work and strategy to meet the need of our client.
Fyns kunstmuseum is a museum of arts. So most of the things they show are paintings
and sculptures. Compared with the other museums for example: H.C. Andersen house or
The Funen Village, Fyns Kunstmuseum has not much advantage to become attractable.
From the website now, we can see that, people will feel pretty much confused when they
are visiting the website. And most of the time when people visit the website, is going to
know about the museum or looking for some arts. But we find that, people will be easily
to get lost in visiting the website because of the confused navigation structure. What was
worse, their website is being listed together with the other museums. This means that
they actually run a risk of losing the customers.
So first of all, we need to evaluate the objectives of the whole website. The main purpose
of out project is to make the website easy structured and build a clear navigation
structure, so that people can easily find the information, which they are going to search
for. We are supposed to design our website by using modernism style, which will give
people a special nice feeling when they visit the website. So people can enjoy feeling the
arts while using with the very simple navigation structure. Of course it is also very
necessary to make our own website in stead of being together with some others.
8 H.A. Brendekilde: Udslidt. 1889

Style & Experience 12
We should also try to put our commercial on some other relative website for example
some traveling agency website or city cultural website.
Financially
To the clients, budget always seems to be the most interesting part of any document.
(Ashley F, 2001) and our pricing will depend on the daily rates we charge for the services
of our team members.
Budget Range: from 10000 to 16000 DDK 9
Our standard project range represents a starting point for most web projects. Projects in
this range include Newfangled visual design work. Sites in this range might contain some
Newfangled applications for example, like bulletin boards, calendars, or search bar
extranets. In this range, sites may also contain some custom business logic, but would
probably not contain complex website application implementations (such as e-commerce,
individual account manager systems etc.). Due to the database driven approach to web
development a site's page count has a minimal effect on budget. The complexity of a site's
pages has a greater impact on the budget than merely the overall page count. Our project
approach of including the allows us to retool existing website applications which address
significant needs yet still fall within the standard budget range.
As we all know, all the client would be very happy to see, if the cost could be reduced the
lower the better. So that require us to use technology as a cost reducer, competitive
weapon, and to make looks cool. It is important to provide as much detail in the budget as
possible, breaking down the total into component costs to show how the total was arrived
at. 10 And we find that the greater the detail we give in breading down the costs, the easier
it is to justify the budget.
9 Look in appendix 2 to see detailed budget for a web page
10 Ashley F, 2001

Technically
Style & Experience 13
Our website is programmed with Adobe Flash CS3, and will be payable with Adobe Flash
payer 9. It is created for the medium resolution screens. Because ours target group is not
that group which are interested in the new technologies, they could not have high
resolution wide screens.
Minimum hardware requirements for client machine to view our webpage.
Our site is all programmed 25fps. Minimum hardware configurations recommended for an
optimal playback experience of such frame rate.
Flash Player 9 is supported on the following minimum operating systems and browsers:
Windows:

Macintosh
Linux
Style & Experience 14
Flash Player 9 is available in the following languages for the above operating systems and
browsers: Chinese Simplified, Chinese Traditional, English, French, German, Japanese,
Italian, Korean, and Spanish.
Content
Before we decided to make our website, we tried to draw many pieces of storyboards. The
storyboard is very important and useful to our group in showing the navigational
architecture and information flow; that is, how the pages are to work together to provide
the user’s interactive experience 11 . Storyboarding is an effective method of helping us and
the client begin to visualize how the content and navigation elements will work together
on the page.
To create effective storyboards, we need to know what the elements required on the page
are. We need to think how the pages fit into the grander architecture and navigation of
the site, not from a technical point of view but from a functional, user point of view. So we
would like to produce pencil sketches on paper. and then we are very aware of how all of
the elements in our storyboard are progressing, and they will work together to produce
the final result.
The purpose of our design is to make the website simplified and easily navigation. So we
decided to use almost the same style and back ground for each webpage. (see appendix).
11 Ashley F, 2001

Style & Experience 15
We are going to put a navigation bar on the right of each webpage and a search bar on
the left corner, which will always be the same in our webpage. So the user can be pretty
easy to get used to using the function. Every time when user click the button, the
webpage style will not change so much, only the main content will be changed. So the
user will never be lost in the webpage.
We are also going to use 3-D on our website. We are supposed to make a 3-D museum
animation, which can show a clear picture of the structure of the museum. When people
move the mouse to the different room, special color will be lighted to show the main
theme of the room.
The use of site map
A site map is a representation of the architecture of a web site. It can be either a
document in any form used as a planning tool for web design, or a web page that lists the
pages on a web site. The site map is a visual representation of the content areas of the
site, showing the various levels of content and how they relate to one another in the
navigational hierarchy 12 . It shows how the content will be organized, what levels users
would have to go through to get to a particular piece of content, and how many clicks
they might they need to get somewhere else on the site.
Site maps can also improve search engine optimization of a site by making sure that all
the pages can be found. This is especially important if a site uses Adobe Flash or
JavaScript menus that do not include HTML links 13 . Most search engines will only follow a
finite number of links from a page, so if a site is very large, the site map may be required
so that search engines and visitors can access all content on the site.
12 Ashley F, 2001
13 Site map edited by Acaciz at 14:52, 27 November 2008.

Style & Experience 16
From the site map, we can see the pretty clear structure of our website. From the building
line, people can follow the orientation concept to find the information what they search
for. And from the style line, people can search the information according to the different
styles. In another words, people can search the painting in many different ways which
according to a very clear logic thinking.
Drawing this site map is also very helpful when we are making the website. The site map
may influence the directory structure of the site. It helps us keep a clear mind when we
design the website.
INTRO
HOME BUILDING HISTORY STYLE ARTISTS MUSEUMS
TEXT GALLERY TEXT ARTISTS
PAINTINGS
ROOM
PAINTING
STYLE ARTISTS
MODERN
ARTISTS
Evaluation of the group process
MODERN
PAINTINGS
ALPHABETICAL
LIST
ARTIST
ARTIST
PAINTINGS
LINK TO THE
ODENSE
MUSEUM PAGE
From the beginning of the project, we are not going directly into the group work. First of
all, we use the first weekend to read through the assignment very carefully. And high light
every detail of the point we are going to work. Then, we sit together and try to use six

Style & Experience 17
thinking hat to make a primary analysis of the project. At the same time we also have
some questions, which were suppose to ask in the meeting. And then in the first couple of
the project days, we try as much as possible to collect the primary information from the
museum and their website. Then we use a whole day to discuss and analyze the primary
data, which we are going to use. So we make a primary plan of our project work. Actually
our group works very efficiently. Everyone knows exactly what they are going to do in the
project. For example, Rimvydas and Jurga are very good at programming or make flash.
So they volunteer to make the interaction and production part of the project. Meanwhile
the rest of the group begins to discuss and start writing the report. Everyday the group
meets ten o’clock at the college, communicate or discuss the work which have been dong
and make a plan for the next step. Based on the different learning style of the group
member, we feel very happy working together. Every time if we have different opinion,
we try to use open mind to hear and accept the different voice. We respect each other in
the project work.
The only thing we feel a little shame is, not everyone in the group have the good enough
skill of making website within a certain range of time. This makes a little irritate of some
of our group members, sometimes they want to help, but feel so helpless. So some of us
would be a little confused about “do we really have the qualification and ability to doing
this assignment?”
Javi- as an activist, he likes to thrown into new situations and very open to trying new
ideas.
Andrea- as a reflector she prefers to stand back and observe what her group mates are
doing. And she knows exactly what she is going to do in the project.
Rimvydas- as a pragmatist, Rim really have lots of good ideas. As our project manager,
he can well control the process of the project and draws lots of storyboard and explain
carefully to let all the group knows what exactly is going to do.
Jurga- as an activist, she thinks very fast and has the best possible ideas figured out
before the others. She is very enthusiastic at doing the project.

Style & Experience 18
Lulu- as a reflector, she likes to collect data and analyze it. She is very sure what exactly
is going to do. She likes to do everything based on the knowledge and theory. She works
independently.
Interaction
Code
examples
Our website is mostly based on labeled flash frames. Those frames are accesed from other
frames with the help of action script classes.A frame has a movie clip containing buttons,
that lead to another frame. The code of the movie clip is written in an external *.as file.
Since our site is quite simple looking from the code part, we choose to describe the main
menu buttons code in the .as file and here:

Style & Experience 19
This part of the code defines what instances to import, in this case we have move Clip,
button and a mouse event:
package flash.classes {
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.MouseEvent;
This part defines movie clip that contains buttons:
dynamic public class mainmenu extends MovieClip{
This part defines which button (in this case "home_btn") engages which function (in this
case "home")
public function mainmenu(){
this.home_btn.addEventListener(MouseEvent.MOUSE_UP,homefunction);
}
Defines that function "home" leads to a frame labeled "home" and stops:
private function homefunction(event:MouseEvent):void{
MovieClip(root).gotoAndStop('home');
}
The procedure of making the web site took most of the time on creating navigation system
between the labeled flash frames, so the actual code does not vary very much.
The coding of our page was mostly done by Rimvydas and Jurga. They also had help from
Lulu, Javier and Andrea.

References
1. Art history: Modernism (1890-1940),
http://wwar.com/masters/movements/modernism.html
2. System requirements,
Style & Experience 20
http://www.adobe.com/products/flashplayer/productinfo/systemreqs/flashplayer9/
3. Site map edited by Acaciz at 14:52, 27 November 2008,
http://en.wikipedia.org/w/index.php?title=Site_map&oldid=254428435
4. Web Project Management – Delivering successful commercial websites by Ashley F
Friedlein - Morgan Kaufmann Publishers 2001

Appendixes
Appendix 1, Consensus paper of a group
Consensus paper
Style & Experience 21
Project title: Style&Experience Year: 2008
Name of group members: Rimvydas Ivoskis, Jurga Tizinhauzaite,Xiaolu Jiang(lulul),
Andrea Arto, Jesús Javier Sánchez.
Consensus on the group work:
1) Responsibilities
1.1 Who is the team manager?
Rimvydas
1.2 Who has the responsibility for knowing where the group work is?
Everyone
2) Decision making process rules
2.1 How do you make decisions in the group? (Majority/discussion/anarchy)
First, we have a discussion, then we use brainstorm to get the best ideas from
everyone. After that, we decide what ideas we should use and we start with the
project.
3) Work in project rules
3.1 When do we meet:
Everyday in the mornings.
3.2 Where do we meet?
In the college.
3.3 What should you do, if you are prevented from meeting at an agreed time and
place?
I should call to the team manager and tell him that i can't go and why.
3.4 How often do we check our e-mails/sms?
Everyday, twice per day.
3.5 How do we give messages to each other?
We use messenger or Facebook.
Other rules for the way we work together:

Style & Experience 22
We don't need rules because everybody works in the right way until this moment.
Appendix 2, Website budget
average daily rate for outsourced web developer $100
Website budget
Tasks Estimated Days Fee
Stage 1: Technical specifications
Scoping the project (ie finalising scope, functions, deliverables and costs) 5 500
0 0
Stage 2: The development 0 0
Project management (approx 5 meetings, reporting, liaising etc) 5 500
Graphic design (eg look and feel, navigation buttons)
General programming (creating navigation and meta-tags, creating
5 500
maintenance templates etc) 15 1500
0 0
Specific programming of functional elements eg 0 0
> Search engine software and interface 2 200
> Online forms (eg membership application forms) 2 200
> Promotional features (eg competition, games and surveys) 0 0
0 0
0 0
Stage 3: Delivery and deployment 0 0
Training 2 200
Documentation 4 400
0 0
Approximately 5% contingency allowance 0 0
0 0
Totals 40 4000
Web server and hosting costs
Registration of domain name 10
Web hosting with an ISP inc. email addresses/discussion group etc 100/Year
Additional posible costs
Creation of a database 6 600
Database annual licence fee 0 0
Populating database with content 0 0
Technical testing 1 100
Register with search engines 0 0

Style & Experience 23
Database and infrastructure advice from consultant 0 0
Legal (eg contract with web developer, copyright advice) 0 0
Content writer @ $50/hr 0 0
Usability testing (target audience test-drive the site for feedback) 1 100
E-commerce solution (annual license and connection to a bank) 0 0
Software for uploading new content (eg DreamWeaver) 7 700
Site traffic and usage software or service (annual license) 0 0
Search engine registration services 0 0
Marketing and promotion (advertising new site in traditional media) 6 500 2000
Downloaded from www.e-businessguide.gov.au page 1 of 1
Appendix3, target group collage
Total
$ $ 6.000

Appendix 4, Styles subpage design
Appendix 5, Building subpage design
Style & Experience 24