Ask a Question ?
Design & Publish Websites Faster

iPhone App Landing Page – Building it in Breezi

We’ll continue with the breakdowns – actual working sites recreated in Breezi. The micro site we’ll do today is an iPhone app landing page: Weather Notifier.

The site we'll convert today

An iPhone app landing page: Weather Notifier

Building-It Video

Here you can watch a video of the making of this landing page. Watch it in HD!

Steps

We have divided the steps into Blocks, just like the first breakdown. The ones used here are:

  1. Header (author, calls to action)
  2. Intro (title & slogan)
  3. Main Content (process, slideshow, features)
  4. Footer (related apps)

Also, before starting you must already have a blank layout (refer to the “Before Beginning” section on the previous article, linked above).

Page Background

First things first: we’ll start with the full page background. Click on the Header dot and select the button labeled “Edit” on the “Page Background” section. This will open its style options.

Style options of the Page Background

We’ll use a blue background image

We’ll select the background and make sure that repeat settings are on “Repeat”.

Now we’ll also make sure that the Blocks that don’t have a background applied to them are transparent. We’ll open up the Bulk Style Editor (by clicking “Styles” on the Shelf) and select “Page” from the left menu.

Bulk Style Editor for Blocks

Force transparency on Blocks that don’t have a background image

1. Header

For this Block we will begin with the background. We’ll change it to a custom one. The “Repeat Horizontally” option should be selected. We will reduce the top spacing to 0 (no spacing) and increase the bottom to 21 pixels.

Style options for the header Block

We’ll set a background image and change the top & bottom padding

No we should make room for the apps we will use. There will be 3 columns, sized from left to right 370, 220 and 370. On the first one on the left, we’ll install a text app.

Installing a Text app on the left column

A Text app goes to the column on the left

And we’ll style the font as following:

  • Font: Droid Sans
  • Size: 16
  • Color: #58595B
  • Alignment: right
Style for the Header font

The Text app on the first column should be styled as showed here

Then we’ll change its spacing to 20 for the top one,  25 for the bottom and 0 for left/right.

Next we’ll install two images, one for the middle column and one on the right one. For the middle one, we’ll need to remove the top and bottom padding.

Padding shown for the image on the middle column of the Header

The extra padding at the top and bottom of this image should be removed

Sometimes the images we insert are displayed at a higher scale than what we intended, so we’ll need to adjust that. Re-size it by dragging it from the lower right corner, until it reaches “100%”.

Scaling down the image to its actual size

The image may have appeared in a larger size, we’ll scale it down here

We’ll now duplicate the image to use for the last column. By duplicating it, we save time in changing other settings and/or styles which we may have already set.

Duplicating the Header image

If we duplicate an app, its settings and style options will be copied too

We can then move it and update it by double clicking and switching the image. We’ll  The final result:

The Header after adding and setting up the 3 apps

This is how the Header should look

2. Intro

The Intro is very easy too. It features only an Image and a Text app, in a single column of a single section. But before we install them, we’ll change the background and set it to “Repeat Horizontally”. We’ll also set the top padding to 50, bottom to 14.

Background for the Intro Block

Changing the background and adjusting top and bottom spacing

Now we can install the Image app, which is actually used as a text-heading. You could use a similar font, such as “Amaranth” with the color #1D7EA7 and an italic style.

An image used as a heading

Alternatively you could use a Text app with the font set to “Amaranth” in color #1D7EA7

Additionally, we can reduce the bottom spacing of this app to around 2 pixels.

Next: the slogan. A Text app below this image will be installed, with the same “Droid Sans” font, a size of 18, and color #414042.

Setting the color for the text

Adding a custom hex code for the exact color match

We will also edit the style for it to have no “Top Spacing” , so its closer to the title above it.

3. Main

The Main (body) Block is the most complex one. This is how the original looks:

The original site's Main Block

A “Body” Block was created in Breezi to resemble this section

This Block has 7 apps in four columns. Sizes, from left to right are: 360, 230, 210 and 160. They don’t have to be that exact number though, they can be off for a few pixels.

Splitting columns in the Main Block

Setting up the Blocks for the Main Block, splitting and resizing

On the first column, we’ll install a Text app. It will feature or common “Droid Sans” font, size 30 and a blue tone that we’ll use for the rest of the Text apps on this block: #0F4054. We’ll also make it italic, and centered.

Style Dot for the first Text app of this Block

We’ll use a 30 pixels, Droid Sans, italic font for this text

Next: an Image app below, followed by a text app at the bottom. They should look like this:

The column on the left with 3 apps installed

The finished first column should look like this

The Image app should have no padding either top nor bottom.

Text app can be left with its default 25 pixels (for both top and bottom). It will be set as Droid Sans, 15 size and our blue tone (#0F4054).

The next column will feature a very cool app: the Framed Slideshow.

A newly-installed Framed Slideshow app

We’ll use this app to mimic the actual site’s slideshow

The settings we’ll use for this app are as following:

  • Frame: iPhone (black)
  • Effect: Slide
  • Stay On Image For (Seconds): 6
  • Fading Speed: Medium
Choosing the iPhone (black) as the frame

There aren’t too many things to customize on the options for the Framed Slideshow app

We’ll need to reduce the size of the Framed Slideshow to about 34%, so it fits nicely into its column.

Resizing the Framed Slideshow

We need to resize the app a little bit

Then we need only to double click on each default image to replace it with our own. And Add a fourth one, as by default we only get 3 images on an installation of this app.

Up on the next column: a Text app and an Image app below it.

Text app with the content selected

We’ll use the Droid Sans font here too

The text will have the same color as last time (#0F4054), Droid Sans and size 18 for the headings, and 14 for the normal text. As for its Style Dot, we can reduce the spacing to: left/right: 0, top: 10, bottom: 14.

The image that will be used as a button (with its respective link) will look like in the following image.

The editor with the image replaced

The editor with the image replaced

We’ll have one last Text app on the rightmost column with font set to Droid Sans, our blue color, 12 size for the normal text and 16 italic for the heading.

The Text on the rightmost column is the last app

We’ll use a smaller font for this text

And that’s it for the Main Block!

4. Footer

The last of our Blocks. And it has only two sections, and 4 images.

For the first section, we’ll use only one centered image:

The Image app on the upper section

We’ll remove the top and bottom padding

Then we’ll have a section with 3 columns below. Measures: 400, 160 and 400 (from left to right).

The last columns for this page

We’ll resize these columns to achieve the look of the original layout

3 images will be added, one on each column. And each image will have a special alignment depending on the column where its positioned.

The image on the right column, will be left aligned; image on the center column, center alignment and the image on the left column, will be right aligned. The alignment will be on the opposite side of its containing column. This option (alignment) is set on the Style Dot of the image itself.

Adjusting alignment for the Footer images

The images on the bottom will have different alignment depending on the column they’re set

The images should be stripped of their left/right padding. And the bottom spacing of the lower section, increased to 50 pixels (so there’s room below these last images).

And that’s it! Here’s how the finished micro site would look (click to enlarge):

Finished micro site

This is the final image of the iPhone app landing page

Did you like this article? Did you find it useful for inspiration? Let us know on the comments!

Menu