The application cycle

So, I have a question for all the other authors here on code canyon. What is your process for discovering ideas, planning your ideas then developing your ideas. I am talking about a complete walk through of your process. I am very interested in how other authors / coders develop there projects. Do you do wire frames, jot down scribble notes, or flat out, just jump head first into coding with that particular idea in your head. Personally, after I have developed an idea. I will generally plan out the project by writing an outline of things I need and things I may possibly need. Such as pages, technology ( jquery, ajax, etc ). After I have written this out, I begin laying out the application flow. My designing and development however, tend to intermingle. Rather than designing the interface and what not, it’s like I design side by side to coding, because you never know just how things look until you pop in that code. My process tends to be this way because I both design and develop my projects. My strategy may not be the most efficient, but I just can’t seem to kick it. Some of the authors on code canyon are teams, what’s your guy’s strategy? I’m looking forward to hear the responses of others!

Great question! I find that it is always best to first design the user experience, what would you like the user to see and how he will interact with it. Then you code it up.

For smaller projects (like everything sold on the marketplaces) this can be done in one step. One person is completely capable of keeping all the necessary information in the head. Even the biggest themes that we’ve done can be done this way.

The key to this is modularity, build everything as if you were building a pyramid. Always make sure you lay high quality code on the bottom and then build modules on top of that.

Keep your modules as independent of each other as possible, but make sure you don’t repeat code.

Regarding the idea management, it is always great to keep an app open that you can use to write down any ideas that come up, then you sort the ideas and try to implement them. Any TODO list or even TextEdit will suffice.

So to answer your question, yes we do wireframes and stuff, but not on the paper, only in the head. It is always best to have the project well thought out, before writing any code, this way you don’t realize half way through the project that you want to implement something but, it is impossible to do without a major rewrite of your codebase.

It depends a lot on the project. Some projects, particularly smaller ones, I just jump into coding them, while others, such as my latest item, have a lot more planning involved.

I find that it is always best to first design the user experience, what would you like the user to see and how he will interact with it. Then you code it up.

I usually go the other way with this one, though that might be because I’m not much of a designer, but rather a coder. I will work to get all the functionality working the way I want, then I will improve it for the user. Just like with the pyramid: the functionality is the bottom, and the user experience is the peak.

mordauk said
I usually go the other way with this one, though that might be because I’m not much of a designer, but rather a coder. I will work to get all the functionality working the way I want, then I will improve it for the user. Just like with the pyramid: the functionality is the bottom, and the user experience is the peak.

I used to do it this way too, but then, for some kinds of projects, this can backfire a little in the sense that when you build UX on functionality you will eventually design the UX as a mirror to your data structure, when in reality it should be the other way around.

As an example of this I can give you our Pricing Table Plugin for WP. Functionality (data structure) based approach would lead to creation of one monolithic table editor on one page. On the other hand, we used a Structure – Product based approach, where you first specify the structure – rows in the table, properties of the product. And then based on that, the system generates a set of forms for you that will allow you to add individual products. This approach is much more natural for the user to grasp. Do you see what I mean?

Yep definitely. It’s certainly a by-project-basis type of workflow.

Hey guys, thanks for your comments. I tend to work more on the lines of mordauk where is I am more of a coder than a designer, so I do functionality first. However, I think I need to adapt to more on the lines of uDesignStudio’s approach. I can see where the benefits are for the user experience. Any one else feel free to chime in!

We do things similar to some, but different to most.

We do a PSD rendering of final finished visual. using Adobe CS3

Then we do a wireframe mockup using BalsamiQ

We then create the various elements, from the above two.

Create the CSS and JS simultaneously.

Fire in the PHP and hookup to the dB

Test and Refine.

Redesign and do final Code and prototyping and style guides, tidy up and finish

Personally I like to come up with an idea then jot it down on my whiteboard so when I come back to it later, I can jump into Adobe Fireworks (This is better for web stuff).

The reason I just jump right into it is because like Jacobe Gube said, “I believe the more time you spend planning and talking about doing projects takes time away from actually doing the projects you want to do”. Either way this helps me get an idea down.

Finishing up almost everything in Fireworks first allows me to get everything down like the layout, color scheme and whatever elements will be put into the project.

After finishing up all of the initial stuff in Fireworks, I’ll then jump into Dreamweaver and start coding off of some HTML and CSS frameworks I’ve built for myself. I’ll also make sure to include CSS Pie to fix any CSS3 stuff in IE. It’s good to anticipate as much as possible when coding. Now of course this process depends on what CMS or PHP framework that’ll be used but essentially it all starts with a basic XTML or HTML setup first aside from some simple php to include universal pages like headers and such.

After the HTML and CSS is finished being coded (keep in mind that I’ve already chosen a framework or CMS if any and am coding the HTML according to that), I’ll jump into my chosen Framework and start coding the server side code, etc.

That’s it in a nutshell and maybe it’s not the most efficient but it works.

OH ya and lastly for places like envato we’ll convert the layered PNG from Fireworks to a layered PSD since you can’t get a lot of sales otherwise. If I could convince the world to use Fireworks for web stuff believe my I would!

We may not have any themes on here but we do elsewhere and it’s the same everywhere it seems, people are just used to PSD format.

Hope this helps