The most popular design contest ever held on SitePoint -- to design the logo for the next evolution of SitePoint's Design Contests, 99designs -- has come to a close, and a winner has been announced! In what was by far the largest contest to date in terms of both entrants and designs submitted
Last week, in the first part of this series on the fundamentals of logo design, we looked at some of the qualities that a good logo should have. When you’re getting started with logo design it can be helpful to think about the categories that logos fall into. These are: Typographic Type &
The new standard logo for the American Super Bowl XLV was unveiled today by the NFL and there's a buzz on Twitter and some design blogs about it, although not very many images. There has been a new logo every year for the Superbowl but starting with the 2011 Super Bowl, the logo will basically
announced that their new logo store is now open for business. There are currently around 4,000 logos in the store by some of 99designs' best designers, and I'm sure there are many more to follow. The price is set at $99 for the non-exclusive rights, with an extra $199 securing exclusivity
The London 2012 Olympic Committee logo. Released last week to critical acclaim (lighter on the 'acclaim', heavier on the 'critical'), so far it's been variously described as 'a dodgy set of legwarmers', 'a pink day-glo pig's abortion of a logo' and 'Lisa Simpson performing an obscene act'. Doesn't
This week there has been a big buzz on Twitter about the U.S. Missile Defence Agency logo. The logo was designed by TMP Government, an agency dedicated to designing programs exclusively for government and contractors. Here’s the logo: Another day, another logo. So what’s the fuss about
- Yahoo! launches surprisingly reasonably priced web hosting for small and medium sized businesses. Unlimited storage and bandwidth for $11.95 per month. Gallery: How Google Got Its Colorful Logo - The various iterations that the designer of Google's logo went through before settling
About five years ago there was a glorious but bloodthirsty revolution in web design — and like all revolutions, there were winners and losers.[caption id="attachment_116228" align="alignright" width="380"] Losers and winners[/caption]
The losers were bevelled edges, faux stitched borders, glossy reflections and drop shadows.
The winner was ‘flat design’.
Microsoft got the flat ball rolling with Metro and then successive version of Android and IOS got flatter and visually simpler. Eventually, Material Design distilled it all down into a cohesive theory.
And on the whole, we’re all much better off for it. Graphics files are lighter and faster, and UI’s are simpler and less cluttered. But you could argue there is a certain clinical ‘samey-ness’ to a lot of design 2015.
So, it’s always nice to have methods to give design projects (logos, illustrations, UIs, etc) some warmth and without piling on tonnes of extra visual clutter?
Grab your Retro SpectaclesPrint is a technology that has been constantly refined for over 400 years as paper, inks and machinery have improved. The fidelity of high-end print today is incredible. Funny thing is, we still seemed to be charmed of many of the little failings of those original, low-tech print methods. The kind of throwaway design we've all seen on soup tins, old newspapers and train station walls.
Say Hello to Mr. Retro[caption id="attachment_116229" align="alignright" width="380"] Mr Retro's Permanent Press filters[/caption]
Photoshop Plugin maker Mr Retro has made a living out of riffing on old print styles with their Permanent Press set of filters. Each filter mimics some of the natural, grungy imperfections of classic printing press work.
These imperfections include:
- Paper grain
- Chunky halftone dots
- Plate misalignments
- Ink overlap & bleed
These filters are all very configurable and can add a surprising amount of warmth to a flat-color designs without necessarily adding a lot more clutter — especially if used sparingly.
However, at $99 they aren’t cheap. But there are other less expensive ways to squeeze some of the flatness out of a design.
Halftones in Adobe Illustrator[caption id="attachment_116233" align="aligncenter" width="800"] Illustration: The Future of the Hamburger Menu Icon?[/caption]
This is an illustration I did for an article called ‘Are users ready for the desktop hamburger icon?’ I wanted to keep the image simple but felt it was a touch clinical.
As big coffee drinkers at SitePoint, we also churn through a crate of milk each week. Recently the milk company we use rebranded. Here's the new label. If it is possible for a brain to 'wince', mine did when I saw this. In fact, my brain still winces every time I see this milk bottle. There's no question that 'Green Pastures' is a perfectly respectable name for any dairy product. The phrase conjures visions of peaceful, contented cows grazing lazily in lush fields. High-fives on the naming workshop, guys! However, how they settled on the idea of using a dry, dusty brown to portray their 'green pastures' label – the color of droughts, deserts and sun-baked clay – is one of life's great mysteries. It's great to be brave in design, but you need to be careful you aren't undermining your message. While some people feel the sensation more acutely than others, most of us feel some sense of mental discomfort when we notice oddities like this. Psychologists call this discomfort 'cognitive dissonance' – an idea that was first described by Leon Festinger. Festinger theorized that when people encounter it they will usually:
- Try to remove or resolve the discomfort
- Avoid that discomfort in future
Don't Dis' DissonanceDoes this doesn't mean that you should always avoid cognitive dissonance at all costs? No. In fact, the entire mechanic of games like Farmville, Sim City and even ol' school Mouse Trap board game is built around using your own discomfort to draw you deeper into the game. You invest some time and then have a choice. To do nothing and gradually lose what you have. Or invest more time, protect what you have and obtain more - even if the 'more' you obtain is of no tangible value. After all, you reason, it would be crazy to let those virtual eggplants just wither on the vine because you didn't harvest them in time, right? After all those hours you've spent... Providing ways for casual gamers to soothe their 'pyschic discomfort' is how Zynga was to able to rake in tens of millions of dollars a day in 2010-11. They didn't even need to offer things like interesting gameplay, hand-eye co-ordination challenges or even fun. In truth, not many people ever talked about loving the experience of playing Farmville – they just preferred it over what happens when they stop playing and their farm dies. So, it turns out that if you harness it correctly, cognitive dissonance can be a really useful force to move and motivate people who are already engaged in your site, app, game, etc. But it can be much more damaging if it emerges during the introduction of your product/service. At that time the easiest way to soothe their discomfort is to choose another milk company. Dissonance is a dark and powerful force. Use it wisely.
or engage with you? Consumers today are spoilt for choice. If your clients can't describe in a sentence or two what their USP is, steer them over to this explanation over at Kissmetrics and help them define theirs. 5. Is there a unique story behind your business or business name or logo
We all know the feeling: just as you feel like you've finally achieved 'ninja-level' mastery with some great web technique... it's time to switch to something new and better.
It has certainly happened to me many times, and it happened again recently with icons. After a long period where icon fonts seemed the natural, best-practice solution, SVG (and its increasing browser support) has introduced some useful innovations that may have changed the rules of the game.
Choosing any technique is a task that involves weighing up many topics. When we deal with icons we need to consider:
- Accessibility: are there some issues with text-only browsers or screen readers?
- Semantic meaning: an icon is a glyph used to represent something else (this the simplest definition of this concept I've found; it comes from the Semantic-UI framework docs), so, are we creating a useful relationship between signs and the things to which they refer?
- Browser compatibility: do we need to ensure a large browser compatibility?
- HTTP issues: does our icon system unnecessarily tax our server (HTTP requests) and contribute to longer page load times? Can icon files be cached?
- CSS styling & animation: can we arrange and animate our icons using CSS?
So, what is the best choice now? Should we try to get by with icon fonts – or it is time to turn to SVG?
A Brief History
I realized that when we talk about icons, it's easy to take for granted some topics which we have been dealing with in the past. They can help us to better frame the debate, but not everyone knows them. So, I've put together a very brief 'history of icons techniques in web authoring' to help clarify the debate. (If you feel you're ok with the history part, jump ahead).
Back in the mid-90's – a time when browsers had little to no CSS support – icons were managed with the classic
<img>tag. This technique brought with it a lot of accessibility and semantic issues. Furthermore, pages that used lots of icons had to fire off a barrage of performance-crushing HTTP requests: one for each icon in the page.
And if you intended to introduce a
Happily, things got significantly better with CSS Sprites (or Image Sprites). This technique consists in arranging all icons in a single, unique file (typically GIF or PNG) to be loaded as a CSS background image. The needed portion of the image can be shown by adjusting the
background-positionproperty, as in the scheme below (I've also made a pen, if you want to see a running example):
This technique is still used by many huge sites like Youtube and Google and it solved a lot of problems:
- Only one image file is required, regardless of how many icons you have (including
:hovereffects), so HTTP requests can be significantly reduced.
- Many accessibility (and semantic) issues are resolved, since background images and CSS pseudo elements are invisible to text browser or screen reader (while images are content).
I've prepared a little test that creates two lists: one with sprite icons and one using
<img>tags. On the left side of the image below, you can see how the two lists are close to identical (except that the second one required much more code).
The right side is a screenshot of the same lists rendered with Lynx viewer (a web emulator of the text-only web browser Lynx) and it can give you some idea of how your web page may appear using assistive technologies (though A.T. output can vary widely).
You can see that the second list containing the images
alttexts (green highlighted), which in this case are perfectly useless, since they confuse the content rather than adding meaning to it. True, we can avoid this by using empty
altattributes (as in the last two items), but we are still have content elements (the images) being used as presentational attributes.
[caption id="attachment_112855" align="aligncenter" width="780"] Lynx Text Browser[/caption]
Of course, there are many cases which require meaningful icons, and the above CSS sprites example doesn't represent the best solution. We'll come back to this topic later.
Although they represented a big step forward, CSS sprites are bitmap images. As such, if you need to represent the same glyph in different colors or resolutions, you need a different images for each version.
This problem was resolved by font icons: since fonts are vectors, they are resolution independent and can be easily colored through CSS.
The most common way to apply icon fonts to a page is through a pseudo element – just like we did with CSS sprites. Unfortunately this doesn't resolve the issue of meaningful icons, since this technique still leaves them invisible to screen readers.
Let's look at the example below (using Erik Flowers's Weather Icons):
The first part of the screenshot represents a common icon implementation (using a pseudo element). In this case the icon is part of the content and has a very specific meaning. Unfortunately Lynx can't see the icon, producing a nonsense sentence. You can see the result in the second part of the image.
Luckily there is an easy workaround for this issue: you can add a description inside the icon element (in this case an
<i>tag). The description is wrapped inside a
<span>that is styled to make its content invisible to browsers (it has usually a big
text-indentvalue), but not to screen readers, that don't take care about this tricks:
The icon <i class="wi wi-umbrella"> <span class="sr-only">"umbrella"</span> </i> means that it's raining
Now, a screenreader can make sense of this as a meaningful sentence:
Co. by Strategy Design & Advertising Reverie Creative logo by ∞ Ines ∞ Encens website by Julary Nguyen (via Behance) Run Wild Photography logo by S A V Holli Thompson business cards (via Viewers Like You) Olvi Cider by Bond (via BP&O) Website
Of the thousands of icons you can find online, social network icons would have to be among the most numerous.
This is hardly surprising, considering the amount of time people dedicate to social sites and the rewards they offer when your users share your content to these networks. Because of this, you can only benefit, if you add social icons on your site or on the sites you design for clients.
In the previous article in the series, I focused entirely on flat icons. However I found so many attractive 'non-flat' social icons I decided to broaden my criteria with this piece.
There is also no doubt that vector icons are more useful because of all the flexibility they offer – and the rise of SVG adoption – and I set out to avoid raster icons all together. Again, I felt this would have been unfair as it would have excluded some of the finest examples in the category. And raster icons are still widely in use and this will hardly change in the near future.
And now, here is my shortlist of hand-picked free social icons:
1. Free Social PNG Buttons
I feel a little guilty starting the list with a raster icon set but these free social PNG buttons are so pretty that they deserve the first place. The set includes 20 png icons of the popular social (and some other) sites, such as Facebook, Google, Google Plus, Gowalla, Vimeo, YouTube, etc. The buttons are free to use in both personal and commercial projects and they do not require attribution.
2. Circle Social Icons
This is another free raster pack of social icons. What makes them special is that they are circle social icons and that there are 270+ icons in the pack. The icons come in multiple sizes, such as 512x512, 256x256, 128x128, 64x64, and 48x48. For just $5 you can download the PSD files, which gives you more options to modify the icons as you need.
In addition to icons for the really popular social sites, such as Facebook, Pinterest, Google Plus, etc., here you will find icons of many social sites you might have not even heard about.
3. 85 Flat Minimalistic Vector Social Icons
Finally we get to a quality vector pack of social icons for you to enjoy.
This pack contains 85 flat minimalistic icons in vector and png format. To be precise, there are 340 icons because each of the 85 original ones comes in 4 styles – square, knock-out square, circle, and knock-out circle. The pack has been recently updated, so it contains icons of all the social sites that are popular right now.
4. 3D Vector Social Icons
Here is one more vector icon pack but this time it's a 3D vector pack. The icons are really nice but unlike some of the other packs that come with hundreds of icons, this one has only 10 icons - of the really important social sites only. In addition to the AI files that give you freedom to tweak the icons as you like, the pack contains a 256x256 PNG version as well you can use right away.
5. Black and White Flat Social Icons
Most of the packs so far were colorful ones but if you don't need all these colors, here is a black and white pack of flat social icons. The icons are very basic with no frills but there are 700+ of them. Each of the popular social sites has multiple icon variations. Additionally, since it's a vector pack (in SVG and EPS formats), you can not only add color, gradients, or any other effect to the icons but you can also add more detail, if necessary.
6. 15 Colorful Flat Vector Social Icons
Let's continue with some more flat icons. This pack contains only 15 icons but they have some cool effects, such as long shadows (very typical for flat design) you can't find elsewhere. The icons might not be numerous but they cover the essential social sites. What is more, on the same page there are 35 more flat social icons. The icons are free to download and use but in order to get the download link subscription required .
7. Circle Vector Social Icons
In case you need more circle social vector icons, you might want to check this pack. The pack is kind of old so it contains some icons of sites that are not that popular now (such as Digg) and lacks icons of newcomers that took the social scene by storm, such as Pinterest but aside from this, it's a good pack. There are only 12 icons in the pack but they are nice and clean ones. There is a free and paid version, so you'd better check what's included in each one before you proceed to download and use.
8. Flat Vintage Social Media Icons
Social media might be a new concept but if you are into vintage design, then you will probably appreciate this pack of flat vintage social media icons. There are 32 icons of the most popular social sites, such as Behance, Blogger, Pinterest, Instagram, Facebook, WordPress, etc. in ICO, ICNS, and PNG formats in multiple sizes.
We all love Dribbble, but lots of designers overlook the power of the Behance Network. Daniel looks at some of the neat tricks this quiet achiever can deliver.
Earlier in the year we looked at some handy, 'pre-fab' icons that were ready to plug straight into your mockups, prototypes and projects. But, being a designer, I know what it's like – sooner or later you need to generate your own.
While it's perfectly possible to use Photoshop or any other full-blown graphics software to create/edit icons, specialized editors can be helpful when it comes to focussing on a specialized task like icon design.
There are dozens of both free and paid icon editors out there, both web-based and desktop. Some offer very limited, task-focussed functionality and are perfect for small quick fixes. Other editors with a wider set of tools and they give you the freedom to author your icons exactly as you want them.It's also worth noting that icon editors tend to fall into two categories: a). Editors for producing favicons, Apple Touch icons (iOS) and app icons (PNGs and ICO files) b). Icons for use in app and website UIs.
Let's start with the web-based editors. As a general rule they don't offer as much functionality as their desktop counterparts, but execute their core task efficiently. Icons tend to be small files, so they're well-suited for manipulation within a browser.
If you are looking for more advanced features, or perhaps larger, more complex icon sets, check the desktop apps for your OS.
1. X-Icon Editor
The first free icon editor we will look at is the web-based X-Icon editor. It runs in any browser above IE9 and it allows to create favicons for branding your browser address bar.
You can create icons in 4 sizes – 16x16, 24x24, 32x32, and 64x64. The tools it offers include standard ones, such as Brush, Pencil, Eyedropper, Line, Circle, Text tool, etc.
You can start with a blank canvas or import a jpg, gif, bmp, png, or an ico file, crop it as necessary and have your fav icon created in no time at all. X-Icon Editor doesn't offer much but it's fine if you want to create a nice fav icon in seconds.
2. Free Icon Maker
Free Icon Maker is another web-based editor. It has more functionality than X-Icon Editor but still it's not Photoshop. You can use it to modify an existing icon, or start a new one from scratch.
If you want, you can use the numerous icons and presets they provide for free. You can also import from your own SVG files. When you are done, you can download the whole bundle of PNG icons to your drive.
The editor is absolutely free to use (though the Try It For Free note on the homepage made me think they have a free trial only) but for most operations – i.e. upload and download of the created icons you need to register.
3. Junior Icon Editor
In comparison to the more limited choice of web-based icon editors, there are many more desktop ones, particularly for Windows. One of the best I've found is Junior Icon Editor, previously known as Free Icon Editor. This application is not only free but available across multiple platforms, such as Windows 8, 7, Vista, XP, 2003, 2000, ME, 98, 95, NT, iOS, Linux, Android, web and others.
Junior Icon Editor might have echoes of Paint but it is created especially with icons in mind. It works with multiple icon formats, such as ICO, PNG, XPM, XBM and ICPR. You can create not only standard-size icons but you can go with any custom size you need.
The color depths of the icons are up to 32-bit True Color with 8-bit alpha channel.
The tools that come with the program are really numerous. Some of the tools you fill find are a pencil, brush, flood fill, text tool, spray can, color replacer, color selector, line tool, rectangle, curve and ellipse.
4. IcoFX Portable
IcoFX is another free icon editor you might want to consider. It has a free and a paid version.
IcoFX works with Windows XP, Windows Vista, Windows 7 and Macintosh icons. This application has really a lot of features, such as the ability to convert Windows to Mac icons and vice versa, custom effects and filters, batch processing, icon manipulation inside exe files, etc. I am not sure all these options are available in the free version but even if some of them are not, it still offers more than most free editors. This is a mini Photoshop for icons.
Using vector graphics as navigation icons has always made perfect sense. But it seemed to be the arrival of the retina screen (2011-ish) that really lit a rocket under the idea. Almost overnight icons that had looked fine on standard screens suddenly looked like they'd been brutally hacked from an old newspaper with rusty pocketknife. The minor niggles we might have had with scalable vectors suddenly seemed well worth tackling. At the time – as the case is today – there were two ways to deliver vectors to browser and each had their pros and cons.
Web fonts vs. SVGAlthough both technologies had been around for a long time, web fonts seemed to grab the early lead. Many of us were already comfortable working with fonts, and there's no doubt that plug-n-play solutions like FontAwesome made getting started that much easier. But things have been changing over the past year or so. While people are beginning to appreciate the power and flexibility of SVG, some of the 'gotchas' attached to icon fonts have become more apparent. These include:
- an arcane patchwork of font-face support (and bugs)
- positioning limitations (CSS line-height, vertical-align etc)
- font file re-authoring overheads
- a lack of tonal/color options
Why Are Icon Fonts and Dyslexia a Bad Mix?Font choice has a huge bearing on readability for dyslexic users. Ironically, for all the disdain that Comic Sans has attracted over the years, it's often cited as one of the most readable typefaces for dyslexic users. This has meant that it's very common practice for dyslexic readers to override the default font on a site with their own more readable font - perhaps something like OpenDyslexic. And this is where we hit problems. To speed things up, font icons are generally bundled into a single site-wide font that also contains the alphanumeric characters. The icons are placed in an undesignated 'private' section of the font. When a user overrides this font, they replace the alphanumeric characters but there are no replacements for these custom icons. We get left with big, ugly, unhelpful empty boxes instead.
As designers, it's easy to forget that not everyone is able to easily convert/resize logos with a blink of the eye. Having to bother your designer for access to your own logo assets is an irritation for most clients – not to mention that they'll probably be invoiced for the privilege. It can
contexts. The two main tracks were sponsored by two companies: Intercom and Reversing Labs, and while each had a sponsored talk slot, neither disappointed. The two tracks were also identified by their sponsors’ logo, so visitors could easily redirect themselves into the appropriate hall. Day 1
modifies something in the Library (changing a logo from blue to red, for example), it’s automatically updated for everyone else who has access to that library. If team members are working together on a project, they can share those files. This keeps from having to use third-party software or large
a flat surface, such as a wall or a block of color, where you can place text in a contrasting color. Notice in the sample image, the girl is off to the left of the image, giving you plenty of room for text, graphics, a logo, and anything else you might need to place in the available space. 4. Contrast