Try Tuts+ Premium, Get Cash Back!
From Idea to Market: How We Built Gradient

From Idea to Market: How We Built Gradient

Retracing the steps you’ve taken is a helpful way to understand how well you’ve executed your vision – whatever that might be. What could you have done better? What should have been avoided? Today, I’ll share what we’ve learned (and are still learning) while crafting Gradient. It’s an experience that has changed everything for us.

First Sketch

Building a product, be it a native app, web app, or service, is always a challenging task. However, once we convinced ourselves to follow a few pieces of advice, we managed to ship something we believed in. And this is what I’d like to talk about.


It All Starts with a Simple Idea

For as long as I can remember, I’ve always felt that great products needed unreachably smart ideas to be built. I was exceptionally pleased to find that this is not necessarily true.

More often than not, if you find a simple way to solve a problem that you personally have, you’re probably going to make other people’s life easier as well.

Turning that solution into something you end up selling or giving away for free (that really depends on your vision, which I’ll talk about later) is the most logical following step.

In our specific case, we were building our own website, which is rich with linear gradients, and I found myself complaining loudly about the tedious process of writing lines and lines of CSS code – all for the purpose of making every browser agree on the fact that you’re actually writing something they can understand.

“What if”, I asked Yari (@yariok, the developer), “we had a native app that took care of it?”


Your Vision Will Lead the Way

Once you have your idea, however simple it might be, you get to decide what goals you’re setting for yourself (or your team).

  • Do you want to make money with your application or service?
  • Do you want to be glorified for your incredible prowess in development or design, while not making a single buck in the process – with the side-effect of becoming a respected authority?
  • Do you simply just want to have fun?
  • Do you desire a one-time release with no further hassle? Or, would you prefer to follow an iterative process

Every choice will be influenced by what you want your path to be.

The investments differ dramatically. Maybe you dream of turning this project into the only revenue source you have and finally get rid of client or office work. Whichever the case might be, stick to that. Every choice will be influenced by what you want your path to be and you will have a much easier time when facing a fork if your vision is strong since the beginning.

Our Choice

Here’s more or less what we decided for Gradient:

  • Paid App: So that we can cover our investment at least in part.
  • Iterative Development: This will allow us to add features gradually and grant exposure for a longer time-span.
  • 100% Custom UI: My fault!
  • Exposure: We want to be recognized as competent in what we do (glory!)

As with anything, there were also a few bonus goals. It would be nice if people I learned CSS from used my app. Also, what if this app created new possibilities with people around the world?

Once all this was set, we did everything we could to make the app a reality.


Have a Plan Before Writing a Single Line of Code

It’s quite simple, actually. If you have a good plan laid out, you can have a measure of how much work is going to be required to develop your project. This means that you can start marking dates on your calendar. This also means that you can begin creating expectations for those dates. Ultimately, this helps if you plan to create some hype among users and the media.

These trivial tasks will undoubtedly turn into huge time sinks.

Many times, especially if you’re not used to promoting or communicating your work, when laying down the plan, you will forget about some apparently trivial aspects. Of course, you’re focused on getting your “creature” just perfect for the launch or beta, and you think the rest will be taken care of in no more than a couple of hours. These trivial tasks will undoubtedly turn into huge time sinks.

For instance, you’re not used to marketing lingo… or you haven’t thought of everything that might happen when your product finally reaches your potential first users…or you forgot about a banner…or the mail you will be sending to your beta testers. Countless little things like this will add up quickly!


A Note on Focus

Often, when you’re excited about what you’re creating, new ideas, beta tester suggestions, and nice-to-have features will come to you during your sleep.

These ideas have the potential to deter you from your planned path.

It happens all the time – and certainly did to us. Take time to consider thoroughly if these new ideas are truly worth the diversion. In most cases, stick to the plan.


Prototype Like There’s no Tomorrow

There’s nothing quite as valuable as building something usable quickly. Weaknesses in the UX design of your product are so much easier to spot when you’re actually using what you’ve built. There’s not much theory here, really. I think this is the most straightforward step.

A couple of hours after my initial complaint, we had the first rough incarnation of the app. It had HEX input and the output was messy code, but the idea was definitely in front of us.

First Incarnation

We added from there, building what we decided was the very basic array of features our first version needed to have, and then refining the usage patterns in order to streamline the user experience as much as we possibly could. We wanted it to be the fastest solution for that problem. We were and are aware of free and well established competition and our focus went on refining those features our competition couldn’t have.


Don’t Be Afraid of Talking to Strangers

In fact, they’re your best friends. There’s no room for introversion, if you plan on creating your own application or service. You absolutely must get in touch with other people, such as opinion leaders and those who you admire (or even intimidated by). But beyond these folks, also connect with lots of geeks like you! You definitely want people to talk about your project and the only way to let them know is to speak to them directly.

Once you do so, expect one of the following reactions:

  • questions / problems / complaints
  • ideas / suggestions
  • thumbs-up / hi-fivers / hugs
  • nothing at all (frustrating, but common with some “celebrities”)

Seek publicly available email addresses, reach out on Twitter, use every instrument you think might be relevant to your target audience (Dribbble, Facebook, you name it), listen to what the others are saying, and engage people in relevant conversations. It’s time consuming but it will make a huge difference.

If executed correct, the pieces quickly fall into place.

For us, this engagement pattern led us from less than 300 followers on Twitter at the beginning of September, when we began our closed beta, to 1000 and counting on launch day in November and a growth in actual amplification that went from no more than 5 retweets on the first beta announcement, to more than 70 retweets and many other support messages from the entire community in November – including many of our heroes. Visits to the website and registration increased exponentially.

Additionally, this led to new interesting business opportunities, connections we could only dream of just a couple of months ago, a lot more visibility and also some new good friends. If executed correct, the pieces quickly fall into place.


There’s a Price

It’s tricky, though – especially for people like us who prefer creating things over pricing them. Again, your vision will help you with this, providing you with at least a range of options.

Studying your market of choice, especially in contexts like the App Store, where the data is mostly kept secret, is difficult and takes time, but, again, rational thought comes in handy. Here are the questions we answered when coming to our decision:

  • What’s the price of similar products? (on the App Store in this case)
  • Do we want it to be an impulse or a well-pondered purchase?
  • Based on the development effort, how much money do we expect to make? Can we estimate how many units we could sell?
  • How much would we be willing to pay for it?
  • What benefit will people have from our app? Is it countable? In this specific case, how much would they be willing to pay for the relevant amount of time saved?

As a reasonable indicator of how things are going, we’re right now evaluating user feedback. Unless what you build is free, there will always be someone screaming at you because your product costs money. However, if some of these buyers reply to you, explaining why the price is reasonable in their eyes, you’ve likely hit a sweet spot. (And you have awesome users.)


Hit the Shelves or the Screens

Building your own product is both a challenge and the most rewarding adventure in our industry.

It’s a wonderful experience; building your own product is both a challenge and the most rewarding adventure in our industry. Ironically, the things you learn in the process serve to be the best prize at the end of your path. The connections you build along the way are extremely valuable. You gain respect, because you demonstrate you’re able to ship. You transition from an idea, to execution.

Once your product reaches the public, a new journey begins, and many new interaction possibilities open up. Still, though, the same rules that you’ve followed still apply. Don’t stray from the path.

We’re sticking to our plan. So far, things are going exactly according to plan!

Tags: css3
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Jonathan

    When I click the link to gradientapp.com in Internet Explorer 9 I am taken to “fail.html” and receive a lecture about standards compliance issues in old versions of IE, and how you have chosen not to support my browser.

    Seriously? As a web developer interested in this app, the kindest thing I can say about your web site is that perhaps it is a victim of your ignorance regarding IE9?

    • Johnny

      So you are a web developer that uses IE?

      “i don’t want to live in this world anymore”

    • http://www.jeffrey-way.com Jeffrey Way

      That’s definitely odd to redirect IE9 users. Maybe they figure that a Windows user isn’t their target market, so it’s not worth the effort??

    • http://www.havorneed.com adam

      It’s if your in IE9 Compatiability mode OR anything less than regular IE9 it seems.

      Still silly to be dropping support for even IE8 if you ask me… We still battle the fight daily to see if we’ll be dropping support for IE6+IE7 here at the jobby-do.

    • http://jumpzero.com Nicola Armellini
      Author

      I appreciate the kindness. Thanks! :)

      This said, this is exactly one of those situations described in the article in which you get exposed to harsh criticism because of something you overlooked. :P

      No one ever complained for being redirected to that page and so we never discovered that IE9 was among the target browsers (while we didn’t intend it to be).

      Thanks to your comment we now know it and fixed it, and regular IE9 users can access the website (but unfortunately they still cannot experience the cutting-edge “text shadow”).

      Sorry if you felt offended, we never meant to upset any modern browser user or to lecture you or anyone. It really is just our opinion.

      • Tommy

        Not to be a typical interwebz “black cloud commenter”, but do you really feel it’s best to be so “opinionated” when your trying to sell an app to the masses? Honestly, if the average user visited your site and was greeted with your message, do you really think that they are going to take the time to upgrade their browser? I honestly don’t think they would. They would just hit the back button and find another similar app that doesn’t require a browser upgrade. So what does it really accomplish aside from the fact that your life was made a little easier because you didn’t have to make the site compatible with older browsers? Yes it attempts to inform folks and make the web a better place but is a sales website the most appropriate place to spread this gospel? I personally don’t think so. If you build a site with the intentions of selling an app, the site should be for sales, not opinions.

        I’m a web designer myself and have been battling IE my entire career so i can fully understand your position on IE’s ineptitude. But, as someone who is also in marketing, I can only cringe at making a conscious decision to build a wall around your product for certain users. Because, lets face it, that’s what was done. This poor decision was only made worse when you failed to properly test your redirection strategy (therefore, thinning your pool of potential customers even further ). And, considering the fact that your user base is already limited by OS availability, it seems to me you’d want to do everything possible to expose your app to as many people as possible.

        I fully appreciate the article and that it outlines the process and evolution of this app but I can’t help but think that you have some things left to learn when it comes to marketing the app. I hope that you can iron these challenges out and hopefully, update your post later or create a new one to keep us updated on your progress (and new lessons learned). Please understand, I’m not here to rip on you guys. I think it’s awesome that you solved a problem internally and plan to share that solution with the world (and i can only wish you the best with it, honestly). This is why it upsets me to see you limiting your possibilities as it’s my job to remove the friction and challenges that prevent someone from handing over their money. I wish you all the best with the app. :)

      • http://jumpzero.com Nicola Armellini
        Author

        @Tommy

        Thanks for taking the time to write your suggestions. I always like a good exchange of ideas. I’ll detail the “marketing” reasoning behind the choices we made, though, because I think your comment neglected some important details and implied we just didn’t think about this:

        1) IE users are NOT potential users in, let’s say, 95% of the occasions. As outlined in most comments, it’s a Mac only application and IE only lives on Windows.
        2) no tech-savvy Mac user (i.e. develpoers/designers) temporarily on a Windows machine will ever deliberately choose to use IE over whichever other browser at hand.
        3) of ALL the visits we ever received to Gradient site, only 0.35% of them were from IE (again, 90% of which on the 22nd of December, date in which this article was posted). This means there’s a high chance we got to apologize to whoever felt cut out because of our mistake – via the comments.
        4) Gradient is by no means an app for the masses. It’s for a small niche (web designers/developers on a Mac).

        So, strictly by the numbers, our “walls” kept away (for a few hours) a really limited number of users overall, of which, if any, only an infinitesimal percentage might have been potential users. A mistake, but a purely technical one for which we are sorry. In no way we overlooked this on the marketing side!

        Closing, we’re opinionated so we don’t need to compromise. It’s part of our vision. We put it in every site we build for ourselves, because what we do is a reflection of who we are. We don’t want to bend to ideas we don’t believe in. We’ve spent years forced to do that while working in other companies and we quit because we’d had enough. It feels so much better now :)

  • Larz Conwell

    That first header should of been “It All Starts with a Simple Idea, To Limit the Software to Mac Only”

    Other than that, it looks awesome. Too bad I can’t use it, or i’d buy it.

    • http://designoob.wordpress.com mojo706

      “It All Starts with a Simple Idea, To Limit the Software to Mac Only”
      So sad :(

  • ryan

    ill buy it when its on windows

  • http://dirtekdesigns.com DirTek

    Awwww man! :(

    I would have loved a version for Windows. This app looks awesome.

    Great job, guys!

    • Abhijit

      For simple use cases use something like this – http://www.colorzilla.com/gradient-editor/, not an App though!

      • http://dirtekdesigns.com DirTek

        I know about Colorzilla’s Gradient Editor, but I’m the adept of desktop applications. They’re faster and much more comfortable to use. Well, I guess that we can hope that one day an app like this will be released for Windows as well.

  • Coz

    The sad thing here is you’ve alienated most of your potential client base by limiting development only to Mac. Now someone will come along and target the market you’ve overlooked.

    • http://jumpzero.com Nicola Armellini
      Author

      We didn’t mean to alienate potential users at all and we think it would be a great thing if someone took care of the same need we addressed, but on Windows. We just can’t do it :)

      If doing this we have created an opportunity for someone else, well, ain’t that a fantastic way to create a development ecosystem?

      • http://www.petarzivkovic.com Petar Zivkovic

        Agreed.

        Look at all the Windows-only software out there… nobody’s bitching about that.

        Whatever the platform, you’ve got a nice app there.

  • http://www.jeffrey-way.com Jeffrey Way

    It’s irritating when people attack an app for being platform specific. Unless you want to build your app with something like Titanium or Air, it’s a tough job to compensate for all platforms.

    • Coz

      Hey Jeffrey, it wasn’t intended as an ‘attack’, and I apologize if it came across the wrong way. At the time of writing the majority of comments were saying ‘aww shucks, I’d pay for that if it was on Windows’. The authors want to monetize their app but have basically overlooked the majority of people who would buy it. If this same service was offered from a website, which I believe some of their competition is, then they would reach a much larger target base, but of course then they would possibly miss out on the ‘glory’!

      • http://www.jeffrey-way.com Jeffrey Way

        Of course they would, but it’s not always that easy. When you’re part of a small team, it’s not always feasible to provide cross-OS experiences, unless you use a tool like Titanium.

        I’m sure it’s hard for them to put all this work into an app, only to be criticized for not providing for every single OS.

      • http://mandogmachine.com/ Thomas Borowski

        I don’t think they’re ignoring “the majority of their potential client base”. This app targets web designers and web developers and the majority of those are on a Mac nowadays.

    • http://fb.me/gemmaweirs Gemma (@theoinksty)

      Likewise it’s irritating when Mac fans snub Linux and Windows users by restricting their apps to Mac users only. It comes across as snobbery.

      I’m not an app dev, so please enlighten me. What’s wrong with using Titanium to make it available to a wider audience?

      In any case, even though I, for one, appreciate the insights in the article, you can’t blame people for criticising. Especially not when Gradient is being shamelessly plugged on here where many Windows users happen to browse too.

      • http://www.jeffrey-way.com Jeffrey Way

        Is it irritating when Linux or Windows apps snub Mac? I don’t think so. I’m not pissed that Notepad++ or SimpleLess is only for Windows. That’s how it goes…

        I’m also not mad that Mario is on Nintendo, and Halo is on 360.

      • http://jumpzero.com Nicola Armellini
        Author

        We thought Gradient could be a good example because it was real life experience, but Mac and PC always create conflict because it activates prejudices and stereotypes (on both sides).

        Since the criticism is not about the article but about our choices it will probably complement the article well if we explain the rationale behind taking a pure and simple business decision.

        The application started as a way to solve our problem as web designers on a Mac.
        It was pointless then to develop anything other than a Mac application.
        Furthermore, we only know how to develop in Obj C and since there’s only one developer working on Gradient, investing in someone else or spending time in learning another language wasn’t a viable option.
        Apple also happens to provide a nice marketplace where to effortlessly sell the product of our work so this was a no-brainer.

        As you can see there’s absolutely NO snobbery. Just pure and simple optimization of resources. You can then substitute Mac with Windows PC and Obj C with whichever language you’d use on Windows machines (sorry I have no experience on that) and no one would call for snobbery and probably just take it as it is: a business decision.

    • Ryan

      I agree, I don’t even own a Mac at the moment but I’m not complaining about this because 1: it was my choice on which OS I use and 2: I knew very well most of the cool web developer software is on Macs.

    • Ben

      +1

  • http://twitter.com/brunogama Bruno Gama

    That’s a great App.

    • w1sh

      Thick framed glasses guy who hangs out on Twitter all day by himself loves the Mac-specific software. :)

  • srikanth

    Hey ya this is great app but why not for windows :(

  • matt

    Great app. Still anxiously awaiting the step gradients and radial but seriously awesome job!

  • http://ryanwood.me Ryan

    Just what I needed, I was getting sick of all of that grabbing/copy/pasting/opening photoshop.

  • Melinda

    I am in love with this app! I downloaded it during the beta testing and was thrilled with everything from the beginning! Great job, it is a beautiful app that makes things easier.

  • w1sh

    Why should I use Gradient ($5.20) over http://www.colorzilla.com/gradient-editor ? Seems like a prettier/less-functional version of something that is intended to simply spit code at me.

    For that matter, why Prefixr over http://css3generator.com ? The ST2 plugin makes sense, but if I have to go to a site to use it, then why waste the time typing anything at all?

    I appreciate the work put into these generators and this tutorial, and the Gradient App web-design is spot on, but these generators seem more like programming exercises turned into products rather than creativity turned into products.

    • w1sh

      So long as I’m being a jerk flooding the thread with free competition, I might as well be constructive too…

      JumpZero looks like a badass place to work. Your projects all look very clean. Keep up the good work and stay together as a team and you guys will go very, very, far.

      • http://jumpzero.com Nicola Armellini
        Author

        You saved yourself with this last comment. Thank you. :D

        While of course we’d rather have users buy our application, I think ColorZilla is by far the best web-based solution right now. It has a huge array of customizable options, just what many users need.

        A native application has other benefits, like system-wide access to features (the color picker for instance), that’s why we’d still rather use (and build) an app like Gradient. But as Jeffrey said, it really comes down to preference.

    • http://www.jeffrey-way.com Jeffrey Way

      CSSGenerator is for building single sets of rules. It’s helpful, though I’d say that it requires a couple too many clicks.

      Prefixr updates an entire stylesheet from your favorite editor, and can be automated. You never have to visit the website if you don’t want to. I don’t.

    • http://www.jeffrey-way.com Jeffrey Way

      And, for that matter, why should you pay for a code editor, when others are free? It comes down to preference. Some people prefer a more streamlined and beautiful experience.

  • Ron

    I love this article, im coming to believe your emphasis on social interaction to help the launch is SO relevant these days.

    • http://jumpzero.com Nicola Armellini
      Author

      It is absolutely KEY to any process I’ve had the chance to look at lately and for sure it’s the base of everything we’ve been able to do so far.

      It takes a lot of time, but it’s worth every second in my opinion. :)

  • supprof

    http://www.colorzilla.com/gradient-editor/
    colorzilla made easy for us you can also generate the css3 for it

  • http://www.idesignit.co.il/ Elron

    I dont use mac either… :(

  • http://philhoyt.com Phil Hoyt

    Will buy. I like the interface more then this
    http://www.colorzilla.com/gradient-editor/

    • http://jumpzero.com Nicola Armellini
      Author

      Thank you, glad you liked what you saw! :)

  • http://Www.ulynx.com John bouchet

    Can we save our gradient with this app????? It will be really fantastic to have a gallery to save or download no N,n, let me know :-)

    • http://jumpzero.com Nicola Armellini
      Author

      That is a really good idea, who knows… ;)

      If you guys want to request features you can contact us via the support page here http://gradientapp.com/support and tell us! I guess it’s more appropriate to move this type of discussion to where it belongs!

  • http://manovotny.com Michael Novotny

    Wow… There’s a lot of haters hating. Keep up the good work guys. It’s a solid app and the article was a great read on the behind the scenes process.

    • http://jumpzero.com Nicola Armellini
      Author

      I don’t think there’s ever going to be a post touching even slightly Win/Mac dichotomy that is not going to create some controversy. We could see that coming! :)

      Thanks a lot for sharing your thoughts though, glad you liked what the article was actually about!!! :D

  • http://www.starwebapp.com XuDing

    Great article on launching our own products.

    It is specially true to launch things as soon as possible.

    • http://jumpzero.com Nicola Armellini
      Author

      Thank you!

      Indeed it is. Getting user feedback is crucial as it helps you looking from perspectives you sometimes overlook (especially in small teams, in my experience).

  • http://maxwellbarvian.com/ Maxwell Barvian

    Don’t get me wrong, Gradient is definitely a well-designed, functional app. That being said, I really don’t know why you would use it, especially considering the prominence of CSS preprocessor mixins which let you tackle more CSS3 features without the obtrusive vendor prefixes. Being a Compass + SASS user myself, I can color pick the values I want using Photoshop and plug them into an elegant mixin like linear-gradient(#ffffff, #000000); To me, that’s more appealing than using an app which spits out the vendor prefixes and lacks radial gradient support. Just my thoughts.

    Kudos nonetheless!

    • http://jumpzero.com Nicola Armellini
      Author

      Thanks Maxwell!

      There’s absolutely nothing wrong in doing what you say! :)

      There’s still a lot of people not using CSS preprocessors though and Gradient fits right there. We also have plans for Compass and SASS but again, check our site if you’re looking for more info on that. This is more about the process not for talking about the app itself! :P

  • Dougieladd

    I believe I’ve already sent my love… :)

    • http://jumpzero.com Nicola Armellini
      Author

      Yes you did, buddy! ;)

  • http://jonathancutrell.com Jonathan

    Are there plans to have multiple color stops? I do very much enjoy having a native application that does this, but as I’m sure we all know, there are web-based applications that are slightly more full featured (and free) that inevitably are more useful, simply because they have more features. Take a snippet in Safari, and you’ve got a widget. Download the page, even, since it’s all done with js, and you’re done.

    I’d much rather see THIS app beat those out. Any plans to do so?

    • http://jumpzero.com Nicola Armellini
      Author

      You can refer to Gradient site for such info, and also contact us there if you’d like to request anything. :)

  • http://res.celseven.com/ Ryan

    Isn’t this app like http://www.colorzilla.com/gradient-editor/ Colorzilla’s gradient editor?
    Great app, anyway :D

  • GT
  • Tyler

    If I’m forced to see one more person mention http://www.colorzilla.com/gradient-editor/ then I may have to strangle them with there own lungs.

    On topic however, sweet app! Too bad it’s for mac only but such is life.