Ask a Question ?
Design & Publish Websites Faster

“Sketching” the Pistachio App Website in Breezi

We’ve recreated an iPhone app landing page before in our web designer tiool. In this article, we’ll do something similar.

Pistachio is a “minimalistic sketching app” for iPad (and iPhone), and we’ll build its micro site completely in our editor.

Original micro site: Pistachio

This site is about a sketching app for iPad & iPhone

Dissecting the Original

First we’ll do an analysis of the original site. Here’s the Blocks and apps that we’ll use for this tutorial:

  • Header: logo of parent company
    • 1 column: Image
  • Intro: app logo
    • 1 column: Image
  • Body 1: about and CTA
    • 2 columns: Image / Text, Text, Image
  • Body 2: news and updates
    • 2 columns: Text, Blog / Text, Text
  • Footer: links to parent company and social media
    • 2 columns: Text / Social Sharing Buttons
The iPad app site dissected

There’s an app equivalent for every piece of content of the original site

Before Beginning

If you are following this tutorial from an existing site from our platform, you must reset it to a blank starting point.

"Reset Site & Choose New Starting Point" option on the Admin menu

Select this option if you’re following this tutorial in an existing site

Otherwise, sign up and create a new site! There you can just choose that same starting point (blank).

Hovering over the "Blank" starting point

Choose this starting point to get an empty layout

Header Block

We’ll begin by changing the Block’s background to white.

The Style Dot for the header Block

Select white from the color picker

This Block will feature only one column, where we’ll install an Image app.

Resizing the image logo

Images appear sometimes at a larger scale

This image will be aligned to the right side.

Style Dot for the Image app on the header

We’ll right-align this image

Intro Block

The Intro Block will feature only a custom background and an Image app.

We’ll start with the background. Clicking the Style Dot will open the options to style it up.

Style Dot for the intro Block

Styling the intro Block

We’ll select the background and make it repeat horizontally. We’ll need to adjust its horizontal position to half the way the slider.

Background options for the intro Block

A few things to edit here: custom image, horizontal position and repeat option

Spacing should also be set to 0 (none).

Then we’ll put an Image app and replace it with the logo of the app. Make sure its set to 100% of its original size.

By default its centered in our column, which is what we want. What we’ll need to edit is its top and bottom spacing. It should be set to 50 and 0 pixels respectively.

Style Dot options for the Image app

We’ll need to edit top and bottom spacing for the image

Body 1 Block

Off to the next Block. Since the background is already white, the only thing we’ll need to edit its the top spacing for the Block, setting it in 30 pixels.

We’ll divide the Section in two columns of the same width (480 pixels wide each).

Splitting a column

We’ll split the column into two

Next, an Image app on the left column. We may not be able to resize it to 100% because of the width of the column that contains it, so about 85% should do it.

Resizing an image app

Because of the constraint of the column that contains it, this image will not scale to 100%

On the right column, we’re adding a few apps. First: a Text app for the title. Font settings should be: “Pacifico” for the font face, 36 for size, and set to bold.

Font options for the title

Customizing this title, which we’ll duplicate later

Now we’ll increase the top padding to 50px on its style dot.

Style Dots for the Text app

Increasing the top spacing to 50 pixels

Another Text app will be installed below. For this one we’ll use Georgia as Font, sized 18. Remember that line height can be set independently, so a good advise is to keep an eye on it.

Updating line height

We’re using 22 pixels for line height, a bit higher than font size for readability

Next we’ll install an Image app below. We’ll resize it to 85% to match the scale of the left column image. We’ll and left-align it on its Style Dot.

Style dot options of the image app that serves us as button

Changing alignment of this button image

We’ll also reduce the top padding to 0, on the inner app Dot. There’s a difference between the style dot of the actual app and its “inner” style dot.

Inner block style dot for the Image app

“Inner app” Style Dot: reducing top spacing

Body 2 Block

This Block will have a custom background that serves as divider between this and the former Block. First we’ll change the color to a shade of gray (#E8E8E8), so it shows where the image ends.

Color picker for the body 2 Block

Selecting a color for the body 2 Block

Then we’ll insert the custom image of the border, which looks like this:

Background for the second body Block

Scaled up sample of the image we’ll use as background for this Block

This image is not wide enough to cover the whole page, so we’ll repeat it endlessly so it fill it. So we’ll select the option to “Repeat Horizontally”.

Style Dot options for the body 2 Block

Selecting the custom image and repeating it horizontally

Once the background is set, we can continue to duplicate the column into two: just like the former Block (480 pixels each).

On the first column on the left we’ll have a Text app (title) and below it a Blog app. On the one on the right, we’ll use two Text apps: one for the title above, and the next one for a message.

For the titles, we’ll duplicate twice the Text app we styled on the former Block.

Duplicate the Text app that contains the title

We duplicate the Text app so we won’t have to style it again

This way we will only need to update the content (by double clicking it), without setting the font options again.

Titles of the body 2 Block

Duplicating apps that are very similar in style saves time

Below the title of the right column, we’ll put another Text app. This one will be Georgia, size 15 pixels.

Text app font options on the Body 2 Block

Updating font settings for this Text app

And the last app for this Block: the Blog app will be installed below the title on the left column.

Each entry of the Blog app must always have a title. The original micro site doesn’t have a title for each of these entries, only date. So we’re going to use the date as title for each entry.

First we’ll need to hide the date from the Blog app settings. Clicking on the wrench icon will open them up. There we can leave the “Show Date” box un-checked.

Blog app settings panel

We’re hiding the date because we’ll write it manually as the title of each entry

Then we’ll need to edit its font, make it Georgia, not bold, size 15 and color #333333 for both default and rollover states.

Updating the font for the Blog app entry title

Updating one will affect all the other entry titles

Also, we’ll edit the font of content itself. Locate the dot for the content, clicking it will open a Bulk Style Editor with text options only. There we can select Georgia, size 16 and color black.

Text options of the Bulk Style Editor

We’ll update the font options for this entry and all the other entries will use the same settings

Now, the content. Double clicking on the text will open the CMS panel, where we can make content edits.

CMS panel for the Blog app

Editing the content of the first entry of the Blog app

We’ll add as many options as necessary by clicking on the “New Post” tab on the left. Once we’ve added and customized all items, the Blog app should look like the following image.

Preview of the Blog app

The Blog app with all the entries of the original site

The only difference here may be the spacing. One possible fix is to reduce the font size, so it resembles better the original site.

One last thing is to remove the border that appears on the bottom. Select its Dot and uncheck the box of the “Border” tab.

Removing the border on the bottom of the Blog app

Removing the border on the bottom of the Blog app

Footer Block

We’re finally down to the last Block. We’ll do two things first: change its background to #E8E8E8, and add some spacing below. The spacing isn’t there on the original site, but it looks better.

Here, if it there’s only one column, we’ll split the column into two. Else, it may already be split into two or more columns. We want to end up with only two columns.

Next we’ll remove the top spacing and add a border on the top side of the Section. For this we’ll need to edit several options:

  • Select the Style Dot for the whole Section
  • Scroll down on the options to “Borders” and enable it (by checking its box)
  • Leave 1 pixel for thickness
  • Change the type to the dotted option
  • Check only the box for the “Top” side (it may be needed to “disable the lock chain” so each side can have different values, otherwise modifying one updates all)
  • Select a gray tone for the color (hex code #BBBBBB)
Style Dot for the Section - Borders

Adding a gray border to the top side of the Section

The one on the left will feature a Text app. It will be Georgia, size 15. We’ll insert two links, by clicking on the anchor icon of the Edit in Place toolbar. We’ll change the color to black (for both states: default and rollover).

Edit in Place toolbar for the footer text

Editing font options on the last Text app

Next on the column on the right, we’ll install a Social Sharing Buttons app.

This image shows the shelf with the App Store open

Installing a Social Sharing Buttons app

It won’t need any additional setup, it will show by default as the original site.

That’s a Wrap!

We can now publish and admire the replicated site.

Click on the image below to get a full screenshot preview.

Preview of the finished site

Click to see a full image preview!

Do you want to learn about a particular step? Have a question? Please use the comments below!