CONCEPTUAL SCREEN DESIGN

FINAL DESIGN

1. CANCER AWARENESS

2. ANIMAL EXTINCTION

1st 

2nd

TOPIC 2

Brainstorming

Topic : ANIMAL EXTINCTION

Target Audience : Public (no age limit)

Gender : Men and Women

Purpose : To make the public know what animals are close to extinction
Theme :  Save Them!

Research & Fact Finding

Extinction is the end of an organism or of a group of organisms (taxon), normally a species.
The moment of extinction is generally considered to be the death of the last individual of the species, although the capacity to breed and recover may have been lost before this point. Because a species' potential range may be very large, determining this moment is difficult, and is usually done retrospectively.
Through evolution, new species arise through the process of speciation  where new varieties of organisms arise and thrive when they are able to find and exploit an ecological niche and species become extinct when they are no longer able to survive in changing conditions or against superior competition.
The relationship between animals and their ecological niches has been firmly established.
A typical species becomes extinct within 10 million years of its first appearance, although some species, called living fossils, survive virtually unchanged for hundreds of years. Most extinctions have occurred naturally, prior to Homo Sapiens walking on earth, it is estimated that 99.9% of all species have ever existed are now extinct.

A species becomes extinct when the last existing member dies. Extinction therefore becomes a certainty when there are no surviving individuals that are able to reproduce and create a new generation. A species may become functionally extinct when only a handful of individuals survive, which cannot reproduce due to poor health, age , sparse distribution over a large range, a lack of individuals of both sexes or other reasons.

Causes of extinction :
Genetics & Demographic Phenomena
Genetic Pollution
Habitat Degradation
Predation, Competition and Disease
Coextinction
Climate change


http://en.wikipedia.org/wiki/Extinction


10 Species of Animals that are close to Extinction :

1. Jaran Rhinoceros

2. Vaquita

3. Cross River Gorilla

4. Sumatran Tiger

5. Golden-Headed Langur

6. Black-Footed Ferret

7. Borneo Pygmy Elephant

8. Giant Panda

9. Polar bear

10. Mekong Giant Catfish

http://www.time.com/time/photogallery/0,29307,1888702,00.html

Precedent Studies

http://www.britannica.es/html/products-apps.html

http://www.animalerspecialty.com/

http://www.loveinfographics.com/categories/animals-infographics/tiger-extinction-facts-statistics-infographic

http://beyondweather.ehe.osu.edu/issue/we-depend-on-earths-climate/teaching-about-adaptations-and-environments-with-arkive

http://savingspecies.org/2012/5-awesome-biodiversity-infographics/

Ideation Process 

Mind Map :

Sketches :

Sketch 1

Sketch 2

Sketch 3

Chosen Design :

(Sketch 3)

My Design from sketch 2 shows that there are some circles. Those circles represent the images of the animals that are almost extinct. 

The title for my Animal Extinction screen design will be "Almost Gone."

Concept :

My Screen Design for Animal Extinction will be a design that is made to make the public know about what types of animals that are almost extinct or gone from our earth. My screen design will be showing a few types of animals around the world and some of their information.

Screen Design Process:
(Animal Extinction)

For my Screen Design, I decided to only explain about 6 types of animals that are close to extinction :

1. Jaran Rhinoceros

2. Cross River Gorilla

3. Sumatran Tiger

4. Borneo Pygmy Elephant

5. Giant Panda

6. Polar Bear

Process :

I used Adobe Illustrator to create my screen design.

I used the text tool to create a simple title for my screen design. 

The Pen Tool is used to create the vectors of the animals.

6 nearly extinct vectors of animals are created using the Pen Tool.

Final Work :

The title of my conceptual screen design is "Almost Gone". 

I used the vector of the animals that are nearly extinct to represent themselves.

For my Conceptual Screen Design, when you click on the animal, information about the extinction of that animal will appear.

2nd design :

TOPIC 1 

Brainstorming

Topic : CANCER AWARENESS
Target Audience : Public , Cancer Surviving Patient (no age limit)

Gender : Men and Women
Purpose : Public awareness and to give hope to others.
Theme :  "I Survived"

Research & Fact Finding

Cancer is the uncontrolled growth of abnormal cells in the body. Cancerous cells are also malignant cells. Cancer grows out of normal cells in the body. Normal cells multiply when the body needs them and dies when the body doesn't need them. Cancer appears to occur when the growth of cells in the body is out of control and cells divide too quickly. It can also occur when cells forget how to die. There are different kinds of cancer. Cancer can develop in almost any organ or tissue, such as the lung, colon, breast, skin and bones.

http://www.ncbi.nlm.nih.gov/pubmedhealth/PMH0002267/

Cancer Awareness usually comes in the symbol of a ribbon.

 Each ribbon comes with a different colour that represents a different type of cancer.

http://doitandhow.com/2011/07/14/cancer-ribbon-color-chart/

http://andrewtindall.com/2010/12/17/cancer-infographic-incidence-survival/

Precedence Studies

http://anidea.com/creative/25-amazing-cancer-related-infographics/

http://adsoftheworld.com/media/online/cancer_council_nsw_infographic?size=_original

http://infographic.co.za/cancer-united-states/

Ideation Process For Conceptual Screen Design

(Cancer Awareness)

Mind Map :

Sketches :

Sketch 1

Sketch 2 :

Sketch 3 :

Chosen Design :

(Sketch 3)

So basically, my design from sketch 3 shows that there are human figures in the middle and a title on the top.

The title for my cancer awareness screen design will be 'I SURVIVED' and there will be some human figures underneath it.

Concept

My Screen Design will be a design made to make the public realize that there are people around us who are cancer patients and also survivors. My Screen Design will show some type of cancers that are available, including the symptoms and how to get medication. This is to make people be more aware of cancer in order to save more lives.

Screen Design Process:

(Cancer Awareness)

For my Screen Design, I decided to only explain about 6 types of Cancer and the colour of  their ribbon:

1. Prostate Cancer (Light Blue)

2. Bone Cancer (Yellow)

3. Brain Cancer (Grey)

4. Lung Cancer (White)

5. Testicular Cancer (Purple)

6. Breast Cancer (Pink)

Process :

I used Adobe Illustrator to create screen design:

I used the text tool  to create the title and a pink ribbon to represent cancer awareness.

The Pen Tool is used to create the vector of a human being.

5 other vectors of a human being is created with the pen tool. 

The colour of their t-shirts are all different and is based on the colours of the type of cancer chosen.

Final Work :

The title of my conceptual screen design is "I Survived". The pink ribbon represents the letter "I" and it is also one of the symbol of cancer awareness.

I used the vector of human beings with each one of them using different kinds of clothing with different type of colour based on the cancer type that I have chosen.

For my Conceptual Screen Design, the human beings represents the types of cancer and when you click on them , information about that type of cancer will appear.

Research For Conceptual Screen Design

Design Considerations

There are three factors that should be considered for the design of a successful user interface; development factors, visability factors and acceptance factors.

Development factors help by improving visual communication. These include: platform constraints, tool kits and component libraries, support for rapid prototyping, and customizability.

Visability factors take into account human factors and express a strong visual identity. These include: human abilities, product identity, clear conceptual model, and multiple representations.

Included as acceptance factors are an installed base, corporate politics, international markets, and documentation and training.

Visible Language

Visible language refers to all of the graphical techniques used to communicate the message or context. These include:

• Layout: formats, proportions, and grids; 2-D and 3-D organization
• Typography: selection of typefaces and typesetting, including variable width and fixed width
• Color and Texture: color, texture and light that convey complex information and pictoral reality
• Imagery: signs, icons and symbols, from the photographically real to the abstract
• Animation: a dynamic or kinetic display; very important for video-related imagery
• Sequencing: the overall approach to visual storytelling
• Sound: abstract, vocal, concrete, or musical cues
• Visual identity: the additional, unique rules that lend overall consistency to a user interface. The overall decisions as to how the corporation or the product line expresses itself in visible language.

Principles of User Interface Design

There are three fundamental principles involved in the use of the visible language.

• Organize: provide the user with a clear and consistent conceptual structure
• Economize: do the most with the least amount of cues
• Communicate: match the presentation to the capabilities of the user.

Organize

Consistency, screen layout, relationships and navigability are important concepts of organization.

 

     Example: Chaotic Screen                                                Example: Ordered Screen

Consistency

There are four views of consistency: internal consistency, external consistency, real-world consistency, and when not to be consistent. The first point, internal consistency states the same conventions and rules should be applied to all elements of the GUI.

     
     Example: Internal Consistency - Dialogue Boxes     

Same kinds of elements are shown in the same places.

Those with different kinds of behavior have their own special appearance.

External consistency, the second point, says the existing platforms and cultural conventions should be followed across user interfaces.

          
            Example: External Consistency for Text Tool Icons 

These icons come from different desktop publishing applications but generally have the same meaning.
Real-world consistency means conventions should be made consistent with real-world experiences, observations and perceptions of the user.

        
                 Example: Real-World Consistency

The last point, innovation, deals with when not to be consistent. Deviating from existing conventions should only be done if it provides a clear benefit to the user.

Screen Layout

Three ways to design display spatial layout: use a grid structure, standardize the screen layout, and group related elements. A grid structure can help locate menues, dialogue boxes or control panels. Generally 7 +/-2 is the maximum number of major horizontal or vertical divisions. This will help make the screen less cluttered and easier to understand.

Communicate

The GUI must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully.

         

         Example: Illegible and Legible Texts

Readability: display must be easy to identify and interpret, should also be appealing and attractive.

  Example: Unreadable and Readable Texts:

           Unreadable: Design components to be easy to interpret and understand.                        Design components to be inviting and attractive.          

 Readable:   Design components to be easy to interpret and understand.
                       Design components to be inviting and attractive.

Typography: includes characteristics of individual elements (typefaces and typestyles) and their groupings (typesetting techniques). A small number of typefaces which must be legible, clear, and distinctive (i.e., distinguish between different classes of information) should be used. Recommendations: - maximum of 3 typefaces in a maximum of 3 point sizes - a maximum of 40-60 characters per line of text - set text flush left and numbers flush right. Avoid centered text in lists and short justified lines of text - use upper and lower case characters whenever possible.

            Example: Recommended typefaces and typestyles

Multiple Views: provide multiple perspectives on the display of complex structures and processes. Make use of these multiple views: - multiple forms of representation - multiple levels of abstraction - simultaneous alternative views - links and cross references - metadata, metatext, metagraphics.

 

            Example: Verbal and Visual Multiple Views

Color

Color is one of the most complex elements in achieving successful visual communication. Used correctly, it can be a powerful tool for communication. Colors should be combined so they make visual sense. Some advantages for using color to help communication: - emphasize important information - identify subsystems of structures - portray natural objects in a realistic manner - portray time and progress - reduce errors of interpretation - add coding dimensions - increase comprehensibility - increase believability and appeal

When color is used correctly, people will often learn more. Memory for color information seems to be much better than information presented in black-and-white. There are some disadvantages for using color: - requires more expensive and complicated display equipment - many not accommodate color-deficient vision - some colors can potentially cause visual discomfort and afterimages. - may contribute to visual or may lead to negative associations through cross-disciplinary and cross-cultural association.

Color Design Principles

The three basic principles can also be applied to color: color organization, color economy, and color communication. Color organization pertains to consistency of organization. Color should be used to group related items. A consistent color code should be applied to screen displays, documentation, and training materials. Similar colors should infer a similarity among objects. One needs to be complete and consistent when grouping objects by the same color. Once a color coding scheme has been established, the same colors should be used throughout the GUI and all related publications. The second principle of color, color economy, suggests using a maximum of 5+/-2 colors where the meaning must be remembered. The fundamental idea is to use color to augment black-and-white information, i.e. design the display to first work well in black-and-white. Color emphasis suggests using strong contrasts in value and chroma to draw the user's attention to the most important information. Confusion can result if too many figures or background fields compete for the viewer's attention. The hierarchy of highlighted, neutral, and low-lighted states for all areas of the visual display must be designed carefully to provide the maximum simplicity and clarity.

Color communication deals with legibility, including using appropriate colors for the central and peripheral areas of the visual field. Color combinations influenced least by the relative area of each color should be used. Red or green should not be used in the periphery of the visual field, but in the center. If used in the periphery, you need a way to capture the attention of the viewer, size change or blinking for example. Blue, black, white, and yellow should be used near the periphery of the visual field, where the retina remains sensitive to these colors. If colors change in size in the imagery, the following should be considered: as color areas decrease in size, their value (lightness) and chroma will appear to change.

Use colors that differ in both chroma and value. Avoid red/green, blue/yellow, green/blue, and red/blue combinations unless a special visual effect is needed. They can create vibrations, illusions of shadows, and afterimages. For dark viewing situations, light text, then lines, and small shapes on medium to dark backgrounds should be used in slide presentations, workstations and videos. For light-viewing situations, use dark (blue or black) text, thin lines and small shapes on light background. These viewing situations include overhead transparencies and paper.

Color Symbolism

The importance of color is to communicate. Therefore color codes should respect existing cultural and professional usage. Connotations vary strongly among different kinds of viewers, especially from different cultures. Color connotations should be used with great care. For example: mailboxes are blue in the United States, bright red in England and bright yellow in Greece. If using color in an electronic mail icon on the screen, color sets might be changed for different countries to reflect the differences in international markets.

http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html