Visual Design, UX
Finding good icons can make or break a project. Some icon sites require designers to license or attribute icons. Others require the user to register. Incredible icons are scattered across dribbble, but they can be difficult to find. Why isn’t there one place where it is easy to find vector icons? That’s why my friend Henry Bayuzick and I built Icon Yard.
Design Agreements
Henry and I had talked about building a better icon site during the week. We sat on his couch the following Saturday and got to work designing the site. We both wanted the site to be as minimal and functional as possible. Here’s what we decided.
No unnecessary clicks. In the same vein we didn’t want the user to have to signup, login, or even open a new page. After a search relevant icons appear directly below the search bar. There are only two options once an icon is selected—download, which immediately downloads an SVG and the author’s name, which takes the user to the author’s website.
Focus on search. Search is the most important thing. Users will come to Icon Yard and want to search. The search bar should be prominent and the cursor should be focused on page load—no unnecessary clicks.
No Modals. Would the site look better with just icons and the download and author links hidden in a modal? Yes, look at all that white space! However, the boring solution is often the best. We’re both boring designers. Just put the download and author links below the icon.
Not just icons. Icons are great at communicating when space is limited. Everyone knows that a floppy disk means save, a cloud with an up arrow means upload, and so on. We could have tried to communicate with only icons, but there was no reason, the site has a huge amount of white space. Instead of just posting a down arrow, we spell out download. Use icons wisely.
DESIGN Disagreements
We had our disagreements, which was good because disagreements force the other person to back up design decisions with reason. In the end the site will be better because of it.
Pagination over infinite scrolling for search results. I’m not entirely sure about this one. I feel that infinite scrolling is a better option when there is a comprehendible number of pages. If there are hundreds of pages then pagination is a better option. If we get to hundreds of options for a single search result, that will be the least of our worries.
Monochrome color scheme. Henry found a purple that he wanted to use as the main color, while I wanted to keep color off of the site. Are most other icon sites devoid of color? Yes, but we’re providing black icons. There is no reason for color here. Anyways, I seem to have won this argument.
A detailed logo. I wanted a simple icon as our logo, because I think the best icons are simple. I put together the images above—I thought a grass tuft or a fence gave off the right impression. Henry wanted something more detailed. For now Icon Yard has no logo.
Other Goodies
Night mode. There is a cool JavaScript library called Goodnight.js that switches stylesheets at night, and provides a toggle feature to switch back and fourth between modes. It’s a cool but trivial feature. Perhaps the designers that like to work late at night will have some appreciation for it.
Fancy form fields. OK, it’s a bit lame, but I like the form fields that aren’t boxed in. The icon submission form uses fields that are underlined and don’t use boxes. Maybe it is a bit confusing, or foreign looking, but the site’s targeted toward web designers and developers. We figured they would understand.
Closing Thoughts and Next Steps
This has been a cool project to work on, and I think it has real potential. The development credit goes to Henry. It has been cool to watch and learn how he builds WordPress sites from scratch.
Our next steps will be to start collecting icons. I’ve had several friends already contribute. Perhaps some of the designers on dribbble would be open to adding icon sets that they are already giving away.
Icon Yard will be released soon!
The post Icon Yard appeared first on Sam Solomon.