Ask a Question ?
Design & Publish Websites Faster

Let’s Build a Conference Website

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

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

Site about a web design conference/event in the UK

“New Adventures in Web Design” event

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 our platform. 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.

Style button on the shelf

Open the Bulk Style Editor

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

Bulk Style Editor, changing full page background

Select black from the color picker for the page background

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.

Style Dot for the logo image

Click on the left align button to send the image all the way to the left

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

Resizing the image to 100%

The first image, resized back to 100%

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.

Color picker for the text color

Changing the text color to a custom red

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
Style Dot options for the header Block text

Updating the style for the Text app

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.

CMS panel for the Dropdown Navigation app

Updating the items in the Navigation app

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”.

Style settings for the Navigation app text

Choosing the style options for our navigation links

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.

The Navigation app Style Dot

Increase top padding; remove bottom padding

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

Style Dot options for the Image app

Reduce the bottom spacing to 0 so there’s no padding below

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.

Editing the Block's background

Choosing an image for the background of this Block

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.

Edit in place toolbar for the intro text

Line height doesn’t need to match the exact font size, could be a bit bigger or smaller

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.

Style Dot for the Text app on the Body 1 Block

Adjusting spacing on the Text app Style Dot

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.

Newly installed Text + Photo Block app

We’ll use this app for the invited speakers section

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

Editing the title of the Text + Photo Block app

Set the font to “Ubuntu Condensed”, in our red tone (#BD3632)

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.

Edit in place toolbar for the Text + Photo Block app

Depending on the size of the original image, there may be a need to reduce it to a different scale

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

First column with Text + Photo Block app

This is a scaled down screenshot of the first column of speakers finished

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

Duplicating current app

Duplicating the app will save us a lot of configuration time

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

Moving the Text + Photo Block app

We’ll remove the app title, and update the info on each item

Once updated, it will look like the following image.

Preview of the two columns of speakers

All speakers set in these columns

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.

Editing text on the "features" column

Two Text apps for the last column

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.

Style Dot for a column

The spacing should be set to 0

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).

Style Dot for the Sponsors Block

Changing the background on the Sponsors Block

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.

A Text app on the first section of the sponsors Block

We duplicate the Text app which has the same style we want to use

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

Section divided in 4 columns

Making the columns of even width: 240 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.

Style Dot for an Image app

Setting up the borders for the image

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

Resizing the image

About 66% of its original size will do

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

Image editor for the sponsor items

We’ll use a different set of image and links for a total of 14 images

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

Sponsor images preview

Images on the 4 rows for the sponsors Block

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.

Styling the Navigation app

We’ll use bars to separate the items of our navigation

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:

Finished conference site

Click to enlarge!

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

Menu