Fuselagetown

Torunn Menu

TEDxLiverpool

Role:
UX/UI Designer
Responsibilities:
Content Strategy, User Experience Design, Visual Design, Front-end Development, Static pages
Link:
www.tedxliverpool.co.uk

On the back of the success of the Thinking Digital website, I was invited to design the new website for TEDxLiverpool. TEDx events are independently organised, yet there are strict brand guidelines for how to go about using the TED brand resulting in many similar looking websites. Therefore, my aim was to try to interpret these guidelines in a new and innovative way resulting in a TEDx website that really stood out from the crowd.

Content strategy
Notes from an early brainstorm

The previous site contained a lot of irrelevant and out of date content including a stagnant blog, and information about past events written as though they were taking place in the future. It was therefore important for me to develop a content strategy that ensured the site remain timely both before, during and after the event had taken place. In order to achieve this, I scaled the content back focussing only on the key messages of what, where, when, who and how. Now that the conference is over, I'm transforming the site into a timecapsule where previous events can be relieved through videos of the talks, before information about the next event is released.

Layout

To avoid a bloated navigation, I decided to condense all available information onto the homepage from day one. This meant that instead of having to click through to subpages, the user could just scroll down to see concise information answering key messages of what it was all about, who was speaking, and a rough schedule for the day, all accompanied by a constant visible call to action: buy tickets. As the speakers were confirmed, I introduced an 'open' navigation where all speakers were present so that no click through to the individual speaker pages was needed.

Early paper sketches; exploring navigation
TEDxLiverpool ideas
Home & Away

The theme for this particular TEDx Liverpool event was Home & Away, which meant that all the speakers and performers had some sort of connection to Liverpool. I felt it was important to highlight that connection with strong imagery of the city. I therefore got in touch with IronBird who are a Liverpool based company specialising in aerial photography. I experimented with many image style ideas, and settled for a striking black and TED red style to make sure text was legible as an overlay.

Aerial shot of Liverpool
Angles and Diamonds

The visual design for the site was influenced heavily by the strong lines in the letter X of the logo. Using this as the basis shape, I created speaker profile images as diamonds to break away from the more traditional square or round mould. However, this meant that sourcing speaker photographs that fitted the diamond shape was difficult as the face needed to be centred.

To uniform the speaker images I made them all black and white, removed noisy backgrounds to soften the look and tweaked all images to have similar exposure settings. The angled edges were used to segment the site. This design theme was also carried through into social profiles and on-the-day material.

TEDxLiverpool diamonds
CSS challenges

I'm always challenging myself to stay up-to-date with trends and industry standards, particularly in the area of CSS3, responsive design techniques and design patterns.

To make the desired diamond shape, I've used CSS3. I scaled the X axis down to 75%, then rotated the image holder 45 degrees, and then scaled the image itself back up to 100% and rotate back to 0 degrees.


.avatar {
  transform:scaleX(0.75);

  span,
  a {
      transform:rotate(45deg);
  }

  img {
      transform:rotate(-45deg) scaleX(1.4);
  }
}

If you'd like to take a closer look at the detail, in particular the use of flexible grids, media queries and vendor prefixes, I've added my work to a CodePen, which got featured on the CodePen homepage.

a {
  color: #e62b1e;
  border-bottom: 1px solid #e62b1e;
  text-decoration: none; 
}

a:hover {
  color: #a31b04;
  border-color: #a31b04;
  outline: none;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out; 
}

a:focus, a:active {
  color: #821603;
  border-color: #821603;
  outline: none;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out; 
}

a:focus:hover, a:active:hover {
  color: #681202;
  border-color: #681202; 
}

.speakers-list {
  max-width: 1000px;
  text-align: center;
  font-family: "Helvetica","Tahoma",sans-serif;
  font-weight: normal;
  margin: 100px auto;
  padding: 0;
  list-style: none;
  padding: 0;
  text-align: center;
}

.speakers-list li {
  margin: 0%;
  padding-bottom: 60px;
}

@media only screen and (min-width: 500px) {
  .speakers-list li {
    float: left;
    width: 50%;
    clear: none;
    margin: 0%;
  }
}

@media only screen and (min-width: 800px) {
  .speakers-list li {
    width: 33%;
    clear: none;
  }
}

.avatar {
  transform:scaleX(0.75);
  -ms-transform:scaleX(0.75);
  -webkit-transform:scaleX(0.75);
  display: block;
  width: 130px;
  height: 130px;
  margin: 0 auto 3em;
}

.avatar span,
.avatar a {
  transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -webkit-transform:rotate(45deg); 
  display: block;
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: relative;
  border: 5px solid #fff; 
}

.avatar img {
  position: absolute;
  top: -25%;
  left: -25%;
  height: 150%;
  width: 150%;
  min-width: 150%;
  transform:rotate(-45deg) scaleX(1.4);
  -ms-transform:rotate(-45deg) scaleX(1.4);
  -webkit-transform:rotate(-45deg) scaleX(1.4);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.avatar a:hover { border-color: #e62b1e; }

h3 {
  margin: 0 0 1em 0;
  font-weight: normal;
  line-height: 1.4em;
  text-rendering: optimizelegibility;
}

h3 span {
  display: block;
  border: none;
  color: #9d9d9d;
  font-size: 0.7em;
  letter-spacing: 1px;
}

See the Pen Diamond avatars by Torunn Skrogstad (@torunn) on CodePen.

Icons

To prevent the site from becoming too text heavy, I developed a series of icons, to use both on the site, and in other marketing material as well as signs on the day of the conference.

Early icon sketch became finished design

I sketched out many types of icons, but in the end settled for this sophisticated style, that I find blends well with the overarching typography and helps lift the design. I'm particularly pleased with how it makes the schedule page easy to scan through and quickly get the overview.

Ongoing work

A great turnout and wonderful reviews of the event means that TEDxLiverpool will return in 2015. I'm currently in the process of gathering content from all the previous years to build an archive of videos. A showcase of talks should hopefully encourage people to buy tickets for future events, before the next line up has been released.

At the back of this work, I've picked up another two TEDx websites: Manchester and Newcastle.