Ask a Question ?
Design & Publish Websites Faster

Breezi’s Version of a Mac App Website

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.

Versions Mac app

We’ll build this site in our platform

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 site. We’ll create the necessary Blocks on the Layout Builder until we reach 7.

Layout Builder: "Add Block" button

We’ll add Blocks below the body Block

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

"Add Section" button on the Layout Builder

Layout width on this screenshot has been manipulated for displaying purposes, actual Layout is larger

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

Header Block's columns being resized

Adjusting the Column’s width on the header Block

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

A preview of the empty layout

Blocks, sections and columns set according to the analysis of the original site we’re recreating

Installing Apps

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

App Store with the Image app highlighted

Install apps by dragging them to your layout

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

Dragging around an app to install it

Installing an app

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

A sample of how the layout looks with apps installed

Here we can preview our page with several apps installed

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. Once all images are ready, it’s just a matter of replacing the default image with the right one.

To change the image, click on the "Replace" button

Replacing the default image

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.

Selecting a heading level 2

Headings are meaningful to Search Engines, but also allow us to style them all at once in our editor

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

The icons used on the original site

The Nav icons on the top menu used on 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.

Pencil icon for editing the Dropdown Navigation app items

We’ll edit the current and add 2 more items to a total of 5

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

CMS panel for the Dropdown Navigation app

Editing items on the CMS panel

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

Navigation app CMS panel once content is set

The items, once edited, should look like this on the Nav app CMS panel

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

All content entered (no styling)

We haven’t styled anything so its OK to look like this

Styling & Configuration

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

Style Dot for the header

We’ll edit containers’ and apps’ style (backgrounds, spacing, shadows, etc.)

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

Custom image for the background of the full body

You can open this panel from the Bulk Style Editor

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

Changing the width of the columns

To fix alignment of some apps, we will need to make adjustments on the layout

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

Changing text style

We’ll edit font size, color, line height and more where needed

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

The tab's Style Dot (Tabs and Accordions app)

Updating background color for the tabs

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

Modifying page settings

Here you can edit the name of the page, and add Meta Keywords and Meta Description (for SEO)

The End

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

A preview of the Versions app made in Breezi

Click this preview to enlarge!

Liked this tutorial? Let us know what you think!