Web ads or standard ads have become omnipresent in this computerized age and it would be a loss for advertisers to not capitalize on them. And it is very critical for web ad design to be attractive otherwise you will only lose money. The more attractive a web ad is the higher chance it has that people will click on that ad and you can then convert that click into your customer.
Figma is one of the most popular designing software out there. It is free web-based software like canva. It is primarily used for designing UI and UX. It is also used mostly in web design. As it is a lightweight software it is also very popular among graphic designers because of its easy-to-use interface. In this tutorial, we are going to design Web Ads in Figma. So let’s start the design.
Web Ads Sizes:
Before getting into Figma you should know the dimension of web ad design. Web ads come in different sizes. Below is the list of popular web ad sizes.
| AD TYPE | DIMENSION |
|---|---|
| Leaderboard | 728 × 90 px |
| Large Rectangle | 336 × 280 px |
| Medium Rectangle | 300 × 250 px |
| Wide Skyscraper | 160 × 600 px |
| Skyscraper | 120 × 600 px |
| Button 1 | 120 × 90 px |
| Button 2 | 120 × 60 px |
| Microbar | 88 × 31 px |
Web Ads Design in Figma:
Open a new file in Figma.
From the left top corner selects the “Frame tool”(it looks like a hashtag).
Now click on the canvas and draw a rectangle of size of 160px by 600px. This is the dimension for the “Wide Skyscraper” ad. And gave it a dark colour.
Import your image or you can use the free “Unsplash” plugin for Figma. Just right-click and go to “Plugins > Find more plugins” or click on the component tab at the left top.
Just search for the image you want as I searched for “photography” and I got many image options. Just click on the image you like and it will be imported directly into your Figma.
I then placed the image at the bottom of the rectangle and add a gradient above my image. Add gradient using the plus button on the right top as shown in the image. And change the Solid option to linear from the dropdown.
Now just place the text you want using the text tool or by pressing ” T” as a shortcut on your keyboard into your ad, like I added this text which you can see above.
You can either use the “Register now” button png or just place a rectangle and round its corner and place text inside the rectangle.
Now just simply add your logo at the top and you are done.
Leave a Reply