How to Design with Code?

It is not just how it looks, it is about how it works

responsive-website-designing-banner

It is an old saying- “A picture speaks a thousand words”. But not everyone can understand that language. So to make a design understandable we use code for designing.

Code takes the design more near to the real product functionally/behaviorally. As in terms of professional language for a customer-“Interface is the product”. So the interface need to be interactive. And for a better interactivity a designer should design a functional layout. And to make those functional layouts functioning we use code, combination of -Markup language(HTML, XML etc.), Styling language(CSS, LESS, SASS), Scripting language(Javascript, jQuery, AJAX etc.).

There are lots of experiments, inventions that are done to give more life to designs, the mockups are now no longer used or are not enough to satisfy the customer to sell a product. No matter how much strength you put to design a beautiful template, unless it is interactive, even a group of static layouts can’t tell the whole product story. I am saying this because our interface now became more device independent, transitional and alive like a real product.

If we think of a human body, then design is skin and interface are bones, which gives shape to skin and gives it a meaningful body structure.

Let’s stop talking shit and let me show how code do magical designing…

Suppose we have a layout for which our client wants that, it should be viewed properly on all browser supportive devices. So, here comes the magic of code and we will code it once and it will work on all devices automatically. Let’s see how:

Suppose my client needs something like this:

designs-for-all-devices

Now putting all my efforts and so called hard work, I did this:

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
<title>Designing with Codes</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css " rel="stylesheet">
<!-- My Custom Internal CSS -->
<style>
#logo,#nav,#banner,.items,#footer{
	margin:15px 0px;
	vertical-align:middle;
}
#logo{
	background-color: #38a1cf;
	height:150px;
	line-height:150px;
}

#nav{
	background-color:#acada8;
	height:150px;
	line-height:150px;
}
#banner{
	background-color:#797b75;
	height:350px;
	line-height:350px;
}
.items{
	background-color:#a1d7ea;
	height:300px;
	line-height:300px;
}
#footer{
	background-color:#c6c7c1;
	height:225px;
	line-height:225px;
}
</style>
</head>
<body>
<header>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-4 col-sm-4 col-xs-12 text-center">
				<div id="logo">
					LOGO
				</div>
			</div>
			<div class="col-md-8 col-sm-8 col-xs-12 text-center">
				<div id="nav">
					NAVIGATION
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12  text-center">
			<div id="banner">
				BANNER
			</div>
			</div>
		</div>
	</div>
</header>
<main>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-4 col-sm-4 col-xs-12 text-center">
				<div class="items" id="item-1">
					ITEM 1
				</div>
			</div>
			<div class="col-md-4 col-sm-4 col-xs-12 text-center">
				<div class="items" id="item-2">
					ITEM 2
				</div>
			</div>
			<div class="col-md-4 col-sm-4 col-xs-12 text-center">
				<div class="items" id="item-3">
					ITEM 3
				</div>
			</div>
		</div>
	</div>
</main>
<footer>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12 text-center">
			<div id="footer">
				FOOTER
			</div>
		</div>
	</div>

</footer>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Bootstrap Script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Just copy all the code and paste in a text editor and save it as, lets say test.html. And test it on browsers (advanced browsers).

There is a lot more stuff, like a new term which has evolved now a days is “RAPID PROTOTYPING“. It is something we do after design and before we start working on interface designing. The need of this is to demonstrate 20% of the actual product which users use 80% in the product most of the time.

I hope you found this useful. Please drop your comments if you have have any queries.