Tag: icon design

How to Use Icons to Support Content in Web Design

use-icons-to-support-content-in-web-design

Why use icons? Icons are used to make the design look visually appealing and hold the visitor’s attention to the content of the website. Doesn’t matter how exciting or informative the content you are sharing if you fail to hold visitors on your website. At first, most visitors scan the web page for visually engaging content and only after few seconds they actually start reading the other stuff.

Every day we see a number of icons such as on any interface, road sign, keyboard, you name it. They work as paragraph breaks that improve the user experience. A well-designed page, with content broken into easily accessible passages and icons, help us to interpret information in an effective way. It’s time to start using icons in web design instead of putting so much content.

In this article highlight the best practices of using icons to support content in web design.

1. How to Use Icons

The main purpose behind using icons is to help user grab the information more efficiently. Use a lot of white space and icons that will enrich the content and enable the effective communication without wordiness.

SPICE UP FEATURE LISTS

Make a space for listing services as it is the important part of effective marketing, but it may look tedious and boring. Using icons with your feature lists will make the site look more engaging.

280 Slides

280slides

DRAW USER ATTENTION TO NEW FEATURES IN A WEB APPLICATION

Icons indicate users to try out the latest features of your Web and mobile application. They direct users to the newly added or advanced feature. Once they hit the button, just see what makes the new feature so great.

LIST YOUR SERVICES AND INCREASE READABILITY

Create icons relevant to your services based on theme of the website or article. What colors are used? What is the style? Modern? Classic? Make sure, they improve the personality of the website as a whole.

2. Purpose and Placement

Icons make your website friendly, inviting and professional, you may go with these places headers, sidebars, titles and feature lists when placing icons, all are great places to put them. Follow these rules:

• ACCENT HEADERS TO GIVE TITLES A CREATIVE TOUCH
• ENGAGE READERS ON PAGES WITH EXTRA LONG CONTENT
• OFFSET HEADINGS AND SECTIONS
• SIZE DOESN’T MATTER! EVEN SMALL ICONS CAN BE EFFECTIVE

3. Choose Your Style

To create a unique web design, make sure the icons are original and stylish that enhances the user behavior. It is important to focus on how your icons match the rest of your website. Choose the icons considering the style of website in mind rather than purchasing a set of icons from iStockPhoto.For examples Squarespace, the style is both dynamic and professional:

4. Additional Examples

Here are few examples of websites that uses icons effectively.
WP Remix

wpremix

Subcontrast

subcontrast

Ruby Tuesday

ruby

QBB Help

qbbhelp

Hopefully, this article will help you better understand the use of icons on your own website.iMediadesign, a website design company in Canada will create unique and striking presence for your brand.

Easy Steps to Better Icon Design

office_1071x713

No doubt, you can find some well- designed vector icons that are inexpensive and easily available online. Thousands of high – quality free and premium icon sets are available.

But before you choose anyone, you must aware of the difference between “not quite good enough” and “premium quality” icons as it has a great impact on the design.

In this article, we will discuss principles of effective icon design in six steps including the basics of sound icon design, consistency, legibility, and clarity.

Three Attributes of Effective Icon Design

Icons that are well-designed follows a methodological approach to the three major attributes that make up any design. Even if you are creating a single icon, consider these attributes in an iterative approach.

Structure or Form

The structure is the most basic part of an icon. The most successful icon designs follow simple, recognizable patterns or forms. The primary geometric shapes – circle, square, and triangle – create a visually stable foundation for icon designs.

Character

The character of an icon is made up of the elements that are shared within a single icon and across an icon set.

Identity

The “identity” is the soul of an icon which makes it unique. Identity determines whether or not it “works”. Character and Identity often overlap. Identity elements shared by several icons become part of the Character of a set.

The Six Steps 

ALWAYS START WITH A GRID

Here is a guide to help you create the underlying form of each icon design. Avoid putting any part of the icon in “no go zone” space unless absolutely necessary. The purpose of this space is to create some breathing room around the icon.

START WITH SIMPLE GEOMETRIC SHAPES

Start your icon designs with the major shapes like circles, rectangles, and triangles. Start with the shape tools in Adobe Illustrator.

BY THE NUMBERS: EDGES, LINES, CORNERS, CURVES AND ANGLES 

Inconsistency in corners, curves and angles can diminish the quality of an icon.

PIXEL-PERFECTION

Pixel-perfect alignment is important when designing for small sizes. Aligning the icon to the pixel grid will make the edges perfectly crisp on straight lines and more crisp on precise angles and curves.

USE CONSISTENT DESIGN ELEMENTS AND ACCENTS ACROSS ICONS 

The elements that build aesthetic unity can still tie the set together.

USE DETAILS AND DECORATIONS SPARINGLY 

Icons should quickly communicate an object, idea or action. Too many small details will introduce complexity, which can make the icon less recognizable. The level of detail is an important aspect of aesthetic unity and recognizability of the in icon set.

MAKE IT UNIQUE

The number of talented designers is creating high-quality icon sets every day. But many of them rely on the trends or the styles of the most popular designers. As a creative web designer, we should create something out of the box by exploring some other areas such as architecture, typography, industrial design, psychology, nature where we can find the inspiration.

Hope this article you create premium quality icons. For more details see here. Master in web design practice.

iMediadesigns is a reputed It industry which offers custom web development services in Toronto.