Page 0

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

Page 0

Page 0


Contents1. Wally Olins’ terminology2. Description of our logo according to “Checkpoints by logo design”3. Description of font used4. Description of colors used5. The development process6. The Star Analysis7. Explanation of the TRADITION, TREND and SITUATION of the design.8. Substantiation of our design with results from the analysis.9. Design principles10. AppendicesPage 2


The routes that cross the Mediterranean once belonged to the merchants, pirates and conquerors, havebecome today, for the artists of this area, the routes towards memory, knowledge and creativity. Thus,here, the arts are more than elsewhere, one of the most effective tools to foster the development ofhuman relations, and especially in the actual context of political and social cleavages. Meanwhile, throughtheir universal language, the artists are giving us a better understanding of ourselves, others, and of themuch larger human landscape in which we operate.We all know that the Mediterranean Sea is much more than a geographical expression. Referring to theamalgams of peoples, cultures and mentalities, it is a door open between East and West; a meeting pointof three continents, Africa, Asia, and Europe. In the west Gibraltar connects the Mediterranean with theAtlantic Ocean. In the northeast the Marmara Sea, the Dardanelles, and the Bosporus link it with theBlack Sea and Central Asia. The Suez Canal connects the Mediterranean with the Red Sea in thesoutheast.In this context, in addition of selected Greek and Mediterranean artists, the 4th Thessaloniki Biennaleof Contemporary Art will also include artists coming from other continents, as well as from othergenerations using different languages.In the register of wonder that true art is for every human being, "Everywhere but Now" will be aninteractive, powerful and subtle artistic face-­‐to-­‐face, where the public, in meeting the artists and theirwork, exchanging past and present knowledge and expriences, will rediscover today’s composite (artistic)realities around the Mediterranean, and further more.CURATOR’S NOTE OF INTENTIONAdelina von Fürstenberg


Designing with Bold Type 3Use for emphasis, to highlight important points.Use restraint.Create contrast for headlines and subheadings.There are many ways to create contrast between body copy and headlines. Use font size(larger) with bold type (darker) to set apart headlines from the rest of the text.Break up 'Gray' Areasbold headlines and subheadings also break up large blocks of text. This subheading is the samesize as the body copy but the bold type makes it stand out, look larger. It keeps the blocks of textfrom all running together. Make it bigger and we've got more contrast."Avoid the temptation we used boldface to emphasize words within a passage of text. Bold textis like a magnet to our eyes, and if used incorrectly, ruins the continuity of your text." — TheRules of Typography 4 at the Font siteThe other text we decided to wrote in regular type face for it easy readable and understanding.All text wrote in Verdana font face because it’s one of the more often usable texts on web.Verdana is a humanist sans-serif typeface designed by Matthew Carter for MicrosoftCorporation, with hand-hinting done by Thomas Rickner, then at Monotype. Demand for such atypeface was recognized by Virginia Howlett of Microsoft's typography group. The name"Verdana" is based on a portmanteau of verdant (something green, as in the Seattle area and theEvergreen state, Washington), and Ana (the name of Howlett's eldest daughter) 54. The description of color usedColors are more than a combination of red and blue or yellow and black. They are non-verbalcommunication. Colors have symbolism and color meanings that go beyond ink. As you designbrochures, logos, and Web sites, it is helpful to keep in mind how the eye and the mind perceive certaincolors and the color meanings we associate with each color 6 .We decided to make out logo in purple color because purple is royalty. A mysterious color, purple isassociated with both nobility and spirituality. The opposites of hot red and cool blue combine to createthis intriguing color. Use purple color with the black and white ball colors is good combination becauseblack is conservative, goes well with almost any color except the very dark. It also has conflictingconnotations. It can be serious and conventional. The color black can also be mysterious, sexy, andsophisticated. But white is purity, cleanliness, and innocence. Like black, white goes well with almost anycolor. This color combination goes well with our idea of women spirit power and individuality with theirsexuality and feminity 7.Color of logo explanation:RGB R-149; G-15; B-206CMYK C-58%; M-86%; Y-0%; K-0%Pantone # 950fce3 http://desktoppub.about.com/cs/typestyles/a/bold.htm4 See in appendix “19 rules of topography”.5 http://en.wikipedia.org/wiki/Verdana#Description6 http://desktoppub.about.com/cs/color/a/symbolism.htm7 http://desktoppub.about.com/cs/colorselection/p/purple.htmPage 5


5. The development processMockups 1 are required by designers, architects, and end users to develop a project. The intention is oftento produce a full sized replica, using inexpensive materials in order to verify a design, and in our case wemade a picture before we begun with the coding of the webpage that can be easily modified.When designing a functional webpage, such as this campaign site, mockups can be used to test whetherthey suit typical needs or to check if it works in practice and if we reaching our goals with it. Designs thatfail to consider these issues may not be practical to use. Mockups can also be used to test color, finish,and design.The cost of making mockups is often more than repaid by the savings made by avoiding going intoproduction with a design which needs improvement.At first we started with a mood board that included our main concept only:After this we continued to work on the project, we have made an image about our webpage, and we cancall it a mockup.This helped us a lot to have an overview of our actual page and of course after it was finished we made alot of modifications before we started to make the flash.1 A mockup is called a prototype if it provides at least part of the functionality of a system and enables testing of a design.Page 6


Our image looked like this:Of course when we started to implement the code and begin to build the flash, we needed to make someimprovements, and our final product looks a little bit different:Page 7


6. The Star AnalysisThe purpose of the Star Analysis is to give a 360 degree analytic tour round this meeting.The aim is to understand both participants in the interactive meeting and their visual expectations withregard to giving a reason for why the visual design is formed as it is.7. Explanation of the design.GoalThe main goal of our campaign is of course to attract more women to football.ResourcesIf we want to make something really good and successful we must invest as much money and time in it,but this alone is not enough because now another factor jumps in: Will be the final product profitable andworth the investment?In our case we can’t speak about material investments, but we spent time making it until we wereconvinced that it works in practice.TraditionAs Lise Agerbæk says, the important thing is to be aware of which visual expectations the guests have.The visual expectations often relate to how the branch generally presents itself. One shouldpay close attention to fields beyond the digital media. Expectations can just as easily becreated by shop-interiors, TV programmes, clothes fashion, magazine layouts etc.Targeting a specific group, the design must include some elements that are usually used to attract them. Inour case the target group is women between 15-40 and the goal is to make them more interested infootball.Page 8


You need only to take a look at it and our design speaks for itself, the type of fonts we have used, thecolors, the pictures, the shapes are all widely used in magazines, posters and TV commercials for thistarget group.SituationThere is a research that the most common webpage viewer closes the browser after 7 seconds if he don’tlike the design of the page, there is too much information on the front-page, the page is badly organized,it takes too much time to load or the first impression is not something that he/she expects.With this in our mind we created a page with not too much information on the front-page, not too muchpictures either, making it to load faster and we also used large fonts and images that attracts attention ofusers making them to stay on our page and to navigate with it.Motive/TrendIn our design we followed the common trend used for this target group. We used large fonts for wordsthat are most important, pictures with girls that are trendy and up to date.PurposeThe purpose of a campaign site is to sell something or in our case is to make women interested insomething that is not so interesting for them most of the time. Football is one of these, in some cases it isvery difficult to convince a girl or a woman to watch or play football but when we choose the right way todo it, success will be achieved.8. Substantiation of our design with results from the analysis.In conclusion we have chosen this design because it’s look and message that we want to deliver iscommon in this area and it is widely used for this target group.Our slogan “Football is much more fun than shopping” creates attention for women making part from thistarget group and we included an image in our header which tells the same even if we haven’t read theslogan.9. Design principlesThe principles of design govern the relationships of the elements used and organize the composition as awhole. Successful design incorporates the use of the principles and elements to serve the designer'spurpose and visual goals. There are no rules for their use. The designer's purpose and intent drives thedecisions made to achieve harmony between the elements.HarmonyWe achieved harmony through the sensitive balance of variety and unity. Color harmony may beachieved using complementary or analogous colors. Harmony in design is similarity of components orobjects looking like these belong together. Harmony may be visually pleasing and harmony is when someof the objects like drapes and couches share a common trait. A common trait between objects could be:color(s), shape(s), texture, pattern(s), material, theme, style, size, or functionality.Page 9


ContrastContrast is the occurrence of differing elements, such as color, value, size, etc. It creates interest and pullsthe attention toward the focal point.Variety (alternation)The use of dissimilar elements, which creates interest and uniqueness.Emphasis (dominance or focal point)Emphasis refers to areas of interest that guides the eye into and out of the image through the use ofsequence of various levels of focal points, primary focal point, secondary, tertiary, etc. Emphasishierarchy may give direction and organization to a design, and avoid subconscious confusion tosometimes improve the design's visual appeal and style.10. Appendix19 Rules of Typography(From the book: Digital Color and Type, Rob Carter. Rotovision 2002)Remember, rules must first be understood before they can be broken. Once you have a good foundation ofthese rules, you can freely journey into unconventional terrain.Rule 1: For optimum legibility, choose classical, time-tested typefaces. These typefaces should be drawnand crafted with consistency among characters, and exhibit highly legible proportions. Examples include:Baskerville, Bembo, Bodoni, Caslon, Centaur, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans,Goudy Old Style, Helvetica, News Gothic, Palatino, Perpetua, Sabon, Times New Roman, and Univers.Rule 2: Be mindful not to use too many different typefaces at any one time. The main reason for usingmore than one typeface is to create emphasis or to separate one part of the text from another. When toomany different typefaces are used, the reader is unable to determine what is and what is not important.Rule 3: Avoid combining typefaces that are too similar in appearance. If the reason for combiningtypefaces is to create emphasis, it is important to avoid the ambiguity caused by combining types that aretoo similar in appearance.Rule 4: Text set in all capital letters severely retards reading. Use upper and lower case letter foroptimum readability. Ascender and descanters’ provide the necessary visual cues to make textmore readable. Text set entirely in upper-case letters from monotonous, rectangular shapes.Upper-case letters can successfully be used in display type (headlines; type above 16 points).Rule 5: For text type, use sizes that, according to legibility studies, prove most readable. These sizesgenerally range from 8 to 12 points for text that is read from an average distance of 12 to 14 inches. Besure to remember that sizes (based on the x-height of letters) appear different from one typeface toanother.Rule 6: Avoid using too many different type sizes and weights at the same time. Some expertsrecommend using no more than two sizes, one for display titles and one for text type.Page 10


Rule 7: Use text types of book weight. Avoid typefaces appearing too heavy or too light. Text typefacesthat are too light cannot easily be distinguished from their backgrounds. In typefaces that are too heavy,counter forms diminish in size, making them less legible.Rule 8: Use typefaces of medium width. Avoid typefaces that appear extremely wide or narrow inwidth. Rather than distorting text by stretching or squeezing the text width, use type families that includecondensed and extended faces that fall within accepted proportional norms.Rule 9: For text type, use consistent letter and word spacing to produce an even, uninterrupted texture.Letters should flow gracefully and naturally into words, and words into lines. This means that wordspacing should increase proportionally as letter spacing increases.Rule 10: Use appropriate line lengths. Lines that are too short or too long disrupt the reading process. Asthe eye travels along overly long lines, negotiating the next line becomes difficult. Reading overly shortlines creates choppy eye movements that tire and annoy the reader. When working with text type, amaximum of about 70 charters (10 to 12 words) per line is thought to be most acceptable.Rule 11: For text type, use line spacing that easily carries the eye from one line to the next. Lines of typewith too little space between them slow the reading process; the eye is forced to take in several lines atone. By adding one to four points of space between lines of type (depending on the specific typeface),readability can be improved.Rule 12: For optimum readability, use a flush left, ragged right type alignment. Although in specialsituations, other type alignments (flush right, ragged left; centered, and justified) are acceptable, thetradeoff is always a loss, however slight, in readability.Rule 13: Strive for consistent, rhythmic rags. The purpose of effective rags is not only to achieveaesthetic beauty, but to enable readers to move gently and effortlessly down a text column. Effective ragsconsist of lines establishing an informal but consistent pattern of line endings.Rule 14: Clearly indicate paragraphs, but be careful not to upset the integrity and visual consistency ofthe text. The two most common ways of indicating paragraphs are by indenting and inserting additionalspace between paragraphs.Rule 15: Avoid widows and orphans whenever possible. A widow is a word or very short line at eitherthe beginning or end of a paragraph. An orphan is a single syllable at the end of a paragraph.Rule 16: Emphasize elements within the text with discretion and without disturbing the flow of reading.You can use italics, underlined type, color type, different typeface, small capitals, capitals, bold typewithin light type, light type within bold type, larger type, and outline type to emphasize elements butnever overdo it. Use minimum means for maximum results.Rule 17: Always maintain the integrity of type. Avoid arbitrarily stretching letters. Welldesigned typefaces exhibit visual qualities that make them readable. Arbitrarily distorting themcompromises their integrity.Rule 18: Always align letters and words on the baseline. Letters are designed to coexist side-bysideon an invisible baseline. “English is not Chinese!”Rule 19: When working with type and color, ensure that sufficient contrast exists between type and itsbackground. Too little contrast in hue, value or saturation, or a combination of these factors, can result intype that is difficult, if not impossible, to read. Be careful when using photos or texture behind text.Page 11


Description of the mobile applicationThe assignment was to create an application for Nokia 5800 Expressmusic, which is a veryadvanced device. We choose to use Action Script 2 even if the device supports Action Script 3.If in the future we want to make for other phones than with Action Script 2 we have a widerrange to pick and at the beginning of the development we found while researching, that for ourapplication it is enough Action Script 2.The Nokia 5800’s screen has the resolution of 360 pixels width and 640 pixels height wemake the application on this size, so it is running on fullscreen mode. The device has 2orientations horizontal and vertical; our application is oriented for horizontal use. It is anotheraspect of the phone that we needed to care about it, that the application size can reach more than1 MB, because the device has 1MB memory limit for Adobe Flash files.In the development of the application we used the waterfall method. The waterfall method isa sequential software development process, in which progress is seen as flowing steadilydownwards, like a waterfall, through the phases of Conception, Initiation, Analysis, Design,Construction, Testing and Maintenance.At the beginning we sit together and find the idea. After we got a good idea we made a list ofrequirement and made the design. We put the design in flash and we added some scripts tomaking dynamic. After the program was done we verified the code and tested the application ona Nokia 5800 mobile phone because can be difference between the Adobe Device Center and thereal device.Action Script 2 codes:fscommand2("FullScreen", "true");fscommand2("SetSoftKeys", "Left", "Right");var SoftKeysListener = new Object();SoftKeysListener.onKeyDown = function() {};if (Key.getCode() == ExtendedKey.SOFT1) {gotoAndPlay('menu1');} else if (Key.getCode() == ExtendedKey.SOFT2) {}fscommand("quit");Key.addListener(SoftKeysListener);Page 12


This Action Script 2 code it is special write for mobile applications. It is using function thatis only available on mobile devices. The first line is telling to the device that we want to run theapplication in full screen mode. The second line is telling to the device that we want to use 2 softkeys the left and the right. If a soft key is used the SoftKeysListener will receive the event. Witha simple select command the application will quit if the right soft key is presses or if the left softkey is pressed than the main Movie Clip will go to label “menu1” on the main timeline.Page 13

More magazines by this user
Similar magazines