How to design an effective web sale banner for an eCommerce website
Today, I will teach you some graphic design tips and tricks. Today we will learn How to design an effective sale banner for an eCommerce website.
What is the importance of sale banner in website.
A web banner or an ad banner is form of advertising on internet. It works like magic when comes to selling product online. It just depends on how you design your creative. In this banner design tutorial , We are creating banner for an e-commerce website which sells microwave ovens. The subject here is “Company is selling microwave ovens at minimum 30% off.” We have to design web banner on this subject.
Resources used in design of this creative
1. I have taken Microwave ovens images from Google. If image is very specific, you can demand it from your client.
2. Some Icons from any free icon provider website. I suggest to use www.flaticons.com for icon resources.
3. Good Looking font.
Steps to follow
1. Setup Photoshop Document.
Create a new layer in Photoshop (Ctrl/Cmd + N) with dimensions of width 700px width and height 300px.
Save it as banner.psd
Fill background with gradient and set margin from all four sides.
Fill background with gradient. Grey from top and bottom and white in between. Take 30px margin from top, bottom, left and right side. Place grid there. These grids will help you in align your objects.
Divide the Space in two Parts
Insert your image and give some effect
Want to Learn to create these type of banners, Web layouts , html templates, wordpress etc. We are offering complete Web designing course for aspiring students.
Add content in left side of banner
Set the font style to Calibri and write your text in three lines.
Complete your kitchen with
Conventional Microwave Ovens
Minimum 30% Off.
In this content main part is “Minimum 30% off”. User comes on website for the deal. So we have to highlight discount very clearly.
Set the font style to calibri and font size of first two lines to 16 or 17 pixel
Set the font size of third line to 37px.
Add some more content in left side of banner
Now some wants more from seller in addition to discount. Mention some features here like warranty, Brand information, Free installation etc.Now we will write three features of the microwave in next line after the discount.
30 Days Return
add some icons with this text to make it more appealing.
Add Shop Now Button
Finally add shop now button. Totally contrast in color. Single button. Add a small arrow on left side of show Now text. Arrow is giving you direction to click on the button and move forward. Never add more than one button on one banner. Extra button will confuse user where to click.
Your Banner is ready. You can add some elements to make this banner more appealing. Like underline main text. Give some line height in text. Spacing between elements.
Now you can play with different text, colors and backgrounds. Here are some examples.
See the Video Tutorial