Vector Interface Design
Jeff Broderick
Lesson 13
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.
-
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.
-
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.
-
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? -
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. -
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!
Jeff Broderick
Creative Director, ShopSavvy
Speaker & Visual/UI Designer living in beautiful San Francisco, California. Creative Director at ShopSavvy. Working on Luxogram & Loggg. Creator of 4cast.me, StratusApp, iOS Settings Shortcuts & NoMoreBanding.com.
