Interface Styles 3: Make Mockups Faster Than Before

by on 04/26/12 at 12:06 pm

10 Reasons You’ll Love Interface Styles

  1. You get ten style palettes for one great price.
  2. You get free updates to any future version of Interface Styles.
  3. You get the files for both Photoshop and Fireworks so you can work the way you want.
  4. You’ll work quickly and beautifully with one click styling at your disposal.
  5. You’ll save massive time and energy from messing around with gradients and effects.
  6. You’ll make stunning mockups that will blow your colleagues and clients away.
  7. Your interface will finally have the crisp, pixel-perfect graphics that your users have longed for.
  8. Your interface will feel more professional and engaging to use.
  9. You’ll be able to recreate element styles quickly and consistently across your designs.
  10. You’ll always have an array of different interface styles to choose from.

Most designers spend a ton of time and energy to make beautiful, pixel-perfect mockups of their interface. With Interface Styles, you no longer have to. Interface Styles gives you the power to add polish to your interface elements in one click. Making mockups has never been this fast and easy. And the result will always leave your clients stunned and wanting more.



The single user license for one person is $27.00. The multiple user license for more than one person is $57.00. After you buy your license, you will receive an email to download the files. Check your spam and bulk folders if you don’t see it in your inbox.

Screenshots of Interface Styles

Soft shine buttons for an elegant look.

Hard shine buttons to make your buttons pop.

Inset buttons to lift your interface.

Pressed buttons for an impressive affordance.

Subtle buttons for dark interfaces.

Text fields for a beautiful form.

Web boxes to hold your content.

Knobs for your sliders and switches.

Fancy text for titles and headings.

iOS navigation bars for iPhone and iPad mockups.

Our Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns


Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

26 Responses to “Interface Styles 3: Make Mockups Faster Than Before”

  1. Erik

    Oct 14th, 2011

    why not available for AI and/or PSD?

    Rather – please please an AI set and I will definitely be a customer :)

    • Daryl

      Nov 14th, 2011

      These styles are for web graphics so that’s why they are for Fireworks since that is Adobe’s dedicated web graphics tool and what many serious web professionals use who focus on the web.

      • Photoshop and Illustrator User

        Nov 25th, 2011

        That is seriously the stupidest remark I’ve heard in a while. I am a serious web professional and I use the serious programs: Photoshop and Illustrator to design. Fireworks in my opinion is for garage designers who’ve just graduated from school.


        • Rob

          Nov 28th, 2011

          I know lots of serious web professionals who use Fireworks. So no, this is not a stupid remark. What’s stupid, is saying that Fireworks is for garbage designers, when Photoshop pretty much pioneered crappy filters, ridiculous lens flares, and is still being used to create horrendous fake HDR photos.

          • rafael

            Dec 2nd, 2011

            Fireworks is more used than Photoshop for mockups. That’s why there is only the FW Style. 😉

        • Steve

          Dec 8th, 2011

          Fireworks is an incredibly capable application – it’s not the toy you think it is. Photoshop on the other hand is over sized, over featured, and clumsy when it comes to web design.

          Both are amazing software. Fireworks is still around with good reason.

          • Dal

            Jun 25th, 2012

            @rafael, there is simply no way. Photoshop is the single most used graphics application, more than all other apps combined. It is the de facto tool for creating mockups, although perhaps it shouldn’t be.

            I agree with the commenter who said Fireworks is for mostly used by amateurs. Adobe have not kept up pace with recent developments in other apps. This doesn’t mean that if you use Fireworks you are not a good designer or an amateur, necessarily.

  2. HelloBillyGoat

    Nov 5th, 2011

    I second that! Styles for .AI would be super. I’d buy it!

  3. Anonymous

    Nov 5th, 2011

    Do you guys really use Illustrator for web mockups? :/

  4. Bill Dexter

    Nov 17th, 2011

    “…and what many serious web professionals use who focus on the web.”
    I’m a serious web professional that focuses on the web and I use Photoshop and Illustrator.

  5. Victor

    Dec 2nd, 2011

    as a
    mockups > illustrator
    creation > photoshop

  6. Victor

    Dec 2nd, 2011

    as a web professionnal.

    mockups > illustrator
    creation > photoshop

    Can be nice to have those interface elements for AI and PS. The Firewokers are still happy, and the other web professionnals, start diggin your work and share it


    • anthony

      Dec 2nd, 2011

      The problem with PS is that it’s not a vector tool. The problem with AI is that the graphical controls are awkward to use. Nevertheless, I’ll see if I can make a PS or AI version.

  7. Boots

    Jan 23rd, 2012

    Yeah… I’ve been designing/building sites for 14 years and have never used Fireworks, even when I had it with the Macromedia Studio. I’ve also never worked with or known anyone that has used it as their goto. For me, the tools are Photoshop and Illustrator.

    • Daryl

      Apr 9th, 2012

      The Adobe icons and splash screens for Photoshop, illustrator, and the rest of the Creative Suite in CS5 were all designed using Fireworks.

      (You’ll have to scroll all the way down near the bottom of the article part about Adobe Fireworks used for the CS5 artwork)

      So if you use Photoshop, then Adobe for one is someone you know that uses it as their “goto” when it come to screen designs. In fact, every time you open up Photoshop or look at Photoshop’s icon in your dock you are seeing and using the work of Fireworks.

      Not surprising of course since Adobe’s own website specifically refers to Fireworks as their design tool for web and screen graphics, not Photoshop or Illustrator. So it makes sense that is what they turned to when they needed to represent themselves and their products in the best way possible on your screen.

      I’m sure Adobe’s flyers, brochures, and other *print* material are designed in Indesign, Photoshop, and Illustrator though.

  8. Jammer

    Feb 22nd, 2012

    Why do you lot use Photoshop and Illustrator for Web Design and Mockup?

    You’re using the wrong tools for the job.

    Illustrator – Vector program mainly for print.
    Photoshop = Image manipulation.
    Fireworks = Screen Graphics and Website Design.

    If you visit the Adobe site, even they categorise their own programs like this. Check it out if you don’t believe me. Go and visit the Adobe site and read for yourself what each program is meant for.

    No one’s saying you can’t design sites very effectively in Illustrator and Photoshop, but they’re still the wrong tools for the job. It’s like using a monkey wrench to undo a nut, where you could just use a ratchet.

    Fireworks has loads more features geared towards a strreamlined workflow when designing websites that Photshop and Illustrator, even combined, can’t even begin to equal.

    Also, Fireworks is easil the best tool for designing screen orientated Vector graphics. In other words the sort of thing you might use a lot for designing websites.

    Where Fireworks cannot be used however, is in designing for print as it runs naturally at 72DPI (which is perfect for….. drum roll….. designing websites).

    Photoshop and Illustrator are bloated, clunky and slow for this purpose. Just watch the next couple of years as more and more web designers switch over to Fireworks. It’s inevitable, once they glimpse the workflow it offers.

    • Markos

      Mar 28th, 2012

      @Jammer – I completely agree with you. I’ve been using photoshop for years and switched over to fireworks recently. There was an adjustment period for sure – but it is totally worth going through that. The benefits fireworks brings to the table for web design are fantastic.

      I still use photoshop for doing things like, say, photo manipulation, or hardcore image creation (which is what photoshop was designed to do) but for everything web based, from mockups right through to final art, Fireworks is the business.

  9. Avangelist

    Apr 26th, 2012

    @jammer – Illustrator is more of a reasonable tool to use for web design elements today than ever.

    Illustrator creates vectors, PS and FW produce Rastors.
    Which one scales to different sizes?…

    • Joshua

      May 9th, 2012

      That’s not true. Photoshop has always had shape layer graphics which are vectors. You can actually paste a vector from AI right into PS as a shape layer. Also Photoshop CS6 has vector tools similar to illustrator now. Mostly to fill the need of UI design for high pixel density graphics that are required for devices like the iPhone and iPad with retina displays.

  10. luke w

    May 9th, 2012

    @jammer, thanks for the tip on fireworks – hadn’t looked at it since fireworks MX but it’s now a big improvement over PS for web design…

  11. Brad Becker

    Jun 8th, 2012

    Fireworks occupies a spot somewhere between photoshop and vizio. Compared to photoshop, it’s more oriented toward objects and–imo–much faster to work on wireframes and lo-fi prototypes, faster to change properties of objects, etc. It’s also very focused on web/UI design. Where it falls down is quality (especially text rendering–but other areas too), print (by design), and in the overall lack of total investment compared to Photoshop. And, for the legions of Photoshop devotees, they actually have to unlearn behaviors to effectively use it.

  12. Ceteco

    Sep 20th, 2012

    lol, everyone is so serious.

  13. Chris

    Feb 5th, 2013

    This debate over the best tools seems pretty ridiculous to me … at least in this context. If everyone here is so proficient and gifted in the tool they’re backing so strongly, they wouldn’t even have need for these elements, they’d make them themselves using their program of choice.

    Thrown down some coin for the Interface Styles or get to work! 😛

  14. Rob

    Jun 3rd, 2013

    How do you all feel about Fireworks now that Adobe killed it? Illustrator is way better than Photoshop but honestly, just use what works best for you.

Leave a Reply to Anonymous