Multimedia Bank

IT3291 Final Year Project Period 2

1

Final Year Project Report

Prepared for:

Ms Christia Chua (Lecturer) School of Information Technology

Nanyang Polytechnic

Prepared by:

Multimedia Banks TeamEvonnie Lim (072991Q)

Fion Seah (071543K)

Huang QiLin (066265R)

Date of Submission:

14 August 2009

2

Acknowledgements

Miss Christia Chua

We would like to thank Miss Chua for her vital encouragement and support. Her close guidance and constant reminders throughout FYP period has been a great help to us.

Miss See Hui Fen

We would like to thank Miss See for being so patient to explain and clear our doubts whenever we encounter problems through the completion of Q Survey Web Portal.

Miss Anthea Kwa

We would like to thank Miss Kwa for giving us professional advices which brought up the standard of Q Survey Web Portal.

Miss Yarny Chang

We would like to thank Miss Yarny for her positive feedback. With her encouragement, we manage to gain more confident in doing our job.

FYP Students

We would like to thank those that have been very co-operative through the working experiences.

3

Table of Contents

Sections

1.0 Project Overview Page 5

2.0 Problem Statement Page 6

3.0 Project Implementation Page 7

4.0 Conclusion Page 9

5.0 Recommendations Page 10

6.0 Appendix

6.1 Evonnie’s Research Page11

6.2 Fion’s Research Page20

6.3 QiLin’s Research Page26

6.4 Q Survey Page35

6.5 Napfa Portal Page47

6.6 CITI Application Page50

7.0 References Page 52

4

1.0 Project Overview

The Multimedia Bank team consists of different batches of Final Year Project (FYP) students, usually formed in groups of two or three. Accumulated from several years ago, contribution from students such as Graphic Designs, logos, Interfaces, Animations and Templates have been consolidated to form a Multimedia Library currently known as Multimedia Bank (MB). These media files are sorted according to the different categories for easy access. In addition, the files are also password protected to prevent unauthorized personnel from misusing them.

Like every other multimedia team, our team receives job requests from both students and lecturers during the entire FYP period, most commonly to come up with a new Graphical User Interface (GUI) for a particular application.

5

2.0 Problem Statement

The objective of this project is basically to focus on the design aspect of the various applications. Our goal is to create reusable designs, templates or media files to cater to the different needs of the FYP students. Creating new and improvise existing Graphical User Interfaces (GUI) for all our clients is also part of our job. We also had to research on a specific design topic individually. The detailed document is attached as Appendix 1, 2 and 3 respectively

Searching for suitable media files can be quite a hassle, using ready templates can also show the lack of originality.

Creating tutorials such as to educate users how to create templates, web 2.0 buttons and how to slice images using Photoshop promotes originality. Moreover, only by creating a new media file then will the user be able to portray the exact design he has in mind.

We received several job requests this round and they include Q Survey, CITI Application, and Napfa Portal.

Q Survey

This particular job request involves designing a brand new logo, a HTML template using an external Cascading Style Sheet (CSS). The end product must be able to display nicely in Internet Explorer browser 6 onwards, Mozilla Firefox, Apple Safari and Google Chrome.

CITI Application

CITI Application is actually a continuation of the previous batch’s work. The job scope covers animating the twelve icons and debug existing errors within the Action Script. In Addition, specific changes were made to beautify the entire flash application. The final product displays an aesthetically inclined, bug free application.

Napfa Portal

Similar to Q Survey, we had to revamp the entire web layout to bring in the web 2.0 feel as requested. New banners and navigation bars were introduced, design theme was also modified.

6

3.0 Project Implementation

3.1 Project Schedules

Listed below is the general overview of how tasks were allocated over the twelve weeks.

Week Description

1

Learning more about multimedia banksLooking through previous batches' workBrainstorming about individual topics (Photography and Colours) : OngoingQ survey assignment (Meeting and discussion)

2 Q survey assignment (Themes, logos, other enhancements and etc)Exploring AES 2.0 (Project management for Multimedia Banks)

3 Q survey assignment (Improve on designs and logos)4 Q survey assignment (Enhancing + Refining of Q Survey site)

Q survey assignment (Finalizing designs and waiting for approval)Research on individual topics: Ongoing

5 Research on individual topics : OngoingQ Survey assignment (Slicing + HTML + External CSS)

6 Research on individual topics : Ongoing Q Survey assignment (Slicing + HTML + External CSS)Mid-term presentation preparation (rehearse and dry-run)

7 Mid-term presentation preparation (improve on slides and flow) Q Survey assignment (Slicing + HTML + External CSS)Research on individual topics : OngoingMid-term presentation

8 Q Survey assignment (Slicing + HTML + External CSS)Q Survey assignment (Making minor changes to size + Refining)

9 Napfa Portal assignment (Themes, logos, other enhancements and etc)Q Survey assignment (Making minor changes to size + Refining)Q Survey Design (Adjusting to fit browser)

10 Napfa Portal assignment Citi logo animationNDP e–Greeting Card

11 Final presentation preparation (Documentations)Create Photoshop/ Dreamweaver/ Illustrator Tutorials

12 Final presentation

Detailed schedule of each individual can be found on the listed links.

Evonnie’s Schedule

Fion’s Schedule

QiLin’s Schedue

7

3.2 Project Designs

Whenever a job request is received, we would first start brainstorming and come up with different designs individually and will be proposed to the client. Thereafter, only the most appropriate design will be further processed.

Basically the designs we had to brainstorm for were mainly Q Survey logo, Q Survey web layout, Napfa Portal web layout, CITI application and National Day greeting card.

Sketches and illustrations of the above mentioned are attached on Appendixes 4, 5 and 6.

3.3 Key Problems

Throughout the Project Implementation, we had certain difficulties in carrying out some of the tasks. Some were general issues while the rest were technical.

Designing an appropriate web layout was no easy task. We had to come up with numerous designs and yet, they were still rejected. In order to resolve this issue, we had to communicate with our client to get a better understanding of what they want, or perhaps get examples from them.

For four weeks, two of three group members were in Suzhou doing FYP. We used SKYPE and MSN Messenger to communicate and transfer files. One of the issues was that we had different working hours in both Singapore and Suzhou. The frequent change of requests, usually made towards the end of the day cannot be processed immediately and thus, leading to the extension of due dates.

Initially, the plan was to start working on a finalized design and convert it into HTML format. However, minor changes had to be made very frequently which actually slowed down the entire completion. We had to repeatedly slice the images and replace them into certain portions of the layout.

Some of the technical issues include familiarizing with the Adobe CS3 program (Photoshop, Illustrator, Dreamweaver, Premiere Pro); some of us started from scratch while some had a little more exposure.

Due to lack of experience, we faced a major issue when it came to handling screen resolutions. The client wanted a web layout that fits the browser when maximized, such that the bottom scroll bar is not needed. The fact that different browsers have different settings raised the level of difficulty, the tables run very easily in various browsers.

Fortunately, after several attempts and much research, the issue was finally resolved.

8

4.0 Conclusion

From this project experience, we got a feel of what it is like to be working in the design industry and it actually broadens our knowledge of how to handle different situations in times of need. We learnt that sometimes it is not just about receiving request; negotiation is also very crucial. This project enables us to pick up new skills which are beneficial to all three of us.

For Evonnie and Fion, designing was something new, we are trained to do programming. In the past projects, the focus was always on the programming aspect; design was merely bonus, sometimes even optional. Designing became quite a challenge for us, we had to do research and ask around when we got stuck. In future projects, it would definitely be much easier for us to grab the bonus point.

As for QiLin, he came from School of Interactive and Digital Media and he is trained to do media design. Managing this team and clients became quite a challenge for him , this time round there are more than one clients that approached us for design solutions towards existing web/flash applications and fortunately for Multimedia Banks, the school have requested a media design student from SIDM to join the team for design guidance, knowledge so that we could produce better designs than clients requested and we’re able to get our workflow much easier.

We would like to take this opportunity to extend our heartfelt gratitude to the lecturers for letting us gain more exposure in so many different aspects.

9

5.0 Appendix

10

5.1 Photography and ColorsTypes of photography (done by Evonnie)

Black and White

Black and white photography explores shapes, tones and textures. Shadows and highlights become much more important.

Monochrome is more than the absence of color. Black-and-white photos have a style of their own, usually quite dramatic. A good black-and-white photographer knows how to use this format to maximize the impact of shapes, textures and tones.

Tips:

Although some cameras have a black-and-white function, it's best to shoot in color and convert to monochrome using photo editing software. This gives you more control over the image as you can use information from any or all the color channels.

Use RAW format and work in 16-bit mode or higher. This provides maximum flexibility and makes adjustments less prone to artefacts.

Shoot with a low ISO. Noise created by ISO is more obvious in monochrome than color.

When composing shots, learn to ignore color and see the picture without it. However it is worth experimenting with photographing colors and converting them to monochrome. You will find that certain colors, especially high-contrast colors, do have different effects in black-and-white.

Concentrate on tones (shadows, highlights) as well as shapes and textures. Textures are particularly important and can add a lot of impact.

You may find low-contrast lighting conditions to be favourable for monochrome photography. If you normally shoot in color but don't like the light on a particular day, take the opportunity to try black-and-white.

Macro

The art of photographing very small and/or close-up objects. This type of photography aims to have the object in the image to be life size, which means a 1:1 magnification ratio. To achieve this effect small objects are usually used, such as insects. It can be so clear that you could see individual hairs on its legs, or a flower petal with drops of dew that looked like oversized rain drops. Although at times “macro photography” and “close-up photography” are used interchangeably, purists

11

make a distinction: close-up photography refers to photos taken in the range of 1:10 (image is one-tenth life size) to 1:1 (life size). Macro photography refers to images captured at life-size and larger.

Tips:

In this type of photography you try to get as close to the image as you can or use close up or macro or micro lenses. You can also use a tele-converter, extension tube, bellows attachment, smaller film or reverse lens to get the type of photos you need in this style of photography. You can also take the photo farther away and then enlarge the image.

It is sometimes tricky to focus in macro photography, as the closer you get the less depth of field you usually have. Lighting can also be tricky and handheld flash units often help. It may take you a while to get used to using apertures and lenses in macro photography, so it's a good idea to research the topic beforehand. Most digital cameras have a macro or close-up mode on them.

Macro photography requires positioning the lens very close to the subject, but the larger the image becomes on the film, the lower the light level falls and the more shallow the depth of field becomes. Reduced DOF necessitates focus on just one element of the subject, since areas even one millimeter closer or further from the point of focus can be noticeably blurry. Very small apertures are needed to remedy the shallower depth of field, which lowers the light level on the film even more. For this reason, normal hand-held exposures are not effective. For best results, a dedicated single or twin flash is used, along with a camera that offers aperture priority mode, although some macro photographers simply use reflected artificial light sources.

A tripod is a must for steadiness due to the magnification of camera shake with macro photography. Some camera makers are now using anti-shake sensors to ameliorate the effects of the magnification.

Macro photographers also make use of extension tubes and telephoto extenders, with no optical components, that simply increase the distance between the film and the lens, enabling greater magnification; but because the distance between the light source and the film also increases, longer exposure times are necessary.

Reversing a lens is a relatively inexpensive way to achieve greater magnification. A lens with less focal distance can be reversed and placed in front of the normal or macro lens using a low-cost macro coupler or a special adapter known as a reversing ring.

Some pros make use of a versatile accessory called a macro bellows for ultra close-ups, although they are cumbersome, difficult to work with, and expensive and consequently have not gained great favor among photographers.

12

Nature

Nature photography refers to a particular form of photography with a stronger emphasis on the aesthetical value of the photo, taken outdoors and devoted to displaying natural elements such as landscapes, plants and wildlife scenes such as photojournalism and documentary photography.

Tips:

Whatever scene you’re shooting, always look carefully at what you’re framing before you decide you’ve got the perfect shot. Position the camera at various angles to see if you can get a more interesting perspective on a scene. For example, while you may think that a long stretch of sand with the sun sinking on the horizon in the distance would make a great nature photo, by focusing on the texture of the beach and filling the frame with this detail, you can produce a much more interesting image.

Don’t always think big when photographing nature; there’s just as much beauty in the smaller aspects of it. For instance, while a bunch of flowers may make for a great colorful photograph, focusing in on one single flower or a tiny detail can produce a stunning image. Be prepared to get down on your knees, or even flat on your stomach, in order to get the best shots. When seen from an unusual perspective, something as simple and everyday as a section of a field can look dramatic: offer the viewer a perspective on an image of nature that they would rarely see.

If you have the opportunity to photograph nature scenes at different times of the day, always consider whether you could improve on your image if you photographed it at a different hour. The overall tone of your photograph could be changed significantly just by shooting at a later time in the day, for instance. Think about what you want to convey through your photograph and then arrange your shoot accordingly.

Sports

The specialized art of shooting people engaged in sports, games and adventure activities.

Tips:

When you are photographing sports you should try to get some good action shots, but you should also remember the thrill of victory and the agony of defeat. Some of the greatest sports photos ever taken are non-action shots.

Knowing when to take the shot in sports is just as important as the equipment. If you want action shots, set your camera up in a good spot where you know there will be plenty of it. If you do get a good spot and you can use a tripod, go for it since it will cut down on camera shake and vibration. If you can't get close enough you should use a zoom lens to compensate. Make sure you have the scene in focus and experiment with action-freezing shots and slower shutter photos that will give a blurred background, which shows you the speed of your subject.

13

Make sure you have adequate equipment and lighting. Long, fast lenses are good for sports and you should use high speed film in darker conditions. Fast shutter speeds will help you freeze the action and panning can show you speed. Continuous shooting modes may also help you get quality action photos.

This is a reflex that is learned through practice. You must know enough about the sports to be able to determine when the peak action will occur. For instance, during a basketball jump-shot, the peak action occurs at the top of the jump; in football it can occur when a player dives for a shot; in golf, when the ball is struck. Knowing this information instinctively is what makes a sports photographer great.

The best advice for any would-be sports photographer is to keep your eye on the ball. That is where the action occurs. For instance, in baseball, the peak action occurs when a ball is hit, thrown, or caught. This is where your attention should be focused.

Another tip for capturing the peak action is to pre-focus your camera for action shots. At a baseball game you might pre-focus on home plate; in basketball, the rim; and in hockey, the goal. By pre-focusing you will give yourself a better chance at capturing a great shot. Professional photographers will carry an extra camera that they can pre-focus for situations like this. This type of specific focus is called zone focusing.

Practice make perfect in sports photography. You cannot rely on just luck, but must practice in order to train your reflexes to react in an instant.

Travel

Photography to showcase locations, illustrate travel literature, etc. Travel photography comes as natural as breathing to many holiday goers, as they never leave home without a camera. You can take all types of photos while traveling. There are photo journals which document your trip from start to finish. You can shoot famous landmarks; buildings, scenery and people and you can also take shots while doing the actual traveling by photographing from a car, train, bus, plane or ship. Most people take travel photos for the memories, but they can be much more than that.

Tips:

The beauty of travel photography is that you can incorporate many other styles into it such as aerial, underwater, sports, landscape and portrait photography, etc. You may get better and more interesting photos if you know something about your destination and its people. You should also be aware of unsafe areas.

14

Try to add life and variety to your photos and use your imagination and creativity. The world is yours in travel photography as it gives you a chance to experiment with various techniques, lenses, filters etc.

Famous sights are more interesting when viewed from unusual angles than they are when seen from the standard viewpoint.

Time-lapse

Time lapse photography occurs when you set your camera to take photographs at certain time intervals. The camera will take a series of images every 10 minutes, every hour or whatever interval you set it at. If you play the images back at a faster rate of speed it will create an illusion of time passing quickly. This type of photography is often used on television to show a building being constructed or traffic situations etc. It is also ideal for sunsets, cloud movement and other nature shots.

Tips:

Time lapse photography can be accomplished with film cameras, but it's easier to do with digital photography. A lot of digital cameras are available with software, which can control the camera enabling you to set a time interval for your photos. When you have them you can organized the images into a movie file. You can also make time lapse movies by removing frames from an ordinary video camera. However, still digital cameras can give you higher resolution images for high definition movies.

RAW VS JPG

JPG Basics

JPGs (same as JPEGs) are normal digital camera images. Cameras create JPG images from raw image sensor data based on your settings like Sharpness and White Balance. The camera makes the JPG and then the raw data evaporates as soon as the JPG is recorded.

Raw Basics

Raw files are just the raw sensor data. It isn't a picture until it is processed further. Most fancy digital cameras allow you to save the raw data instead of the actual JPG picture. If you do, you still have to do the processing in your computer to make an image (JPG or otherwise) that you actually can see. Cameras do this processing in hardware much faster than your computer can do it in software.

15

Which is more preferred?

If you love to tweak your images one-by one and shoot less than about a hundred shots at a time than raw could be for you. In fact, if you prefer the look you can get from raw (it may be different from JPG in some cases depending on software) you can let your computer batch process images and save the results as JPGs, too. Differences can be seen if we were to blow things up to 100% or bigger on my computer, but not in prints.)

One's preference for JPG or raw depends on what you're trying to do. Each format has no absolute goodness; it's all in how appropriate they are to your particular work at hand. Everyone's needs vary.

More about photography

Some photography guides

Clarity

Whatever your subject, make sure that it’s clear. Some images leave the viewer wondering why the photographer bothered with the shot as it’s unclear as to what has actually been photographed. The reason for your photograph should be obvious and need no explanation. When photographing your image, focus on what makes it special to you and eliminate anything else.

Angle

When photographing a location that’s frequently photographed, try to shoot it from an angle that will make your image unique. Walk around the subject to see if photographing it from a different height or distance would help make the image more interesting. If the size of your subject is less than half the size of your viewfinder, try placing your subject to the side and including something else of interest: a brooding looking sky can add drama to an image, as well as help bring about a sense of balance to the scene.

Simplicity

Don’t overlook smaller, everyday objects. They can sometimes look striking when set against the right background. Look at contrasts when taking a photograph of a very simple object. For example, horizontal lines next to vertical lines can help emphasis the subject of your shot, as can the colors in the image.

Color

16

Color can determine mood in images, and should be used to enhance your subject or set the overall atmosphere of your photograph. Chunky blocks of bright colors such as red and orange can give a feeling of warmth and power, while soft, muted tones can create a peaceful and restful feeling.

Light

Every photographer knows the importance of light. While today’s photographic technology helps the photographer avoid making mistakes where light’s concerned, there are still some pointers that should be remembered. Light is brightest when the sun is directly overhead, and at this time light colors will appear very bright while shadows will look very dark. For some cameras this contract is too much to handle and the result is dark and light patches with little detail. Wait until the sun is lower in the sky and the light less harsh.

Also remember that your subject will cast short, vertical shadows when the sun is directly overhead, which may spoil your photograph. Big structures and scenes with large expanses of color are best shot with the sun behind you. Photographing with the light coming in from the side creates shadows which can enhance textures in your shot. When photographing in the light, see how it falls on your subject. Move around until you find the best angle from which to shoot.

People

Photographs of people you meet on your travels can produce stirring images. In order to capture the essence of the people you meet, always try to see them as people first and photographic subjects second. Knowing a little bit about the culture of the people you’re photographing can help you photograph them in such a way that your photos do what all good travel photography aims to do -- tell a story.

When photographing people, eliminate any objects behind your subjects that may look to be protruding from their bodies. Decide if you’re going to include the entire person in your photograph or just a part of them. Photographing your subject while they are engaged in something that’s indigenous to their country or culture could make for a very special photograph. Always ask permission to photograph your subject: knowing a little of the language if travelling in a foreign country can help (although a friendly attitude, a smile, and a nod to your camera are sometimes all that’s needed).

Effects of photograph in different angles

Due to the fact that we are accustomed to see the world from two viewpoints: when standing or walking and when sitting down. Thus, it’s a pity if we take pictures from the same positions. Getting down on one’s knees may dramatically change the perspective.

When photographing animals or children, the resulting photos tend to look more “natural” and in landscape photography, it is often possible to include details that

17

give you a dramatic” foreground, such as stones or an old tree stump. This works best with an extreme wide-angle lens (24 mm and below) that allows you to get very close to an object while including a huge background.

On the other hand, when photographing buildings, we often get much better pictures when we find a higher place to shoot from. Simply standing on the ground and inclining our head (and the camera) we will get the dreaded “falling lines” - unless we own a special so-called “shift lens that can correct this.

When neither solution works, often the best option is to use the falling lines as an artistic element which means pronouncing the effect even more by using a wide-angle - and getting down on our knees again.

By the way: it is interesting that we do not tend to realise this without a camera! Our brain corrects the images received from the eyes t a certain degree, but this doesn’t work with a two-dimensional photograph.

This also explains why “breathtaking” views from above may look “flat” and uninspiring as a photo.

Effects of colors in photograph

Color Wheel

When shooting in a controlled environment like a studio we have much better control than when we shoot outside. Taking formal portraits of people (even outside) is also much easier to control than nature photography or street photography.

The color wheel can help you understand the colors in your composition better. The color wheel can be very basic (like the illustration with this article) or be very complex and show minute shading differences for millions of colors. The color wheel shows the relationship of each color to other colors. Colors next to each other are complimentary while colors across from each other are opposite colors. Colors that are at an angle to one another are often the most clashing colors. For example, purple and green do not go together well at all. Orange and green also fight against each other. The stronger the color is, the more strongly the clashing effect will be felt. For example, a deep purple will clash with a deep green more strongly than a pale green and pale purple will clash.

Color Photography or Black and White?

While lighting is important for color photography, it is even more important for black and white or sepia photography. While this fact seems counterintuitive, the lack of color means that the key feature of black and white photography is the contrast between light and shadow.The basic rules of light in photography apply to black and white photos just as they do to color photography. For example, direct light creates a higher contrast than

18

diffuse light. Because the contrast between light and shadow is much more obvious in black and white than in color photography, the photographer should opt for direct light when composing the shot.

Reference from:

http://www.mediacollege.com/photography/http://www.shotaddict.com/wordpress/2006/10/18/1382.htmlhttp://www.dpdigest.com/types-photography/http://www.ideacosmo.com/photography/fotogh-type.htmlhttp://www.clubsnap.com/forums/http://www.travelphoto.net/photos/english/photo-tips/html/different_angles.htmlhttp://photography.about.com/od/takingpictures/tp/colorinphotography.htm

Listed are the links of all the pictures

Photograph taken by meEditted Photographs Research Photographs

19

5.2 Techniques to Compose Work Using Repeating Shapes and Flexible Patterns (Fion)

What type of scope I want to research on?

How shapes formed into patterns and how patterns are formed.

What are the differences between shapes and patterns?

A pattern is a type of theme of recurring events of or objects, sometimes referred to as elements of a set. These elements repeat in a predictable manner. A Shape is a type of object that is formed by the space occupied by the object as well as determined by its external boundary.

How are patterns formed?

Patterns are formed using repeating shapes, or a variety conjuration of various shapes.

How are shapes formed into patterns?

Patterns are constructed by allowing repeating shapes to be form up together. Shapes that repeat in a symmetrical fashion, the most basic patterns are based on repetition and periodicity. For example, simple shapes such as square, rectangle and star produce repeated patterns of movement when joined together in a sequence. There are many interesting ways and techniques to manipulate the construction of shapes into patterns.

20

The first interesting technique and way is to use these repeating shapes. One such way is to cut into a photo, text, or design element. Then reposition those cut pieces throughout the illustration. In the artwork below the artist uses small rectangles, slanted at 45 degree angles, to cut into the text in the design. The elements are then repositioned to form an interesting digital composition as shown below.

The shapes in the image below don't actually cut the photo. The use of white and red triangles confuses the foreground and background as the shapes cross over the model in the photo. The visual effect appears to remove parts of the photo image, and the elements are effectively mixed.

21

The second technique is to break apart an image across the seam of a pattern. In this technique, the central design element is given a pattern, a repeating shape that forms the central image. There is a seam formed where each shape intersects. Then the artist breaks apart this pattern across the seam. The effect can be powerful and cool.

In the image below, Adobe has created a castle design by using the repeating shape of playing cards. The illustration purposefully unravels in parts of the image by pulling out some of the cards. It gives it a feeling of a house of toppling cards.

22

The third technique is to build an image through repeating shapes. A way to construct this image is with a pattern. Use repeating shapes to form the image itself. There is a wide range of shapes and patterns that could be used to construct an image. In the image below, repetitious floral and bird shapes are used to compose the image. It's constructed from a decorative pattern.

Another great classic art technique would be Stippling. Through Stippling you can emulate this style with multiple circles in Photoshop or other software. The image below uses multiple repeating circles and some lines to compose the image. The circles are large enough that they become a recognizable pattern used to build this image.

23

The fourth technique would be to use repeating design element. The pattern below repeats images of cards, dice, and chips. There is a vast amount of flexibility in this pattern. Each shape is scaled in size throughout the pattern. The color of these repeating elements varies. Interestingly, three-dimensional rotation of each object changes throughout the design as it repeats. The design takes on an organic collage feel. The biggest dice elements form the focal point in the image. A loosely structured pattern is formed in this design.

The final technique is to mix up more than one of any of the above techniques that we mention there. The image below shows the using of both subtractive and additive use of shapes to compose the image. They use repeating shapes to cut into or break apart an image. They also use similar shapes to build up and construct the image. This occurs simultaneously. Notice how the repeating circle shapes replace areas of the photo. Most of the original image is reconstructed with the circular shapes. The shapes build up the image and overflow outside the boundaries of the original model. They also blend into the background. This is an excellent use of a repeating shape to compose an image. Using circles of different sizes and colors, it forms the part of the collection, possibly a collection of souls, knowledge, or something else. The artist leaves it for us to interpret.

24

To summaries, patterns are made of repeating shapes. You can construct rigid patterns that repeat in a symmetrical fashion. Another option is to create more organic, flexible patterns. Shapes repeat, but there isn't a uniform sequence to the pattern.

25

5.3 Modern Vintage (QiLin)

What type of vintage style I want to research on?(More specific description as ‘Vintage’ is very generic.)

Collage style, torn paper, scrolls and worn-out photo effect.

What are the common elements of vintage style?

Flora, Patterns, Wood, b/w or worn-out photos, aged feel, uses direct representation symbol of a thing, looks elegant, paints and bold typeface.

What’s the Classic Vintage Style?

It uses Behang repeated patterns as the fabrics for the furniture and crafted designs of flora, symbols and some patterns to bring out the elegance and beauty of Classic Vintage Designs.

As for the posters, usually the artwork was painted or drawn out by the artists.

How to define modern vintage style?

Integrating modern designs in it while preserving the original vintage look.

What are the constraints in using such design?

Examples:-

1) What kind of media and content type can be presented in such style?2) Can I use this design style for online banking websites?

Classic Vintage style can be presented in moving images, prints, audio and the internet. Apparently, it can be used in all kinds of media and simple and modern contents can be presented in such style.

Unfortunately, such design style is inappropriate for corporate and transaction involved websites.

26

What kind of ‘feel’ and ‘message’ you want to bring across?

(The scope would also affect what I want to design later on as reusable contents and templates.)

Explore ‘Vintage’ design style on Web Design, Poster Design & Photography.

Vintage Style used in photos makes it more unique.

Colours and composition of vintage photography would be different from contemporary style.

Make vintage style understandable and the concepts reusable for others to apply in their web design or poster or system UI design, the design elements contributing to a 'vintage style' have to be identified

27

Different color combination types in vintage style

28

Colors used are usually bright tone colors and brown.

Patterns and design used in vintage style

29

30

Elements used in the textures are usually combination of different flora designs placed together like a shape and made into a pattern.

31

Examples of Modern Vintage in interior design

32

Observed how textures and objects are combined in Modern Vintage.

Giving the overall an elegance look and comfortable feel.

At the same time, it brings up the value of the product.

33

Examples of Modern Vintage in apparel design

34

5.4 Q Survey Refinement

35

Introduced the blog style but it was being reject as this is inappropriate for a survey site which they want something that is suitable.

36

37

38

39

Introduced a new navigation method but clients find it too fanciful and unappropriate.

40

41

42

43

44

45

46

47

5.5 Napfa Portal Refinements

Old Napfa Portal

48

New Napfa Portal

49

50

5.6 Citi Application Revamp

New CITI Design

51

Storyboarding of animation

52

6.0 References

Listed are the Websites and Books we took reference from during the FYP period.

Books

Colorists Web Design: Flash Sites by Ed. Julius Wiedemann

Websites

http://www.mediacollege.com/photography/ http://www.shotaddict.com/wordpress/2006/10/18/1382.html http://www.dpdigest.com/types-photography/ http://www.ideacosmo.com/photography/fotogh-type.html http://www.clubsnap.com/forums/ http://www.travelphoto.net/photos/english/photo-tips/html/different_angles.html

53