Managing Graphics and Icons in your Designs

Projects can get overly confusing if we let them slip too far. This has become 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 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 context.

The biggest increase of 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 over-do 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 DesignMoo. 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 such as Icon Finder can help in locating related icons to place on your page. Icons are just a smaller part of branding and require matching the site template just like any other page graphic.

Keep Images Neatly Organized

The standard images/ folder to be created in 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 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 heartache.

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 backwards 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 sure-fire 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 wide spread evolution of Verizon FiOS we have seen Internet greatly speeds increase over the past year. This means content is not taking as long to download anymore and we’re sharing files at quicker and quicker rates. But should this give you 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. Either 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, thought 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 for organization of graphics on the web. Websites are growing in size and must scale along with these times. Graphics are not going away any time soon. In fact, they are one of the most important aspects to 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.

Author: (103 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

Comments