background preloader

7 Gorgeous Icon Fonts for Web Designers

7 Gorgeous Icon Fonts for Web Designers
TNW first covered the growing popularity of icon fonts back in January, and since then the Web has practically exploded with impressive icon fonts for use in Web design. For those that are out of the loop, you can think of an icon font as a grown-up version of dingbats…with an actual use-case. The core idea is to take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font. There are many reasons to do this too, according to Pictonic, as an icon font can load as much as 14% faster than images and can to be as much as 90% smaller than SVG files. Now that a ton of options have emerged as popular choices among Web designers, we’ve made this brief list of 7 typefaces to point you in the right direction. If we missed your favorite, please share it with us in the comments below! Font Awesome (free) Font Awesome is an icon font that was designed to work perfectly with Twitter Bootstrap. Fontello (free) Modern Pictograms (free)

http://thenextweb.com/dd/2012/10/12/7-gorgeous-icon-fonts-to-speed-up-your-site-and-your-design-process/

Related:  UXoutils et ressources

❍ Docs IcoMoon is an icon solution, providing three main services: Vector Icon Packs, The IcoMoon App, and hosting icons as SVGs or fonts. Read further to learn about each service in detail. Besides an open source icon pack (view it on github), IcoMoon also offers two main premium icon sets: Linearicons, which is a line icon set; and Ultimate/Essential packs which are suitable for all kinds of projects. Head over to using a modern web browser to start using the IcoMoon app. This HTML5 application allows you to quickly browse and search for the icons you need. You can download these icons, do some basic editing, import your own icons, make icon fonts (a font with icons as its glyphs) or generate SVG and PNG sprites.

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! All layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. Each of the columns could be the longest, and for testing columns length I've used the script filler text on demand. Each layout could represent a site with five main sections: header, content, navigation, other stuff and footer. The basic markup, common to every layout, is the following: <div id="container"> <div id="header">Header</div> <div id="wrapper"> <div id="content">Content</div> </div> <div id="navigation">Navigation</div> <div id="extra">Extra stuff</div> <div id="footer">Footer</div> </div>

The Era of Symbol Fonts Improving performance is a constant process. First we ditched tables, spacer gifs, and inline markup such as the <font> element in favor of CSS, reducing page sizes, and separating style from layout. Then we became aware of all our DNS requests, caching, and the total number of files and started using CSS sprites, moving many small images out of the HTML and into a single background image. Now it’s time we embrace the third epoch in performance optimization: symbol fonts. Embedding a symbol font lets us move some of those tiny icons into a single font file rather than a sprite.

Icon Fonts are Awesome Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper. The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings. Here's a large collection of more choices. For quick usage, the code is below.

Responsive Navigation Patterns Update: I’ve also written about complex navigation patterns for responsive design. Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness. Here’s some of the more popular techniques for handling navigation in responsive designs: Animating Along a Curved Path This demonstrates how to animate the position of an element along a curve. Click the button or drag the dots to see the animation. You can use this example as a tool to find the right XY values for start, end, and control points that will give you the right shape path for your own animation on a curve. The curved line shown here between points 0 and 3 is just for preview purposes, and is not part of animation on a curve. The draggable points 0 - 3 are displayed only for UI interactivity. To see anim along a path, click the button above, or drag point 0, 1, 2, or 3.

Design Better And Faster With Rapid Prototyping Advertisement The old adage, “a picture speaks a thousand words” captures what user interface prototyping is all about: using visuals to describe thousands of words’ worth of design and development specifications that detail how a system should behave and look. In an iterative approach to user interface design, rapid prototyping is the process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers. Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for changes during development.

Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons. Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model. Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.

9 places to get inspiration for your website's color palette Color, one of the seven elements of art, is an important aspect of every design. It is so impactful that designers often neglect other elements, such as form and value, to the detriment of their work. Since color has a massive impact on your viewers, it is important know your theory and even a little psychology. Design Freebies - Social and Subscribe Flat UI Kit Download (PSD) Flat UI Design is as beautiful as it is simple, it is design that has been stripped back to the basic bones of color, shape and type. And with the current market obsessing over flat design, we felt it would be appropriate to not only talk about it (like we have here, here and here) but to contribute to it. By creating this small yet fuctional flat ui kit that features simple social and subscribe widgets we feel that we have got the ball rolling. Now all we need to do is to keep on creating more packs like this for you guys to use and enjoy, that is of course if you like this one. So feel free to leave your feedback in the comment area, and of course any links to projects that you may use the download within. All the layers are neatly organised.

Color Wheel - Color Calculator The color wheel is a chart representing the relationships between colors. Based on a circle showing the colors of the spectrum originally fashioned by Sir Isaac Newton in 1666, the colour wheel he created serves many purposes today. Painters use it to identify colors to mix and designers use it to choose colors that go well together. The classic color wheel shows hues arranged in a circle, connected by lines or shapes. The colors include primary colors (red, yellow, and blue), secondary colors (orange, green, and violet), and tertiary colors (yellow green, blue green, blue violet, red violet, red orange, and yellow orange). Secondary colors are created by mixing primary colors.

40+ Free Beautiful CSS CSS3 Table Templates The table is a great way to show information about various prices for its products or services, especially, some hosting company, they need to present the price of each plan clearly on table to easy for users to looking. Those table should content text and features description easy users reading information of each level has to offer in a table format. Depending on the contents, the tables can be good for organizing many other types of data for deep clarity other than price. Today we’ll take a look to select some of beautiful css css3 tables. These come from a variety of different sites. If you’re interested in learning how to do this yourself, do not forget to take a look at some of our CSS3 tutorials!

Color Theory For Designers: Creating Your Own Color Palettes Advertisement In the previous two parts of this series on color theory, we talked mostly about the meanings behind colors1 and color terminology2. While this information is important, I’m sure a lot of people were wondering when we were going to get into the nitty-gritty of actually creating some color schemes. Well, that’s where Part 3 comes in. Here we’ll be talking about methods for creating your own color schemes, from scratch. We’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern.

Related: