Table of Contents
Do you know what is better than being a well–paid employee, freelancer or consultant? Making money on work you love when you sleep. Product development is what can make this dream reality. Imagine waking up in the morning, looking at your mailbox and seeing notifications about new sales. How does that sound to your ears? Fortunately, starting out in product development can be relatively easy. You can use your coding skills to create things such as templates. In this post, I will share with you my process of developing new product.
You can read the rest in part 2.
Looking for a PMF (Product Market Fit)
This is not something I fully implemented yet, but it is becoming more and more important. I am talking about doing a market research before doing any work. It is great to build amazing products, but if nobody want to buy them, you a) wasted your precious time and, if you are self-employed, b) still have to make money somehow. For this reason, it is better to invest couple of hours or a whole day and do widespread market research to find out what product people want to buy.
Where can you look for when the product you want to create is a website template? The top spots will be online market places like Envato’s Themeforest and Creative Market. Focus on the top selling products and limit the time to, say, one year or month. Another great resources can be a job boards for freelancers like Freelancer and 99designs. What is better way to find out what people want to buy than going through their actual demand.
When doing the research you can also get some idea about the price range for your product. Another benefit of doing market research as a part of product development is that you will know what are the hottest design trends that sell. You can then apply these design in your product to make sure it will look like what people want.
Product development starts with a plan
When you are done with the research and know what kind of product you will create, the next is to establish a plan. This does not have to be anything complex or a rocket science. The first thing that every plan needs is a schedule and deadline. Having a deadline is something you cannot omit. What I found useful is to set a deadline and then make a public announcement on my twitter account.
You can also set a clear milestones to divide whole project into smaller and more manageable parts. For example, in case of template, you can create a milestones according to individual pages the template contains. Personally, I don’t follow this approach of setting a milestones to pages. I rather work in sprints or marathons form start to finish with keeping eye on one big deadline. Another thing I like to implement into every project I’m working on are daily reviews in the form of a shots posted on social media and WIP on Behance.
I found these daily reviews very helpful to keep me on track. In other words, if I did nothing in the day, I have nothing to share. Sometimes, you will find people are sharing and liking the shots. Other times, people might give you feedback and help you improve your product. Making it better than it could be. What’s more, doing these daily reviews, you can build a solid following and prepare for the product launch before it’s finished, not to mention getting recognition for your work and yourself (Behance profile). The best branding and for free.
Product development on the paper
The next stage, after doing a research and creating a plan, is to sit down and start drawing. One thing I cannot recommend more is to do wireframing before going to code. You can create wireframes digitally in software like Balsamiq, Axure or Invision or go with pen and paper (my preferred option). Analog or digital, just make sure to put your idea down first. Never, ever, ever for your own good forget this part of development process.
By putting your idea on the paper (digital or physical) first, you will be able to create the whole picture of the product and have better overview about it. Then, you can change and improve parts of it as you go. You will not need to remember everything which will give you more space to focus on more important tasks in hand. Also, you will be able to unify all the parts under one design direction and style. As a result, your product will have an integrity.
Moving on to code and preparing documentation
You have the idea. Deadline was set and announced on social media. Wireframes are finished. It’s time to move code. Since this is about building templates, the technology you will work with will probably include HTML, CSS (let’s keep the HTML5, CSS3 and ECMAScript 6 out of the game), Sass and JavaScript, either vanilla or some other libraries like jQuery. In case of developing template on WordPress CMS or framework such as Laravel, you will work with PHP.
You have to remember that you are creating products people will buy and use on a daily basis. Do your best and strive to create product people can rely on. Meaning, your code has to be valid and follow the best practices. I always use validators for HTML and CSS and linters to find potential errors or typos in JavaScript. Remember that code needs to be readable, so your customers can suit it to their needs and populate it with their content.
Providing detailed documentation is crucial. Fortunately, sites like Themeforest will not accept your product without documentation. Make sure you will include it. Since you cannot predict what software and knowledge your customer have, I always make sure to include three versions of it, i.e. file types. First is plain TXT created in notepad. This the lowest level (except handwritten letter) you can go. Second is page written in HTML and CSS. Third and last version is a PDF. All versions have the content. Secret … use HTML version to print PDF.
To make the process easier and faster I keep the structure of documentation for every product (template) the same. Basically, it is a template on its own, just change the content. The structure is following … First is an introduction with basic information about the features of the product. Second is section dedicated to fonts. Here, I describe what fonts are used in template and if they are free or not. In case of free fonts I also talk about loading fonts from CDN, what does it mean and why it is better for a customer to do it this way.
Third section of documentation is for information about template. This includes technologies used–HTML, CSS, Sass, JS and so on. I will also show samples of HTML and CSS (Sass) code in the form of snapshots to show the structure of code. Right after code examples, if jQuery is used, I will describe what version it is and where it can be found–folder names. The same thing with CSS and Sass files. Next I will mention that all assets are optimized and code is in two versions–development and production–with explanation what it means.
The last part of template section is information about grid system and responsiveness and finally the browser support. To make sure I will use the right browser version I use caniuse website. The last section is for credits. Here, I will include the links for all the fonts, plugins, libraries and frameworks used in template. I will also include a list of sources for images that are used in template and its authors.
Speed it up with your own framework
This all may look like a lot of work and it is. In the beginning, when you have to create all these files and fundamental parts of product from scratch, it takes a while. Fortunately, this time investment will be shortened as you will be able to put together your own framework. From that moment, when you will start new project, you will simply deploy this pre–made framework (HTML, CSS, Sass, JavaScript, documentation, folder structure, favicons, etc.) and start from there.
The structure of framework I put together is simple (or complicated?). It contains six folders–_help (documentation), _moodboard (inspiration), fonts, images, js (scripts) and styles (CSS and Sass). Right now, I use one folder for both, CSS and Sass. I’m thinking about about creating one folder for CSS and one for Sass to keep it separated. I should also mention that I use altered ITCSS structure for my Sass code. It’s about twelve scss files I will, in the end of the work, import into one main. Also, don’t forget minified version of CSS and JavaScript.
Next are files in root folder. First are files for favicon–28(!). Here, I have versions for Android, and Apple devices as well for desktop browsers. All in multiple sizes in PNG format except one (ICO). Manifest for web apps and mstile for IE 10 and 11. Browserconfig for IE 11 to find the tile pictures and color is also included.
The last files are humans and robots text files and archive with license in RTF format. On top of this will then come HTML (or PHP) files for individual pages depending on what product am I working on. As you can see, every customer will get a nice and big package.
Why I don’t use Photoshop
As you might notice, I didn’t mention using Photoshop or any other graphic editor. It is not a mistake or poor memory. I just don’t think it is worth the time to create a Photoshop (Fireworks or Illustrator) mockups before moving to code. Sure, if your goal is to create a PSD template and nothing more, go ahead and have fun. Otherwise, I suggest you kick Photoshop and other editors out of your workflow. For some people, skipping this step this can be hard, at least it was hard for me.
About five years ago, when I began in web design in general, I always created the PSD version of the page before coding it. Many people were telling me to work this way and designing in the browser was not an established practice back then. With time, however, things changed. I became more and more tired by of spending hours in Photoshop going through the layers and making little changes here and there according to client’s recommendations. Have you ever tried to change the whole color palette in mockup?
Yes I was a newbie and many Photoshop tricks were a big unknown for me back then. Regardless of your skill level, what is better than creating three or more versions of mockup to show how responsive the page will (actually never) be. Yes, sweet lies covered by pixel-perfect design. Moving on, in most cases mockup was just another step in the whole process, followed by creating live version of the page.
Let’s say you spent couple days on mockups, polishing every little detail to make the design excellent. Now, your job was to repeat the whole process again using HTML, CSS, JavaScript and maybe PHP. Another funny thing is that even though the mockup was perfect, you will soon realize that the reality is a bit different. This is a fact. It almost looks like Photoshop exists in different reality than the code. Meaning, you had better be prepared for another series of sprints to fix the problems your client will see, and he will see them.
To sum it up … You might spend the same amount of time, energy and effort on the coding as you did on creating the mockup. In other words, you did twice as much work for the same price. Are you happy with how the things are looking? I was not either. Solution? Cut out one step from the cycle. This decision was fast … Photoshop is out. Man, I felt in love with my work again! It could be because I love programming in general, but the time saved was for sure another key factor. It was also more pleasant to work with clients again.
Release is just a beginning
Your product is done. Congrats! You are already ahead of most of the people who want to get into product development. You started, worked your ass of and shipped it. That is something you can be proud of. However, when you finish the product and release it, you are, in a fact, entering new stage where everything starts all over again. Now, you have to switch from worker’s mindset to marketer. You have to get out and spread the message about your product among as many customers as you can. Otherwise, nobody will know.
Closing thoughts on product development and my workflow
Whether you already are in product development or you want to get in, I hope this post will help you and give you a better overview of the whole process. What you should always keep on mind is that when you are creating a product, or just anything, be precise and go for excellence. Your products will be used by people, so they should be stable and trustworthy. What’s more, you are also building a reputation. So … Don’t ship shit.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
