Icons in web design – attention-getting, memorable and user-friendly
Icons are a graphic way to draw your site visitor’s eye to your web page content. Icons help you to telegraph your message and minimize the need for words; build interest into lists; pull attention to important content; invite the user to try out a feature; give a quick overview of your company’s services, or provide a call to action.
Take a look at the examples below to see how you can bring content to life using graphics, color and shapes to form attention-getting icons.
Red, yellow and turquoise bring a youthful and vibrant appeal to this Responsive JS Animated Architecture website template, signalling action, energy, creativity, inspiration and positive thought. These colors are used effectively in the red header, buttons and image hovers, blue slider banner and yellow drop-down menu, with a balancing beige background and black text.
Orange, black, grey and white speak of enthusiasm, authority, dependability and efficiency in this Science Stretched Flash CMS template which uses color, graphics, circles and shapes to heighten interest and display a great deal of content in a clean layout. The design presents an overview of the company on the homepage, which is divided into sections with thin lines with a V (arrow) in the center that leads the eye to the next section title.
This is a WordPress Theme with Bootstrap. Bootstrap is a framework developed by Twitter and at its core it is a toolkit with CSS and HTML conventions. Each Bootstrap template is Responsive and goes with several layout options to fit all popular screen resolutions. The template is integrated with the Cherry framework for rapid prototyping, so that you can build your WordPress site in the minimum time.
This website uses geometric shapes (colored squares on textured black) to form an attention-getting menu grid with Flash animations on the homepage. On menu click, the squares get smaller and move upwards to form a line under the logo.
Blue circles with graphics turn orange on rollover to form the menu in this Web Design Moto CMS HTML website template with a full-screen image on a textured background. Social sharing icons and Services are also shown in circles. The design carries the theme of ballooning among flying birds to imply energy, adventure and creativity.
Complementary colors yellow, orange and red bring cheerfulness, vibrancy, energy and action into this Bartenders School Website Template. The homepage has circular design elements, a popular website design trend. Drinks in glasses are attractively presented and the menu is designed in circles in the theme colors, with animations on rollover.
This Business Responsive WordPress template has Bootstrap functionality. Bootstrap is a framework developed by Twitter and at its core it is a toolkit with CSS and HTML conventions.
Grey, orange and black speak of professionalism, dependability, enthusiasm and sophistication in this template design, suitable for a web design company or design studio. The homepage slider uses textures and large fonts to arrest attention, and image transitions using JS animation with HTML to keep the template lightweight. The background is a grid in textured grey. The design uses circular design elements, a popular website trend.