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.

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.

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.

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.

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.

And we’ll style the font as following:

• Font: Droid Sans
• Size: 16
• Color: #58595B
• Alignment: right

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.

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%”.

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.

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

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.

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.

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.

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:

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.

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.

Next: an Image app below, followed by a text app at the bottom. They 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.

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

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

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.

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.

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.

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:

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

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.

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):

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