I once briefly mentioned the process of Design by Coding, inspired by an article on Quora, “Life Without Photoshop.” Apparently, every part of Quora was designed in code from day 1. The benefits mentioned in the article are as follows:
– Consistency and re-usability.
– Forces simplicity.
– Code structure begets design structure.
– Ability to interact with functionality while coding.
– Significant reduction in time/money spent.
While Photoshop is still great for certain web design procedures such as when working while sitting in with a client; for in-house design, I’m a big fan of this design by coding process. I’ve tried this a few times and found all of the benefits mentioned above to be true.
However, I still think there’s a way to increase the effectiveness of this process. This is by having the content and functionality of the website in place before doing ANY styling. Content first, functionality second, then design comes third.
Content First – Since Content is King, we start with the content. The purpose is to decide WHAT information you want to have on your site. Every text and image on your website is content, including logos, menu items and buttons. To make it even quicker, replace every image with text that says “image goes here” and use text where buttons go. Organize the content in a way that makes sense (eg. logo at the top, content in middle, footer text at bottom) using divs, tables and lists. Use the header tags (eg <h1>,<h2>) to label the importance of various content on the site. At this point, you should only need to use HTML and ZERO styling.
Functionality Second – Functionality includes the navigation of the site and ability for forms to submit. If accessing a database or implementing APIs, this is the time to do that as well. To keep the coding clean, write each function in its own file, include it in the header and call it as a function (eg. a form that submits email addresses to Mailchimp would look like a simple html form, and works by calling a function from a file named mailchimp.php). Both internal and external links should work, and by the end of this process, you should be able to navigate and receive all of the content the website has to provide. At this point, you could be using an array of languages, but still NO styling.
Design Third – Once the site functions properly and has all of the content you want on it, you finally get to design! Don’t be alarmed if you have to move around your code a little bit, hopefully you’ve kept it organized to make this easy. It’s important that in the process leading up to here, you consistently think about possible designs you may want, and write the code so that it’s easily adaptable to as many of the designs you have in mind. If you have, by this point, you’ll have wanted to dive into the design for so long that you’ll know exactly where to start.
Those of you who have been designing or developing websites for some time may cringe at this process. There are certainly some downsides, such as not being able to design the front-end while developing the back end. But every downside has an upside; in this case, it forces the front-end team and back-end team to work closely together, allowing for increased cohesiveness in the code structure.
Both as a developer and as a designer with a fresh outlook on design process, and most importantly as an entrepreneur, someone who constantly looks for new and better way to do things, I wanted to share this process I plan on implementing from now on, and welcome feedback from any.
Leave a Reply