What you need to know about Web Design Frameworks in 5 minutes

By Nicholas Oh

 

A Web Design Framework is essentially the skeleton in the web page. It comprises of multiple structure files so that other designers are able to apply the code and twerk it into their own; rather than redoing from scratch. In the event of a big project, the uniformity in the framework will allow the team to work together without inserting conflicting codes. Programmers who were not present from the start of the web construction could adapt easier considering the guidelines(framework) in place.

This is also a reason that a solid web framework should contain a relatively shallow and friendly learning curve. The code has to be light and concise to allow documentation and logic to be understood.

Generally, the design frameworks can be differentiated between the frontend and backend.

responsive-css-frameworks-layers2

In the frontend, languages such as HTML, CSS, JS are commonly used while backend usually have PHP, Java, Phython or Ruby. Different methods can be employed into the coding which makes programming a generally non exhaustive creation. The frontend has the user interface experience while the backend has the logic/operation/data processing.

For the this post, the frontend will be elaborated leaving the backend for another entry when opportunity arises. 😉

Naturally, the code varies according to the needs. Depending on the flexibility and complexity, frontend design frameworks can be split into simple or complete categories.

Frontend

  • Simple frameworks are also commonly called Grid Systems.
  • Grid basically subconsciously aid you to manage your content into columns and rows for a cleaner and neater presentation. Grid content are usually easier for the reader and usually promotes efficient use of space.
  • Grid systems are easier to implement and easy to understand.
  • Grid has a wide variety of existing sources but the most commonly utilized are the Golden Grid, Mueller, Base or Susy etc. each varies with design preference.

responsive-css-frameworks-logo-03responsive-css-frameworks-logo-12responsive-css-frameworks-logo-07responsive-css-frameworks-logo-09

  • Complete frameworks are usually more comprehensive in the aesthetic department where there are buttons, typos, icons, navigation, popovers and much more customization included.
  • These web frameworks are visually more dynamic and appealing.
  • One very common and widely used example will be Bootstrap. It comes in a package where a free collection of tools are available to help you get started for creating websites. It is intuitive, has a good grid system, sleek style, extensive list of components with additional bundled javascript plugins.
  • In other words you call the class name and get the output form on the html instead of churning css codes all day long. It saves time and effort while producing a good quality output.
  • Other examples for experienced programmers will include Foundation, Kube or Groundwork due to higher quality css preprocessors.

responsive-css-frameworks-logo-13responsive-css-frameworks-logo-06responsive-css-frameworks-logo-16responsive-css-frameworks-logo-23

One should keep in mind that finding the right framework for your needs is more important than just finding a visually beautiful framework. Downloading is easy but understanding and integrating the code in ample time spent is definitely a factor to consider.

Web frameworks are convenient and a clean project sheet to built upon, however, be careful not to be too carried away and spend time on something that’s not necessarily what you need!

Acknowledgement and References: 

http://www.webmonkey.com/2010/02/get_started_with_web_frameworks/

http://webdesign.tutsplus.com/articles/a-quick-guide-to-choosing-the-best-framework-for-you–cms-23575

http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html (Content & Pic)

http://stackoverflow.com/questions/14546709/what-is-bootstrap