Last week, we talked about the benefits of designing your app before you build it. Save money? Get to market faster? Maybe even get some funding while you do it? Sounds pretty good to us.

But how do you get started with designs? First, you’ll want to create wireframes – which map out exactly HOW your site is going to work. And from there, you have a couple of options.

Option #1: Custom Design

What is it?

With custom design, you’ll hire a trained designer who will take your wireframes and turn them into something beautiful. This means they’ll come up with the right color scheme, button style, imagery, and placement on the page to make the user experience seamless. Generally, when working with a designer, you’ll iterate multiple times before you get to your final product – starting with high-level sketches, a landing-page mockup, and then more final designs. The ability to provide feedback at every step in this process ensures that you’ll land exactly where you want with your final product, and is easy to hand off to development.

Is this right for me?

Do you have enough budget to cover custom design? Do you have enough time before you have to get to market? Do you feel that your product needs to strongly communicate a unique brand image? 

Is this right for my product?

Is your product a little bit more complex than the average app? Is UI going to be key to the user experience? Are you anticipating that your features might need a little more explanation, or guidance? Or do you really need to differentiate yourself from competitors in the market?

The Net-Net

Pros: By working with a designer, you’ll get exactly what you want. It’ll feel “right”, to you and your customer, and you won’t have to re-work anything down the line. A quick and easy handoff to development means little iteration will happen during programming (speeding up time and keeping costs down).

Cons: Can be expensive depending on how extensive your design is, and will take longer.

Option #2: Off-the-shelf UI

What is it?

Off-the-shelf UI components are essentially packages of visual elements that can be used by your developer to create your site. What does this mean? A package will include your theme colors, a particular style of buttons, headers, and links, and templates for app elements like dashboards, forms, messaging, and beyond. Each package is a little bit different, and will either focus on a particular style or type of app (e.g. a more data-driven package will have better templates for dashboards and graphs, a more standard package might have more templates around messaging and form submissions).

Some examples include: http://demo.bootstrap-ui.com/ / http://www.bootstrap-ui.com/, https://agileui.com/demo/monarch/demo/admin-template/index.html, http://demos.telerik.com/kendo-ui/bootstrap/, http://coreui.io/, http://demos.creative-tim.com/now-ui-kit/index.html

(Note: these examples are all free off-the-shelf UI components. While there are paid versions that are a little bit more customized, the free, open-sourced ones are going to be better quality since they’re more frequently updated).

With off-the-shelf UI, your developer will be the one implementing the design, which means there can still be a fair amount of back and forth about things like exact placement on a page – depending on how closely the package templates mirror your wireframes. And you’ll need to be a little bit more involved in those decisions than with a designer (whose wheelhouse it is to know the right answer).

Is this right for me?

Do you have a tight budget? Do you need to get to market really quickly? Do you have a pretty clear vision for what you want your site to look like, and is it fairly streamlined?

Is this right for my product?

Is your product pretty intuitive to use, with a fairly small feature set? Are the calls-to-action something your users will easily understand? Is your product more like a utility than an experience (i.e. doesn’t require as strong of a brand image)?

The Net-Net

Pros: Cheaper and faster, can work really well for simpler applications.

Cons: Requires more iteration with your programmer (who is likely not a designer) and may cause some re-work (both in the initial phase, and down the line when you’re ready to further customer your product). Also offers less customization for your individual brand.

Ready to go ahead with designs? Don’t miss our post on how to find a designer.