article:
UI: Designer-naut UI Kit (PSD)
article:
Mobile & Mockup: Application Screen Presentation Mock-ups (PSD)

Elements Design & Typography: Crispy Icons (PSD, AI, SVG, WebFonts)

Advertisement

A computer icon is a pictogram displayed on a computer screen in order to help user navigate a computer system or mobile device in a similar way traffic signs are used to help a driver navigate traffic; one of the most notable icon designers, Susan Kare was quoted saying "good icons should be more like road signs than illustrations, easily comprehensible, and not cluttered with extraneous detail". - Wikipedia: Computer Icon

The benefits of icons in a graphical user interface (GUI) include: - Nielsen Norman Group: Icon Usability

  • Icons make good targets: they are typically sized large enough to be easily touched in a finger-operated UI, but also work well with a mouse cursor (in contrast to words, which can suffer from read–tap asymmetry on touch screens).
  • Yet they save space: icons can be compact enough to allow toolbars, palettes, and so on to display many icons in a relatively small space.
  • Icons are fast to recognize at a glance (if well designed) — particularly true for standard icons that people have seen and used before.
  • There is no need to translate icons for international users, provided that the icons are mindful of cultural differences (for example, mailboxes look very different in various countries whereas envelopes look the same, therefore an envelope is a more international icon for an email program than a mailbox).
  • Icons can be visually pleasing and enhance the aesthetic appeal of a design.
  • They support the notion of a product family or suite when the same icons and style are used in several places.

Free Crispy Icons is a PSD / AI / SVG / WebFonts file including a lot of useful web elements like icons.

Elements Design & Typography: Crispy Icons (PSD, AI, SVG, WebFonts)


WebFonts



Add special CSS @font-face declaration, like this:

@font-face {
    font-family: 'Glyphter';
    src: url('../fonts/Glyphter.eot');
    src: url('../fonts/Glyphter?#iefix') format('embedded-opentype'),
         url('../fonts/Glyphter.woff') format('woff'),
         url('../fonts/Glyphter.ttf') format('truetype'),
         url('../fonts/Glyphter.svg#Glyphter') format('svg');
    font-weight: normal;
    font-style: normal;
}


link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />


add in the "font-family" property, like this:

p { font-family: 'Glyphter', Arial, sans-serif; }


Preview



Elements Design & Typography: Crispy Icons (PSD, AI, SVG, WebFonts)


Created by Petras Nargėla: dribbble, behance.

Enjoy this freebie and want to show support? Spread the word.

Download, share and enjoy!

Advertisement
Tags: icons, typography, design, psd, ai, svg, webfonts, css, stylesheet, font family

Leave a Comment

No Comment

© Creative3x Ltd.