landing pages and conversion rate optimization blog by pagewiz

Creating Pixel-perfect Landing Page Designs for Smashing Results

By Kobe Ben Itamar on November 16, 2014

Reading Time: 4 minutes

Pixel Perfect

Web Designers and/or graphic designers can create some seriously stunning designs using today’s most commonly used tools such as Photoshop, Illustrator, or the new and exciting kid on the block.

At Pagewiz we know how important it is for designers to be able to be precise and pixel perfect accurate with their design work, even when it is being transferred from their favorite design tool over to the web. That is why I wanted to demonstrate how great the Pagewiz landing page builder can be when you come to make this transfer.

How to Use Pixel Perfect Design

Pixel Perfect DesignerIn the below embedded video – I’ve taken a static landing page design PSD file (made by Pixel Fabric) and have quite easily transferred it into the Pagewiz landing page builder and turned it into a live landing page. I first went ahead and sliced all of the design’s images off of Photoshop, and saved them for the web as images. save-for-webIt is important to try and keep your image size as small as possible so that the page you build loads swiftly. There are plenty of ways to reduce it.

I then go on to planning & creating the actual landing page by dividing it into sections, and placing each section’s content (text & images) inside it.

I use different colors, sizes and web fonts (from the entire Google web fonts library – which is embedded into Pagewiz).

Gfonts

I take care to use some very handy alignment tools, and shortcuts, which can significantly decrease your work time on each such project.

edges
Align element edges to one another
alignment
Place an element behind another element

Pixel Perfect Landing Page Design Video

So, please grab a cup of your favorite kind of coffee, sit back and take a look at how I create this beautiful pixel perfect landing page design inside Pagewiz in about 20-30 minutes. Later on, you can register a free trial account with Pagewiz and have a go at it, on your own.

I hope you find this video useful for your online marketing needs, and now that you can smoothly & accurately transfer your designs from any design software over to Pagewiz – you’ll use this great tool to save the agony of having a developer recreate your design on the web for you.

Furthermore, even after your landing page design is up and running you can easily make changes to it, without even having to unpublish! Just make your design changes and hit the ‘Save’ button to apply them automatically.

You can just as easily create a mobile optimized landing page version, which will automatically be served to any mobile device using visitor to the page you’ve created.

You can obviously see statistics on how well your pixel perfect landing page design is doing in terms of conversion rate and click-through rate, so that later on you can use the friendly A/B testing mechanism, which was created to help you increase that conversion rate.

But please, don’t get overwhelmed with all of the available features that exist on the Pagewiz landing platform. You should first try to use the landing page builder to transfer your static design into a live landing page on the web – and then go on to use the rest of the great online marketing features.

At any rate, if you have any question or difficulty while using the different features – we’re here to help you out! Do not hesitate to contact our support team via our live chat or via email at: support@pagewiz.com .

Enjoy your design process!

 

Landing Pages Designer

Kobe joined Pagewiz as a campaigns manager & front end developer. He has 2.5 years of landing page campaigns creation experience and a passion for driving them towards a higher conversion rate.
On his free time, Kobe likes to go out for long runs along the riverbank, accompanied by his fast dog (Giga).