Icons are one of the most used graphic elements in web design in general and graphic buttons are a fundamental part of any web application.
In this part of the we continue to address the graphic elements for design.
Now we are going to focus on two important elements of any graphic design that are widely used on the web in general. Icons are fundamental to any design since they allow us to add visual information in a graphic way. On the other hand, the graphic buttons are one of the fundamental pieces for the interaction with the user.
icons
Icons (from the Greek eikon-onos, image) are one of the most used graphic elements, not only in our digital age, but since ancient times they have served as key points of varied information, with extensive studies on the importance of iconography in different human civilizations.
The fundamental mission of an icon is to offer, without distracting, specific visual information.
In order to successfully carry out this mission, an icon must meet a series of characteristics, among which the following stand out:
- It should be as simple as possible, with enough detail to express what it should, but no more. Convoluted, complex, and heavily stroked icons only create confusion.
- It must follow the models already accepted by the typical public that is going to view them. There are characteristic icons within a community or country, as well as others assumed worldwide. Deviating from this already accepted model makes the icon lose clarity, condemning it to failure.
- It must be perfectly designed for the specific information that it is going to represent. Small differences in the design of an icon can create big differences in the face of the viewer.
In the real world, icons are widely used, giving people various information quickly through a visual language understood by all.
In the design of computer interfaces, icons are used for two main purposes:
- In the interface of the programs, they identify the folders, applications, files, menus or tools. They are the usual desktop or program icons in Windows or Mac.
- As graphic elements in documents and web pages. The icons here serve to identify sections, locate interactive visual points, expand the information of textual links to those that accompany them, etc.
The creation of icons is a complicated process, not because they require a lot of development work, but because it is very difficult to design a simple figure that expresses a given message clearly.
Initially, if there is an already standardized icon that represents the information we want to transmit, that is the one we should use, although it is entirely feasible to make small changes in its style that adapt it appropriately to our project, but always maintaining its basic design. original. This is the case of already “normalized” icons, such as the arrow to indicate a path or direction, the magnifying glass or binoculars to “Search”, the little house to access the home page of a website, the little envelope to indicate the sending of an email etc.
In the event that there is no previously universally accepted model for the icon we need, the possibilities of own design increase, although the work becomes more difficult. The most effective avenues then are perhaps direct representation, analogy, and metaphor.
The direct representation is based on conceiving the icon as a direct graphic representation of the message. A clear example will be the drawing of a telephone to represent where there is a telephone booth or where the user can find information about the telephone numbers of a company.
Through the analogy we look for a simple image that directly resembles the core of the message we want to convey. As an example, we have the typical little envelope used in web pages to indicate access to information about email addresses or a direct link to writing a message of this type.
Finally, the metaphor is based on the design of the icon that, although it does not literally express the message to be transmitted, does suggest a comparison with its basic concept, facilitating its understanding. An example of this type of icon would be the icon that presents an open door to indicate the exit of a computer application, or a clip to indicate a file attached to a form or email message.
The easiest way to create an icon is to use any paint or illustration program, the latter being preferable, as it allows the designer to work at the desired scale, resize images without loss of quality, and freely manipulate images. shapes. When everything is ready, the icon is saved in the appropriate format.
If the image is going to be a system icon, in Windows operating systems it will have to be saved in ICO format (with an .ico extension), and it must have dimensions of 16 x 16 pixels (small icons) or 32 x 32 (large icons). ) and 256 colors maximum. One factor to consider is that there are few graphic programs that allow you to work with the ICO format, being able to cite among those that do, an application specially designed to create and save icons.
The way of working will then be to create the icons in an illustration program, save them in GIF format and load them in MicroAngelo, from where we can make the appropriate corrections and save them in ICO format.
For their part, MAC computers work with system icons in ICNS format (.icns extension files), which we can obtain through different programs, highlighting among them , which works as a Photoshop plugin that allows directly exporting the graphics created to that Format.
If the icons are intended for inclusion in web pages, the storage format can be any of the bitmap formats accepted by browsers, although the most common is that they are saved in GIF format, given the graphic simplicity of the icons and its limited number of colors.
The icons can now have any size, although it is recommended that it be small, since the user usually associates the icons with graphic elements of limited dimensions, it being normal for them to range between 10 x 10 pixels and 20 x 20 pixels. Larger images should be considered more like buttons than icons.
If the icons are intended for any other medium, their design will be conditioned by the limitations imposed by it. For example, if we have to design icons for PDA applications, the number of colors to use will generally be very small.
An alternative to classic icons are animated icons, which can be achieved using animated GIFs or small SWF files, usually created with Macromedia Flash. These icons are very attractive, but you have to be very careful with them, since, by definition, an icon should not distract the user from their tasks, so they are only recommended in specific cases in which we want to attract the attention of the user. visitor to a specific point (in the case of a particularly interesting offer, for example). In these cases, the number of animated icons should be minimal (one or two maximum), and be limited to a specific page.
Although the icons are understood as graphic elements, it is possible to reinforce, if necessary, the visual message of these elements with some textual content that supports it, especially in those cases in which the icon design does not express its function in a completely clear way. , or in those others in which the same icon is going to be used to transmit several different messages (this is never advisable, but it is done in many cases). This use of the icons is not very appropriate, being preferable in most cases to replace them with buttons.
If the icon is accompanied by a text, this must be limited to a single word, two at the most, that literally and without confusion indicate the purpose of the icon.
One last important consideration: the style of the icons used in a job must be the same, since it is important to maintain consistency in the graphic elements. If we start designing our icons in dark blue on a light orange background, all the icons must follow this style. At most we can create a new style for specific icons that are located in another area of the composition or web page, but all of them will have to adjust to that specific style.
graphic buttons
Graphic buttons are exclusive elements of computer applications, in which they basically have the mission of capturing events carried out by the user to launch appropriate response actions.
It is common to see buttons on web pages that allow the user to interact with the application, informing him of the action that will take place if he clicks on them. In this way, they function as extended icons, which allow the same functionalities as these elements to be exercised, but without being so limited in aspects such as shapes, sizes, colors, etc.
It is also frequent to use the graphic buttons to replace the typical buttons of the forms. When the forms appeared, their action buttons were all rectangular, gray in color and with black text, a design that often became too bland and clashed with the general style of the page. The solution to this design problem was to replace these standard buttons with graphic buttons that perform the same functions, generally relying on client languages such as JavaScript.
Later, with the appearance of Cascading Style Sheets (CSS), it was possible to configure the appearance of the form buttons, although only the most recent browsers support this functionality (Netscape 4x does not support it, for example). Despite this, the use of graphic buttons continued, since the design possibilities they offer are much greater; On the other hand, strong programming support is sometimes necessary, since the graphic buttons do not respond by themselves to the events of the form buttons.
Another common use of graphical buttons is to represent options in a navigation menu. Navigation systems are usually made up of textual links, to which, at most, the style of this type of element is changed (blue color and underlining when they are inactive, purple color and underlining when they have already been visited). This system is very effective, allowing you to configure the texts as you wish, work comfortably with layers and DHTML, etc., but it has certain limitations that should be avoided.
On the one hand, the textual contents allow little decoration, generally the background color and the color of the text, its typography and its size. There is no doubt that a graphic element is much more malleable, being possible to design and…
Facebook Comments
Disqus