Landing page for a conference event

First we're starting with the logo. I was asked to use a nice font and I've done just that. I used a nice bold font in Nevis. I spiced things up adding a couple of angle brackets either side. The project only required a nice font and that's what we've got.

Moving onto the styles I've mocked up a very basic styleguide with colours and fonts. My colour scheme is called h i n d i and it's bright, bold, eyecatching and fun. I'm hoping to incorporate these playful colours into a site that reflects the professionalism of a conference. I'm undecided on the white or grey background colour so I've included both.

Grey background
Traditional and 'cleaner' white background

The site

I decided to use two main colours to identify design & development. Clairvoyant is used to identify the developer parts of the website and Bittersweet is used for the designers. The header sections inherit these colours(more on that next) and the speakers skillset is easily identifiable.

The header

I had the idea of making a little fun 'game' within the header. That idea involved giving visitors the opportunity to showcase their skills in both development and design. The developers can code and submit something in a similar fashion to codepen. Designers are given a colour palette and they are able to draw something and submit once they're happy. The idea was that these small pieces of work could then be showcased at the conference.

These games would only be available on desktop. I would look to add the functionality with JS if the screen is an appropriate size. Mobile users would get the default CSS view.

Landing page

That logo would fade to the top after a second or two and the 'game' options would kick in.

The options for designers and devs
The designer game - excuse the poor drawing ;-)
The developer game screen

The rest

The rest is pretty much self explanatory. Small information section, followed by the speakers, map and footer. I've also included small screens designs so show how things will move. The map is just a screenshot of google maps.

Overview

A fairly simple project which has some nice ideas. The design needs to be a little bit more extensive with submission/errors states etc but it's a good start. You can download the PSD's here. Thanks for looking.

Colophon

The font used is Proxima Nova and the icon fonts are from Font Awesome.

Made by

Shane Prendergast

A Web Designer & Developer who's the creator of this website. He freelances via Webknit and has an obsession with side projects.

Sunday11th January 2015

Landing page for a conference event

There’s a new conference forming and the organiser in need of a new website design that he can code up himself. The website will be a simple one pager with basic information about the conference (date, time, speakers, location). The conference is primarily aimed at Web Designers & Developers and the website should reflect that. The website needs to be fully responsive so demonstration of how the elements will work on all screens is essential. The conference is called Code and you can just use a nice font for the logo.

Design

Latest work

Homepage for a butchers website

View work