Today we’ll present a Breakdown of a Mac OS app website.

Versions is a subversion client for Mac OS, and though its website has a few internal pages, we’ll focus only on the homepage.

Block Analysis

In order to get started, we’ll take a general look at what we’re building. These are the containers and apps we’ll use:

1. Header: Parent Company Logo & Navigation Menu
   1. 2 Columns: Image/Navigation
2. Intro: App Logo, Introductory Text & CTA
   1. 1 Column: Image
   2. 3 Columns: Text/Image/Image
   3. 3 Columns: Image/Text/Text
   4. 4 Columns: Text/Text/Text/Text
3. Body 1: Working with Subversion
   1. 1 Column: Image
   2. 1 Column: Tabs & Accordions
   3. 3 Columns: Text/Text/Text
4. Body 2: Awards & Customers
   1. 1 Column: Image
5. Body 3: Partner Ads & Details
   1. 3 Columns: Image/Image/Image
   2. 3 Columns: Text/Text/Text
6. Body 4: CTA
   1. 1 Column: Text/Image/Text
7. Footer: Copyright Info
   1. 1 Column: Text

In former posts, we’ve taken a Block-by-Block approach, setting everything – backgrounds, apps, content, style etc. – before moving on to the next Block.

Here we’ll try a different one, setting the layout first, installing the apps next, then adding content and finally styling and setting everything up.

Creating the Layout

If you’re following along on your own site, its advisable to start from a blank template.

According to the analysis above, we will have 7 Blocks in our Breezi site. We’ll create the necessary Blocks on the Layout Builder until we reach 7.

Once we’ve got the 7 Blocks ready, we’ll begin adding Sections and splitting Columns as necessary.

It may also be necessary to adjust the width of some Columns, split them, or join them.

The finished (so far empty) layout should look like this:

Installing Apps

Now that the layout is set, we can begin to install the required apps all around.

We’ll drop the apps as outlined above on the analysis.

We will worry about content next. Right now, we’ve only installed apps with its default content.

Entering Content

Text content will be the easiest to set. Just copy & paste.

Images may need to be sliced and exported them before importing them into Breezi. Once all images are ready, it’s just a matter of replacing the default image with the right one.

For text, the only advise is to use headings (for bulk editing later). Wherever necessary, mark the text as one of the available levels of headings.

The Dropdown Navigation app may be worth explaining, since it will use special characters to resemble the ones of the original site.

Since we don’t have all the exact symbols available, we’ll use some that look alike:

❁ ★ ✉ ☑ ↓

We’re doing it this way so these symbols can have the color and effects (shadow) properties of the original site.

In our Nav app, we’ll click on “Edit Content” to open the CMS panel.

There we’ll edit each of our current items, and add two more.

We’ll use the text icons described above for the items. Here’s what the panel would look then:

Once content is set, it should look like the following image:

Styling & Configuration

The last step: set up apps (that require so) and style them (via their Style Dots).

For example, we’ll edit the page background to show a custom one.

We’ll also need to resize the width of some columns, to help with alignment and/or positioning of its contained apps.

Text will be styled to, with the Edit in Place toolbar.

For the Tabs and Accordions app, we’ll change the background, remove the rounded corners (set it to 0) and add some gradient.

The last part would be to edit the page name, SEO fields and Favicon. Additionally, a script for tracking statistics could be added too.

The End

And that’s it! Here’s what the final site in Breezi looks like:

Liked this tutorial? Let us know what you think!