logos, icons, and descriptive graphics cindy taylor
Post on 23-Dec-2015
220 Views
Preview:
TRANSCRIPT
Logos, Icons, and Descriptive Graphics
Cindy Taylor
Logos
Logo: a graphic representation or symbol of a company name, trademark, abbreviation, etc., often uniquely designed for ready recognition. - dictionary.com
“Logos are either purely graphic (symbols/icons) or are composed of the name of the organization...”
- wikipedia.org/wiki/Log
Logos
“A logo is a graphic mark or emblem commonly used by commercial enterprises, organizations and even individuals to aid and promote instant public recognition.”
- wikipedia.org/wiki/Logo
Logo Designer Paul Rand
“A logo doesn’t sell, it identifies. A logo derives its meaning from the quality of the thing it symbolizes, not the other way around. A logo is less important than the product it signifies; what it means is more important than what it looks like.”
“Simplicity is not the goal. It is the by-product of a good idea...”
A few iconic Rand logos
Logos in Information Architecture Use of Logos as a universal navigation link to the Home Page - Can be integrated as an element of the menu bar or separately
Logo colors or graphic elements can suggest stylistic cues for the rest of the site’s visual design, promoting unity of elements
Fonts should also harmonize with the logo to create unity, promote readability
Logos and the Web• Dynamic Logos
Fluid systems of brand identity that use multiple iterations of a logo that changes at different times or under different circumstances
(e.g., Google)
• Web 2.0 Logos
Common characteristics:
• Soft, rounded fonts predominate
• Create a “cozy” look
• Colors are bright and cheery
• Blur the line between logos and icons
Click icon to add picture
Caveats re: Logos for the Web Click icon to add picture
• Bad logo designs abound: the IA should work with graphic designers to make sure the logo is highly readable, quickly recognizable, and does not detract from content
• Highly detailed logos do not read well online
• The logo should say something about the purpose or the tone of the organization
• If a brand is not yet iconic, the identifying text should remain with the image on every page
Raster vs. Vector Graphics:
• Using pixelated images is likely to lead to problems. Instead of rasterized graphics, opt for vector graphics that maintain consistency at different sizes and media.
Icons
“An icon is a small picture or symbol on a graphical user interface (GUI) that represents a program (or command), file, directory (also called a folder) or device...”
- http://www.linfo.org/icon.html
“On a Web page, an icon is often a graphical image that represents the topic or information category of another Web page. Frequently, the icon is a hypertext link to that page.”
- http://whatis.techtarget.com/definition/icon
• The definition of logos and icons may overlap
Favicons
“A favicon (short for ‘favorites icon’) is an icon associated with a website or webpage intended to be used when you bookmark the web page’.
- wordpress.org
• Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually.
• Tutorials are available on how to make your own favicons using Photoshop and other programs
Use of Icons in Information Architecture
• Used as navigation interfaces
• The search button is a very common icon
• Icons can be stock or can be custom designed for a website
• Similar to paragraph breaks in text, Icons can help visually break up the content
• Can represent the linked content graphically only, or combined with text
• Icons should be used to draw attention content. pagodabox.com
Caveats re: Icons
Click icon to add picture
Those relying on purely graphical representations can be confusing for users
www.denisechandler.com/
Creative or ambiguous?
Caveats re: Icons
Click icon to add picture
Those relying on purely graphical representations can be confusing for users
www.denisechandler.com
Options:
• Provide a key for icons that may be ambiguous
• Label icons
• Use rollovers
Either use conventional designs, or have a purpose for creative designs
Descriptive Graphics
FunctionsAKA Information Graphics or Infographics
Represents information visually to help users understand textual and numeric data
Particularly useful for representing complex statistical information
Make the abstract concrete
May also represent spatial (maps) or temporal (timeline) information
Help users make choices and perform tasks
Breaks up blocks of textual content visually
Format of a basic chart graphic
Category 1 Category 2 Category 3 Category 40
1
2
3
4
5
6
Chart Title
Series 1 Series 2 Series 3
Examples of Descriptive GraphicsArea charts
Bar charts
Blueprints
Calendars
Cross sections
Diagrams
Flow charts
Histograms
Maps
Pie Charts
Scatter Charts
Schematics
Timelines
Venn Diagrams
Caveats re: Descriptive Graphics
• Can confuse, rather than clarify
• Support with adequate labelling
• Understood without context
• Keep it simple
Too much information…
…Not enough
Descriptive Graphics inInformation Architecture
The processes of IA work call for descriptive graphics extensively:
• Blueprints help IA professionals and clients visualize site structure and information flow
• Content Models can also be descriptive graphics
• Wireframes help IA professionals work in tandem with graphic designers and allow the client to visualize concepts
• Survey results are well presented graphically
• Timelines and Gantt Charts help keep the process on task
Resources
http://logodesignerblog.com/bad-ugly-worst-logo-designs/
http://www.hexanine.com/zeroside/the-future-is-fluid-inside-dynamic-logos/
http://designshack.net/articles/layouts/vector-vs-raster-what-do-i-use/
http://www.freelancelogo.com/2010/07/25-great-examples-showing-use-of-logos-in-corporate-web-designs/
http://fontfeed.com/archives/the-logos-of-web-20/
http://webdesignledger.com/inspiration/21-inspiring-examples-of-icons-in-web-design
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html http://www.businessinsider.com/infographics-must-die-2013-6
top related