Ask a Question ?
Design & Publish Websites Faster

“Building” Build – the 2012 Conference Website

Hi all! We’re continuing with the breakdown series.

This time we’ll be doing the 2012 Build Conference design event website. We’ll build this site completely with our web design app.

This is how the original site looks like. Click on the link above to fully see it.

2012 Build Conference site

This is the site we’re recreating

We’ll first take a look at what we’re going to use, layout and apps. Then we’ll start working on it, first blocks, then apps, later on content, and finally, styling and additional setup.

Block & Apps Analysis

These are the Blocks we’ll be using in out product to build up this replication site.

  1. Header
    1. 4 Columns: Image / Text / Text / Text
  2. Intro
    1. 1 Column: Text, Button
  3. Body 1(Speakers & bottom divider)
    1. 4 Columns: Image, Text / Image, Text / Image, Text / Image, Text
    2. 3 Columns: Image, Text / Image, Text / Image, Text
    3. 1 Column: empty Text app, just for creating space
  4. Body 2(Workshops / bottom divider)
    1. 1 Column: Text
    2. 4 Columns: Image, Text / Image, Text / Image, Text
  5. Body 3(Festival / bottom divider)
    1. 1 Column: Text
    2. 3 Column: Image, Text / Image, Text / Image, Text
  6. Body 4 (Fringe / bottom divider)
    1. 1 Column: Text
    2. 4 Column: Image, Text / Image, Text / Image, Text / Image, Text
  7. Body 5(About / bottom divider)
    1. 2 Columns: Text / Text
  8. Body 6(Sponsors)
    1. 1 Column: Text
    2. 6 Columns: all Images
  9. Footer(Social & Copyright)
    1. 4 Columns: all Text
    2. 1 Column: Text

Laying the Structure

As seen on the previous analysis, we will be using 9 Blocks, most of which will have 2 Sections. Each of them will have a varying number of columns.

This diagram illustrates the layout setup.

Layout diagram of the site structure in Breezi

We’ll need to create several containers to achieve this layout

So if you’re following along, we recommend using the “blank” starting point as we are. Then you will only have to add 5 additional Blocks.

Adding Blocks

To add a Block, click on the blue “plus” button on the right side of your layout

Then a Section within each Block that requires it.

Afterwards, Columns within each Section as stated on the analysis. Some Columns will need merging, but most will need splitting.

Splitting Columns inside a Section

Split Columns by mousing over the intersection of two of them and waiting until a blue button labeled “Split Column” appears

One thing to note for the second Section of body 6, which features 6 columns, is that we’ll need to remove the left/right spacing before splitting them all.

Click on the “Styles” button on the shelf, to open up the Bulk Style Editor. There on the top dropdown, leave selected only “Body 6″.

Bulk Style Editor for the Block "Body 6"

Here we opened the Bulk Style Editor and checked only the “Body 6″ Block

Then move the slider of “Left/Right Spacing” all the way to the left, so it has no spacing.

Removing the spacing for left and right sides

We’re only targeting the “Body 6″ columns, so it doesn’t affect the rest of them in other Blocks

Otherwise we won’t be able to create all of the Columns, since a minimum of 160 (Update! Now it’s 100) pixels of width is required for each one. The total width of our layout (Sections) is 960, divided between 6, equals exactly 160 px. But Columns have some spacing by default, so we need to remove it before creating all 6.

Installing Apps

To install an app drag and drop its respective “Install New” button from the App Store.

The App Store with the Text app highlighted

Installing an app from the App Store

And refer to the guide above to see which apps go where.

Once we install the apps, they will look empty. Adding the actual content is the next step.

Layout with empty apps

This is how the site looks with the apps installed with default content

Entering Content

Now that apps are there, we need to add content. For text its really easy, just copy the source text and double click on the text apps to edit.

Same with images, double click them to replace them.

Image editor of Breezi

Replace images by clicking on the “Replace” button on the image editor

Here’s a screenshot of what it looks once apps are added. Note that we haven’t styled them, so they still have to get the right colors, alignments, spacing etc.

Preview of our site once content has been added

Our site is taking shape

Styling

For styling, we have a lot of things to do. Changing colors, adding background images, setting the right alignment, fonts, sizes, etc.

Blocks Styling

We’ll begin with Blocks that need a background change.

First, the top one: header.

Header Style Dot

Click on this Dot to edit the styling of the header Block

There we will change the background color to #191818.

Header Block style background settings

Changing the background color of the header Block

The text won’t be visible, because of the dark background. But don’t worry, we’ll get to it. We’ll also add some 10 pixels of bottom spacing.

We’ll also change the background color for the next two Blocks (Intro and Body 1), to #e41f3a.

Then, we’ll also edit the background image for Body 1. You can have both, a color and an image as background. The color will be visible where the image ends (if its not set to repeat both ways). We’ll also move the vertical position slider all the way to the right (so the image moves to the bottom of the Block) and add some bottom spacing.

Background settings of the Style Dot of the body 1 Block

Changing the background image for the body 1 Block

For the next 5 Blocks (body 2, 3, 4, 5 and 6), we’ll do something similar. We’ll leave white as background, but add a divider image all the way to the bottom of the Block and make it repeat horizontally. Also, don’t forget to add 50 pixels to the bottom and top spacing.

Instead of going over each Block Dot and make all these changes, we can make a Dot Profile and reuse it. When you are editing a Style Dot, you’ll notice a link below labeled “Save Styles as Dot Profile”. You can click there to save all the modifications you’ve made to make it available for import in other Dots.

"Save Styles as Dot Profile"

Click here to save your changes and propagate them to other Style Dots

Then type a name and save. Think of a relevant name so it will make sense later on. For this particular profile, you could name it something among the lines of “Block Background with Gray Divider”.

In order to use them, go to the Dot where you want to import the styling, and click on the “Load Dot Profile” link below.

"Load Dot Profile" to import a set of previously saved styles

After clicking here, you’ll be presented with a modal window to select which style set to import

Then select the desired profile and click “Load”.

This way we’ll speed up the time we invert in the styling of these Blocks.

For the last Block, the footer, we will use a custom image that has simulates the border that the copyright information has right above it. We could use the top (horizontal) border setting of the Section Style Dot, but it doesn’t span the whole width of the page.

We’ll also leave 10 px for the top spacing and 25 for the bottom. The horizontal slider of the custom image panel should be all the way to the left.

Editing the custom image for the footer Block

The vertical slider is for positioning the image background, left means top and right is bottom

Text Style

Text will be easier to bulk-edit if its marked correctly (headings, links, normal, etc.). For that we’ll use the Bulk Style Editor (BSE), on the Text tab.

We’ll keep to the current Block being edited.

Bulk Style Editor, selecting the header Block only

Leaving only the header Block selected, we make sure we won’t mistakenly edit other Blocks of the page

Once we’ve selected the relevant Block (or Blocks), we’ll click on the Text tab on the left.

Text tab selected on the Bulk Style Editor

Here we can edit the text style, like links, normal text, and headings

There we’ll style normal text white, leave Arial font selected, and make it size 13 px.

For links, we’ll change the (normal state) color to #909090 and rollover color to #c42f37. Currently, its not possible to change the font size on the Bulk Style Editor specifically for links, so we’ll have to do that one manually, one by one.

Edit in Place toolbar for editing text style

Changing the font size of links on the header Block

Next, the intro Block.

The “Get Ready to Build” title, seems to have a custom serif font, similar to Georgia. We found a similar looking one, available in our program, called “Sanchez”. We’ll use that in white color, centered, size 48 and we’ll also update its line height to around 50.

Changing the font size for a title

“Sanchez” is a similar looking font that we’ll use for this title

The embedded image below the title will be centered too, as well as the text below the image. We’ll also need to make some spacing above and below the image. This can be done in a different ways, we’ll use the fastest method: adding new lines by hitting enter.

The color for the text will be #FF9FAC, 13 pixels the date and place line, and 21 the text below it. Remember to keep updating the line height, as this is not done automatically.

Line height for text on the intro Block

Line height is usually slightly larger than font size for better readability

The button below will require some styling and configuration too.

  • Background color: black
  • Rollover color: #444444
  • Corner radius: 10px
  • Left/Right Spacing: 23px
  • Top Spacing: 12px
  • Bottom Spacing: 12px
  • Width: 10%
  • Alignment: center
  • On settings: don’t display slogan text

Since the text above the button is not repeated in other places we didn’t use the BSE, but we can use it for the next Section (that has the speakers’ picture and name).

We’ll start with the text. First, on the Text tab, we’ll change the size to 18, and font “Sanchez”.

Even though in this Block all text must be links, this general tab affects the styling for them too. Because of the default red color applied to links, we won’t be able to immediately see the changes.

Bulk Style Editing text only for the body 1 Block

This general Text tab affects all normal text and links (but not headings)

We’ll change to links and update the colors for “normal” state to #FF9FAC, and rollover white. Then, we’ll have to manually center all these links, since alignment is not currently available on the BSE.

Now the images. If we go to the Bulk Style Editor again, while hovering over some of the tabs, we get a preview of what we’re editing. If we go over the Apps tab, we’ll notice the default (25 px) spacing above and below apps.

Bulk Style Editor with the Apps tab selected

Remember we must have only the relevant Blocks selected, in this case: body 1

We’ll change the top and bottom spacing to 8 pixels each.

Then, we should have a last Section below the speakers one. We’ll use it just to add some spacing. But for a Section to have a Style Dot, an App must be installed inside. So we’ll just use a Text app and remove all text (so its empty). We’re using this trick just to get more spacing below, so the bottom image is aligned correctly.

A Text app on the last Section of body 1 Block

We’ll use an empty Text app for the Section to be “style-able”

Once the text is deleted, we’ll select the Section Dot and add

Style Dot panel for the bottom Section of the body 1 Block

We’ll increase the top and bottom spacing to make room for the Block’s background image

This way the background image of the Block will be sent further down as in the original site.

The next Block has a similar Text app on the top, which in styling, is identical to the next 2. So the top text app has the same style settings in body 2, body 3, and body 4. For this, we can style the first, and then duplicate and update the content.

We’ll start with the heading. We’ll make it a heading 1 (h1), and color #2A2A2A, centered, size 48 (line height 50) and font Sanchez.

Styling the text of the "Workshops" Block

This Text app will be styled and duplicated for use in Blocks below

A line (enter) will be entered before and after the small “nuts” image.

Then, the text below will be h5, size 21, line height 30, and color #909090.

We changed the headings so it won’t interfere when we add styling to the next Text apps below the images. But we’ll get to that after styling the images.

A slightly larger spacing will remain between this text and the images on the next Section. We’ll select this Text app’s Dot to remove the bottom spacing from it (make it 0px).

The Style Dot for the Text app on the "Workshops" Block

Removing the bottom spacing from the Text app

We can alternatively use the BSE, since the other apps on this Block, and the next 2 (body 2, 3 and 4) will need to be stripped of their bottom spacing too. Just remember to target only the right Blocks on the drop down.

Bulk Style Editor with the Apps tab selected

We’re removing the bottom spacing of all the apps on these Blocks

The images below are already the right size for the space available. The ones of the original site are a bit larger (on max-width), but the width of our page is not as wide as 1165 pixels, the site’s layout width.

So we’ll continue to the text below. We can use the BSE for these Text apps, as long as they have proper heading marking. Take a look at the next image to get a better idea of the headings we’ll be using.

Marking headings on the "Workshop" Block for styling with the Bulk Style Editor

The same headings apply to all 4 Columns

This kind of styling will be also used on body 4, so we’ll go on and select body 2 and 4 on the BSE before applying changes to the text. Look for the check box below the Bulk Style Editor labeled “Marge Selected Block Controls” and make sure its checked.

The changes are, for h4:

  • Font remains Arial
  • Size: 11px
  • Color: #999999
  • Treatment: none (not bold)
  • Line height: 18px
  • Top margin: 0px
  • Bottom margin: 6px

For the h3:

  • Font: Sanchez
  • Font size: 18px
  • Color: #333333
  • Treatment: none (not bold)
  • Line height: 20px
  • Top margin: 0px
  • Bottom margin: 18px

For normal text:

  • Font remains Arial
  • Size: 13px
  • Color: #808080
  • Line height: 21px

There’s one more manual thing we’ll have to do on each Text app: center-align the titles.

And lastly for this Section: we’ll add 50 pixels to the bottom spacing.

Adding 50 pixels to the bottom spacing

This will push the Block’s background image (the gray divider) further down

Next Block: Festival (body 3). We’ll duplicate the first Text app of the previous Block. As mentioned before, we’ll do this to retain the styling so we only have to copy and paste text.

Click the "Duplicate App" button to create a new version of it

We’ll duplicate, and move this app below

Then we’ll move it to this Block (body 3) and edit its content.

We’ll perform similar actions to what we have already done. If it’s not already 0, we’ll remove the bottom spacing of all Apps (just Block body 3). We’ll edit the h3 as follows:

  • Font: Sanchez
  • Font size: 22px
  • Color: #333333
  • Treatment: none (no bolding)
  • Line height: 24px
  • Bottom margin: 20px

Manually, we’ll center the these headings on each app.

Normal text will be the same as in the previous Block. We’ll paste them here again:

  • Font remains Arial
  • Size: 13px
  • Color: #808080
  • Line height: 21px

We’ll also add 50 pixels to the bottom spacing of the last Section, as in the previous Block.

For the next Block (Fringe, body 4) most things should be already set. We’ll only need to duplicate the first Text app from any of the previous two Blocks. That’s the one which has the title, the decorative image and the tag line.

If you’re following along, and marked correctly the text below the images, they should already be styled. This is because they should pick up the styling from the steps of the body 2 Block editing (refer above).

The only manual thing left to do would be to center-align the titles.

Edit in place toolbar: aligning text

Center-aligning the titles

And, as in the previous Blocks, we’ll add 50 pixels to the last Section’s bottom spacing.

The next Block uses the same styling as the last Section’s Text apps, so we can easily use the BSE. Remember the text should be headings 3 and 4, and normal text for it to be applied.

We’ll be left only with the centering of the headings.

The next Block (Sponsors), needs only a title edit. It should have the same styling as the h4 we did before:

  • Font remains Arial
  • Size: 11px
  • Color: #999999
  • Treatment: none (not bold)
  • Line height: 18px
  • Top margin: 0px
  • Alignment: center

The app itself will be stripped of its top spacing, and enter 10 pixels for the bottom one.

Style Dot for the Text app on the Body 6 Block

Top spacing 0, bottom spacing 10 pixels

And that’s it for this Block.

The only one left is the Footer. Here we’ll enter similar styling to the h4 and h3 used before, with the only difference being the color; #666666 for the h4, and #BBBBBB for the h3 (normal state) and white (rollover state). The image should also be center-aligned.

For the normal text (the last line) we’ll use font size 10, and color #4A4A4A, and center alignment. For the links, the same color will be used as normal state, and #777777 for the rollover.

We’re almost done!

Additional Settings

We’ll only need to edit the page title and the favicon.

The first one is made through the shelf, on the Pages menu, and clicking on “Page Settings”.

The Pages menu for editing page name and SEO fields

Click on this button to open the preferences of the current page

There we can edit the page title, and add some keywords and description of the page.

Homepage settings

Edit page title, SEO meta keywords and description here

As for the favicon, we’ll go to the More menu, and click on “Favicon & Breezi Badge”.

More menu, favicon button highlighted

Here we can change the favicon (favorites/bookmarks)

That’s All Folks

This is how the finished product will look like:

Breezi's version of the Build 2012 Conference website screenshot

Click to enlarge

Liked this breakdown? Let us know if you have any questions!

Menu