A quick reminder: Save yourself (and your customer) unnecessary work by spending roughly 100 euros on an application user interface template instead of writing everything by yourselves. You all use UI templates already – right?

The artist’s vision

Projects often start from what I call the “artist’s vision” – a visual mock up of the application-to-be. The reason for producing these mock ups is simple: What you can see is what you can understand. Instead of showing hundreds of pages of requirements analysis, database diagrams, architecture drawings or not-so-fancy wire frames, we want to present something both tangible and visually pleasing. And there’s nothing wrong with the idea – prototyping user interfaces based on user discussions is one of the best practices to follow.

The problem arises if you choose to use “photoshopped mock ups” as the very first customer presentations. Even if this is intended purely as mock up of the app-to-be, these visuals tend to start to live their own life, becoming images burnt to customer retina and mind; “that this is what the application will look like”.

The cost trap is ready and armed. When the actual coding starts, the app showing in the mock up is what you’re expected to produce. The html/css/js coder starts by opening an empty notepad, and starts creating the styles, layouts, navigation, pages and gimmicks used either from scratch or by scraping the stuff from web examples. If your goal is to maximize customer billing this way of course makes perfect sense.

The right way

Before showing any mock ups, ask customer for a quick session what he/she would like the customer interface to look and feel like. Tell the customer the story as it is: By using a ready made application UI template, not only you save money in design, but also automatically get the best practices for this particular type of application.

Picking the theme

Prepare yourselves by visiting a shop like Themeforest. If you are building a line of business apps, check out the Admin – templates section. If the customer is asking for a web shop, check the e-commerce templates. The place has full catering of app types – you usually don’t need to invent anything by yourself.

The templates usually follow the current best practices for each application type; For example, web shop templates contain everything people would expect from a web shop: A nice front page, the navigation, product list, single product details, cart and submit order pages that you’d need to implement anyway. The admin template contains everything you may need for line-of-business apps; Searches, user profiles, forms, calendars, notifications, timelines, graph templates – everything.

Choose a popular template (meaning it has lots of downloads), and check that the template vendor has existed already a good while. This is the best guarantee that the theme is most likely supported at least in the near future. Examples could include (but definitely not limited to) Metronic for line-of-business apps, Avada for e-commerce site/mixed content.

Pick a few good options, and show the theme demos to your customer to give him/her an idea of what the app-to-be-built would look like and how it behaves. Let customer choose between the alternatives. This sets the customer automatically to right mindset: “This is what the app will generally look and feel like, we just add our own content to the template we bought as a starting point.” He/she might even be happy about the money saved using this method. If you need to have a the visual representation before you even got the deal (RFI, offer), pick the theme by yourself, and go with that. It’s your best guess.

Then off to prototyping!

After agreeing on general style (= the template), your html-heroes and UX designers may start prototyping the app content with the customer – using the visuals and components and conventions the theme offers off the shelf. You may create additional components if you absolutely must, but this is a thing to avoid at all cost. Stick to what the theme offers. If your UX wizard prefers wire frames for designing individual form contents and such, that’s ok. But always the better if you can get the design embedded in theme styled pages as soon as possible.

Punchline

There is just NO WAY you can justify manually building what the themes offer off-the-shelf, as the theme prices are typically in max 100 EUR per project. Plus the visual design you’ll get most likely beats the one you would come up with. Agreed?

Counterarguments

If you are worried about the future support for selected themes and UI components, there are professionally and commercially created libraries for you to purchase. The price tag will be much less appealing, most likely not suitable for smaller/medium projects. Popular examples being telerik, Infragistics and devexpress.

Another common approach is also to scrape the navis, pages, colors, margins and required js-css-components from popular opensource examples and components, or try to reuse the design from your last project. This may sound like a solid approach, but in real life it’s a very time consuming. The difference between well made themes and scraping is that themes are coherent – usually all figured out from the start. You don’t need to hunt for calendar component capable of showing time as well, color match the timeline component to selected css colors, find a file upload component that matches the jquery version – with themes, everything has been prepared, tested and working. You just start using.

Make your life easier – please use themes!