Themeforest Experience for Interface Designers

This article is dedicated to my interface designer friends who say, "I want to do it too, but I can't find the time." I hope it serves as a guide.

How long did it take to complete the project?

The entire process took about 1.5 months. Although I couldn't work on the project every day during this period, I always had the thought of completing the project as soon as possible and moving on to the next step in my mind. On the days I could work, I dedicated at least 2 hours and at most 3 hours to the project.

I applied a different working system than my usual routine. Instead of working in the evening after coming home from work, I shifted my working hours to an earlier time in the morning. This was quite a different experience for me because for a long time (years), I would wake up in the morning and go straight to work. I later realized that this had made me quite monotonous. Waking up early seemed like torture. But as I started waking up at 6 AM and sitting down to work regularly every day, I saw that my motivation increased day by day. I think this was the most important point of what I did.

So how did I manage to focus on my work and keep my productivity high when time was so limited?

Every day, I woke up at 6:00 AM and worked until 8:00 AM, dividing this 2-hour period into 4 equal parts (4P). I used 25 minutes for work and 5 minutes for rest. This technique is called the "Pomodoro" technique. Its benefit was that it allowed me to fully focus on the subject I was working on for 25 minutes. During this time, I ignored everything that came to mind that could distract me and started noting them on small papers. I then looked at these topics later, dedicating my time solely to work. Most of them were things not worth spending time on, of course.

Throughout the process, I sometimes started the day by reading a book to keep my mind clear in the mornings. As a result, I finished 2 books. Normally, finishing a book every two or three months was a great success for me. The benefits of morning reading could be a separate topic.

Initial motivation and maintaining it?

I didn't have a special method to keep my motivation high. My initial move was to start waking up early in the mornings. Once this became a routine, the work started progressing on its own, becoming automatic. Even if I didn't produce anything, the power of the morning always pushed me forward. Over time, the only thought in my mind was to enter Envato, this global market, with a design without wasting time. I recorded the tasks on Evernote and tracked the work from there.

I could have finished the project in a much shorter time, but I didn't pressure myself.

This was the best part of the job, in my opinion. I didn't pressure myself at all. I was doing my work for myself, which made me more attached to what I was doing. Instead of working freelance for someone else in my spare time, working for myself eliminated the fear of my design not being liked or other stress factors (job cancellation, not being able to meet deadlines, not keeping promises). Some people use this pressure to increase their productivity, but that wasn't the case for me. The more the work belonged to me, the more I enjoyed doing it. This also created a positive motivation for me. In the end, I think it wasn't bad at all.

Avoiding unnecessary work.

Throughout my life, I've always had freelance jobs. During this process, to not lose focus, I passed on incoming freelance jobs to other friends. Sometimes I did work for friends and family without charging, sometimes for my own ideas and projects, and sometimes for real clients. Although I was reluctant for some jobs, I had to do them because I couldn't say no. Frankly, I've made a considerable income from the work I've done so far. But since the jobs were unsustainable (make/sell) sources of income, they only saved the day, that is, the period when I delivered the job. I couldn't even show the client-based jobs I did as references because I was working full-time and didn't want to lose my salary.

Should I rely on others?

This was the most important thing I learned. If you rely on someone and plan your work accordingly, when something goes wrong on the other side, your work plan also gets disrupted. This makes you dependent on someone else to realize your dreams. My advice to myself was to chase my dreams on my own as much as possible. This doesn't mean I won't do joint work; it just means there should always be a Plan B. While the projects I did with a friend for about 6 months couldn't progress, this design went live in 45 days!

Now a bit about the work process. While making Phione, I went through the following stages.

Idea?

It didn't take long for me to conclude that the most suitable idea for the market was a One Page design. I saw that many ThemeForest profiles had such pages as their first product. It was very clear that they were made to get used to the market. I decided to follow the same path. My goal was already to pass the ball and enter this business from somewhere. I examined the example one page designs on Themeforest and noted down all the existing headings one by one. I only chose the ones I wanted to do from these headings. I accumulated many ideas that could be done. Of course, I had to set some limits for myself while determining these headings; otherwise, I would have too many tasks at hand.

Name?

Many designers know the golden ratio. The Phi number (1.618) is the ratio that emerges when the numbers in the Fibonacci series are divided by the previous number. It is a ratio used in the construction of works since ancient times and is also used in product designs (iPod), logo designs (Apple logo), or film shoots today, and is found in many living things in nature, considered the common point of human visual beauty (I read an article about this). (1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89).

http://en.wikipedia.org/wiki/Golden_ratio

Inspired by this, I derived the name "PhiOne" using Phi and the first number of the series, 1. Since I already had "One Page" (single page) in mind, it was a good fit. I later realized it could also be read as iphone phonetically. Google autocomplete says "phione" is incorrect 🙂 I didn't mind it much. Of course, I didn't just use Phi in the name. I tried to apply it to many parts of the site design.

Paper sketches:

After determining what should be on a page and the name, I started sketching how everything should be with a pencil here and there. I was quite disorganized in this regard, and it got mixed up where I drew what. After a while, I thought this process was prolonging the work a bit and decided that moving on to the Mockup part would be the most logical.

Preparing the mockups:

Mockups are the cornerstone of a design. If you want to complete the work properly, not redo what you've done, and use your time efficiently, you must visualize your project. Previously, I used balsamic mockup and pencil for my work, but this time I switched to another tool that I could keep online because I didn't want to stay away from this topic even during lunch breaks at work. I did some research on the internet and found moqups. This was the most useful site where I could keep the mockups online. Other alternatives were generally expensive, so this one seemed more attractive. I spent the most challenging part of the work here. Because I had the elements (areas) to be made in hand, but I hadn't yet decided where and how they should be placed. Here, the sketches I had previously scribbled and dribbble helped me a lot in finding ideas. I was greatly inspired by dribbble regarding what my design should look like. I always think that when a designer's mental diet is of high quality, the quality of their work increases accordingly. Of course, I also received a lot of feedback from my close friend Can and corrected them on the mockup.

Visual Design:

The idea of always placing the golden ratio, which I wanted to apply, at the core of the design never left my mind, so I tried to align all the visuals with these ratios. The design process was usually challenging for me, but this time it was easier. Because while making the mockup, I had an idea of what to use where. I must admit that I was a bit lazy when choosing the color palette. I used flatuicolors directly because I liked them. But for the next design, I might create my own color palette. I will write a small article about this as well.

When I completed the designs, I wanted to get feedback from my close friends. In this case, I realized that Skype or Facebook was insufficient for communication. After some research, I found redpen.io and started getting feedback through this tool. All my designer friends gave me valuable feedback on many points I missed visually. Since they were designers, I trusted their visual perspectives. For example, I saw that I had many shortcomings in typography. I corrected all of them.

HTML/CSS/JS:

First, I started with the HTML part. I thought that going step by step made things easier, like knitting a sweater, from top to bottom. I made the HTML structure with the help of emmet, a plugin in sublime text. The most tedious part, I think, was making the gallery. Cutting and arranging the images one by one took quite some time. I decided to make it easier by pulling this part from dribbble. Then, I quickly and easily extracted the class names within the page using the htmltocss I previously wrote and transferred the CSS codes to Stylizer.

I had started preparing the visual part with CSS. After a while, Stylizer became insufficient (it gave errors for some CSS3 commands), so I completely switched to Sublime Text.

For animations with CSS, I got support from animate.css, and in some places, I also looked at examples from codrops.

I renewed the icons I made as images with font awesome and started activating the necessary jQuery libraries with the help of Google and Stackoverflow.com.

My page had started to take shape, and as it became more dynamic, I became even more excited.

Testing:

I optimized the completed design for smaller screens and IE. I created a responsive.css file and wrote the corrections there. To help, I also called a js that supports HTML5 for IE8 within the page. The Resizer plugin helped me a lot with responsiveness. Of course, I also received a lot of feedback from my friends at this stage.

Logo

I had already named the work from the beginning. I wanted to create something suitable for it. Frankly, I wanted it to be simple. I used a rectangle that represented the golden ratio entirely. I wrote the name underneath it. I thought it would suffice for my first job.

Banner

Creating the banner was one of the most enjoyable processes. Of course, I formed a general opinion by looking at the other banners in the market. Using product features on the left and visuals of the product used on different devices on the right seemed like the most logical option to better promote the product. After making the banner, I continued to get feedback from my friends.

Description Text

I recorded all the features that came to mind while the project was progressing using Evernote. This way, I obtained things to use within the site and had a draft for the description text. Over time, I organized it further by looking at examples. When I completed the text, I made the final edits using envatitor. Themeforest could display HTML with a suitable code structure.

Time to Submit the Product (it seems)

I uploaded the site to an online address and compressed all the files to be sent to ThemeForest in "zip" format, pasted my text, added my logo and banner. I said a prayer and sent it.

The waiting process was quite exciting because the joy of completing a job was entirely different. Then I thought, if Themeforest didn't accept it, I would sell it through another sales channel.

Soft Reject

When I received an email, I felt like my dreams had been shattered. Had all that effort gone to waste? The email mentioned 3 points in an explanatory manner.

1. I needed to use "use strict" in JavaScript
2. It needed to have documentation (!)
3. I had to remove the images I sent and create empty images using placeholders instead (to solve the license issue)

The solutions to all the problems were simple but would take some time.

When I wrote "use strict" in JavaScript, some scripts stopped working and gave errors. So I replaced them with new ones. I did trial and error until the problem was solved.

The placeholder issue was simple. Instead of image addresses, I entered an address like https://placehold.it/350×150. The numbers here represent the size of the visual.

Regarding documentation, my friends had warned me before, but for some reason, I ignored it. Then, of course, it backfired on me. Thanks to Uğur from SuitThemes for his great support in this matter. For those who need it, you can get support during the documentation process from this address .

And We Come to the End

Everything was ready now. After checking the files to be sent for the last time, I fixed some errors I noticed and sent them for approval again.

Even though I sent it on Saturday evening, my product was in the market approximately 6-7 hours later (Sunday morning at 9).

Phione

An incredible happiness. 🙂 I want everyone who goes down this path to experience this. The joy of having accomplished something connects you even more to life and your profession. One of the important points here was learning that motivation was no longer money and financial gain.

3-5 dollars won't motivate you, but making progress in this world by creating something gives a completely different pleasure.

Don't forget, If you can't show your work to anyone, what's the point of doing it?

See you in the next projects.

https://lab.mustafasarac.com/phione/