Continuing with the Breakdown (From Scratch) series, today we’ll recreate this event website design.

The original site we’ll be recreating with Breezi is called New Adventures in Web Design. The event took place on January 18-19th  of 2012. Here’s what it looks:

Laying Down the Structure

To start, we’ll begin by taking a look at what we’ll build and how to think in terms of Breezi. The division in containers, sections, columns and apps would be as following:

1. Header
   1. 2 Columns (Image / Text)
2. Intro
   1. 2 Columns (Navigation / Image)
3. Body 1
   1. 1 Column (Custom Background, Text)
4. Body 2
   1. 3 Columns (Text, Text + Photo Block / Text + Photo Block / Text, Text)
   2. 3 Columns (Text / Text / Text, Text)
5. Body 3
   1. 1 Column (Text)
   2. 4 Columns (14 Images)
6. Footer
   1. 2 Columns (Text / Text)
   2. 2 Columns (Navigation / Text)

Full Page Background

If maximized or at certain window sizes, you’ll notice that the original site has a black full page background. We’ll start there. Clicking on the Styles button on the shelf brings up the Bulk Style Editor.

There we will select the “Page” tab and change the background to black.

We’ll leave unchecked the options below for “forcing transparency”, because we’ll use custom backgrounds on every block and we don’t want them to be transparent.

Header Block: Logo and Dates

For the first Block, the header, we’ll use a single section with two columns.

On the first one on the left, we’ll install an image app. We’ll edit its Style Dot to make it left-aligned.

We’ll make sure the image is 100% of its original dimensions (sometimes it may appear larger).

Next, on the other column, we’ll install a Text app. We’ll add the right wording, and use the following style for the text:

• Font: Ubuntu Condensed (we’ll use this again later, for other headings)
• Size: 18
• Alignment: right

The only difference is the color, #BD3632 for the first line (red), and black for the second one.

As for the style of the text, we’ll use the color (#F8EBEA) as background, and the following settings.

• Color: #F8EBEA
• Opacity 100%
• Left/Right Spacing: 13 pixels
• Top Spacing: 20 pixels
• Bottom Spacing: 20 pixels

Navigation and CTA

The next Block is also divided in two columns.

On the left one, we’ll install a Navigation app. We’ll need to edit the default items and remove all sub level links. We should end up with only 6 top level links, as shown in the image below.

Once we have all items set, we can proceed to styling the text. “Ubuntu Condensed” will be the font, size 20 and color black for “Default Color” and #BD3632 for “Rollover”.

The styling of this app is shown in the image below. We should remove all the padding on the bottom side, and increase a bit the top one.

For the right column, we’ll use a right-aligned image, with no bottom spacing. Top spacing can remain in 25 pixels.

We have removed the bottom spacing so the next Block appears right below this one, without any extra space.

Banner & Intro Message

The first thing we’ll do about this Block is change its background. We’ll use a custom, no-repeating image (sized 1020 x 265 pixels). Top spacing will be 30, and bottom 12.

Then we’ll insert a single Text app. It will use “Ubuntu Condensed” as font, and it will be white and left aligned. The first line should be 42 pixels tall, and the rest of the text 22. We may need to update the line height too, to match the font size values o be a little larger.

We’ll edit the spacing to position this text on the right spot. First, the Text app style: 0 for bottom spacing and 10px for top.

The section top spacing should be 50 pixels.

Program Block: Speakers and Features

There will be 2 sections on this block. Both will have 3 columns, sized 320 each (equal sizes).

We’ll begin with the first column of the upper section. It will contain a Text + Photo Block app.

We’ll customize it in several ways. First, we’ll edit the app title. That’s the one that appears at the top.

Next we’ll remove the title of the first (only) item. We only want text on the right side of the image, and each item comes with a title above it, so we’ll have to remove it every time we add an item.

We’ll add some text and style it up as follows. The first line is the speaker name, which will be H3, Ubuntu Condensed, sized 22 in black color. For the following, a brief description about the speaker, we’ll use the red tone we’ve used before, size 14. Font will be “Georgia”, in italics.

Most probably, the image may need to be resized, unless it has a similar size as in the image above. Else, you’ll need to scale it down. Modifying this image size will affect all the items on the app.

There will be a total of 5 items (speakers) on this app, styled as mentioned above.

Since the next column has the exact layout and setting of the previous one, we’ll just duplicate it and edit the content.

Then we’ll just move it to the next column and update content (text and pictures).

Once updated, it will look like the following image.

The last column will have two text apps. The first is the title, which will be “Ubuntu Condensed”, 30 and red. The other text will be “Georgia” in color black, size 14.

Next section. It will also have 3 column, with the same sizes as above (320 pixels each).

The first and second column will have some quotes (Text apps). Text will be Georgia 16, color black, the quote itself in italics while the the author in normal style but red color. The style of the app should have the following values:

• Left/Right Spacing: 20 px
• Top Spacing: 25 px
• Bottom Spacing: 25 px
• Top Margin: 30 px
• Bottom Margin: 0 px

The most important thing to note here is the style of the columns. They will have a pink background (hex #F8EBEA), with 0 spacing in all sides.

Sponsors Block: Image Apps

For this Block we’ll change its background for a custom image, install a Text app on a section and a lot of Image apps in another section below.

First: the background. Click on the Style Dot for the whole Block, and edit the Background Image. We’ll use a large gray image, with a border line on the top with a slightly darker gray, and set it to repeat horizontally (so it expands as long as the Block does).

Now we’ll duplicate a Text app (title) from the former Block and move it over to the first section. We do it this way so we don’t have to manually style it again, we just update the content.

For the images, we’ll divide the section in 4 columns, of about 240 pixels each.

Now for the images, we’ll make the first one, style it up, and then we’ll duplicate it and just update the image inside.

We’ll insert the first image, and open its style dot to center it and make it have a border of one pixel on each side, color #CCCCCC. Top spacing should be set to 25 pixels, and bottom to 10.

For the size of image we’re using (300 x 180 pixels), we’ll scale it down to 66%.

Then we’ll just update each image and its link.

Once duplicated and updated, they should look like the following image.

Last Block: Footer

The last Block features two sections: two Text apps above and a Dropdown Navigation app and another Text app below. All text on these apps will be Georgia, and either white or pink (#DE9A98).

First we’ll change the Block’s background, to #BD3632. Then we’ll add Text apps where needed.

The only thing we haven’t done before is the Navigation app with separators. Once we have the items in place with their matching links, we can proceed. we’ll use the right Style Dot (near the middle of an item), and select “Separators”, “Bar” for type, the same color as the text (pink) and 10 pixels for spacing.

We’ll also need to change the color for rollover, which will be set to white.

Done!

We’ll hit publish and enjoy the finished product. Here’s a full screenshot:

Hope you enjoyed this post. If you have any questions, feel free to ask!