Tuesday, September 21, 2010

Free vector ui patterns for web apps

here are a set of ui patterns i've created for myself. you can download it for free; modify, share, do whatever you want with it. (adobe illustrator cs recommended. tested with adobe illustrator cs, adobe photoshop, adobe fireworks)

download it: ui patterns.zip (2,3m)

package contains:
  • input box
  • text area
  • buttons
  • golden ratio box
  • links
  • pulldown menu
  • checkbox
  • optionbox
  • image placeholder
  • browse field
  • scroll bars
  • tabbed menu
  • tabbed box
  • header menu
  • search box
  • pagination
  • captcha
  • mini calendar
  • rating stars
  • breadcrumbs
  • uploading indicator
  • logo placeholders
  • volume slider
  • some text blocks
  • icons for: email, search, close, cancel, player actions, settings, information, calendar, fullscreen...
file formats
  • adobe illustrator 9 .ai
  • adobe illustrator cs .ai
  • adobe illustrator 9 .eps
  • pdf

let me know if you need the set in any other format or about the modified versions you make.

quick tips for beginners:

  • always use pen and paper to sketch. it's faster this way.
  • use a thick marker while sketching.
  • after you are done, use this set to see the results in more realistic view.
  • test, test, test. ask your friends if you have no budget.
  • "text is the ui." use dummy text only in the very early stages.
  • start designing with the smallest unit such as name field for a sign up form; or a blog item for blog site.
  • don't fell in love with your design. be open to change.


User Interface Design said...

I thought finding a company that will help me provide all the services that all small business need is a tough one. Thank you for enlightening us about user interface design.

User Interface Design

Web Design Company said...

A perfect info source. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic