Be More Creative through Design Constraints

For a lot of designers constraints are kryptonite or a barbed wire fence that is a prison for their design freedom. But design constraints shouldn’t be viewed as problems to be overcome, rather, constraints or restrictions are probably the best tool for creativity. Constraints are good: they give you direction and they challenge you to be better. Constraints force you to try new things and to experiment more.
Victor Hugo said “Necessity is the mother of all invention” and he is right, we invent stuff to solve problems. Invention and creativity go hand in hand, without creativity nothing would be invented. In design, constraints create necessity and their sole purpose is to challenge our very creativity and make us examine design in different ways.

What is the Kryptonite?

Restrictions vary widely from design project to design project and each project may have their own very specific set of constraints that you have to deal with. As web designers there are some basic constraints that rear their ugly heads on almost every project we take on:

• Project deadlines – timelines
• Technological restrictions: languages, browsers, screen sizes, hardware speeds, etc.
• Software restrictions
• Client preferences/bias
• Client style guides and brands
• Customer needs: goals, expectations, knowledge
• Your own bias and personal preference
• Your own lack of knowledge/education

These are not inherently bad things. Learning to embrace and work with these things will make you a better designer. This list of constraints will allow you push yourself in a more creative way because you are forced to resolve them, you are forced to figure out how to resolve issues in different ways. It feels like as the web grows we have more constraints than ever, this may or may not be true, but embracing these constraints will allow you to move forward in a more creative and constructive way.

Too much freedom is a bad thing

Freedom in design is a great thing, it allows us to explore new ideas and to test uncharted waters. However, when you explore too much you tend to get lost. Constraints give you direction, they are essentially your compass through the design process. We put fences around cow pastures so that the cows don’t wander off onto a busy highway and get hit by a car. When you wander aimlessly through the design forest you will lose site of your design goals, get lost wasting time experimenting on ideas or concepts that have to relate to the project, then get hit by the “reality” car.
Restrictions and constraints allow us to stay focused and on task and when we stay on task we create better, more focused designs. The ‘fence’ of design allows (and sometimes even forces) us to:

• Focus on the purpose
• Examine the design more closely
• Make decisions quicker and easier
• Focus time on important aspects of the design

Challenge yourself – learn to be creative

Design is a challenging profession. You’re expected to just be creative, you’re expected to come up with really awesome, super creative visual representations of ideas that users will enjoy… all off the top of your head. Now, we all know this just isn’t true, so how do you become more creative? Do you doodle on every piece of paper you see? Do you take an acrylics class at the local community college? Do you get subscription to some inspirational design magazine? You could, and these may all help to stir up your creative juices. But the most effective and quickest way to be creative is to impose your own constraints.
Next time you start another web design project write down a few of your own constraints and challenge yourself. They don’t have to be huge constraints — after all, you already have all of those restrictions we talked about earlier. Just create a few different restrictions and challenge yourself to overcome them.
Here is a little list of self imposed restrictions I have used when designing websites:

• The only images you can use is the logo and inline content images
• Design a site using only standard web fonts
• You can only use Illustrator (I’m way to comfortable with Photoshop)

When I’ve challenged myself with a few self imposed restrictions I have been able to quickly step out of my comfort zone and try to think of new, more creative ways to solve problems. In the process I’ve discovered new CSS selectors, new design tools and new ways of solving design problems that I have later in other projects.

Constraints are just needs

Creativity is born out of necessity and constraints are just needs. Rather than looking at constraints and restrictions as horrible plagues on your creative freedom, embrace their challenge. Quit sitting at your desk like a zombie doing the same thing over and over again. Give these constraints a big ol’ hug and squeeze the creativity out of the

Difference between $(document).ready(function(){}); and $(window).load(function(){});

When I have started learning I was bit confused about what is the difference between $(document).ready(function(){}) and $(window).load(function(){}) is all about and when does these scenarios will help while coding. I gone through so many articles in this regard from this web world and done some research on the same.

This article might help people who are at beginner level and what to know more about $(document).ready(function(){}) and $(window).load(function(){}) in jQuery.

$(document).ready(function(){}):

If you want to execute a function when the DOM [example: an 'element'] is fully loaded, then you can specify that function in $(document).ready(function(){});
If you want to know more about this, you can visit one good site named “learningjquery“. Karl Swedberg has explained clearly about the same with an example of how to start coding in jQuery.

1 2 3 4 5

<script language="javascript"> $(document).ready(function() { // execute when the DOM [example: an 'element'] is fully loaded }); </script>

$(window).load(function(){}):

This executes when the complete page is fully loaded that is when all items are fully loaded on the page which includes all images, iframes, objects etc., This helps when you want to play with images which has been loaded on the page, for example: if you want to know the width and height of the particular image or if you want to adjust the alignment of the image inside a ‘div’ element lets say vertical middle in a div.

1 2 3 4 5

<script language="javascript"> $(window).load(function() { // executes when complete page is fully loaded, including all images, iframes etc., }); </script>

If you have more examples of this sort, please do share the same in comments section below. It would help people like me to understand and to learn quickly

Flipping of image with another using JavaScript

Below is very simple snippet code for flipping of two images using JavaScript. If possible you guys can make it generic snippet code. This code will help in mainly for showing / hiding of div’s, for example if he clicks on ‘Show Image’ it will automatically changes to ‘Hide Image’. Its a simple snippet code.


Below is the div, in div – Initially I am showing the hide image, when user clicks on this image, the image as well as the title of the img will be swapped with show image and the title will be ‘Maximize’… and Vice-Versa.

The below function should be placed in <script></script>.

//This Function is for Flipping of 'Show Image' to 'Hide Image' and Vice-Versa
function flip(imageID) {
var img = document.getElementById(imageID);
if (img.src.indexOf('images/hide.gif') > -1) {
img.src = 'images/show.gif';
img.title='Maximize';
} else {
img.src = 'images/hide.gif'
img.title='Minimize';
}
}

 below div should be placed in <body>.

<div><a href="#" onClick="flip('hide'); return false;" title="Minimize" style="padding:0px"><img src="images/hide.gif" id="hide" border="0"></a></div>

Javascript to strip special characters from a string

 <script language="JavaScript"><!--
var temp = new String('This is a te!!!!st st>ring... So??? What...');
document.write(temp + '<br>');
temp =  temp.replace(/[^a-zA-Z 0-9]+/g,'');
document.write(temp + '<br>');
//--></script>

Remove duplicates from an array using JavaScript

Here is a simple and easily understandable snippet code, to remove duplicates from an existing array using JavaScript. You guys! might have come across in some situation where in which the array has got some duplicates and want to remove those duplicates to show up unique ones. Below simple JavaScript code does the same, initially the respective array has got some value like below:

var sampleArr=new Array(1,1,1,1,1,2,2,3,3,3,4,4,4);

javascript code:

var sampleArr=new Array(1,1,1,1,1,2,2,3,3,3,4,4,4); //Declare array
document.write(uniqueArr(sampleArr)); //Print the unique value
 
//Adds new uniqueArr values to temp array
function uniqueArr(a) {
 temp = new Array();
 for(i=0;i<a.length;i++){
  if(!contains(temp, a[i])){
   temp.length+=1;
   temp[temp.length-1]=a[i];
  }
 }
 return temp;
}
 
//Will check for the Uniqueness
function contains(a, e) {
 for(j=0;j<a.length;j++)if(a[j]==e)return true;
 return false;
}