How To Use Vectors For Simple Web Design

Website design can be tricky. Your website needs to communicate well and stand out visually. Vectors are a great way to communicate by using an image instead of words. Images are easier to understand, and often contain a universal meaning. Here is an easy way to enhance your website design using vector graphics.

First, You can download a group of icons. For this tutorial, we are using vectors from a vector site (Image ID : 1276643) for consistency.

Launch your Adobe Illustrator, and ungroup the vectors so you can pick and choose which icons you want. To ungroup, select the item, and while holding down Shift and Control, hit G. This will release each icon. Now you can delete the icons you don’t need for your website. Depending on the type of website you’re designing, your choices might be different depending on your preferences.

stockunlimited 1Now you can delete the icons you don’t need for your web site. Depending on the type of website you’re designing, your choices might be different depending on your preferences. If you want to reach a wider audience, delete the vector text and rely on the images themselves to do the talking. You can do this by using the ungroup command again, but this time on each individual icon. Select, and then delete the text.

stockunlimited 2Having a color scheme for your website is really important. It communicates the tone of your website and expresses your brand. For example, take a look at these samples of color palettes:

stockunlimited 3Each color palette creates a tone and esthetic that will transfer to your whole website, depending on what you want to convey. That may be tranquility, vibrancy, diversity, etc. The possibilities are endless! We are using the middle palette for our website today. The parts of each vector icon that are steel blue will be one color, and the green circles will be another color from that palette. To do this, you’ll need to ungroup the vectors until each section has been isolated. Once you’ve selected a piece of the graphic, change its fill color by double-clicking the fill box on the left side of Illustrator.

stockunlimited 4Now repeat this step for all the icon vectors. By using the eye dropper tool in Illustrator, you can ensure that the colors are all the same for each icon.

stockunlimited 5

And that’s it! You’re all set with the basics and ready to navigate your simple, clean website!

stockunlimited 9

Leave a Reply

Next ArticleThe Differences Between Image File Formats [Infographic]