Vector Interface Design

User Interface design plays a very important role as the translator in the communication between the user and the application's back-end or core functionality. It's purpose is to make the user feel comfortable interacting with and understanding your product. Most of a UI designer's job is spent thinking – the rest is executing the vision using the tools which work best for you.

Scaling your UI is becoming increasingly important as display technologies improve month-to-month. Not only does it provide you with infinite scaleability, vector paths are much easier to change, saving you valuable time.

  1. Illustrator’s Pen Tool: The Comprehensive Guide

    Follow this tutorial and complete the exercise at the bottom. Note: Most of the content in this tutorial applies to Photoshop as well.

  2. Vector shapes in Photoshop CS6

    The Bjango blog (written by Marc Edwards) is one of the world's most comprehensive and informative resources on design tools. This article describes how to use some of the most powerful vector design tools in Photoshop. Try using one of these techniques to improve a design you've already made. Then share the results.

  3. Masking in Photoshop CS6

    Masking is a technique that allows you to create complex shapes (sort of like this) while spending a lot less time constructing them. It's a clever trick of the trade, and this article will help you master it.

    Try recreating a complex vector shape using the pen tool and masks in Photoshop. What else can you learn by actually trying it yourself?

  4. Dribbble Search for 'Vector UI'

    Find something in there you like and try to replicate it using nothing but shapes, layer styles, and gradients. Try not to use any raster tool like the brush, pencil, or eraser. Once you've done that, find a way to use half the amount of layers you're currently using.

    It's not cool to steal other people's work :) but recreating work you respect only for yourself to see is a time-honored design learning technique.

  5. 7 Gorgeous icon fonts to speed up your site and your design process

    We can't talk about Vector UI design without talking about icon fonts. They're a relatively new technique for implementing images on the web, but they allow for infinitely scalable interfaces that load quickly on any device. They can help you implement a consistent and simple visual style in your projects.

    Try using an iconfont in your next webdesign project. Make it awesome!

Finally, an easy to follow design course

Receive a design lesson in your inbox each week, hand crafted by a design pro. Learn at your own pace, and apply it to your real life work – no fake projects here.

No spam ever. We promise.