A flat icon set for OS X | Hacker News Reader

A flat icon set for OS X

flaticns.com

110 pointstinalatif56 comments

Philosophically or practically: What's the justification for nearly everyone switching to flat design? Is there any articulable reason it's "better" than the rich, three-dimensional style[1] that was previously popular? Or is it just an arbitrary trend?

Some say the change is driven by high-DPI displays. I disagree. I don't see any intrinsic reason that flat designs look better than rich, three-dimensional designs on a high-DPI display. Without a doubt, flat can look nice, but so can things like this:

http://www.sequelpro.com/blog/wp-content/uploads/2013/01/seq...

Another justification I've heard is that it's a reaction to the excesses of the previous trend. People often point to the leather motif in certain Apple applications as an example of such excess. But first of all, those examples are outliers; few designs actually went that far. Second, the existence of a questionable use of a given style is not an effective argument against that style in general. Third, "some things were extremely 3d, so now we'll be extremely flat" seems like contrarianism for contrarianism's sake.

[1] Some call this skeuomorphism. I tend not to, because the term technically means something narrower than what we're talking about: http://en.wikipedia.org/wiki/Skeuomorph

Microsoft went that way in Windows Phone; everyone else grudgingly felt it was more pleasant.

Well it's a trend, and these don't always have rules, other than people follow them.

Here are a few theories: is it's a refinement of the icon concept, taking it to a higher level of abstraction.

Possibly the reduced visual noise has a greater aesthetic appeal.

Lastly I think the simplification makes it easier to see at a glance what the icon represents.

I think 'flat design' is really just an example of minimalist design (which has been around for ages) applied to graphical elements. With many things, especially apps/websites, minimalist design often ends up being a good experience for users because it's not distracting, but that's not to say that you can't have great UX without a minimalist design.

For me, I like flat design (to an extent) because it gives the product a more uniform look and feel, but sometimes it can be overdone and I find myself wishing there were an illusion of depth to guide me.

> With many things... minimalist design often ends up being a good experience for users because it's not distracting...

As long as too many cues aren't discarded (iOS 7 went a bit overboard in this regard) I completely agree; shiny or complicated visual elements with "pop" demo well at first but become tiresome.

It's the same reason our keyboards don't make musical tones like they did in Star Trek -- it would quickly become distracting and annoying.

I've always hated that Sequel Pro logo, old one was much better.

Which one is your favorite? Googling turned up several.

Gradients and juicy-fruit graphics are like candy -- they provide an instant and strong positive feeling, but they don't age well. If you had to eat nothing but candy, you'd hate the sugar-coated morass your mouth had become. In general, a flat icon tends to age better and reduce "eye exhaustion" (not a physiological thing, but a psychological one). Note that this applies mostly just to icons; the entire UI is not so tightly bound by these rules.

However, design is also trend-oriented, and flat is a rising trend.

> but they don't age well...In general, a flat icon tends to age better and reduce "eye exhaustion"

Two thoughts on that:

1) Is that just an opinion? (If so, there's obviously nothing wrong with that.) Or is there some objective evidence?

2) How well do icons need to age? Realistically, how many icons in the wild will go 5+ years without a design refresh?

Frankly, I don't care about the look of the icons (these should be theme-able anyway), but I do care a lot about the actual application user interface, and for this, flat design is a step back into the 80's.

Flat design is good as long as there are no important visual cues lost what elements can be interacted with and which are just passively displaying information. I really do still have problems in iOS7 to separate passive text elements from interactive text elements (formerly called "buttons"). Examples are the contacts list or the famous shift-button of the onscreen keyboard.

Thankfully in OSX 10.10, buttons are still recognizable as buttons, and I like that less radical flatness much more then iOS7. Although, in the current state the UI looks a lot like a Gnome skin which tries to mimic OSX though, I hope that improves until release.

It's not a jump back to the 80s exactly. For example, here is an old NT screenshot: http://upload.wikimedia.org/wikipedia/en/c/ca/Windows_NT_3.1...

A lot of it is flat, but they use simple bevels for buttons and other clickable elements, and its reuse on, for example, the buttons in the file manager window, looks tacky because it appears cluttered and overused. Also, excessive lines (e.g. for the window borders), high contrast colors, and small color pallet makes the overall appearance not nice to look at. Also the icon set suuuuucked.

The Windows 3.x UI was always ugly and didn't make any sense ;) But that's the 90's, I'm talking about the 80's.

For instance: AmigaOS 1.3 (notice in the bottom-most screenshot how the buttons don't have '3D edges':

http://toastytech.com/guis/amiga1.html

'3D' UI elements were introduced later in AmigaOS2.0, and I remember how the user interface style guide made a big fuzz about how UI elements that appear raised are supposed to be clickable while flat or recessed elements shall be used for non-interactive or disabled UI elements which cannot be interacted with.

Actually this site is a pretty awesome collection of operating system UIs. BeOS still looks nice, almost like retro-modern pixel-art.

Everyone knows the early 90s was part of the 80s!

Older UIs like the Amiga OS one suffered from an even more limited pallet, and even worse typography.

I used BeOS as my main OS for a while and really liked it - it was very snappy and felt more "homey" (that is, more like classic MacOS) than early OSX versions did. (The browser, NetPositive, was absolutely awful though).

Let's take a balanced view from each side:

pro-3d / anti-flat: details made possible by volume add to the icon's rich design, making its personality stand out, while flat icons results in boring, uniform design in comparison.

pro-flat / anti-3d: the apparent uniformity makes even slight nuances readily apparent and efficient to parse, making each icon stand out against other flat icons, while 3d icons are full of complex and distracting artifacts.

Bottom line: don't mix both, as the result is that 3d crushes flat with its rich details while flat makes 3d look needlessly busy and noisy. Consistency is key to reducing cognitive friction.

Flat design is successful because it's a system that allows unskilled designers to produce acceptable results.

It's a fad. Apple came out with it 'first', making it automatically used among millions of people, then designers followed with other software packages and apps.

"an intense and widely shared enthusiasm for something ..."

Yes.

"... esp. one that is short-lived and without basis in the object's qualities"

No. I explained why.

Also, Apple did not do it first. Google, for one, launched "flat" redesigns prior to iOS7.

Even if we're only counting recent times, Apple did not come out with it first, they followed Windows 8?

Yep, but that's how it works. A year ago, people were complaining that Apple sucks because iOS was still using skeuomorphs instead of flat design like Android and Windows 8. Now they've switched their style, and they suck because they invented flat design and everyone is just copying them.

Since the Aqua look came out in OS X, there have been a lot of imitations used on webpages, knock-off UIs, etc. which tended to look terrible, in part because it's hard to do them tastefully. At least flat UIs are harder to mess up.

Personally, I really liked the modified Platinum UI from MacOS X DR2 code named Rhapsody, though it could have used some polish: http://www.guidebookgallery.org/screenshots/rhapsodydr2

> I really liked the modified Platinum UI from MacOS X DR2 code named Rhapsody, though it could have used some polish

Interesting. I feel like the current OS X UI is just that: Rhapsody with a lot of polish. The core concept seems to be the same.

I may be in the minority, but these feel really boring and dull to me. I think there is a way to have a "flat" icon while still providing some depth to them.

I've also seen dozens and dozens of flat icon sets for Android that basically have this same exact look. Just go to XDA or the Play Store and search "flat icons", I'm sure you'll find a bunch that have a mix of these designs.

I think one of the main issues for me is the lack of saturation... the color palette is a little pastel.

Everything looks like it is covered in a thick layer of dust.

Looking at these icons makes me want to lick my finger and swish across my screen to remove the dust from those.

One issue I have with many of the flat designs I see posted online is that they're so simplistic and desaturated that they look like cheap, generic clip art. OS X Yosemite's system icons retain appropriate bevels and shadows for distinction and look even better than their iOS 7 counterparts.

I like these, but they seem a bit fuzzy to my non retina macbook display. Particularly the music and calendar app icons just seem overly aliased. Can anyone else confirm?

Moving the window between my rMBP and 27" Cinema Display I can see the fuzzyness too

They appear to be fuzzy on mine as well. Looks like they were designed for non-retina screens which is a shame.

They were designed on a retina screen but I'm not sure why that's happening. I'll have a look and see what I can do!

I disabled the width property (width: 12.5%) for the .icon class and the icons look crisp now.

Thanks for looking into this!

Seem a little washed out as well.

Did you actually install them? I don't have a mac at work to try them out on, but when I downloaded the zip file it contained large crisp pngs. Maybe they just look fuzzy in the web page preview?

The preview looks fuzzy, because they look like they have a slightly lighter outline, which is some way to do anti-aliasing. The PNGs in the download archive don't have these outlines.

Icon sets suck. They aim for system-wide consistency, but can never achieve it, because there are N+1 icons to be replaced. They focus too much on any given design pattern (flat, round squares, dark, etc.), and forget the basics: icons should represent the program, they should be memorable. The only sensible use case for an icon set I can think of is a graphic designer who wants to practice.

With you until the last sentence. How about icon sets for those who are colour blind? Whilst I'm sure you could, to some extent, automatically convert, I'm also sure there are nuances that only a human designer could cater for. Also, how about different sets for different nationalities/cultures between whom analogies can vary greatly.

It would be nice to solve the N+1 problem with a semantic hierarchy providing fallbacks, particularly in the case when only one application within a specific group is installed.

I do not understand this trend of 'flat design'. It looks horrible. It started with Apple and the other copied it. Now microsoft has it, google started implementing it, samsung as well. It looks horrible.

Well. Microsoft had it first with Windows Phone 7 and Windows 8. But yes it is now everywhere. Latest KDE Plasma release is flat too and other DEs will soon follow suit.

Seems like you can't change the calendar icon. The calendar ICNS is used for the first time after cache reset, but once calendar opens, it uses its own embedded empty calendar icon and fills in the date. Any way for liteicon to change that blank calendar? I noticed you provided the blank calendar icns. I suppose I could open up Calendar and replace it to try it out.

Oops, good call, calendar has to be done manually a little bit differently. I forgot to add instructions for that - I'll do it tonight

Along the same vein: http://appicns.com

Those are too abstracted, it's hard to figure out what they are icons for. For instance, the Adobe suite icons are impossible to decipher.

They are good but I think according to the apple design philosophy the icons are supposed to be in the shape of squares right?

I like these more because they aren't square. Thanks

Thanks for releasing these. I am changing over now! Hoping my dock and icons flow better.

Here is my new dock: http://imgur.com/2vEM5Yv

Why the down vote?

1. You complained about the downvote.

2. Image is low-resolution.

so I got downvoted for taking a picture of my exact dock, exact size? So I should have made my dock way larger and posted a better quality picture?

All I was doing was telling the author that I liked what she did and showing that I did indeed take time to implement it.

For what it's worth, I appreciate it :)

If you want to implement minimalist design, you might as well go the full nine yards and use no more than 2-3 (properly contrasting) colors. This is middle-of-the-road and frankly evokes neither elegance nor brilliance.

To elaborate on why the above may be interpreted as harsh, by limiting the ingredients at your disposal to flat colors and simple shapes, you run the risk of amplifying the severity of any mistakes in their selection. The less visual information that get presented, the more the visual units come under closer scrutiny.

Windows 3.11 HD

As much of a huge step back in UX that would be, part of me would get a chuckle out of seeing this...

Mac isn't bad in the historic flat design department either: https://twitter.com/JonyIveParody/status/486510620276441088/...

I like them.. They might just get used if OS X goes flat..

Nice job! Just missing a Facebook icon for my Facebook SSB.

Coming up soon!

I don't like the firefox one.

Reply on news.ycombinator.com