Jun 03

A new icon for Markup Validator S.A.C.?

2009 at 06.33 pm posted by Veerle Pieters

Not sure about you other Mac users, but I only allow slick looking application icons in my Dock. Of course once the application launches it sits there. Call me fanatic, but every time I launch Markup Validator S.A.C. it itches to turn on hiding for the time I need it and then turn hiding off once the application is closed again…

The current icon

imageI hear you thinking 'this is over the top'. OK, I guess, but I'm just picky and easily annoyed by things like that. Then again I am a graphic designer after all, who also does icon and GUI design work. As a graphic designer you just notice these things.

Maybe a lot of you don't know the application. On the left you see the current icon. It's very flat and not something to get excited about. The application is great. It is a stand-alone version of the W3C Markup Validator and because it is a stand-alone (Mac) application you can use it on local files, even via drag and drop if you want. In other words, an indispensable tool in the armory of every professional web designer (using a Mac).

How it could look

I guess it's easy to say 'hey that's an ugly icon' and not come up with an alternative, right? If people say nothing more than 'I don't like it', I always have this reaction of saying 'well, what are your suggestions?'. I think it's good to give critique but always try to keep it valuable otherwise it's better to say nothing at all in my opinion. Anyhow, this is a subject that has been discussed already here. Not that I don't know what to do these days, but I was in an unstoppable mood and just couldn't help myself. So I came up with a few icon designs myself that I wanted to share them with you today.

New icons for Markup Validator S.A.C.

Version 1

A new icon for Markup Validator S.A.C. - version 1

Version 2

A new icon for Markup Validator S.A.C. - version 2

Version 3

A new icon for Markup Validator S.A.C. - version 3

Version 4

A new icon for Markup Validator S.A.C. - version 4

Donation to the community

They might not be the best looking icons around, but I believe one of them might be worthwhile to replace the current icon. So I'm donating the icon to the community. In case you like one of them you can download the icon set for Mac (it's a Mac-only application).

UPDATE: Download the 512 X 512 px transparent PNG files.

Applying the icon

In case you wouldn't know how to apply a new icon: hold down the Control key or 2nd mouse button on the application icon, choose Show Package Contents, choose Contents, then choose Resources. Replace the Validator-SAC.icns with the new one.

Need a place to store your files?

XtreakMy big files are stored at Xtreak, high speed delivery at the lowest prices.


48served

gravatar

1

permalink this comment Ian Sutherland Wed Jun 3, 2009 at 06.58 pm

Didnt know about the app - nice tweet (and icon) thanks alot.


gravatar

2

permalink this comment Laith Ibrahim Wed Jun 3, 2009 at 06.58 pm

I totally agree with you that the Markup Validator S.A.C icon looks ugly. I’m sure it wasn’t done by a graphic designer.
I like version 2 of your icons because it doesn’t have too much glow. Version 1 will look better by removing some of the glow. Version 4 has a nice idea but because it’ll be used in a small size, some details like the web page going inside the slot will not be recognized.
Thanks for sharing.


gravatar

3

permalink this comment Brian Feister Wed Jun 3, 2009 at 06.59 pm

Hey Veerle!

Great stuff! I’m particularly fond of version 2… Beautiful angle to capture :)


gravatar

4

permalink this comment texec Wed Jun 3, 2009 at 07.00 pm

Love cubes! (especially the custom CS 4 cube icons) - Thanks for your work.


gravatar

5

permalink this comment Travis Lehman Wed Jun 3, 2009 at 07.04 pm

I do that very thing all the time… can’t have a boring icon messing up your dock mojo :)


gravatar

6

permalink this comment Trever Yarrish Wed Jun 3, 2009 at 07.08 pm

Thank you Veerle… You never cease to amaze. Thanks for all your great contributions!


gravatar

7

permalink this comment Elaine Marley Wed Jun 3, 2009 at 07.09 pm

I thought the same about the glow, but once the app is running, it looks quite nice. So it’s the 1st one that I’m going to use finally.

Thanks a lot, Veerle!


gravatar

8

permalink this comment D Wed Jun 3, 2009 at 07.10 pm

I know it’s easy to say, but.. your version is even uglier than the original. Sorry for being so honest, I usually like most stuff you put online, but the excessively shiny golden theme is just tacky. The coins are specially ugly. The first cube is the least ugly, but lacks symbolism. And despite being also a mac user, I find the last cube too mac-centric.

Hope you don’t get offended by the criticism. I do value your attempt to create something for the community. I just think that you can do so much better :)


gravatar

9

permalink this comment Michel Wed Jun 3, 2009 at 07.11 pm

Wow! That’s slick W3C icon design, indeed! :-)

I like it very much! Congrats! There’s always something to be learned from you! ;)


gravatar

10

permalink this comment Kelly Wed Jun 3, 2009 at 07.15 pm

I solve the problem of ugly icons by setting my preferences to hide my dock entirely. :)

In any case, that was a sad little icon. Although to be fair to the person who made it, they probably thought it was nice (all art is subjectional, after all).

Of the icons you created, I think I like the third one the best with the cube. The coin-like ones feel off-balance to me with the “HTML” text sitting so low on it. The first one, when viewed at smaller sizes, is doing that “kiss” thing that I try to avoid (where the edges of the H and the L look like they’re barely touching the stroked outline of the circle.)

Thanks, as always, for sharing your work! I’m a big fan. :)


gravatar

11

permalink this comment Matt Wed Jun 3, 2009 at 07.18 pm

very clean and slick, nice work!


gravatar

12

permalink this comment David P. Wed Jun 3, 2009 at 07.22 pm

Thanks Veerle - wasn’t aware of the desktop version!


gravatar

13

permalink this comment Lars Wed Jun 3, 2009 at 07.32 pm

Great stuff..

I like the last one mostly.
I do not know if the fading is correct / realistic, but I love the idea!


gravatar

14

permalink this comment Laith Ibrahim Wed Jun 3, 2009 at 07.56 pm

You had some harsh comments here. These icons can always be improved. I’m sure you didn’t spend a long time to make them.
Cheers!


gravatar

15

permalink this comment Adam Turtle Wed Jun 3, 2009 at 08.23 pm

Personally preferred version 4. Also didn’t know about the app, so I’ll try it out. Thanks for the great tips!


gravatar

16

permalink this comment Gyorgy Wed Jun 3, 2009 at 08.26 pm

Why don’t you use HTML Tidy plugin for Firefox.

On the Mozilla addons site it says that it’s not available on Mac, but there’s a Mac version on the source site: http://users.skynet.be/mgueury/mozilla/

It is super useful for me, next to Firebug…


gravatar

17

permalink this comment Jack F Wed Jun 3, 2009 at 08.46 pm

Does anyone know if there is a similar app for Windows? Thanks!


gravatar

18

permalink this comment Chris Pacheco Wed Jun 3, 2009 at 08.46 pm

This is great of you to share with us, thank you!

I will use them :D


gravatar

19

permalink this comment Matt Wiebe Wed Jun 3, 2009 at 08.48 pm

One thing you shouldn’t ever have to do is justify designer obsessive-compulsiveness. I think you’d be hard-pressed to find a good designer without a few custom icons in their Dock.

Also, I didn’t know about the app at all, thanks for the heads-up!


gravatar

20

permalink this comment lewro Wed Jun 3, 2009 at 09.25 pm

All of them look amazing. The last one is my favourite! Great work Veerle!


gravatar

21

permalink this comment Vasili Wed Jun 3, 2009 at 10.18 pm

They might not be the best looking icons around [...]

Oh pfft, the icons are so much better than anything I could dream of making! My favorite one has got to be the fourth one; anyway you could tell me how you made the rounded 3D box effect?


gravatar

22

permalink this comment Colin Wed Jun 3, 2009 at 11.52 pm

Great work. Not only is the original ugly, it doesn’t adhere to Apple’s Human Interface Design guidelines.


gravatar

23

permalink this comment reece Thu Jun 4, 2009 at 12.12 am

I really like the last one :)


gravatar

24

permalink this comment Andy Thu Jun 4, 2009 at 12.46 am

Nice work.

Two things though:
1. The text on the coin looks like it’s unintentionally been scaled in a way that it now looks like it’s written in italics. You might want to adjust that.

2. Add a inner blue border to one of the sides (like it has been done to the top) to convey depth to text in the objects that are placed in perspective.


gravatar

25

permalink this comment Owen Thu Jun 4, 2009 at 01.41 am

Even as ugly as it is, this is some great information. Thanks


gravatar

26

permalink this comment DRoss Thu Jun 4, 2009 at 03.14 am

Hmm…Not a huge fan but it’s not horrible by any measure. It’s just a little too much web 2.0. Time ot move past cuteness I think.

Design is communication not decoration. This seems too decorated.

No offense, I really like your work!


gravatar

27

permalink this comment Gustavs Thu Jun 4, 2009 at 09.08 am

Icons are nice, but I don’t really understand why to use this application at all, when it’s just using the W3C Markup Validation web site. Why not just open the web instead?


gravatar

28

permalink this comment Veerle Pieters Thu Jun 4, 2009 at 09.14 am

@ those who like it: Thanks :)

@ those who don’t: You are missing some perspective here: first it is free so don’t expect it to resemble paid work and secondly I’ve created this in a minimum amount of time as paid work has of course priority. This is why I mentioned “They might not be the best looking icons around” ;)

Gyorgy said:

Why don’t you use HTML Tidy plugin for Firefox

Because this app works offline as well and will keep on working even if the W3C isn’t online anymore. I have Tidy on Firefox but I prefer Safari as my main browser with Tidy.

Gustavs said:

Icons are nice, but I don’t really understand why to use this application at all, when it’s just using the W3C Markup Validation web site. Why not just open the web instead?

See the answer to that above.


gravatar

29

permalink this comment Will Reinhardt Thu Jun 4, 2009 at 05.26 pm

I applaud the effort to drag their design into our decade. My vote is for the second version, it’s very clean!


gravatar

30

permalink this comment Michel Thu Jun 4, 2009 at 06.33 pm

Could I humbly ask you to release the same icons, just in PNG format, with alpha transparency added? :-) Thus, they could be much more versatile… and I really like their design, very much! :)))

Thanks in advance!


gravatar

31

permalink this comment Claudia Regina Thu Jun 4, 2009 at 11.31 pm

Very nice icons, of course they’re not perfect as you said, but they’re thousands times better than the original one… xD

You should definitely email this app developers so they could use yours officially. I like the app, but it’s so… not mac-like ^^

XOXO


gravatar

32

permalink this comment Aliester Fri Jun 5, 2009 at 03.15 pm

Nice post!Great stuff you have i like all the versions.The icons are so much better than anything I could dream of making!
Thanks,for sharing your work!
I’m a big fan.


gravatar

33

permalink this comment Daniel Blass Fri Jun 5, 2009 at 05.27 pm

Nice work Veerle.

I have noted that icon designers don’t just shrink their icons for the smaller sizes, as you did here, but they design simpler icons with less detail as the size goes down, and 16px icons tend to be very simple flat 2D versions of the larger ones.

As you asked for suggestions, I think a “mashup” of your designs in one would make a good set.

Version 4 for the 128px size, version 3 for 48 and 32px sizes and version 1 modified with a round square background (instead of the coin) for the 16px sizes.

Hope it was a valuable suggestion.


gravatar

34

permalink this comment Sean Foushee Fri Jun 5, 2009 at 05.47 pm

Love the icons!  Thank you for creating these, and thank you even more for releasing them to the public.  Version 4 looks great in my dock sitting next to Panic’s Transmit.


gravatar

35

permalink this comment Stacy Blackman Fri Jun 5, 2009 at 06.32 pm

Veerle, I am so glad to know that I am not the only one who has a near obsessive-compulsive disorder with attractive dock and desktop icons. Thank you for bringing the Markup Validator to my attention and for the VASTLY improved icons for the program.


gravatar

36

permalink this comment Trent Sat Jun 6, 2009 at 12.32 am

Great Veerle.  I love the Cubes and the last one!  Thanks


gravatar

37

permalink this comment Veerle Pieters Sat Jun 6, 2009 at 12.03 pm

Michel said:

Could I humbly ask you to release the same icons, just in PNG format, with alpha transparency added? :-) Thus, they could be much more versatile… and I really like their design, very much! :)))

I’ve just updated my article with a link. Here you go :)

Vasili said:

Could you tell me how you made the rounded 3D box effect?

I’m afraid I didn’t do anything special here really or used any magic trick, I just drew the corners using the pen tool sometimes in combination with the rounded rectangle tool.


gravatar

38

permalink this comment James John Malcolm Sat Jun 6, 2009 at 04.41 pm

They’re excellent! And the app itself looks quite useful too, thanks for the tip.


gravatar

39

permalink this comment E Sat Jun 6, 2009 at 06.00 pm

Thanks for the icon. My dock looks much better :)

By the way, funny thing, try and validate google.com


gravatar

40

permalink this comment Lauren Reagan Sun Jun 7, 2009 at 12.28 am

Oh how I miss my Mac. Love your site!
Regards,
Cheryl


gravatar

41

permalink this comment angkasuwan Sun Jun 7, 2009 at 03.13 pm

Default icons are annoying. pretty much all of them could benefit from a remix…..thanks veerle


gravatar

42

permalink this comment John Sun Jun 7, 2009 at 05.51 pm

I really like version 4, its clean and great to look at.  Whenever I get to validating my codes then maybe I could post these icons on my site haha


gravatar

43

permalink this comment Mason Sun Jun 7, 2009 at 09.44 pm

You are always on the forefront of everything. Keep up the good work!


gravatar

44

permalink this comment Michel Tue Jun 9, 2009 at 06.21 am

@Veerle:

Thanks a lot, for the PNG updated version!!

You made my day! :)))


gravatar

45

permalink this comment cody Wed Jun 10, 2009 at 12.44 am

Really nice work, i really like the last one! nice…


gravatar

46

permalink this comment Devon Wed Jun 10, 2009 at 02.46 pm

Hi, I’m quite new to MAC’s after using PC’s for around 15 years but one of theing i really love are the names and icons for it’s applications. For me, and while they’re all a huge improvement, Nyour design number 4 rocks my boat. Nice work and thanks for the download :)


gravatar

47

permalink this comment Mario Vázquez Mon Jun 22, 2009 at 09.16 am

Loved the fourth one. Just plain beautiful. Thanks a lot!



Commenting is not available on this article.

Flickrness

buy something from my Amazon wishlist