Top Banner
Principles of Design: Color Jonathan alfons0
18
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Jma proj presentation2

Principles of Design: Color

Jonathan alfons0

Page 2: Jma proj presentation2

Picking our Topics

Page 3: Jma proj presentation2

What was my Topic?

color

Page 4: Jma proj presentation2

Thinking about it…

Page 5: Jma proj presentation2

Issues…

Page 6: Jma proj presentation2

ideas

Page 7: Jma proj presentation2

Project Description

• Color = a form of visual communication that impacts on our daily lives.

Page 8: Jma proj presentation2

Sitemap

Page 9: Jma proj presentation2

Mockup

Page 10: Jma proj presentation2

Examples with color on Websites

Page 11: Jma proj presentation2

html

<a href="http://decode.uk.com/"><img src="images/decode_site.png" id="decode" alt="decode site" class="span6”></a>

Page 12: Jma proj presentation2

css

#decode {width:40%; max-width:400px;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow:3px 3px 3px #000;box-shadow:3px 3px 3px #000;

}

Page 13: Jma proj presentation2

javascript

$(document).hover(function () { $("#decode").css("background" , "url(../images/decode_hover.png)");

}, function () { $("#decode").animate({opacity:'0'}); } );

Page 14: Jma proj presentation2

pros

• Arranging the images paragraph and text properly.

• Using the bootstrap button-generator.

Page 15: Jma proj presentation2

Cons

• JavaScript doesn’t work.

• Unable to hover from image to image.

Page 16: Jma proj presentation2

Other Technicalities

• Unable to do the three external sizes of large displays, default, tablets, and phones.

• Dealing with proportions of each object.

Page 17: Jma proj presentation2

To improve

• More time = More Effort• Learn more about the JavaScript tool

in order to animate my desired objects.

Page 18: Jma proj presentation2

Thank you

Jonathan [email protected]

[email protected]