Style and Experience Project
Group 8
Abdul Karim
Jebran Bangash
Søren Riley
2012
MMD Odense
Bjarne Slipsager
Mona Kærgaard
Table of content
Introduction
Thesis statement
Communication
Design
Interaction
Business:
Bibliography
Conclusion
Introduction
In the style and experience project, we are entitled to construct a website to attract the as much students
to be enrolled in the education that is assigned to us which is called project development and technology
integration.
We have been informed during the assignment about the location of the study and that we should pass to
there and do a Google pointer for the study. We are going to make our website easy to be surfed and
follow the styles that we have been studied during the classes.
Thesis statement
Constructing a website is not easy if you do not know how to start with. So we have to follow some
methods during the construction of the website about the education that we are entitled to which is the
project development and technology integration. So what are the styles we are going to follow? What kind
of desk and field research we have to make? What is the target group so we can market our education
perfectly? What kind of project management we follow to manage our project so we cannot get lost during
the process? What type of design we have to follow that suits our target group?
Communication
Research and analysis:
We have decided to do desk research at the beginning because of our limited time since there was a
holiday and that limited our research time. We have used the Gallup compass for our style and experience
project, and we have used many other websites to make a research about the education we have entitled
to do the research upon which is the product development and technology integration.
First of all, what is the Gallup compass and what results we have gained from in terms of our research?
Gallup compass1 is a segmentation tool which gives an accurate profile about the consumer, media, and
brands that are not restricted to demographic groups. It also gives a very good understanding of consumer
attitudes and life his lifestyle.
Gallup compass divides the Danish population into 9 groups: The moderns, the modern-individuals, the
individuals, the traditional-individuals, the traditional, the traditional-socials, the socials, and the modernsocials.
1
Tns.GallupKompass.Tns. Retrieved April, 19, 2012, from http://www.gallup.dk/voresmarkedsfokus/medier/printmedier/gallupkompas.aspx.
In the figure, you can see the Gallup compass distribution which gives percentage segmentation for the 9
different groups among the Danish population whom lives in Fyn and their age is between 18 and 40years
from men and women and whom they continually use the internet and are very interested in technology
and they take their education in “erhvervsskole”.
And we got the results as follows. Out of 45 thousand people, we get 15 thousand people as a target group
for the product development and technology integration. These people are divided like this:
The moderns:14.3%
The moderns-individuals:21.4%
The individuals:7.1%
The individuals-traditional:7.1%
The traditional:7.1%
The traditional-socials:7.1%
The socials:7.1%
The modern-socials:14.3%
The center:7.1%
Target group:
What are interesting also from these results are the following 3 segments: the moderns, the modern’s
individuals, and the modern socials. These 3 segments constitutes at 50% from the target group. The
moderns segment2 is those of people who are of age between 20 and 39 and are well-educated and belong
to the highest social classes. They are highly fascinated to the new technology and the internet world and
use computers in their work and at their homes. The other important segment is the modern-individuals3 .
This segment of Dane people contains dynamic, ambitious, young people. But why should we focus at these
2 segments: the moderns and the moderns-individuals? The answer is simple, because these 2 segments
will make our product more sociable and easy to accept and attain our goal which is to bring as many as we
can of these people and take their education which isproduct development and technology integration at
lillaebelt. And we must not forget about the modern socials since these are the kind of people who put into
consideration the environmental and pollution issues. Finally, with respect to other segments, even
thought we have not mentioned their interest but they do take care of technology and computer stuff in a
way or another. So we are dealing here with at least 50% of the target group.
As a conclusion we can say, that there really are many students, who would be interested in participating in
education. The only problem we should solve is to get their attention.
Ideas:
One idea that came directly to our mind since our target group is fascinated with new technology and the
use of the internet world is to make a video about the different products that are made by the product
development and technology integration department and upload it to Facebook and twitter at the school
account. By doing that we are sending our idea with easy to many people who have not known yet about
the education.
The second idea was to upload videos to the educational website and by that they can be more impressed
than just looking at the contents that will take during their study because they want to see the fruit of their
education that they may get.
As a conclusion, we have to focus on the description of our education by making videos since the eye get
facts more than words.
2
Segmentdescription.GallupKompass segment profiles, from http://fronter.com/eal/main.phtml.
Segmentdescription.GallupKompass segment profiles, from http://fronter.com/eal/main.phtml.
3
User profile and scenario:
The AIDA4 model is a tool to grab the attention of the consumer or the client to take an action towards
your project, writing or something else. The acronym AIDA stands for: attention or attraction, interest,
desire and action. So by applying these four steps, we are taking our client to take an action at the end
towards our product.
One day karim 20 year old was chatting with his friends on Facebook. While he was chatting with his friends
about the different education offered at Denmark and surfing the internet about the best education that
fits him, he has noticed an advertisement on the Facebook about product development and technology
integration education program. Then he started reading it. There are many reasons why you have not
chosen the right education that fits you. Do you have the imagination? Are you interested in bringing up a
new product to market? Are you interested in business studies, design or engineering? Product
development and technology integration is the solution. . So don’t go far away from us because we give you
the opportunity to continue you education and be active while you are at home. Doesn’t it look
interesting!?? If you still have doubts just all what you need to do is to go to our account on Facebook or
visit our website and click the button of the video that it will give a very good demonstration about the
whole process.. Now all what is left is to take an action and sign in to the education program offered at EAL
School.
At the end he was very happy with this interdisciplinaryeducation and started preparing his documents to
apply for it.
Mission statement
Our aim is to convince the target group to be enrolled in the product development and technology
integration program and to do a website that promotes this education and reach to biggest numbers of
people or students to grab their attention by our fantastic design and simple design of our website and
showing the extraordinary products of what this education can bring to the future.
4
AIDA: Attention-Interest-Desire-Action. Mind Tools. Retrieved April 19, 2012, from
http://www.mindtools.com/pages/article/AIDA.htm
Design
For our project, we decided to use the style Pop Art so in this part of the report we are going to tell about
the characterizes of the style, how we used the style on our own site and how we made the design part of
the project.
About
It is uncertain where the term pop art came from, but Pop art was introduced to this world in the mid of
1950s5 from the Britain. The style of Pop Art is characterized by bold, simple, everyday image and vibrates
block colures. At the point when the movement came out the style was meant to have “hip” feeling to it.
The two legendary pop art artists in history of this world are ANDY WARHOL and ROY LICHTENSTEIN.
It became one of the most popular artistic movements in twentieth century. Pop art made a sudden change
in the consumer behavior, more and more people were getting close to pop art, and pop art products. The
Pop artist used the everyday things like famous pictures or logos that most people would recognize. This
sudden change in the consumer market was the initial spark of the artistic movement 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 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 make our
decent website more attractive for the youth. We wanted to start with a baseline in Pop-Art and then
adjust that to suit our website and the demographic we were targeting– young, contemporary
audience.
We were discussing that the website should be easy to read. Included with factors that moved the eye
to such interest points that EAL had stated that they desired within their webpage and to whom their
demographic or target group for this site was. The Pop Art style, in its original form, transgresses
5
http://arthistory.about.com/od/modernarthistory/a/Pop-Art-Art-History-101-Basics.htm
naturally to website design for our purposes. We were interested in those expressive bold statements
the Pop Art movement created, how it directed the viewer to particular area.
Design for our default .CSS
As a relevant site to our education website, we utilized the official EAL homepage6 as inspiration for the
default look of ours.
Necessary information is accessible through navigational menus which the color contrast easily leads the
user towards. We like how the website states as a good example for a design addressed to people
interested in lines of education.
We felt it was fitting to utilize the EAL logo and colors on our website too as our education institute is the
same.
Our website and the design principles.
Proximity (Green lines): Everything related is grouped together well, so it is easily visible to the user what
to look at.
Repetition: The layout is continuous through the whole website.
Contrast: The contrast between the white and aquablue colors create a nice focus on the content.
Alignment (Red lines): Everything is perfectly aligned, so nothing on the website looks out of place.
6
http://www.eal.dk
Interaction
Technology
We analyzed the technology at our disposal, to find the most suitable for coding our website which mainly
consists of XHTML and CSS.
We also managed to add a small bit of Flash elements, in the form of a Youtube video. We would have liked
to work more with flash, but due to time pressure and lack of skills, we thought it was fitting to make the
website mostly XHTML and CSS based.
We decided to utilize Adobe Dreamweaver, because we are used to coding with it. Also the ability to see
code AND the website at the same time inside Dreamweaver really would speed up that process for us.
We had no problems with it during the whole process, so we are fully satisfied with the choice we made.
Structure
We wanted to make sure the website was easy to navigate and had a simple layout, so there would be no
trouble for less experienced internet users.
For this to be possible we firstly had to make a sitemap:
The website therefore consists of five pages, which all have a sidebar menu for access to each individual
site. It is simple. It is easy to navigate. It works.
The layout had the similar requirements, and this is the wireframe sketch we came up with:
Another sidebar we included in the site was the "Infobar", which is not a menu but just a sidebar with
important text, address, contact and application dates. This is also visible on each of the five pages.
We are very satisfied with the final layout look of the website, because it fills our planned requirements
and also looks clean and official, being an education site.
Demands of the website
Browser
Our main priority was that the website works on Internet Explorer, because it is the most used browser in
the world. The website is working without any problems, so we are very satisfied with this. It is also
working on other browsers like Mozilla Firefox, Google Chrome and Opera.
Screen Resolution
The website was created with the resolution: 1680x1050.
We have tested the website on smaller resolutions, and the only drawback was that that the width of the
website was not fully visible, thereby making it necessary to scroll a bit to the right.
This varies depending on resolution size.
Code
The website was constructed using XHTML, and by the use of a series of <div>s, and then styled them
through CSS to make everything look neat and especially align everything up with each other.
For the CSS part we had the four design principles in mind, that we have learned during our semester.
Snippet of code
These are the two parts of the code that we are most proud of:
1. The navigation-sidebar-list (HTML)
We are proud of this snippet of code because it is simple, yet very essential to our website. It is in fact just a
simple way to make a navigation bar, and we like it.
We learned this code during our HTML classes with Bjarne Slipsager, when we had to make our own version
of a website.
2. The current page indicator (CSS)
We like this snippet of code, because it is very short but very efficient. By the use of IDs in the navigation
bar and an ID on each page, it styles the menu bar only on the current page being displayed.
We learned this by ourselves through Google searching.
Business:
Concept development
From the first moment we get the assignment to do the project about the product development and
technology integration, we realized that we were very active and started to follow different strategy to get
our assignment done.
We have followed different strategies to get many ideas at the beginning such as the convergent divergent
thinking. So firstly, we started to generate creative ideas by exploring many possible solutions to get our
website completed. So we started putting many different ideas and write it down as soon as it comes to our
mind. After that, we started the convergent thinking and pick up the solutions that is best fits our
assignment, thought in this process we have taken longer time that the divergent thinking where we put
many ideas in a short period of time. At the end, good ideas are combined to form the end and final result
of our bunch of ideas which is the website that we have done which is very similar to the school website
because of its simplicity and easy to read but we have add to it some spirit by including pop art pictures
because product development and technology integration is an interdisciplinary education among design
business and engineering.
Team process:
At the beginning of the project we have made a Gantt chart7 to make sure that all points of theassigned
project would be fulfilled in time. Gantt chart is basically a bar chart used in project management to show
tasks, milestones, and even dependencies between tasks. It’s a timeline of a project’s progress, and it can
be a useful tool for monitoring and managing projects.By using the Gantt chart, we have distributed the
different tasks among us along with their duration, start and end times, so we can know whether we have
finished from a certain task or not. Then, we have started to allocate the resources, so we make the task
easier for and not to happen any overlapping among the member of the group and by that each one knows
his specific task that he should accomplish. After that we specified the dependency among the different
tasks since you cannot start with a task before another certain task has to be accomplished before it. So we
started indicating the relationship among the different tasks by using the predecessors tab.
7
Msoffice. Gantt chart.Msoffice. Retrieved April, 19, 2012 from http://www.brighthub.com/office/projectmanagement/articles/2721.aspx.
Also it is worth to mention that we have split the Gantt chart according to our learning styles, but we have
realized that we share same characteristics in way or another and we found that very helpful because at
knowing time of the process management we were helping each other.
We were all as project managers in way or another because we have almost the same percentage as
theorist and pragmatist of about 70% in each one in the group. So all put and generate new ideas and
substitute the position as project manager. It is worth to mention that we were all activists because we all
have reviewed the report and each time there is a new idea to insert it in the report. After analysis and
collecting the data, we have related texts to visual effects. As a conclusion, we have really worked as a
team in this project and share roles from pragmatist to theorist to activist to reflectsit.
Conclusion
As a conclusion the project about style and experience to construct a website went very well.
According the desk and field research that we have made; we have considered the target group and
identify the style that should be applied very well. So we have made the construction very clear and simple
and attractive since we have included the pop art design. And we believe that the communication part
about the making an advertisement at the facebook during idea generation and convergent and divergent
thinking come to live. Also to grab the target group attention we have included a video since the eye makes
the client understand more than words. At the end because of the time management and the learning
styles in addition to other methods of generating new ideas we have noticed no difficulties during the
construction process of the website for the product development and technology integration.
Bibliography
Tns.GallupKompass.Tns. Retrieved April, 19, 2012, fromhttp://www.gallup.dk/voresmarkedsfokus/medier/printmedier/gallupkompas.aspx.
2
Segmentdescription.GallupKompass segment profiles, from http://fronter.com/eal/main.phtml.
3
Segmentdescription.GallupKompass segment profiles, from http://fronter.com/eal/main.phtml.
4
AIDA: Attention-Interest-Desire-Action. Mind Tools. Retrieved April 19, 2012, from
http://www.mindtools.com/pages/article/AIDA.htm
5
Ms office.Ghantt chart.Msoffice. Retrieved April, 19, 2012 from http://www.brighthub.com/office/projectmanagement/articles/2721.aspx.
6
7
http://arthistory.about.com/od/modernarthistory/a/Pop-Art-Art-History-101-Basics.htm
http://www.eal.dk