From page 12, you can read the web project specification from the ...

zope.ots.dk
  • No tags were found...

From page 12, you can read the web project specification from the ...

Style and Experience ProjectGroup 4: Kristian, Anders & Siw1


Style and Experience ProjectGroup 4: Kristian, Anders & SiwBooks:.........................................................................................................................................................................26Web sites:...................................................................................................................................................................26PowerPoints regarding the different graphic styles:................................................................................................26Appendix..............................................................................................................................................271. Example of a website with a modernistic design................................................................................................272. Examples of deconstructivistic design.................................................................................................................273. Examples of typographical expressionistic design:.............................................................................................284. Examples of Pop art design...................................................................................................................................285. A part of the restaurant which fits to modernism................................................................................................296. Collage of the target audience..............................................................................................................................297. An example of modernism from another media (Architecture/Picture)............................................................308. The design of our frontpage..................................................................................................................................3110. Gantt Chart...........................................................................................................................................................3110. Gantt Chart...........................................................................................................................................................323


Style and Experience ProjectGroup 4: Kristian, Anders & SiwIntroductionWe have been hired by the Italian restaurant La Piazza, to produce a new website topromote their restaurant, and hopefully improve their image and customer range.La Piazza wish us to create a website that gives the visitor a clear feeling of what it is liketo visit an Italian restaurant. They also want the visitor to experience some of Tuscany’snature and produce.For this purpose, we have chosen to create a site, which will be based on a simpleconcept, which is to make the website (metaphorically speaking) a doorway to Tuscanyand La Piazza. We want to show the visitor a lot of pictures of Tuscany, La Piazza and thefood they serve. The way we do it should naturally appeal to our chosen target group,described in further details later in this report. We will also be constrained by the fact thatour client want us to create a modernistic design, which we anticipate will fit our targetgroup nicely. Business people and elegant design go well together.In this report is also included a lot of the background for our work, such as research,justification of our designs, a web project specification and Gantt charts, to ensure thatour client knows what we are doing and hopefully will, if not like, then understand ourdesigns and decisions. Please keep in mind that the page is optimized for 1024*768.Problem DefinitionThere are several issues to creating a functional website, which will appeal both to a clientand to the target audience. The main criteria’s to be fulfilled are listed below:• Tell the story of an Italian meal (metaphorically speaking)• Engage the senses• Introduce Tuscan nature and produce• Choose a concept• Choose and describe the target audience• Create an interactive web environment• Follow the guidelines for modernistic design4


Style and Experience ProjectGroup 4: Kristian, Anders & SiwHow does this web site match the essential criteria forthe modernistic style?It has clear margins; there is a lot of space in monotone areas. Space of the page is dividedinto squares, which are put in line, vertical and/or horizontal. There is clear separationbetween text and illustration. The little squares are repeated. The little squares are incontrast to the big square. Basic forms for the style are used, as wells as the right colorscheme and type faces.The pictures and the text give the message in a plain and factual way.Comparative analysisDeconstructive design compared to the modernistic designThe deconstructive design is totally opposite of the modernistic design.In this style we work with no margins, no space, no division in mathematically arrangedareas and no separation between text and illustration.The elements are not in line, vertical and/or horizontal.There has to be many layers of pictures and text on top of each other and negative linespacing. The colors are dirty, that means vomit green and urine yellow, which dominatetogether with grey and black. There is black in all colors used.The typefaces used in this style are twisted versions of existing fonts. We are workingwith the aesthetics of fault and with breaking the rules – and especially the rules ofmodernism.The purpose is to expand, blow open, and spread it out. Not as an answer to a question butas new possibilities.Examples on the deconstructive style are to be seen in Appendix 2.Typographical expressionistic design compared to the modernisticdesignThe typographical expressionistic design is a little opposite of modernistic design.In this style we work with a filled area. There is no separation between text andillustration and no separation between letters. The page is very compact.6


Style and Experience ProjectGroup 4: Kristian, Anders & SiwThe colors are brown, orange, mauve, yellow and red (burned colors).The typefaces used in this style are slap serif, the outline of the letters has another colorand letters/words can become images as well as images can become letters/words.The purpose is to engage the reader and make the reader participate.Examples on the deconstructive style are to be seen in Appendix 3.Pop art design compared to the modernistic designThe pop art design is a little bit like modernistic design, in the sense that in this style wework with little details in the picture and in modernistic design we work with emptyspaces.Pop art design is about clearing a photo for details, turning it into black and white andthen to add colors, but when finished, the person who looks at it should be able to see,that in fact we started out with a photo. In the pop art design there are no originals, butonly copies.In pop art there is rough but not precise edges. Every day things is enlarged and put intoanother, and not expected, place.The colors are neon colors.The typefaces used in this style are Helvetica, if there is any real use of fonts, but else thetext which might be in the photo is re- used.The purpose is to that not only the cultural elite have to say what good or right art is. Herethe issue is”ugly things are beautiful”.Examples on the deconstructive style are to be seen in Appendix 4.A part of the restaurant, which fits to modernismThe pictures of the part of the restaurant are to be seen in Appendix 5.In these pictures there is contrast:Dark wood contra light wallsSmall windows (glass wall) contra big window (door)Things are I line. There is space between things. Squares are used. The color scheme fitswith the style.7


Style and Experience ProjectGroup 4: Kristian, Anders & SiwDescription of the target groupThe main target group of the Italian restaurant La Piazza is reportedly 1 business people(or others who do not worry too much about the price) who book times at the restaurantfor small to medium sized dinner parties or business meetings. The restaurant also catersto another target group: Students.From this, we gather that the target group for our website would be pretty much the sametarget group as the restaurants target group. Thus, the target audience could be defined as:Main target audienceWealthy business people, or others, who wish to arrange dinner parties. These wouldnormally be college candidates 2 , putting them in the age group of above 28 to 65 yearolds 3 . This segment is a high-income segment in Denmark. This target audience includesforeigners as well as Danes. As for gender segmentation, we assume that both male andfemales will visit La Piazza, but the main part will most likely be male. A distribution of60% male and 40% female is fair to assume.Sub Target audienceStudents. By students we assume that this will be college students 4 . Thus this targetaudience would be from the age of 20 to 30. This segment is a medium to low incomesegment, since most receive Statens Uddannelsesstøtte but many also have a part timejob. This target audience is most likely not gender sensitive, thus a distribution of 50%female and 50% male is fair to assume.Regular people could also be counted as a target audience. This could be everyone fromthe age of 20 to 90 year olds. Possibly mostly married couples or dating couples. Thistarget audience is quite extensive and it is hard to cover such a large target audience. Thuswe will keep it in mind, but it will be a tertiary audience.1 According to our contact at La Piazza, Glenn.2 The average age of candidates is documented in this publication on page 4:www.sam.sdu.dk/doc/events/alumne/evaluering/2004.pdf3 The average Danish student finishes a long-term education at the age of 30.4 High school students are less likely to visit La Piazza due to its high standard and quality-driven image. Theirincome is lower and often linked to the parents’ income.8


Style and Experience ProjectGroup 4: Kristian, Anders & Siwclear margins. We use Sans Serif typefaces for the text. And there is contrast between thedifferent elements on the page: the black background and the white/grey text and also thecolorful menu against the black background, the menu being small and then expands onceyou move your mouse over it and the difference in size between the menu and iframe. Themenu is also dynamic/static as it only changes the button you have your mouse over andthe rest of the menu staying in place.We are also using reduction in our page since most things are not big and have beenreduced heavily. Repetition is also used on the pages as they are being repeated, but withdifferent text and pictures depending on the issue of the page.The message: “You are going to experience Tuscany with the atmosphere and specialtiesfrom there” is presented in a plain and factual way.The design meets the needs of the target group by giving the information needed. Whatfood and wine do they serve and what does it cost? What are the opening hours and whereis La Piazza located? How to contact La Piazza? And in addition to this people can alsoget information about Tuscany if interested or about arrangements in “Brandt’s” whichlays next to La Piazza. We think that the target group like things presented in a nice andwell organized way with little disturbance.The reason for our design is that Glenn pointed out that he is not serving Italian food, butfood from Tuscany. Food from Tuscany is different from Italian food of other Italianareas. Then we had to make it special and we did that by making “a door to Tuscany”. Wewant people imagine standing in Odense and when opening the door to La Piazza youstep in to Tuscany. It will serve as a shortcut, a cheap way to travel to Italy and eatauthentic food from Tuscany.Then we thought of what should actually be on the page. The flash intro was a mustbecause of the concept with the door and we were sure that there had to be menu pageswith food and wine. We also thought it would be a good idea to give people an impressionof the restaurant and therefore we made the front page like it is. We thought it would be agood idea to tell about the area and therefore we made the page about Tuscany.10


Style and Experience ProjectGroup 4: Kristian, Anders & SiwThe buttons is made by the colors of the Italian flag, because then we signal that it isItalian, which could be important: People who wants to find Italian food knows it is theright page immediately because this “symbol” is very known in Denmark for Italian food.11


Style and Experience ProjectGroup 4: Kristian, Anders & SiwWeb Project Specification1. Version ControlVersion Date Author Description1.0 27.11.06 All group Research startedmembers1.1 29.11.06 All group Concept brainstormed and developed.members1.2 30.11.06 All groupmembersPaper roughs for page designs and splashintro1.3 01.12.06 All groupmembersFinal design chosen on the basis ofphotoshop drafts.1.4 04.12.06 All group Design approved by clientsmembers1.5 04.12.06 Anders First draft of splash intro done1.6 04.12.06 Siw & Kristian Finished first draft of XHTML mainpage1.7 05.12.06 Kristian Finished first draft for flash menu1.8 05.12.06 Siw Finished slideshow for frontpage1.9 06.12.06 Anders Finished final version of splash intro2.0 06.12.06 Kristian Finished the menu2.1 06.12.06 Siw Finished all slideshows2.2 06.12.06 All group members Text for all pages finished2.3 07.12.06 All group members Main changes to the website and report2.4 07.12.06 All group members Final version of website and report2. Distribution ListName Company Position Distribution RequirementsGroup 4 MMD Students Information and file sharingOther groups MMD Students Information onlyRene, Ulla, Lars& LiseMMD Teachers/Clients Information & Final sign offs3. IntroductionWe have been hired by La Piazza to produce a website which will appeal tocurrent customers, and attract new customers to their Italian Restaurant. We willdo this by creating a website with a modernistic design, and using tools like flashand XHTML.12


Style and Experience ProjectGroup 4: Kristian, Anders & SiwThis document, our web project specification, serves to ensure the optimalcoordination of our team effort, to ensure a minimal number of problems and toensure that our clients can better gauge what the project actually entails. Basicallyit is created to ensure a coordinated effort which will lead to a satisfying result,and avoid problems by anticipating them in order to solve the small problemsbefore they evolve into large problems.During the course of the project, this document will be kept up to date, and be areliable resource to the parties involved in the La Piazza web project.4. Project ObjectivesThis project is part of a larger project here at MMD, which involves the 1 stsemester classes, 4 teachers 5 and the Italian restaurant La Piazza. This specificproject only involves the 3 students Anders, Siw and Kristian, the restaurant LaPiazza and the before mentioned 4 teachers.We will attempt to create a universe for the website, which will appeal to therestaurants target audience. The website will focus on experience design, in orderto make a bigger impact on the potential users of the website. Furthermore, wewill make it a useable site, to ensure that we do not scare off any potentialcustomers before they even visit the restaurant. We hope that we will improve alot of our skills during this project, and create a product that will satisfy ourclients and their target audience.The key deliverables for this project are:A functional website, including:• A metaphor or universe for the website.• Reflection over the target audience for the chosen universe.• The creation of an interactive web universe focusing on style &experience.5 Rene, Ulla, Lise and Lars.13


Style and Experience ProjectGroup 4: Kristian, Anders & Siw• Focus on Modernism as a design style.The key target release dates are:23/11: Presentation of project assignment28/12 Uploading of photos to the project monitoring website04/12: Meeting with the clients08/12: DEADLINE. At 12 o’clock the project is to be handed in at the office ofthe school secretary Ulla, in 3 copies. The product is to be uploaded to the projectmonitoring website at the same deadline.15/12: Between 09.00 and 13.35 the project is to be presented orally.Exclusions / Elements we consider out of scope:• Usability testing.• Implementation. Uploading to the clients’ actual web hotel.• Winning a dinner at the La Piazza restaurant.• Teaching the La Piazza web administrators how to update and maintainthe website.5. Success CriteriaFor this project the success criteria are:• Does the Flash intro work?• Does the homepage work?• Does the layout matching “modernism”?• Is the theme ok and is it implemented properly into the webpage?• Did we make a web page for the target group?14


Style and Experience ProjectGroup 4: Kristian, Anders & Siw• Is there any experience by going to the page?Was this not a educational project, but a web page, which in fact should be usedin reality, the success criteria would be:• 500 visitors at the web page each month• 10 % more visitors at the restaurant• 2% more interest in the pasta, olive oil and wine, sold at the restaurant forhome use15


Style and Experience ProjectGroup 4: Kristian, Anders & Siw6.Sitemap16


Style and Experience ProjectGroup 4: Kristian, Anders & Siw7. Functional SpecificationThe website would contain 13 pages in total (with the intro). A home page, newspage, menu page (which will contain 5 sub pages), recipe page, Tuscany page,shop page, contact page.On the main page we wanted a menu with expendable buttons depending onwhere your mouse goes over. The menu would be in colors of the Italian flag andin the middle of the page we would have an iframe that would change contentdepending on which sub page you have choosen to visit. The same goes for theslideshow on the right side of the page, it would also change depending on whichpage you are viewing. And on the top of the page we would have the La Piazzalogo.Intro:We wanted to start off with an intro on a door that’s supposed to open and thenyou would feel like you walking into it and once inside you see this Tuscanylandscape before it takes you to the main page.Home:On this page we would have pictures of La Piazza showing in the slideshow andin the text area there would be information about the restaurant.News:On the news page there would be information about ongoing events in therestaurant like exhibition or information about Brandt’s which lies next to LaPiazza. And the slideshow would have pictures that would give a glimpse of theevents.Menu:The menu page contains five different sub pages. Wines, Breakfast, Dinner,Monthly and Christmas. They all contain their own set of wines/dishes and prices.The slideshow would be showing pictures of different wines and dishes.17


Style and Experience ProjectGroup 4: Kristian, Anders & SiwRecipe:Here there would be a recipe that the chief himself have put on the page, and thiswould change monthly or depending on his own wishes. A picture would also beon the left side with a dish.Tuscany:Here there would be an information text about Tuscany and a slideshow withpictures on the side of nice Tuscany environments.Shop:We would have a little information about what can be bought at La Piazza in formof wine, paste, olive oil, cakes, beer, ceramics and so on. And on the left sidethere would be a slideshow showing a selection of these items.Contact:Here there would be information how to contact La Piazza and opening hours. Aslideshow showing pictures of those who works at La Piazza.18


Style and Experience ProjectGroup 4: Kristian, Anders & SiwStoryboard19


Style and Experience ProjectGroup 4: Kristian, Anders & Siw20


Style and Experience ProjectGroup 4: Kristian, Anders & Siw8. Technical SpecificationTechnical architectureModified from figure 1 on this website: http://www-128.ibm.com/developerworks/web/library/wa-techarch/21


Style and Experience ProjectGroup 4: Kristian, Anders & SiwServer SpecificationVirtual server 61 gigabytes of storage space is a minimum.A minimum of 128 available RAM.2000 Mhz CPU is sufficient.Linux or Windows server.FTP loginDomain should be .dk.Traffic: 10 gigabytes a month. More later, hopefully.SecurityFirewall 7Virus and spam filter128 bit encryption 8User machine specificationScreen resolutions: Optimised for 1024*768 9Monitor size 17”Color depth High color 32 bit 10User operating systems: Windows XP 11CPU:2.0 ghz Pentium 4 minimum.6 Like this one: http://www.danhost.dk/virtuel_server.php7 To prevent hacking of the website8 We do not anticipate making use of any encryption, since there will be no sensitive informationexchanged on the website.9 Jakob Nielsen recommends optmimizing websites for 1024*768, since it is the most widely used, in thisarticle: http://www.useit.com/alertbox/screen_resolution.html . Statistics to prove this, can be found here:http://www.thecounter.com/stats/2006/November/res.php10 84% of users use this color depth according to this website:http://www.thecounter.com/stats/2006/November/colors.php11 83% of users use Windows XP according to this website:http://www.thecounter.com/stats/2006/November/os.php . We do not have access to other operatingsystems to test on anyway.22


Style and Experience ProjectGroup 4: Kristian, Anders & SiwRAM:256 minimum. 512 optimal.Video:Flash 8 movie (.swf)Audio:Audio in flash movie and sound on buttons etc.Browsers: Internet Explorer 6.x and Firefox 1.x 12Plug-insFlash player 8, shockwave player.FramesiFramesCSSTo control text and background appearance.ScrollingOnly in iFramesConnection speeds: 512/128 ADSL.12 These are the 2 most popular browsers currently. Collectively they represent 87% of all users accordingto this page: http://www.thecounter.com/stats/2006/November/browser.php23


Style and Experience ProjectGroup 4: Kristian, Anders & SiwGroup Process Evaluation:Reflector (Anders) – Reflector (Siw) – Pragmatist (Kristian)The differences in our learning styles did not impact on our work in a bad way,although it was a little difficult for the 2 reflectors to turn into activists during ourbrainstorm on suggested concepts.The pragmatist just jumped in but the reflectors had to reflect a little first.The 2 reflectors were good at doing research and this is very due to the learningstyles.The group were more using “tools” from the education, than we were directed bya persons learning style.There has been a good flow in the work and everyone has taken part in decisions,discussions and work during the project.Every member of the group knows exactly what they want, but they are also quitecapable of compromising.The group lived up to the consensus paper, made on the first day of our project.We did not stray from any of the guidelines we had made for ourselves.We managed to have the Gantt chart in good use and it helped us to keep track ofthe time. Naturally we did not always do things EXCACTLY the way describedin it, but we were very close and managed to stay on schedule.During the project we stayed longer at school, if we had something, which wasnot finished during the day.24


Style and Experience ProjectGroup 4: Kristian, Anders & SiwConclusionWe have succeeded in creating a functional website, to promote the Italianrestaurant La Piazza. Also, it should appeal to the target group, and give thevisitors a clear feeling of what La Piazza is about. The task of creating animpression of Tuscany and La Piazza should be covered on the website as awhole.As far as modernism goes, we have attempted to utilize this design style as bestwe could. As far as engaging the senses, we have created a lot of eye candy, whilekeeping to the guidelines of modernistic design. We could have engaged the senseof hearing further, by implementing music on for example the Tuscany sub page,or in the flash intro, but we decided that it would risk ruining the concept ofmodernism, which is about reduction, simplicity and designing to carry themessage. We felt that adding more audio would risk ruining the clean experiencethat we wish to convey. Moreover, we risk annoying or even scaring visitorsaway, with for example music in the background.While on the topic of improvement, we wish we would have had time to create aso-called “back” button in the submenus of our menus sub page, to allow the userto go back to the menu for breakfast, dinner etc.The concept of being a doorway to Tuscany and La Piazza was a good choice inour modest opinions, and supported by Ulla and Rene as well. It was manageable,functional and allowed room to fulfill most of the criteria’s for this project.Whether or not the design will be appreciated or not, is up to our clients to decide.We feel confident that it will live up to the success criteria’s that we set forourselves.25


Style and Experience ProjectGroup 4: Kristian, Anders & SiwBibliographyBooks:Williams, Robin & Tollet, John: The Non-Designers Web Book, Peachpit Press, 2005Duckett, John: Beginning Web Programming With HTML, XHTML and CSS, WileyPublishing, 2004Friedlein, Ashley: Web Project Management, Morgan Kaufmann Publishers, 2000Finkelstein, Ellen & Leete, Gurdy: Macromedia Flash 8 For Dummies, WileyPublishing, 2006Web sites:http://la-piazza.dk (November, 2006)http://en.wikipedia.org/wiki/Modernism (November, 2006)http://en.wikipedia.org/wiki/Deconstructivism (November, 2006)http://en.wikipedia.org/wiki/International_Typographic_Style (November, 2006)http://en.wikipedia.org/wiki/Pop_art (November, 2006)http://www.cafax.dk/index.php?ID=1 (November, 2006)www.sam.sdu.dk/doc/events/alumne/evaluering/2004.pdf (November, 2006)http://www.danhost.dk/virtuel_server.php (November, 2006)http://www.danhost.dk/virtuel_server.php (November, 2006)http://www.useit.com/alertbox/screen_resolution.html (November, 2006)http://www.thecounter.com/stats/2006/November/res.php (November, 2006)http://www.thecounter.com/stats/2006/November/colors.php (November, 2006)http://www.thecounter.com/stats/2006/November/os.php (November, 2006)http://www.thecounter.com/stats/2006/November/browser.php (November, 2006)PowerPoints regarding the different graphic styles:http://bb.tietgen.dk/ (November, 2006)Courses>1SemesterAutumn2006>CourseMaterials>1.Semester>VisualisationAndConceptDevelopment>GraphicStyles26


Style and Experience ProjectGroup 4: Kristian, Anders & SiwAppendix1. Example of a website with a modernistic design2. Examples of deconstructivistic designCd cover:Book cover:27


Style and Experience ProjectGroup 4: Kristian, Anders & Siw3. Examples of typographical expressionistic design:CD-cover:Book-cover:4. Examples of Pop art designCD-cover:Book-cover:28


Style and Experience ProjectGroup 4: Kristian, Anders & Siw5. A part of the restaurant which fits to modernism6. Collage of the target audience29


Style and Experience ProjectGroup 4: Kristian, Anders & Siw7. An example of modernism from another media(Architecture/Picture)30


Style and Experience ProjectGroup 4: Kristian, Anders & Siw8. The design of our frontpage31


Style and Experience ProjectGroup 4: Kristian, Anders & Siw10. Gantt Chart32


Style and Experience ProjectGroup 4: Kristian, Anders & Siw33

More magazines by this user
Similar magazines