GRAPHICS

GRAPHICS• There are several different types of

graphics in particular which are correlated to graphic design. Some of the different types of design in relation to graphic design include that of vector graphic design as well as raster design just to name several of the forms of design affiliated with graphic design.

• To begin raster design involves the use of pixels or small dots and or squares which make up the entire composure of a design. Raster images are also known as bitmap images. Vector images are more affiliated with mathematical related matters such as that of geometric shapes such as lines, and other geometrical shapes.

COPYRIGHTS

According to research information which I’ve found on Wikipedia and the e-book on

infographics on the Devry homepage, copyrights are the legal rights created by

law of a country for a creator of an original content to create, distribute, share, as well

as copy their product with others, so long as the individual who is sharing that product

has the consent of the original creator to do so. Copyrights exist from the moment of creation by the creator and is owned by them except in the case that the creator

passes over those rights to another by their willingness and consent.

If abused and utilized in the wrong manner, the misuse of copyrights can result in a lawsuit, in which a person can possibly

be fined for unapproved consent for the misuse and lack of permission for their

product. According to research there are over 6 styles

of Creative Commons. They include the following, Creative Commons Attribution, CC Attributions, Non commercial CC Attributions share, CC Attributes no derivs,CC Attributes non commercial share, CC Attributes non

commercial no derivs

Vector Graphics• Vector graphics include the utilization of figures which most people

are or should be familiar with. In this case most vector graphics are correlated to mathematical figures such as lines curves etc. And vector graphics can prove to be a very useful factor as it relates to infographics, by helping a person better understand given information through the use of images as opposed to numbers. As demonstrated above, the vector image displayed is the shape of a circle which can be considered to be a geometrical figure, like vector shapes in mathematics.

BITMAP OBJECTSBitmap Images often comprise of small images of circles or small

squares which make up the entire being displayed to the intended audience. Bitmap objects which are ‘also known as Raster images are convenient in helping a person change the font size of their image to

large or small dependent on the request of the designer or that of the customer or client. Bitmap objects sometimes are hard to make out ,

within regards to what the actual image is.

MURDER RATES WITHIN POPULAR CITIES OF THE US

As you can see from this infographic which I’ve created using Adobe CS6, I have depicted valid and relevant information for the murder rates for some of the most prominent

cities in the US. Detroit Michigan depicted from the information displayed in the graph obviously tops the charts, followed by the remaining cities depicted each with its own individual color, to both represent and differentiate the different cities from their total murder rate. For the background of the small body image that I created with the colors I’ve selected a certain amount of bodies to depict how many murders occur within each

city per every 100, 000 residents.

REFLECTIONS• Vector graphics can be utilized and made

in comparison to mathematical aspects of geometry such as curves, lines, as well as

other geometrical aspects. Vector graphics is the use of geometrical primitives such as prints, lines, curves , circles and other shapes alike including polygons which all based upon mathematical expressions. I believe that possibly vector graphics may be more simpler to use in my opinion, than that of raster images, my reason being is that they seem more familiar to us as human beings because they deal with everyday objects and shapes which we see on a daily basis.. For my subject matter for the course project murder rates, I utilized Adobe CS6 to use to my advantage and with the use of the pen tool and pathfinder made an infographic representation of murder rates within some of the most popular cities based in the US, including Baltimore Maryland, Detroit Michigan and more.

Bitmap objects or raster images are comprised of pixels. According to the e-book and other online sources . The definition of pixels as it relates to bitmap objects is the small squares or circles which make up the entire image being displayed to your audience. Here’s one example of a pixel as posted below. In conclusion there are different styles and factors of design which prove to be relevant with each intended design presented to an audience.

INFORMATION STRUCTURE

CHAPTER :5

BY: KERWIN AYERS

INFORMATION STRUCTURE

Information Structure, involves providing visual infographics to the audience to grasp the focal or center point and navigation strategy for the content. Infographics can be used for a variety of purposes which include public relations, advertising, marketing, and education as well. Information structures are often organized in well organized formats such as pyramids for hierarchy, simultaneous sequence of order for sequential structures, can get you recognition and expose your expertise on the subject matter.

According to the week 5 lecture taken from our e-book Creating Infographics, hierarchy is a specific form of design layout in which

the designers utilize one primary focal point and smaller information points One of the most prominently known uses of hierarchy in infographics itself is the use of Maslow’s Pyramid ,

better known as Maslow’s Hierarchy Pyramid of needs. According to Maslow's pyramid of needs include affections such as love, the

need for acceptance, physical needs such as food and water and so on. As you can see from the information within the pyramid, most of the information is sectioned of according to their order of color.

• HIERARCHY

SEQUENCE

Sequence- Plays a very important role n design as it relates to infographics. In sequence, the formatting for the design goes in a particular order in which the

reader can both interpret and understand the message of the content, by seeing how a process is executed or carried out. For instance, a “How to guide”, or books

which give specific instructions on how to go about accomplishing a particular goal or objective. These are just several examples of how sequence formatting in an infographic takes place. Many infographics involving sequencing can involve instructions or information like the information shown above. The information

above describes financial predicaments and how to go about solving them by the methods prescribed by the animated cartoon character. Notice how each

rectangle falls in place in sequence starting from a vertical position then gradually moving towards the right in a horizontal direction. Time lines are also be

considered to be examples of sequential infographics.

INTERACTIVE

• Interactive infographics are very powerful form of infographics and distributor of information. And this is for several reasons, one of them being that they cause your readers/users to engaged and interactive with the infographic,. This means that your target audience is spending more time with your presented content, and are interacting with it in a manner that ‘s very powerful for your brand. Secondly, interactive infographics allow you to put a lot of information into 1 infographic without it being overwhelming for the reader to understand .The ability to have layers and sublayers means you are not throwing too much at someone at once, and therefore not scaring them away. We can create interactive infographics for your web use and tablet use.

Text box appears on roll over

EXAMPLES OF INFORMATION STRUCTURE

BY KERWIN AYERS

INFORMATION STRUCTURE COMPARISON

Hierarchy-

S E

Q U

E

NC

E

INTERACTIVE

EXAMPLES OF INFORMATION STRUCTURE

WIREFRAME PART1 HIERARCHY

TEXT 2

TEXT 1

TEXT 3

TEXT 4

TEXT 5

STEP 1 STEP 2 STEP 3

WIREFRAME PART 2 SEQUENCE

• WIREFRAME PART 3 INTERACTIVE

Like a sinking ship this interactive infographic depicts the descent of money in banks in America status within the US.

MY THOUGHTS /FEEDBACK

• In relation to the subject matter of information structure my thoughts are as follows:

• Some of the most effective ways of distributing important information to a target audience to get them to comprehend content at a more informative level is through sequential infographics, at least in my opinion. Sequential infographics are both essential and beneficial in distributing information to a target audience by putting information in a sequential order through the use of boxes, circles, lines, and so on. I believe that in this manner as opposed to just having mere words to read, the reader/ audience has some kind of order in which they can keep track and better understand the given content that is presented to them.

• As for hierarchy, infographics which relate to hierarchy are adequate in helping to section off information in an accurate manner by dividing off information into separate sections of the design, in a sense I would say that hierarchy seems parallel or similar to the element of proximity in design, as it targets specific areas of design..

•STYLE GUIDE-• My primary font style which I chose is that of Algerian, as you can see from the font to the left corner above.

Also I chose to highlight all my word titles for this I-lab.

• Most of my images which I’ve selected derived from jpg origins, the only difference is that I renamed them for the most part to make it easier to upload them from my files to complete the assignment. My primary origin in which I found these images wasn’t images to put into the work which I’ve presented for my slide show. necessarily through a website. In my case I just type in Images of interactive, hierarchy, or sequential infographics, and that’s how I got most of these

• NAVIGATION CH 6 INFOGRAPHICS

NAVIGATION

Designing navigation is similar to designing a map or a guide in which an individual can utilize to search out desired information in which a person desires to acquire. Different methods of navigation includes internet based links of information which includes html’s URL’s and so on. For example when dealing with large quantities of content the critical aspect of navigation cannot be overestimated . Also when considering the general purposes in which navigation serves in graphic design, it’s important to remember that navigation serves the purpose of thoroughly keeping track or record of information relevant to the user through the means of choice words which can help the reader and or user of the content find the content in which they’re looking for.

Navigation

EFFECTIVE NAVIGATION• -In order to provide effective and sufficient navigation which will properly guide

the user in their navigation tutorial several factors in relation to navigation must be taken into thought. For one the page layout of the website. How the page is laid out with the content in mind will be the determining factor as to whether the user can properly navigate throughout the website with no problem or if they will be lost in the process of navigation. Another factor which is relevant to navigational processes is word choice. Word choice or the words within the search engine that’s typed can be the favor which determines the status of navigation, and by that I mean if the user is . However there are several methods of navigation which can be used to properly guide the user as they, navigate. For example key words which introduces the services in which a company offers. Such as that of plumbing, construction and so on.

• - For one there’s the method of Classification path navigation. In this method of navigation various portions of the particular classification tree which particular documents or sections of the website’s location. Other forms of navigation include that of core navigation., document navigation, as well as dropdown navigation just to name a few. These systems of navigation specialize in helping a user to acquire the information they specifically seek on a website.

SEARCH ENGINE OPTIMIZATION Search engine optimization systems Search engines calculates

score for the credibility and authority as one way to quantify its relevance to specific key words. Search engines utilize complex, proprietary algorithms which uses a variety of different signals.

Some of these signals within search engines classify for relevance, others for quality of content, and as for the remaining signals those may qualify for relevance on the internet. Search

engine optimization within infographics have become a vey potent factor for utilization of links within website companies.

According to our E-book "Cool Infographics", the more links that a web page for a specific company acquires from outer web pages in general the more rank or recognition it will receive.

Apart from the original search engines in which most of us are familiar with such as Google, Yahoo and so on, but there are alternatives search engines which users can use to navigate

websites. For example, such as htmls, url’s and so on. .

SEARCH ENGINE OPTIMIZATION CONT.

404. HTML

HTML

SITEMAP

KEYWORDS

EXTERNAL LINKS

TAGS

URL’S

SEARCH ENGINE

OPTIMIZATION

Keywords- identify keywords to emphasize the strongest and

unique attributes to differentiate content on the site.

<meta> utilize meta description<title>The descriptive in titles is

featured<h1> use structure in headings.

<<img> the image alt description.

You can manufacture the 404 content page to handle missing

pages or a broken link error.

Use a sitemap page to emphasize in links and keywords as well.

You can increment links on other websites correlated to content in order to improve

ranking or recognition.

You should include keywords in HTML.

Be sure to be descriptive in naming conventions and using

keywords in html code.

REFERENCEShttp://en.wikipedia.org/wiki/Vector_graphics

http://www.bing.com/search?q=vector+graphics&src=IE-SearchBox&FORM=IE10SR

http://kingtale3.inspsearch.com/search/web?fcoid=417&q=IMAGES+OF+VIDEO+GAME+GRAPHICS

http://www.blingcheese.com/pictures/video_game/

http://index.about.com/index?gclid=CP260__svsMCFdgWgQoduQ0ACg&am=broad&q=bitmap+images&an=google_s&askid=32c2356e-375c-4e46-ac09-93432e100b59-0-ab_gsb&dqi=images%2520of%2520bitmap%2520objects&qsrc=999&ad=semD&o=12495&l=semhttps://www.google.com/search?q=infographics+that+use+hierarchy&gws_rd=ssl

https://www.google.com/search?q=infographics+that+use+hierarchy&gws_rd=ssl#q=infographics+that+use+sequence

http://elections.nytimes.com/2012/results/senate

http://webstyleguide.com/wsg2/site/basic_structures.html

HTML 5 WHAT IS IT EXACTLY?

• HTML 5- Is a core technology mark up language of the internet used for structuring and prosecuting content for the world wide web. The primary objectives of HTML 5 includes the following:

• Maintaining visual perception and clarity for people to see the displayed information thoroughly, as well as for devices such as browsers and parsers to understand the given content as well.

• Overall HTML 5 is intended to subsume HTML 4, XHTML, and Dom Level 2 HTML.• To be specific, HTML5 adds many new syntactic features including <new video>,

<audio> and <canvas> elements, as well as the integration of scalable vector graphics (SVG) content (replacing generic <object> tags), and MathML for mathematical formulas.

• HTML comprises of a series of short codes typed into a text file by the site author, these codes in actuality are the tags attached to the html

• After the code is entered it’s then saved and or used in the creation or manufacturing an html file then viewed as a browser, for example Internet Explorer, Mozilla, and Firefox just to name a few prominently known browsers.

HTML THUMBNAIL

<!DOCTYPE html PUBLIC”_//w3c//DTD HTML 5.01 // EN> <html><head> <title>EFFECTIVE NAVIGATION WK 6 INFOGRAPHICS<title> </ head><body><!– site navigation menu--><ul class=“ navbar”>

HTML5 CODE FULL VERSION<!DOCTYPE html PUBLIC”_//w3c//DTD HTML 5.01 // EN> <html><head> <title>EFFECTIVE NAVIGATION WK 6 INFOGRAPHICS<title> </ head><body><!– site navigation menu--><ul class=“ navbar”>• <h1>heading text</h1>• <section><h1>heading text• <section><h1>heading text• <section><h1>heading text• <section><h1>heading text• <section><h1>heading text...

CH APTER 6 REFERENCES

• http://www.ask.com/business-finance/important-organize-files-folder-structures-68b77e91b8611750

• http://en.wikipedia.org/wiki/Search_engine_optimization• http://www.yourhtmlsource.com/starthere/whatishtml.html• https://

www.google.com/search?q=examples+of+html+pages&gws_rd=ssl*http

://www.searchenginejournal.com/website-structure-and-seo/54156/-http://www.w3schools.com/html/html_basic.asp

----https://www.google.com/search?q=top+reasons+why+file+structure+is+important+to+aweb+page&gws_rd=ssl#q=top+reasons+why+file+structure+is+important+to+a+web+page

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

CASCADING STYLE SHEET• Cascading style sheet. (CSS)is a style sheet language used for describing

the look and formatting of a document written in a markup language.

• CSS is designed primarily to enable separation of document content from document presentation , including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

• The CSS specification describes a priority scheme to determine which style rules apply if more than one rule matches against a particular element.

• Look at this following example of cascading style within my next slide.

FILE STRUCTURE• The manner in which file content is organized in a website plays a vital role in the navigation

system. In your navigation system the first recommended aspect which should be taken into consideration is to avoid type navigations that make it to complex for your search engine to navigate to, or in this case navigate your pages.

• To do so accurately you should avoid file structures that are only composed of files such as Java script and Flash. Now although these choice files may be appealing to viewers who see it, it may prove to be difficult for the engine spiders to interpret the given content.

• Sometimes, dependent on the file type you choose to present to your audience this can determine if your content is presented in an appropriate manner. By this I am suggesting that you be careful of what file type you choose lest it give you complications which prevents you from presenting to your audience.

• Here are some • Understanding: Your current team, future site maintainers, and most site users will benefit from

careful, consistent, plain-language site nomenclature• Flexibility: If every object in your site has a name, everything can be found, styled, and

programmatically manipulated much more easily• Accessibility: Named objects are more accessible to programmatic and style sheet control across

all media types and give you flexibility in implementing universal accessibility features in your site• Search optimization: Careful site nomenclature makes it much easier to optimize a site for search

engine visibility• Future growth and change: you can’t scale up or automate changes in a randomly named,

haphazardly constructed collection of files and directories; a nonsystem can’t be systematically managed or structurally expanded

HTML TAGS example

• <DOCTYPE html>• <html>• Body• H1, Effective Navigation WK 6 INFOGRAPHICS</ h 1>• <p> HTML 5- Is a core technology mark up language of the

internet used for structuring and prosecuting content for the world wide web. The primary objectives of HTML 5 includes the following:

• Maintaining visual perception and clarity for people to see the displayed information thoroughly, as well as for devices such as browsers and parsers to understand the given content as well.

• Overall HTML 5 is intended to subsume HTML 4, XHTML, and Dom Level 2 HTML