Six Revisions – Gabriel Catalano®

Free Icon Fonts for Web User Interfaces

by Jacob Gube | Six Revisions

This roundup features 18 free icon fonts that can be used in your commercial projects. The icon fonts in this post are perfect for your app user interfaces (UIs).

What are Icon Fonts?

Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters.

Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, just like other web fonts, use the CSS @font-face rule to display icons in web browsers.

And because they’re treated like web fonts, icon fonts:

Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)
Can be scaled on-the-fly if the user adjusts their web browser settings
Can be rendered with different colors
Can embody font- and text-related CSS properties (like text-shadow andgradient)

See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page.

To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage.

Free Icon Fonts

Below are 18 excellent icon free fonts that have licenses that permit commercial use. I strongly recommend reading the license terms and conditions of any freebie you get online, just to be sure that you can use the free resource for your particular purpose.

1. Foundation Icons Fonts

Number of icons: 137. License: MIT Open Source License.

2. Sosa icon font

Number of icons: 121. License: Custom license (use in commercial projects permitted).

3. Font Awesome

Number of icons: 196. License: Creative Commons Attribution 3.0 Unported.

4. Iconic Icon Set

Number of icons: 172. License: SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.

Continuar leyendo «Free Icon Fonts for Web User Interfaces»

Giveaway: 100 Custom Flyers from Next Day Flyers

We’ve partnered up again with our wonderful friends at Next Day Flyers to give away two sets of 1/4-page flyers with free shipping anywhere in the Continental U.S. Each set contains 100 flyers. Flyer printing can be used and customized for a variety of purposes including promoting a club event, marketing a small business and sending out announcements. Read on to see how you can win!

** Update: Giveaway Period Has Ended **
About Next Day Flyers

Next Day Flyers is an offset printing company offering an array of printed materials such as flyers, business cards, postcards, brochures, tickets and more.

They’re not newcomers to the industry. They’ve been in business for 13 years and have over 100,000 satisfied customers.

And with longevity comes experience. They know what their customers are seeking and how to meet the high expectations.

Quality is of utmost importance as Next Day Flyers utilizes a quality checkpoint system which includes 33 steps to ensure the files are printed correctly and ready on time.

 by Jacob Gube | http://sixrevisions.com/

Update: Giveaway Period Has Ended

About Next Day Flyers

Next Day Flyers is an offset printing company offering an array of printed materials such as flyers, business cards, postcards, brochures, tickets and more.

They’re not newcomers to the industry. They’ve been in business for 13 years and have over 100,000 satisfied customers.

And with longevity comes experience. They know what their customers are seeking and how to meet the high expectations.

Quality is of utmost importance as Next Day Flyers utilizes a quality checkpoint system which includes 33 steps to ensure the files are printed correctly and ready on time. Continuar leyendo «Giveaway: 100 Custom Flyers from Next Day Flyers»

Should We Always Deploy Content Management Systems?

Content management systems are a wonderful tool for empowering website owners. Most of us have witnessed the power and ease of use of CMSs like Drupal and WordPress. They have changed the web development industry in a significant way.

Now, even average Internet users who have very little technical knowledge can have the ability to run and manage websites without any help from trained web developers.

Because of this CMS revolution, a major segment of the web development industry — dedicated to developing simple to complex CMSs for a broad set of users and premium themes for popular publishing platforms — has blossomed.

There are quite a few benefits to developing a site powered by a CMS. Chief among them is that the website owner is able to add and manage their website’s content, thus keeping visitors interested and search engines tuned in. And for the web professional, he has much less responsibility in maintaining the website.

But is empowering the business owner with a CMS always the way to go? Sometimes leaving tasks such as website maintenance and system upgrades to a professional leads to better results for the owner.

To explore the question of whether or not we should always deploy content management systems for our clients, let us first go through some types of clients who would not fully benefit from them.

by Maria Malidaki
http://sixrevisions.com/project-management/always-deploy-cms/

Now, even average Internet users who have very little technical knowledge can have the ability to run and manage websites without any help from trained web developers.

But is empowering the business owner with a CMS always the way to go? Sometimes leaving tasks such as website maintenance and system upgrades to a professional leads to better results for the owner.

To explore the question of whether or not we should always deploy content management systems for our clients, let us first go through some types of clients who would not fully benefit from them. Continuar leyendo «Should We Always Deploy Content Management Systems?»

30 Beautiful and Creative Ad/Marketing Agency Websites

Advertising and marketing agencies often position themselves as being specialists in creativity. So it’s just natural that their websites are often creative and beautiful. As clients expect these businesses to be creative (and a website is often one of the first things potential clients look at), ad agencies need to have effective and impressive websites.

Below is a collection of 30 agency websites from all across the globe. Take a look at these websites for creative web design inspiration.

by Emma Egan
http://sixrevisions.com/design-showcase-inspiration/30-beautiful-and-creative-admarketing-agency-websites/

Below is a collection of 30 agency websites from all across the globe. Take a look at these websites for creative web design inspiration.

Continuar leyendo «30 Beautiful and Creative Ad/Marketing Agency Websites»

7 Common Project Management Problems (And How to Solve Them)

It doesn’t matter how talented you are, if you can’t manage your projects, then you will struggle to achieve success.

To help you avoid that undesirable outcome, here are seven project management problems that designers and developers often face, as well as how to deal with them when they arise.

1. Your Client Gives You Vague, Ever-changing Requirements

Fickle clients can be a huge hassle. If a client doesn’t know what they want until a certain stage is complete, then schedule those decision points into the project as milestones. It is important to have a clear path mapped out from start to finish because it forces the client to be specific with their requirements, as well as keeping the project on track.

Be clear at the outset about what your task is going to be on the project and how much leeway is available. If you will need to be compensated for big revisions or changes in direction, then set a clear outline about the number of adjustments you can make before you need to charge more. If you can, quantify these adjustments with a number; it makes it much easier to keep track of things.
2. Your Client is Slow with Communication

People are busy, but it’s tough for you to move forward on a project if you can never get answers from the person you’re working with.

The good news is that you will drastically increase your response rate if you do a little bit of work ahead of time. Instead of waiting for the back-and-forth discourse to finally take place, simply start moving in the direction that you think is best and then seek verification. This strategy makes it easy for your client to quickly say yes (or no).

Here is an example:

by James Clear
http://sixrevisions.com/project-management/7-common-project-management-problems-and-how-to-solve-them/

It doesn’t matter how talented you are, if you can’t manage your projects, then you will struggle to achieve success.

To help you avoid that undesirable outcome, here are seven project management problems that designers and developers often face, as well as how to deal with them when they arise.

1. Your Client Gives You Vague, Ever-changing Requirements

2. Your Client is Slow with Communication

People are busy, but it’s tough for you to move forward on a project if you can never get answers from the person you’re working with.

Here is an example: Continuar leyendo «7 Common Project Management Problems (And How to Solve Them)»

Karma as a Social Interaction Design Pattern in Websites

The principles of karma are understood worldwide. We all like to believe that the good deeds and actions we do will be returned to us in one way or another. At its core, karma encourages us to help others.

Most of us were introduced to systems that promote good behavior as early as elementary school. Kids who misbehaved would endure punishments such as restricted play times and detention, while those who excelled and conducted themselves properly received rewards and extra credit, even if it was simply a gold star sticker.

by Jason Gross
http://sixrevisions.com/user-interface/karma-design-pattern/

Karma as a Social Interaction Design Pattern in Websites

In consumerism, loyal patronage is rewarded at gas stations, airlines, grocery stores, and so forth through loyalty cards where customers receive special discounts and benefits once they collect enough points.

Karma as a Social Interaction Design Pattern in Websites

The Effectiveness of Karma Systems in Social Websites

Karma as a game mechanic works wonderfully in social systems. We see karma game mechanics in action most frequently for user contributions in sites like Reddit, Hacker News (HN), Stack Overflow, and Foursquare.

While each of these sites (along with the many more that have similar features) employ their own algorithms for determining a user’s karma standing, the general idea tends to be pretty consistent: Good actions (such as submitting good links or flagging link spam) increases your karma, while bad actions (like submitting spam or trolling) decreases karma.

In the social web, karma allows a community to self-regulate itself, which tremendously helps in scalability. For example, Reddit — one of the biggest websites in the world, garnering close to half a billion page views a month — is able to run with only 6 staff members, no doubt thanks to the help of the millions of people who use the site and the karma system Reddit has developed.

Continuar leyendo «Karma as a Social Interaction Design Pattern in Websites»

Client vs. Designer: Four Lessons to Win the Battle

Sometimes, the client/designer relationship is like an age-old matchup reminiscent of Ali vs. Frazier. Eagles vs. Cowboys. Yankees vs. Red Sox. Except in this game, the battle isn’t on the playing field — it’s in the boardroom, on the telephone, in an email. And this isn’t a game reliant on physical strength or technique; it’s about wits, expertise and political posturing. And unfortunately, there’s one team that wins 99% of the time. You guessed it: the client.

by Phil Edelstein, Chris Fernandez
http://sixrevisions.com/project-management/client-vs-designer-four-lessons-to-win-the-battle/

Continuar leyendo «Client vs. Designer: Four Lessons to Win the Battle»

Is Web Copy Ruining Your Design?

Integrating web copy and design can be a difficult feat when the designer and copywriter aren’t on the same page. Failure and disappointment often follow.

To ensure that web copy and design collectively attain optimal results, the designer and writer must have a shared understanding in at least four areas:

* Website’s purpose
* Website’s audience
* Brand’s characteristics
* Web requirements and constraints

Define the Website’s Purpose

Every website and web page should have a purpose. Amongst the most important questions a designer can ask a client is: «What is the objective of your website, and how does it support your business goals?» Surprisingly, many business owners aren’t sure.

With a bit of prodding, the designer can establish the website’s objective, which might entail, but not be limited to:

* Selling products online
* Producing leads
* Creating awareness
* Building a brand
* Attracting subscribers
* Establishing a community
* Generating feedback

What’s more, defining a website’s main objective helps shape the site’s primary call to action, which might be to get the visitor to subscribe to a newsletter, call or email, request a quote, download a demo, and so on. And when the design and copywriting are collectively geared toward getting users to take that action, the website will produce higher conversion rates and overall success.

by Rick Sloboda
http://sixrevisions.com/content-strategy/is-web-copy-ruining-your-design/

Integrating web copy and design can be a difficult feat when the designer and copywriter aren’t on the same page. Failure and disappointment often follow.

To ensure that web copy and design collectively attain optimal results, the designer and writer must have a shared understanding in at least four areas:

Website’s purpose
Website’s audience
Brand’s characteristics
Web requirements and constraints

Define the Website’s Purpose

With a bit of prodding, the designer can establish the website’s objective, which might entail, but not be limited to:

Selling products online
Producing leads
Creating awareness
Building a brand
Attracting subscribers
Establishing a community
Generating feedback

What’s more, defining a website’s main objective helps shape the site’s primary call to action, which might be to get the visitor to subscribe to a newsletter, call or email, request a quote, download a demo, and so on. And when the design and copywriting are collectively geared toward getting users to take that action, the website will produce higher conversion rates and overall success. Continuar leyendo «Is Web Copy Ruining Your Design?»

5 Practices Your Clients Will Love

If your business relationships are going to work, your clients have to like you. If they feel comfortable with you, you’ll be on solid ground; a good rapport reduces the likelihood that you’ll get into difficult client situations. When you invest in a relationship — any relationship — the value of that relationship increases and it becomes more likely to bear fruit. So, once you’ve found awesome clients who are fond of you and your work, go the extra mile to ensure their loyalty and esteem. Here are a few ideas to get you started.

by Maria Malidaki
http://sixrevisions.com/project-management/5-practices-your-clients-will-love/

If your business relationships are going to work, your clients have to like you. If they feel comfortable with you, you’ll be on solid ground; a good rapport reduces the likelihood that you’ll get into difficult client situations. When you invest in a relationship — any relationship — the value of that relationship increases and it becomes more likely to bear fruit. So, once you’ve found awesome clients who are fond of you and your work, go the extra mile to ensure their loyalty and esteem. Here are a few ideas to get you started.

Continuar leyendo «5 Practices Your Clients Will Love»

Is Good the Enemy of Great in Web Design?

The popular phrase «good is the enemy of great» echoes a cautionary advice for the inspired and hopeful. The phrase means settling for acceptable or «good enough» results will prevent you from achieving greatness.

This advice, by logic, does stand to be true–allowing our second best effort so that we can just get the job done by the end of the day will always leave us short of our true potential as web designers.

Instead, it would be ideal for us to give 100% every time we fire up Photoshop or lay down a new line of code. Being great–under the premise that good enough prevents us from being great–means never failing, never being wrong, never producing work that sucks or is mediocre, and always being afraid and cautious of what we do.

However, is striving for greatness on every pixel we touch always the best approach to becoming successful in this business? Is good always the enemy of great?

by Jason Gross
http://sixrevisions.com/web_design/is-good-the-enemy-of-great-in-web-design/

However, is striving for greatness on every pixel we touch always the best approach to becoming successful in this business? Is good always the enemy of great? Continuar leyendo «Is Good the Enemy of Great in Web Design?»

Web Developer’s Guide to Getting a Startup Up and Running

Despite the overall economic downturn, there seems to be yet another boom in web startups. In the ’90s, we saw the explosion of the Internet’s first big names, like eBay, Yahoo, Amazon, and others. In the 2000′s, social networking and the beginnings of web apps took off, planting MySpace, Facebook, and Flickr firmly on the map–the so-called Web 2.0.

But times have changed yet again, and we’re now in a new kind of web startup boom; one that is on a smaller scale, yet more prevalent due to more accessible development tools and cheaper infrastructures (powered by affordable cloud-based services such as Amazon S3). This is the app boom. The focus is on utility, cost-effectiveness, and highly targeted solutions to common problems. This can range from niche web apps to mobile device apps for iOS (iPhone, iPad, and iPod touch) and Android.

Today’s web startups are leveraging the technological and social advancements we’ve made over the past two decades, packaging them into useful tools meant to fit right into a person’s daily life.

by Brian Casel
http://sixrevisions.com/project-management/web-developers-guide-to-getting-a-startup-up-and-running/

A Web Developer's Guide to Getting a Startup Up and Running

JPEG 101: A Crash Course Guide on JPEG

Semantics and Disambiguation: JPEG vs. JFIF/Exif

Many people refer to any image format that uses the JPEG compression algorithm as a «JPEG file.» However, most image-capturing devices (such as a digital camera) and image-editing programs actually create a file in the JFIF or Exif format. For all intents and purposes, when people say «JPEG file» or when a software application says they’re saving your work in JPEG, you can just think of it as a file that uses the JPEG algorithm, whether it’s really JFIF or Exif.
Why Use JPEG?

JPEG allows you to control the degree of «lossiness» by adjusting compression parameters. This way, you can achieve very small files with just the minimum amount of quality that you really need.

The second important advantage of JPEG is that it stores full color information: 24 bits per pixel (that means 16 million colors). GIF, another image format widely used on the web, can only store 8 bits per pixel (256 colors). This capacity for storing colors is why JPEG compression is great for displaying images that have rich colors and that are photographic in quality.
JPEG Compression

Opposite to the PNG format (which uses a lossless compression algorithm), JPEG uses a lossy compression method.

Lossy compression reduces the image size by discarding information. Think of lossy compression as an excellent book summary of just the important and interesting parts of a book you’re reading. For example, you could summarize a book that’s long-winded and redundant in prose, to just a page worth of notes containing only the information that’s really important.

The problem, then, is when you want to recreate the original book from your one-page book summary; it wouldn’t be possible.

The other problem is that if you continue to summarize the book summary again, then you’ll lose more fidelity and accuracy from the original book.

With lossy compression, compressing an image again means losing more data, which means reduced image quality.

by Catalin Rosu
http://sixrevisions.com/graphics-design/jpeg-101-a-crash-course-guide-on-jpeg/

JPEG, a compression algorithm optimized for photographic images, is something we encounter on a regular basis. JPEG is not limited to a certain amount of color (unlike GIF, for example) and is popular due to its variable compression range, meaning that you’re able to more easily control the amount of compression, and consequently, the resultant image quality. In this guide, we will discuss the important things you need to know about JPEG.

Quick Overview of JPEG

Here is a list of things you should know about JPEG:

JPEG is a lossy compression algorithm; this means that it discards some data from an image to reduce its file size
JPEG is often pronounced as «jay peg»
JPEG is an acronym for Joint Photographic Experts Group, the organization that developed the JPEG format
.jpg and .jpeg are the most common file extensions of images compressed using JPEG compression algorithm; they are the same, but old DOS systems have a 3-character limit on file extensions — modern operating systems recognize both .jpg and .jpeg
Other file formats that use the JPEG compression algorithm are .jpe, .jfif and .jif Continuar leyendo «JPEG 101: A Crash Course Guide on JPEG»

10 Practical Ways to Bust Through Web Designer’s Block

As a web designer, is there any feeling worse than being creatively uninspired and not being able to complete or start your design projects? It’s frustrating, depressing, and costs us income.

Now imagine if there was a magical, surefire technique to make our creative block instantly disappear, giving us instant creativity and productivity.

That would be great, wouldn’t it? Well, too bad, because there’s no such thing. Designer’s block happens to all of us, and there’s no easy way out of it. However, if you feel you’re in a situation where you just feel unable to create, here are a few things you can try. [Más…]
1. Start from the Inside Out

Every serious web designer will tell you that you start out your layout with a nice grid and do a few wireframes to see how the text flows through the boxes and columns. Then you settle on a color scheme and a design theme, and work towards the smaller details from there.

In other words, we’re taught to start from the big picture and work our way down to the details.

But we all know things don’t always (or, should I say, never) work out this way. Staring at a dull and empty grid all day is not helping you move forward an inch. Instead of inspirational site content that can give us ideas on what themes would work well with a company, the only text the client gives us to work with is «Lorem ipsum dolor sit amet» they copy-pasted from this ubiquitous site.

Why not break all the rules and start inside out? Design something as small as a form button or a «read more» link. Don’t worry about colors; you can always change them later. Or pick a palette from kuler or COLOURlovers, and make something that looks nice; something that gives you a glimpse of the website that should go around it.

by Sacha Greif
http://sixrevisions.com/productivity/10-practical-ways-to-bust-through-web-designers-block/

As a web designer, is there any feeling worse than being creatively uninspired and not being able to complete or start your design projects? It’s frustrating, depressing, and costs us income.

Now imagine if there was a magical, surefire technique to make our creative block instantly disappear, giving us instant creativity and productivity.

100 Exceedingly Useful CSS Tips and Tricks

You can never have too much of a good thing–and two good things we rely on in our work are tips and tricks. Nuggets of information, presented clearly and succinctly, help us build solutions and learn best practices. In a previous article, we shared a jam-packed list of 250 quick web design tips. It seems only right to continue the trend by showcasing 100 fresh–and hopefully useful–CSS tips and tricks.

by Alexander Dawson
http://sixrevisions.com/css/100-exceedingly-useful-css-tips-and-tricks/

You can never have too much of a good thing–and two good things we rely on in our work are tips and tricks. Nuggets of information, presented clearly and succinctly, help us build solutions and learn best practices. In a previous article, we shared a jam-packed list of 250 quick web design tips. It seems only right to continue the trend by showcasing 100 fresh–and hopefully useful–CSS tips and tricks.

Continuar leyendo «100 Exceedingly Useful CSS Tips and Tricks»

Fat Free Web Design

For web designers, coming across an awesome WordPress or jQuery plugin can be a lot like opening up an awesome gift on Christmas morning. But once that initial burst of joy wears off, we realize that we may not need this junk at all; it’s just a burden and another thing we need to deal with. [Más…]
Skiny Beginnings

Of course, the web has not always had the luxury of such excess feature bloat. In its early days, the web was no place for unnecessary applications and fat feature sets; and even if you wanted them, there was no technology available to implement them with. Back then, designers had to show a healthy respect for page size and consideration for a user’s connection speed (56k modems + 1MB animated GIF = forget about it). Even image compression was not as advanced, and that encouraged even more caution in the number of images displayed on a page. These restrictions were not always a bad thing; if a designer is forced to limit the number of images they place on a page, they are naturally limited to choosing only images and page elements that are relevant and necessary.

As IT advanced and networked infrastructures got bigger, web pages got fatter. Images, audio and video are commonplace in websites. Bandwidth is hardly a concern anymore, at least when we’re not dealing with mobile designs.

In addition, the web has become substantially more interactive and dynamic, which increases the number of opportunities for richer and more interactive features a website can have. The entry level for using and implementing these whiz-bang features have been lowered with tools such as jQuery, MooTools and WordPress that cut down the required skills someone has to have in order to create awesome stuff.

All of this functionality and multimedia is a dream come true for designers; but too much of anything, just like junk food, is a bad thing.

More and more, we see websites getting liberal with their implementations of plugins; websites that get slower and slower because of too much junk that no one needs; websites that become a burden to use because there’s just too much fat.
Getting Health Conscious

The capabilities of the web have, without a doubt, shifted significantly. The Web Designer mindset needs to make equally significant shifts. It is imperative that we move from an outlook of wants, to one of needs. We can no longer afford to want that real-time Twitter feed, that large header graphic, or that (oh, please stop this already) Flash menu. Sure, many of these site features can enhance the user experience, but just as likely, there are web designers who are packing on pounds of weight on their web pages with irrelevant junk.

Of course, web designers are not the only ones to blame, or even the ones that are truly responsible for fat and bloated web designs. Clients can go crazy when they learn about all of the things their site is capable of. They can be just as guilty of being caught up in the fun of it all and wanting features to be implemented when there is no justification for doing so.

Getting Health Conscious

As a web designer, it is your job to be the health coach. Be sure that things you’re made to create have a purpose.

We need to start thinking about information overload and a healthy site focus. Functionality must marry happily with purpose, and if a site feature does not have a clear purpose that matches closely with that of the overall site, then it shouldn’t be there.
Expanding Mediums

Web-based, internet-enabled interfaces surround our lives, whether we are ready for them or not. Internet connectivity is growing at a faster and faster rate. The web is in more pockets and at the end of more fingertips than ever, and the sites we design are right there along with it all.

So, now, our worries are shifting from download speeds and bandwidth restrictions, to screen sizes and more diverse resolutions. This demand for flexible and responsive designs has revealed the gluttony in the design community.
Our Dirty Secret

In a desperate attempt to deploy a site onto small-sized screens like mobile devices and netbooks, designers often find themselves stripping out page elements such as images and interactive features. Stock photography, Twitter feeds and other social networking tools, Flash objects, and other supporting multimedia rarely find their way onto a mobile website.

So, then, if we can remove these things to deliver a better user experience on small screens to the user browsing our site outside of the desktop or laptop, why are they needed for the desktop/laptop version?

Finding out that you have unneeded junk — excess fat — in your web design after you need to strip it down to fit a new medium is the wrong way to go. It’s time for web designers to move away from all of the wants and focus on the needs of a website.

by Jason Gross
http://sixrevisions.com/web_design/fat-free-web-design/

Everybody loves to have a little more. We want a little more money, a little more free time or maybe a little more chocolate on our ice cream. Living a life of excess is a great way to flaunt your achievements and to show everyone just how much awesome you are.

But this big-pimpin’ philosophy does not translate well in web design. Extravagant websites become a sloppy usability nightmare. Chunky websites that have too many things going are clogging up the arteries of the web. It’s time for some exercise.