Ben Schofield is a 23 year old adventure sports fanatic. From December 2013, Ben has started a new career in digital technology, startups and entrepreneurship. Follow this blog as Ben writes about his experiences, learning a new industry from scratch as an Apprentice to @r3trosteve

Walking into the office this morning, Steve was waiting, ready to deliver his briefing for the day. 

To begin with, I was given just a verbal set of requirements by the client, in this case, that role was played by Steve. As with any creative brief, however it is delivered, is to ensure that all requirements and assumptions are captured in writing, and signed off to ensure alignment from all parties. So I went into Microsoft Word and created a very simple design brief to have as a hard copy and for reference. 

Once complete, I was to email this to the client for sign off. The next step was to do some research on themes and existing "coming soon" pages. I used Themeforest for this as it gives you hundreds of examples of layouts & themes. I find it a fantastic way to motivate myself and to get my creative juices flowing.

Below are some examples of theme's I found to be visually effective and stood out for me, you may see a slight pattern in the themes I have chosen. 

These pages have been sourced from: www.themeforest.net

Capture rageen.PNG

This Coming soon page is strong. The colours, the image, and the simple layout of the countdown timer work so well together, there's nothing really that I can say anything negative about. 

Capture V.PNG

This is very similar to the top image. Again, very strong with the dark image set behind and the countdown timer so customers can see how many days, hours etc they have until the site is re launched. They also give the opportunity for customers to sign up with an email input, contact button and a meet us button, which gives the customer some extra options for interaction. 

 

ultimate-coming-soon-page-example.png

Again, this image isn't as dark as the others but still gives it that intense effect, it's not as transparent but does still give the customers some interaction by allowing them to enter their email so they can be alerted when the site is launched.

@steve: I’d like to see a few more examples that you feel are sub-optimal and to hear your views on why they are not best practise.

The second part of the brief response is a cost plan, which details the top level milestones of the project and task level assignments. With a time estimate for each of these, we can build an accurate budget / cost estimate for the client sign off. Here is what I have specified:

Research: 

  1.        Researching examples of coming soon and maintenance pages
  •  2 hours x £20.00= £40.00   

       2.         Critique of Examples

  •   2 hours x £20.00= £40.00

       3.         Review of best practice

  •   1 hour  x £20.00=   £20.00

       4.        Create presentation and report findings

  •  2 hours x £20.00 = £40.00                   Sub Total= £140.00

 

Wire Framing:

  1. Create prototypes of web page 
  • 2 hours x £20.00 = £40.00                      Sub Total= £40.00

Design:

  1. Create the final Design of holding page
  • 2 hours x £20.00 = £40.00                      Sub Total= £40.00

Build:

  1.  Code website and format to final finished project.
  •  4 hours x £20.00 = £80.00                  Sub  Total= £80.00                 

                                                                                                                                       

Total =  £300.00

 

The next step of the task will to be create some prototypes / wireframes so I can place the main objects in place to see how the holding page will be structured, before finally coding the page so that I successfully get what I'm trying to create.

So today, I have been creating some prototype wireframes using Fluidui, so I can visualise how I would like the Page to look when I finally come to designing and building it. I will post images below of each page and give you critique on each one. 

 

So this is the original holding page that was created, it's very simple, but not very visually effective, it has all the important information, but the way in which it is formatted I find is just plain boring. It needs bringing up to date and made more visually exciting, here is what I have created below:

 

 

This is the first effort I created, I have gone with using a very strong background image, with a dark tint over the top of it to soften the colours this allows me to add the important information onto the page without any distraction being taken away from the picture. 

 

 This is the second prototype I have built. It consists of a large background image with someone in a wheelchair expressing their freedom while at the beach looking out to sea. I then used a translucent blur over the image to soften it so that you can really focus on the important information on the page. I really like the soft colours of the beach in the background, it's not to in your face and you can still read the main writing with ease. Fonts I have chosen is quicksand as it's very easy to read and very modern. I haven't yet added the logo of the company but I quite like it without, its clean and crisp, and when the customer reads the notice they will know who it is and what to do next. 


This is the final design I have created, its pretty different to the above two as I have used a solid image without softening or blurring it. However, I have added an alert over the top of it which creates a circular fade from centre to edges which you can see from the image. The picture of the wheelchair has been formatted to the left corner and the information has been aligned to the right, I'm not too sure about this design, It look's a bit dreary and dark. and my eyes are drawn firstly to the picture then the writing, whereas I think it should be vice versa. I may go back to this design and have a shuffle around with layers and formatting the layout. 

 

So, I have just edited the last prototype (as shown above),  I have moved the writing to be aligned centre, and added a translucent layer over the background, you can still make out that its a wheelchair, it's just not so harsh on the eye. and I also inserted a rectangular tab bar and inserted the link inside of that to break up the block of writing. I fell its visually more effective. 

 

The next stage is to look over these with Steve and get some feedback. Keep an eye out for an update. 

Schoey.