Interface Design : Icons - Settings, Edit and Preferences

Sometimes you find it difficult to decide upon which Icon to use for certain metaphors? That's the case most UI designers stumble upon. Anyway, here is a couple of tips to help you.

Preferences and Settings have the same meaning. So you can use the same metaphor for both actions. Generally the Hammer+ScrewDriver or Spanner+ScrewDriver icon is used for settings. You can create crisp looking icons from 24x24 onwards. 16x16 and less will not help you to create a clean looking icon. In some cases, a pixel drawing at 16x16 size could help you. Or else, use the "Equalizer" as metaphor, which is somewhat generic and commonly found in everyday life.




For "Edit" action, go for the "Pen/Pencil" metaphor. Depending upon the availability of pixel area, you can either show a paper or alphabets beneath the pen/pencil. This will enhance the metaphor.


Hope this helps! :-)

- Rajesh Sundaram

Comments

Post a Comment

Popular posts from this blog

Harry Potter - Marauder Map Application - UI Design

Image
Introduction: The Marauder Map is a magical map in Harry Potter series. At any given time, the map shows the location of the person in the castle. This quick design proposal captures the idea of porting the Marauder Map into a software application with the following primary and secondary goals. Primary Goals: - Ability to locate a person - Ability to track the location history of the person in a time line Secondary Goals: - Ability to see the location history across various calendar dates. - Ability to load / choose different maps Description of Idea: The Marauder Map application uses Search functionality as the main function, along with Time Line scroll. Like a typical map application (Google Maps) this app has the ability to zoom-in, zoom-out, drag-across-navigation. By default the user must Sign-in, to access the app. The sign-in is a security measure, to show only the user's friends' locations and time-line history. The Screens (The background pencil sketch art court...
Read more

Positioning DIV to the Center of Browser Viewport

Image
Positioning DIV to the center of Browser Viewport Sometimes I write some JS code to prepare my HTML mockups. In this post I am describing the step-by-step approach on how to position a DIV to the center of browser's viewport. Case Assume that you have a DIV and you want to show it upon clicking a link or button. And that DIV must appear exactly on the center of the browser's window. Technically browser's display area is called "View Port". So our aim is to display a DIV to the center (origin) of the view port. How to do this? 1. Create the DIV. 2. Specify CSS properties 3. Write a few lines of Javascript code to position the DIV 4. Insert an action "onClick" to a button or link in the HTML. Step 1 Write the HTML code for the UI and enclose the code chunk with a DIV. Specify some valid ID for the DIV. For example "AddUserDialog". Step 2 A DIV element, by default will be displayed inline. A dialog box or some other "windowed" UI require...
Read more