Managing Graphics & Icons in your Web Designs

Projects can get overly confusing if we let them slip too far. This has become a circumstance time and again, most commonly among the freelance designers of the world. Web projects are no different and require a strict level of discipline for project management.

Graphics and icons are useful for spicing up the average website template design. However, the management of all these entities can grow out of control. On larger platforms, things may seem unmanageable and lean towards chaotic clutter.

Keep Images within Reason

Websites today don’t need too many images. We are often focused on other page content, such as comments, videos, and similar contexts.

The biggest increase in icons has been with social networking and social bookmarking applications. User profiles have become “web 2.0″ified all throughout the modern web. Icons are not bad or space hogs by themselves. But when placed in the hands of the wrong designer, icons can ruin a seemingly beautiful UI.

Try not to overdo things, and everything should work out okay. It seems that graphics have become much more clear and unique over the years. Digital artists are offering icon sets for free among the many web communities such as Dribbble. Web designers are then grabbing these and spreading them around to all their friends.

Use Unique Designs

Stale graphics have been passed around for years via the Internet. Web designers have this plague of unfriendly icons which have been used in web layouts across the board. famfamfam silk icon set comes to mind.

This set was commonly seen among the early generation of the web 2.0 launch. Digg and MySpace utilized these heavily. To be honest, they are a great set of icons, beautiful to look at and clear visually. Once they became mainstream, designers creating their own apps were using them to develop backend systems and data analytics interfaces all over the place.

Check the web for any new releases. Graphical search engines can help in locating related icons to place on your page. Icons are just a smaller part of the branding and require matching the site template just like any other page graphic.

Keep Images Neatly Organized

The standard images folder to be created on most websites has undergone some transitions. With CDNs allowing cheap image hosting across many mediums, we can see a lack of personal hosting in this department. This is a positive shift to holding data in the cloud and giving more control to website managers.

Blog and CMS’ such as WordPress will upload images based on date and file name. This is clever and a great way to store such content. When you don’t have such a handy backend, things can get complicated. In these scenarios, I’d always recommend creating sub-folders to house each individual section of images.

The best way to stay organized in the folder structure is to build a backend system for management. It may seem complex at first, but in the end, you’ll save yourself a lot of heartaches.

PHP is a great language to work in since it runs on most web servers and holds great built-in image libraries with powerful manipulation and upload functions. You should be able to create functionality to upload, rename, and remove images at will from any of the inner directories.

If this seems like too much work initially, you may consider working backward into a CMS. WordPress, Joomla!, and Drupal all offer backend image manipulation and have modules to extend functionality.

Keep Names Related and Focused

When naming each image file, you’re placing a small needle into a (growing) haystack of content. With Windows 7 and Mac OSX search API so powerful, it’s an easy task to find exactly what you need. What happens, though, if you forget the name or keywords used for images?

Uploading and storing images by date is a possibility. It can get complicated after a while, but it’s a surefire way to list out every one of the website’s assets. This also gives you powerful control for revisions of older graphics and moving around directory structures.

Resample Images to Web-Safe Standards

With the widespread evolution of Verizon FiOS, we have seen Internet speeds increase greatly over the past year. This means the content is not taking as long to download anymore, and we’re sharing files at quicker and quicker rates. But should this give you a reason to neglect care on your websites?

The truth is images such as .jpg photos, and larger .pngs can take up a lot of room. The concern here is with visitors accessing your site through a mobile browser. Whether running iOS, Android, or BlackBerry, not many mobile operating systems will be able to download information as quickly as your desktop or laptop at home.

Ensure your pages are loading as quickly as possible and not waiting for long server pauses between buffering images. There are some possible ways to load images via JavaScript while the DOM is still being parsed. This secures visitors won’t be scrolling through without access to any content, though the download process may take longer.

Here is an example of some simple JS code:

<script type="text/javascript" language="javascript">
<!--
pic1 = new Image(100,25); 
pic1.src = "images/photo1.jpg";
//-->
</script>

All of these examples are proof of the importance of the organization of graphics on the web. Websites are growing in size and must scale along with these times. Graphics are not going away anytime soon. In fact, they are one of the most important aspects of our new-age media-powered Internet.

Practice with tutorials in Photoshop and Illustrator for working with icons and vectors. These will come in handy as more designers are releasing free sets of icons for project work.

It doesn’t take a very long time to build a strong sense of graphic interfaces. Follow current web trends and combine your own ingenuity to create some graphically stunning web projects.