One of the biggest mistakes that aspiring web designers make is focusing too much on learning CSS and JavaScript and neglecting HTML. Very commonly, designers underestimate the value of proper logical and consistent structure of HTML. This is a big mistake, since the most crucial initial step when coding a website lies in the structure of HTML. Without this structure, it is impossible to write efficient CSS or JavaScript.
When we are coding a website at Frontcube, we always follow a 4 step process that we call the “The Golden Workflow”. In this post I will talk about this work process in hopes that it will help you to improve your web design workflow.
1. Semantic Structure
When we have PSD files ready, we fire up Middleman (Middleman is a static site generator which allows you use templating languages and preprocessors like HAML, SLIM, CoffeeScript, SASS and etc.) and start structuring the HTML document with proper semantic syntaxes. We approach this phase with only the structure and the content in mind. At this stage, we do not worry about the colors or user interactions. Additionally we don’t touch the CSS files until we have clearly defined the initial HTML structure. This helps to structure the code consistently throughout the site.
Keep in mind that this stage does not always result in a perfected product and it is okay to go back and make changes up to the actual delivery to your client. This approach helps to create lean, semantic markup that is easier to style, setting you up for success.
2. Layouts and grid
Once the HTML is done, next we focus on the layout – specifically the grid system. We use Skeleton framework for grids, but as you may already know, Skeleton uses non semantic presentation classes to define the grid. There is no value allowing you to add presentation classes like ‘six columns alpha’ to a well structured HTML document. We use SASS to over come this. Using SASS you can call the grids inside your CSS as SASS functions. This help us to maintain our code clean and semantics.
We don’t worry about the details of the design in this phase. We just focus on the layout and arranging the content with proper grid.
3. Details
This where all the artistry begins.
Now we focus on the details like colors, typography, images, etc. During this phase we don’t worry about user interactions. If there is a dropdown menu for an example, we will complete the styling and leave the interaction to the next phase.
4. Interaction
After the design is done, now we start work on the interactions and adding cool effects using JavaScript and jQuery.
As I mentioned earlier there is no guarantee that changes made during each phase are final. It’s okay to go back and make changes to a previous phase like adding some classes or editing HTML during the CSS phase or defining some CSS rules in the interaction design, but sticking this workflow helps us to manage the project as a team as it’s easy to divide and delegate tasks between team members.
This process also helps us to teach our new team mates and interns about our development practices and give them an opportunity to get involved with client projects from day one.
Question: Do you guys follow any specific work flow structure or do you have any suggestions to improve our workflow? Please comment below. We can’t wait to hear them!
