Running Borders with a CSS

This is one of experiments i tried with CSS and it came off really well. It’s a neat little trick which if used properly can give you amazing results.  See the demo page below.

Demo Code

(more…)

How to make a “Perfect Header”

A Header Graphic  is the most important part of your website.  Its the first thing that a user sees and if its awesome it can really hook the users into exploring your site further. Below are some useful text on how you can make a good header graphic or improve on you existing header graphic.

Relevant

The header should be relevant to what the site is about. It should paint a picture about the site and hook the users at a glimpse. Below is a good example of the same.

Clear and Sharp

Header should be clean and sharp. It should convey a strong message about your site clearly. Below is a good example of it.

Placements

On the header the placement of key elements is very important. Your logo can go to the far left and should be sufficiently big to be readable. The reason for putting it on left is that we are taught to read from left to right so we always start seeing a web interface from the far left to the right. The other graphical elements on the header like an image can come on the right as next our focus going to the right, so next best thing after logo should be on right. If the logo is in the center of the header then no other elements around it should be too prominent so that the logo retains more weight-age than surrounding elements.

Size

While making a header graphic caution should be taken about its height, it should not be too big in height nor should be too small. The height proportion of the header must be such that its fully visible on almost all screen and on all different resolutions.

Functional

Along with graphics if you can make the header more functional its a big plus. Functional means it has to perform certain operation like optin people in with a quick optin form or taking them to other pages of the site with a navigation bar. Header is like real estate of your site and you need to utilize it in best possible way as the first thing people are going see is your header and if they find what they looking for on your website right on the header your conversion rates will shoot up. Below are some good examples.

Conclusion

So these are the few tips on what makes a good header. Post your comments and views about the articles and let us know how you like it.

The Power of Graphics

Improved Aesthetics

In today’s evolving internet world websites are becoming more and more graphical oriented.  We see all types of websites being made which are really stunning and graphical.  Graphics are a must for today’s new age websites. They improve the data representation and overall aesthetics of the website.
(more…)

The Graphic Elements of a Squeeze Page

Questions are always asked about the graphic elements of what makes a good squeeze page or landing page.   Below I am going to address some items that perhaps answers your question and tell you what you need to create a successful and high converting Squeeze page.

The Graphics Attraction Factor

Graphics are the visual representation of what your website and product is about.  The quality of graphics has a direct impact on the value that is placed in the beholders eye of your product or service.
(more…)

Some Pure CSS Headline Effects

Writing Headline of your site in a new way

Headline is probably the most important part of your website or a blog. It should be attractive cause headline generates interest in user to read the info below it. So its vital to have an attractive headlines. Below we will see some of the CSS techniques you can use to make your headlines better and attractive.

demo Source code

(more…)

How to make a glossy box using CSS only

Hello everyone, today we are going to learn a neat little css trick to make glossy boxes using only css. The demo can be seen below.

Demo Source Code

Making the box

Here’s the markup for the box.
(more…)

How to make exit popup without writing actual code

Exit Popup’s, what are they?

Exit popup’s can be useful to grab attention of a user while he is about to leave. They are popup windows either external windows or a window that will pop right inside the page. They can help you sell products or to make free offers on your product and services etc.

So here’s the demo of what we will be building.

Demo Source Code

(more…)

Using Multiple Classes with CSS

CSS are a boon for designers. It has made websites more robust and more easy to manage and edit.

Today we will see one very good feature of css often overlooked, which is using multiple classes. Below is what we will be creating.

Demo Source Code

Goal

Our goal is to enhance the look of the content using multiple classes.

Step 1

Setting up the markup: The markup we will be using will look something like this, then we dress it up step by step.

(more…)

Graphics Vs Arts

After all these years working as a graphics designer, I came across a question which many might have come across.  That is, is Visual arts (Fine Arts) and Graphic Design the same. Quite baffled I tried to answer these question on some of the points below.

What is Art?

Art is basically a form of expression. Its a persons feelings making it created on a canvas. Art doesn’t necessarily have an audience.

What is Design?

Design is more of a subjective art ( As the modern terminology applied arts. ). Design can be taken as a extension of “Art”. Its a means of communication for a specific target audience using art forms, shapes, colors, typography ect.
(more…)

New Categories starting today

Welcome to Our Blog. We are delighted to announce that we are starting two new categories today on Graphics Overload.

Graphic Design

The category will feature tutorials, helpful information, tips and tricks and updates from the world on graphics design.

HTML / CSS

This category will feature tutorials on HTML and css technologies, css tricks, layouts and other cool things.

So stay in touch cause its a start of an exciting journey.