BlogmyQuery – BMQ

Negative space is an important element of marketing and design. With logo design and other print design, the use of negative space takes thought and planning. It is not something to be overlooked or avoided. Great design works takes all the space into consideration, both used and used elements.

What is Negative Space?

In terms of graphic design, negative space is the part of the design that is not being used. In design, there are three plain elements that make up the framework of the piece. These include the subject (positive space), the frame and then the negative space.

Negative space is referred to as white space when working with print design. It is considered the space of the design that is empty. The use of white space is encouraged and the more, the merrier. It can be tempting to fill a page with all kinds of meaningful design, but this is often overwhelming and frustrating for customers. The idea is to make the focal elements of the design and have the white space draw people into the focal areas instead of distracting them away.

The Importance of Negative Space

With any piece of design there must be negative space. A piece that contains no negative space will be too busy. A viewer’s eyes will be all over the place, unable to focus. This keeps your audience from receiving whatever message the design intended to deliver.

Negative space is a great way to achieve balance or symmetry in a design. This makes the design look better and achieve a greater appeal for viewers. The proper use of white space allows the objects in the design piece to co-exist, even if they would not normally match or go together. The right use of space can connect both similarities and design differences.

Resist the temptation to fill an advertisement with all sorts of marketing jargon and information. Just because there is space that could be filled, does not mean that you need to fill it. Place your website address on the advertisement. Customers who want to learn more will click through to the company’s website.  An advertisement should be a teaser, a movie trailer – it should not only intrigue but also entertainment.

How to Incorporate Negative Space

First, you will need a good idea of what negative space is and what it is not. Do some research on negative space and look through some design examples in a variety of mediums to get an idea of what works well with negative space, and what does not.

Occasionally, the focal design element of a piece could be knocking out an area of the design as negative space. Leaving the area empty will draw attention to it in ways that your ordinary logo does not.

Using Negative Space for Emphasis

Also negative space can be used as a tool to draw a viewer’s eyes where you want them to go. If there is an element or design piece that is the focal point, then using the right kind of negative space will help the eye drift onto the design’s main point. The more negative space that surrounds the subject, the stronger the visual pull will be toward the design’s focal object.

Too much clutter in a piece is a recipe for frustration. Customers do not want a Where’s Waldo activity in their advertisement. They need you to quickly get to the point – which is where designers are falling behind. The world runs quickly these days and you will only get seconds of a potential customer’s attention to win them over.

If there is more than one focal point, use a hierarchy of design to direct viewers eyes to the right ad elements. This means balancing design elements so that a viewer’s eyes follows the path set before them into whatever the final design wants to be.

Different Mediums

The strategic use of negative space can be utilized in a variety of different mediums. Not only is it great for marketing pieces, but should also be practiced in logo design and even photography. Understanding negative space when snapping or editing photos can turn a great photo into a spectacular photo.

Cost Savings

When it comes to design, the fewer colors you use the better your pricing will be. More colors equals more ink and makes it tougher on the printer. However, it is important not to skimp out on the design just to save money at the print shop.

CSS which stands for Cascading Style Sheets is a language to give better look and feel to the pages created on any markup languages like HTML, XHTML, and XML etc. CSS was first introduced in December of 1996. The purpose to launch the CSS is to make the presentation of the HTML and XHTML pages more attractive, easy and understanding. HTML here stands for Hyper Text Markup Language which was first launched in 1991, and was introduced by Berners-Lee. So from 1997 onwards these both the languages works together to make websites more perfect and eye catching. At present there would not be any website on the web which would not be using CSS, whether it is using HTML or XHTML or XML or any other markup language, it’s the different thing. But thinking about the website without the work of CSS is second to impossible.

Currently most of the browser supports CSS2.1 and HTML 4.01. But as CSS3 and HTML5 are mostly launched, every browser making company is highly considering these two for their next version launch. And probably in IE 9 most of the features of CSS3 and HTML 5 would be compatible. Mozilla Firefox already supports many features included in CSS3 and HTML 5. The same way Google Crome and Safari too supports many features of CSS3. So it is really good news for present and upcoming web designers. These both provide less write more gain kind of stuffs. One would need to write very less line of code and would be able to get more features. If you are not much interested about your website’s user friendly GUI and attractive design then it does not matter much to you whether it is CSS2.1 or CSS3 and HTML 4.01 or HTML5. But if you are very much precise about the way your website look then you definitely got to know that what’s there in CSS3 and HTML5.

If we talk about CSS3 first, let’s see why it became a buzz in the arena of World Wide Web. It’s the features provided by CSS3 which is making it popular before even fully launching it. It provides highly dynamic and decorative features to the simple HTML page. It is providing stuffs like rounded corners, multiple background, direct web fonts, wrapping to the text, stroke and shadow to the text, 2D transformation to the object, animations, gradients, opacity, HSL and HSLA colour, background clipping, outline, box-resizing, box-shadow, top-right-bottom-left navigation, attribute selector, and overflows-x and y etc. These are all the features you can play with, which were not there in the previous versions of CSS.

These features can be used to make the web page and its content load faster and accurate. As CSS is always embedded it would load simultaneously with the page loading and hence would not take any extra time for loading. Now take a simple example of box-shadow, if we use a previous version of CSS there is no option to give a shadow to a div or span any other attribute. So what the programmers do is—they put the shadow image at the bottom of the div to give the shadow effect. This extra image takes extra time for a page to load. Now, think about a shopping cart website which have around 100 products in a single page and every product div have shadow image. See, how much time and load would it cost to a single page? This is Just an example of box-shadow. The same example implies for the rounded corner div, Where there would be a background image to make a div rounded cornered. Giving a shadow to the text was never possible in the previous versions of CSS except you use jQuery which again would take more time to load. Previously, only RGB and Hex mode colours were supported but now one can use HSL (Hue-Saturation-Lightness).

Take another example where you need two images as a background of a single div. Is it possible to set two backgrounds? No. So what do you do? Take two div and putting overflow and then set the background of one to left and one to right, this is what you are doing for just giving two backgrounds. Isn’t this process too lengthy? That’s the reason CSS3 provides multiple backgrounds. Even background clipping is also possible. You can also use direct web fonts. And there are many more you can trick around. One can find out all the features and syntax for implementations at http://www.css3.info/preview/.

HTML5 which is also in a development phase is having some amazing features too. Have you ever thought of playing your video on your webpage without using any script of API? Do you think it is possible? With HTML5 it is. Even you can play video on the background and in front you can have a signup form and Text. HTML5 have introduced elements called ‘video’ which makes this possible. And even it is easy to implement and maintain. There are many other elements too, which are being embedded into HTML5; few of them are audio, footer, header, canvas, progress, time and the list is long. Again, these all elements are embedded in HTML and hence do not need any extra process of API to load these elements, so ultimately saves the load time and memory of the client machine. To know more about HTML5 elements, features and usages and maintenance you can refer to the given website: http://www.w3schools.com/html5/html5_reference.asp.

JQuery is a framework for JavaScript which was released in 2006. The whole framework was developed by John Resig, an American Resident, Currently working with Mozilla Corporation as a JavaScript Tool Developer. Although there are many other JavaScript frameworks jQuery has been proven best in all the frameworks. The other frameworks like MooTools, Spry, midori, qooxdoo also allow you to manipulate the client side HTML content, but jQuery became very popular among all these because of its flexibility, easy coding standards and ability to deliver robust outcomes. In simple language jQuery makes the tasks done by JavaScripts easy, fast and understanding. One can manipulate css, content, images, HTML attributes and even the server side data by implementation of Ajax with jQuery.

In simple language jQuery makes the tasks done by JavaScripts easy, fast and understanding. One can manipulate css, content, images, HTML attributes and even the server side data by implementation of Ajax with jQuery.

Before jQuery, whenever it comes to animation or sliding, the only thing came into everyone’s mind was Flash. But after jQuery, one is totally ignoring using flash wherever possible. The main reason behind this is not that jQuery is the best over flash, but the implementation of jQuery over flash is better, easy and quick. Whenever one needs to place any flash content in their website, the client browser must be supportive to show the content of the flash. i.e. A Flash player is always needed. Now, as the flash player is needed, what would happen is that the control for that content is given to the flash player by the browser and hence the third party comes into existence costing the speed of the website. So if the browser is not fully able to load the content of a web page by its own, and requires some other application to show some part of the page, it will definitely take more time to load the page. And what about the users who do not have flash player in their browser at all? They will first need to download it as an add-on and then only they will be able to serf the page fully, which definitely lessens the interest of the visitor.

Where as in jQuery every kind of animations are possible as the Flash gives and need not the third party application to load or run a code and content. It is because most of the browsers introduced till date in this world which supports JavaScript, also supports jQuery, remember – jQuery is the framework for JavaScript. Look, how easy it is! One more benefit of jQuery over Flash is that any naïve developer or programmer can easily handle it with little sweat, but Flash is not any Tom-Dick-&-Harry’s cup of tea. Hence, the ultimate benefit of jQuery is less men power, as the developer himself can create the animation and scripting. To use jQuery is also very simple, one just need to add only a single file called jquery.js (jQuery Library) and little code in the HTML page where the magic is to be done. jQuery provides slider, menu bar, image rotation, image fading, text animation, interaction between client side and server side data, and whatever you can think of.

That’s the reason you would see the jQuery more and flash less in the recent websites. Flash is totally becoming or I can say became obsolete from the world of Web. Now days one would prefer flash only if they have a special requirement of the flash action scripts. Other than this don’t expect the anymore use of the Flash in the websites now.

Few advantages of jQuery over flash are:

1) jQuery is compatible with every browser.

2) jQuery is also compatible with iPhone, iPad, cell phones etc. which Flash is not.

3) jQuery is very less in size and a single jQuery can create as many animations, sliding and other effects. But in the case of Flash you will need individual flash files for every animations and sliding.

4) jQuery is a freeware where as if one want to develop something in Flash one would need to purchase a Flash Development Suite.

5) Flash files are always large in size. On the other hand jQuery file is less than 60kb in size.

6) Flash always need the upmost skill to create even a single simple stuff, but in jQuery any one little familiar with HTML and JavaScript can easily create anything.

These are very few, but the list is very long. There are only two disadvantages of jQuery over Flash, which are:

1) jQuery does not give high 3D effects and,

2) JavaScript can be disabled from the browser which will disable jQuery too.

Few examples of the jQuery artwork like flash are given below:

1) http://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques

2) http://vandelaydesign.com/blog/web-development/jquery-animation-tutorials/

3) http://www.queness.com/post/1942/10-stunning-examples-of-jquery-animations

For those that are not familiar with AJAX, the word is an acronym for Asynchronous JavaScript + XML. AJAX is not new to the scene. In fact, even the newest advances in AJAX are at least five years old. Yet AJAX is becoming the buzz word in developing. AJAX is a very powerful technology that allows you to build a website with incredible functionality without users having to refresh the web page they are on. However, there are some “bumps� in the road when trying to utilize AJAX.

What does AJAX do? Basically, it makes it possible for a group of techniques to have interactive web applications to use Javascript to process XML/XHTML, with CSS, in a browser without having to reload the entire web. In other words, AJAX allows the browser and web server to synchronize the exchange of data, making the interaction and reloading of each web page faster.

One of the problems with Ajax is that its updates often contain information retrieved from a script running on the server side. It is very common for a browser to not display any kind of visual indication that any portion of AJAX is loading. The developer can’t see this interaction first hand, so it’s difficult to see exactly where to go in the application to be able to determine whether the client-side JavaScript is correctly communicating with the server or not. A solution for this is why it’s imperative to insert a visual indicator that will allow you to know something is occurring. You can use a visual swirl very similar to the ones used when a light box image is loading.

Another solution is to use Firebug to monitor HTTP communications. Let’s say that the page did not load as expected, or didn’t render precisely. By using the Firebug feature you’ll be able to determine if the HTTP communications flow is processing properly as the page loads, followed by including the jQuery library and the correct interaction of the server-side-script with the inclusion of the JavaScript mechanism. By using Firebug you will be able to see if the HTTP payloads between the client and server are communicating properly.

Another problem with AJAX is the problem of getting the “Back Button� on the browser to work properly in the JavaScript application. Developers asking for problems in their web applications if they fail to install a way for their content to reload automatically if the user tries to use the browsers back button. This happens when developers over use AJAX without trying to balance with other technologies.

Many developers and designers forget that despite the advanced technologies and the amazing evolution of the web, there are still some users that do not have a strong and stable internet connection. A good example of this is seen if you have ever played internet poker and noticed how many delays there are because other players keep losing their internet connection. There are still users that have small monitors and dial-up modems. Not everyone has a Mac Pro Quad-Core Intel Xeon “Nehalem� processor with a 30� monitor.

As a web developer or designer, there are times when you might consider using other means of interaction with your users to allow you to reach a wider audience. AJAX requires interaction with XML and JavaScript which will leave users with poor connections out in the cold.

As I mentioned above, a designer or developer to be successful and be able to reach a larger audience needs to have a balanced platform. I am not suggesting that you need to eliminate AJAX technology, because it is a super way to develop intriguing JavaScript applications. What I am saying is you must make sure your code is efficient and clean and you use AJAX sparely, or as needed. You also need to make sure you have all your bases covered and that all of the AJAX support information needed is in the proper place. Remember, the more AJAX running, the slower the web pages will load, which is completely opposite of the reason AJAX is so powerful.

One final point – search engine spiders have extreme difficulty trying to pick up content when AJAX is trying to load large amounts of text. Hence, the content isn’t published and indexed properly. Spiders need static content to be able to read it.

Ajax developers at times might need to develop almost two types of applications if they want to build an online application good for Firefox and Internet Explorer browsers that could require a lot more time for application development. The end result however, is well worth it. A highly efficient Ajax based application does not only provide eye catching features but could easily provide a highly effective application with processing speed that almost rivals any simple web-based application.

When I was first introduced to CSS, my mind exploded with possibilities that CSS created, which lead to thoughts of what it could provide me as a web designer. CSS provided the bridge between web designers and web developers. We have all seen situations where a developer created almost the perfect website, yet it didn’t have the appeal that a good front end designer could present. Now with CSS, you could have both in a seamless creation of perfection.

I imagined where designers might discover easier ways to code, and developers would find easier ways to design, to the point where they would become synonymous with one another. I dreamed of ways that cumbersome HTML coding could be replaced with efficient and quick CSS code allowing cleaner, yet more stylistic website pages.

Web developer gurus have traditionally used PHP, JavaScript and Ruby as the languages they regularly use. Now there are some folks that are simply taking PSD and converting it to XHTML and CSS, and proudly declaring themselves web developers.

Not all dreams are good dreams. One of the fears I had is there would be designers and developers over using CSS variables and constants as found in PHP, to the point where they re actually making their style sheets longer. They also face the problem of being able to write their code that can be easily understood when reading it. As long as designers and developers make sure they are always efficient in writing their code and knowing when to use CSS variables, or when they should be using selectors.

I liked being able to use CSS to define colors as word-colors like blue, yellow, green and such. But then I noticed that during W3C validation, it would produce error warnings. W3C ants every color defines by numbers. Normally that isn’t a problem, however if you are designing a page that has extensive colors and shadings, it becomes difficult to remember what each code represents. It is very difficult to track. However, if you write your code as below, it is then a simple matter of reading your code if you need to make a change.

• $tan = “B7722D”
• $cream = “F5C350”
• $menuUp = “E9AB54”, // lite tan
• $menuDown = 473729”, // dark gray

SEO optimization is being discussed on everywhere, from individuals to design studios soliciting customers, and most of them skip over CSS as a simple and free solution. There are actually several websites that offer CSS Optimization tools. Some of them are relatively easy to use, and there are those that are fairly complex and harder to use. Most of them produce incredible results. Basically what they do is compress CSS files to allow them to load quicker, by merging similar classes, removing useless properties and whitespace, etc., will make some of the code harder for you to read. However, with larger CSS files it can condense the file that it really makes a difference in page loading times.

Even if it only saved 10% of the standard loading time, that alone would be significant over a course of a month or a year. Any time savings is beneficial considering there is a good chance of saving a viewer from leaving the site and going else where on the net. It is recommended that the designer or developer always keep a copy of the readable CSS code so that if they ever needed to make any changes it could be done quickly and easily to find what you need to change, and then it can be re-optimized.

Many broadband users might not think this matters much, as most websites seem to load fast for them, but if each site you went to loaded even 10% faster, think of all the time it could save you over the course of a week, a month or even a year. The bandwidth savings for the website operator can also be immense. I would recommend that you always keep a copy of your human readable CSS code so that if you ever need to make any changes it does not take you a long time to figure out what you need to change, and then you can re-optimize it.

The CSS optimizer that appears to be best is “Icey’s CSS Compressor” which out performed all of the others, with the added benefit of displaying the compressed code in color making it easier to see the changes that had been done.

All in all, CSS is here to stay, and is actually only limited by our dreams. CSS can be what you want it to be, or it can be something you want to avoid. However, that would be your loss. If you are new to CSS, read and experiment with it all you can, so it is truly an amazing tool for website creation and esthetics simplification.