Using Vector Icons in Modern Web Design

Mastering web design requires understanding design fundamentals coupled with various design techniques. One such area worth studying is icon design because it can be used for a variety of purposes.

Vector icons are a newer facet of web design as browser support has evolved to reach global demand. The following ideas and sample websites should help you come to terms with vector icon design. Once you understand how to use these icons efficiently you’ll have a better grasp of interface design and methods for crafting usable websites.

Product Features

One technique I never tire of seeing is the product feature list. Typically these features are located on the homepage or landing page of a service, application, or digital product.

Vector icons are used to expand upon these features with graphics counterbalancing text. Most people latch onto visuals because they send a clear message relative to context. Feature icons can be monotone or multi-colored. The point is to maintain consistency and portray each feature in a digestible manner.

A really cool example can be found on FlatoMedia which uses the typical flat vector style. Each section of the page uses a different icon to expand upon the internal content. For example, the top portion covers their team with animated graphics. The lower sections expand upon the agency’s design work in the same flat style.

Pixel2HTML offers an even more striking example on their homepage. The top blue section uses vector icons with dark backgrounds listed in columns. Each column has a brief paragraph expanding on the company and their services.

Lower on the page you’ll find a set of circular icons with varying colors. Each of the circles represent a stage in the development process from start to finish. Interestingly the icons themselves are more like cutouts from the circles. It’s a distinct style quite different from the others but it still looks great.

Sample Demonstrations

Visual art is the best way to explain complicated ideas to people in the shortest amount of time. Of course this can work with photography and raster graphics, but vectors are meant to scale and run smooth on any device.

Take for example the Lily homepage which uses both photos and vector icons. The top portion of the screen showcases the product with a sample video. As you scroll down you’ll find small graphics demonstrating how to use Lily.

One thing you’ll notice while scrolling is that these icons animate. Each image is rendered as an SVG with paths for certain objects to follow. The motion not only captures your attention but also explains the purpose of Lily and how it behaves in real life.

For something a bit less graphical take a look at Cushion. Their homepage uses animation tied to HTML elements to display graphs for pricing and invoicing. Cushion is aimed at freelancers who need to maintain their financials in a single application.

While these graphics aren’t traditional vectors, they are scalable and the entire layout is fully responsive. Be sure to create demo graphics that are both usable and visible to all readers.

Social Media & Contact Info

Communication is a big part of sales and business. Without communication there would be no meetings, no customers, and we wouldn’t even have a functioning civilization. Suffice it to say that communication is important.

The contact page of any website needs to be easy to use and understand. Most contact forms are forthright and conspicuous, but what about other page items? How can vector icons be used to improve the visibility of smaller elements on the page?

Let’s take the footer design on the homepage of Bold as one example. This layout was designed as a typical landing page so there are no navigation links. At the very bottom you’ll find a link to the app store along with social profiles for Bold.

Each profile icon looks similar and jumps off the background. Although many visitors will not scroll down this far, those who do will have an easy time finding more information about this application.

Turning towards one of my favorite design agencies we can see a rather interesting contact page. Underbelly uses a large contact form which seems to demand all of your attention. But as you move through the form you’ll notice a tooltip arrow pointing down to a smaller box with further info.

Most agencies like to include their full contact details and location of the studio. While this won’t be the primary choice of contact, it’s still a viable option. Small vector icons are placed next to the phone number, location, and e-mail address just to visually clarify everything.

At the very bottom footer section you’ll notice similar icons for social media profiles. Underbelly uses their own custom icon font so the styles blend seamlessly with each other.

Navigation UI

Every link on every page can be considered a type of navigation. Whether we’re talking about headers, footers, or even internal tabs that switch between page content. Navigation is the mechanism by which visitors move through content.

Vector icons paired with navigation can be a sweet recipe for usability success.

One rather notable example is the menu on Carbonmade. Each navigation link sports a cute sticker-like vector icon. These are real true vectors pulled from an SVG sprite sheet via CSS.

Icons are used to quickly distinguish between links and where they lead. Nobody is so lazy that they’d refuse to read navigation text. But convenience is always welcomed and appreciated. Quazar Design offers another cool example of icons in navigation.

But what about adding icons to smaller areas of the page? Take for example Coolors which is a digital color picker. The homepage features icons beside links and buttons, all of which are rendered through icon webfonts.

You’ll also find loads of icon-based links on the Coolors swatch browser page. Each swatch includes a series of links for downloading, editing, or saving the swatch.

So vector icons don’t always need to relate strictly to page navigation. Icons can aid the navigational process by labeling certain areas of text, or by demarcating the purpose of buttons/links on the page. Think of vector icons as your go-to solution for adding clarity into a heaping block of digital text.

The above examples should provide insight for web designers getting start with vector icons. SVG is growing in popularity and may be considered the paragon of vector art. It’s now easier than ever before to design with vectors and hopefully these trends can offer guidance to new designers.

The post Using Vector Icons in Modern Web Design appeared first on DesignM.ag.

Source: http://ift.tt/1Dpxi2l