Code First – New Approach by Web Designers?
Posted under: 
Code first – New Approach by Web Designers?
Code first is the new approach adopted by web designers and front end developers in which you wireframe the UI and directly start coding the web page using HTML and CSS.
What is conventional approach?
As we all know and follow the conventional approach for web designing. And that is splicing the raster PSD’s, getting the color codes and codes it up into valid HTML and CSS. While many of the web designers find it time consuming and cumbersome process. It needs the right hand on Photoshop. As you have to design it first, have to handle so many Photoshop layers and then code it up in HTML/CSS. But this is the “conventional” way. And many people “follows the conventional way”. Yes, we follow and we want a “safe approach” to get the design done.
What are the pros and cons of conventional approach then?
This conventional way or approach is mostly followed by the design agencies where there are team to work on a single project or it depends on the clients for whom you are designing.
It’s quite obvious that you have to present two or three design options in front of your client so that they can select one if the best which he finds best (as a designer all options are best for us) ! As the client is god, as in the end he is the one who will sign the check for you. It will be difficult to provide a three coded options to client as he is going to select only one out of the three and your hard-work and time consumed by other two options goes waste (you can use them for next client). It is also very comfortable for the front end developer to code from a PSD as he knows exactly what he wan to design. He don’t have to worry about which color combination will suite here and there, what will be the height and width of div in pixels and what goes where. He can solely concentrate on his markups and end up with actual web page with valid markup in less amount of time for coding.
When you work as a freelancer, you are the only one who make PSD’s and then convert it into HTML/CSS. And I personally think it’s a time consuming process and it certainly increases the timeframe of the project. As I said earlier, it is easy and possible for the design agencies to follow this approach. As they have that much human resource to utilize.
What is “Code first” approach?
As the name indicates it is a direct approach for web designing which is getting adopted by many front end designers and developers. While coding a web page in HTML/CSS, one just has to refer a wireframe and create a web page with valid markup.
Why “Code first” approach?
Now a day you can’t predict the screen size of the device on which the user accesses your design. Let’s say you have designed a web page for some standard screen resolution, but what about the high resolution retina displays available is market? You have to take care of that too and this is the point where you can’t follow the conventional approach. Where you design raster PSD for fixed screen resolution and then you can’t predict how it will behave on different range of screen resolutions. And this is the time where Code first approaches comes into focus. A wireframe can work for you in this approach instead of a PSD and while coding, you can experiment with your design that how it should look, behave and render on different screen.
Is it a good decision to skip the Photoshop step in we development process?
May be yes, if you are a freelance web designer then absolutely it will be a great decision to make. But accepting this approach will need a good practice of visual coding. As Code it first approach will need a designer to visualize the design while coding and have to take care of many things simultaneously.
So which approach you find suitable for you? A conventional one, where the PSD step is included or the Code it first approaches? I am waiting for your opinion in comments below.
4 Comments + Add Comment
Got anything to say? Go ahead and leave a comment!
Sharing is Caring !
Sponsors
Show some Love !
Sign up for our Newsletter !
Latest Posts
- Enhance Your Web Design Using Simple CSS
- Code First – New Approach by Web Designers?
- Useful Addons for Web Designers and Developers
- Simplex – Free Responsive Template by Dzyngiri
- Customized Calculator using JavaScript
- Best Responsive Websites [Inspiration]
- Slick Contact Form using jQuery and PHP [Tutorial]
- Online Website Builders – You dont have to be a Designer
- Design and Development on Mobile Web
- Intro to SCSS – Your style-sheet on Steroids
I pretty much design for the last 4 years now in the browssr. I code and design at the same time. I never had a client that didn’t liked this approach. They like the fact that they can follow the progress from the start and i can immediately integrate the ideas I have for user interaction and the js/css3 effects and/or animations. You’re right now a days this approach is IMO the way to go if you have to develop a responsive website.
What is wrong with this statement?
“It’s quite obvious that you have to present two or three design options in front of your client so that they can select one if the best which he finds best (as a designer all options are best for us) ! As the client is god, as in the end he is the one who will sign the check for you. ”
The client is asking for our help, and IMO, this INCLUDES picking the layout and options.
PS: yourconstat reresh maes yping had as f you tpe akey at the sme tim as t refesh te keystokk is missed
Yes, client is ask for help to the one who is established designer. And client is god for the one who is putting their baby step in this ample world of web designing.
I enjoyed your article.I also read your article on Javascript, very helpful. Coding first maybe an old method that is being revived. The old programming techniques of flow charts and figuring out where the output should go is still valid.