Life's easy with Medialoot.

Unlimited access for only $14/mo.

UI Style Guide Template (.psd)

User Interface Style guide is great for preparing your a visual guideline for any web or mobile related design project
Included are sections for text styles including headers and paragraphs; and button styles for active, hover and normal buttons
Style your preformatted text, alert styles, form elements, lightboxes, and images
Present your pagination design styles, miscellaneous and table styles to your client

By using UI Style Guides, we can separate the visual language of a website from the structure. Something which is often difficult for clients to do when they are presented with a complete mock-up. It becomes possible to make quick and easy changes to the layout without needing to worry about the styling. And likewise if the client wants to make changes to the visual language, it can be done without worrying about updating multiple elements across multiple pages.

This template is the perfect starting point for creating your own UI Style Guides and includes the following style types:

  • Backgrounds
  • Swatches
  • Text styles, including headings, paragraphs, and preformatted text
  • Buttons and Pagination
  • Alerts
  • Form Elements
  • Tables
  • Images and Lightboxes
  • and more

Easily edit this style guide template for your own projects in this Photoshop document.

Free License

Feel free to download and use this item for both personal and commercial projects with attribution back to MediaLoot. Please note:

  • Attribution is required for free items. For a non-attribution license, please become a member or buy the full version.
  • You may not distribute or offer this set for download on other websites. Promotion is always appreciated, but please send people to this page.

More from User Interface » Design Elements

Feb 17th 31 0
Jan 19th 2465 1


  • Reply »
    mohamed essam

    mohamed essam

    really thank’s

    Sep 3, 2013 at 4:50 am
  • Reply »


    Super handy, thank you!

    Sep 5, 2013 at 9:59 am
  • Reply »


    Thank you very much for share this.

    Jul 19, 2014 at 7:04 am
  • Reply »


    Thank you for your generosity

    Feb 23, 2015 at 5:46 am

Leave a comment

Tag Cloud

Don't Miss Another Freebie - Sign Up for Our Newsletter!

Make sure you don't miss out on future free resources by signing up for our weekly newsletter.

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource


Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all