Research: Finding and Downloading the EE Font

In order to create an advert for EE, it's a good idea to not only conform to their housestyle, but also use the same font which they're known for using. Since their font isn't a system font, nor is it on font sites such as dafont.com, 1001freefonts.net, I will have to get the font from the CSS file.

Firebug is an easy to use Firefox add on which helps you sieve through the HTML and CSS to find and edit whatever you want to.

Before I began I did have some slight inklings that the font used on the EE website would be a regular font with CSS used to modify the fonts appearance. If this had been the case, this would mean that I wouldn't be able to download the font. I would instead have to use the CSS code given, type in the text I want, turn it into a PNG with a transparent background and import it.

Upon inspecting the code, I have found that this is not the case, and it is indeed a downloadable font.

These are the steps I took to retrieve the EE font from their website:

Step 1: Select the font with the inspect tool

Step 2: Copy the H2 class name

Step 3: Go to the CSS tab and paste heading1 into the search. Copy the name of the font.

Step 4: Paste EENobblesRegular in the search bar. Copy the path of the font and paste it after http://ee.co.uk/

 My ending result.

http://ee.co.uk/common/ee-fonts/ee_nobblee_regularwebfont.ttf (lasted accessed 18/11/2013)

Tutorial 3: Prototype and Analysis

I went to the tutorial today to see my lecturer regarding the prototype I had created

He stated that it was good, works well and now it was just the text and graphics to be added.

It was also noted that it would be a good idea to change the prototypes colour from blue to green to suit the EE website theme more.

In his own words

"Be careful with layout and typography - you need to be doing an analysis of how ee brand their own site and their iPhone offer. Make this a priority - the branding is the most difficult part."

As we can tell on the EE website, they use a shade of green which I can use for my advert.

I can find precisely what shade of green and font by viewing the HTML of the EE website page.

Working Processes: Creating the Advert - Prototype

My main aim when creating the Prototype was to make sure that I had all the script working and that the scripts used would convert well on Google Swiffy (The SWF to HTML5 converter).

I also added different types of Tweens to each of the Animations used.

• The first animation I did was a simple 180 degree rotational classic Tween.
• The second animation I did was a motion tween which was set to 15 rotations.
• The third animation I did was a classic tween animation going back and forth with the ease feature set to -100 and +100 on the way back.

All of these features worked well as an SWF and worked well once converted to HTML5.
 

 The HTML5 prototype of which is available to download here.

Planning: What I want in my Advert

From doing research on both adverts, iPhone 5s and the Apple website here are the features I wish to include, along with my own wants outside of research, for my iPhone 5s advert.

• At least three slides on information regarding the iPhone
• Navigation accessible on both top and bottom of the advert
• My logo
• The EE logo
• A button to the EE website
• A sunburst spinning for aesthetics
• The whole advert to link to the EE website 
• Automatically goes onto the next slide after certain time

Having both the whole advert and button point towards the same EE website destination may seem pretty pointless at first glance, however after research noted in previous posts it seems to be the right decision.

The button is there to entice the user and can be quite helpful if the text inside reads "learn more" or something similar.
Having the whole advert click-able is to make it more convenient for the user and the functionality of all interactive / image adverts. Also, in regards to the way I'm creating my advert, the button will not always be displayed, but only on the last slide as the storyboard suggests.

Research: Choosing the Right HTML5 Converter

There are many HTML5 converters available.

Many of them look good, but have pros and cons. They are as follows:

• Sothink SWF Decompiler
• Google Swiffy
• Flash to html5 Online
• Pixel Plant (Server down)

Sothink SWF Decompiler
Pros:                                                           Cons:
Supports AS3                                             Costs Money
Can be used without internet

Google Swiffy
Pros:                                                           Cons:
Supports AS3                                             Only allows less than 1MB
Free                                                            Needs internet connection to work

Flash to html5 Online
Pros:                                                            Cons:
Free                                                             Doesn't support buttons
                                                                    Doesn't support AS3
                                                                    Needs internet connection to work

From the results, it's safe to say that for what I want to do, Google Swiffy would be the best option. It's a free service and the advert I create is unlikely to go over 1mb.

Research: Fetching the iPhone Information

In order to create a successful advert, you need to know enough about the product you're trying to sell. Since I do not own any types of iPhone, it's particularly important to do some research.

The first piece of information I came across was an advert by EE for the iPhone 5s.
https://www.youtube.com/watch?v=6ngr7Y69KOo
This video included a spokes person giving a review on the iPhone 5s and it's features.

The most obvious place to find information regarding the iPhone 5s would be the Apple website.
http://www.apple.com/iphone-5s/
Here we are given many slides as to what features the iPhone 5s has, it also has many circle buttons to select which slide you want to view. Something of which shares the same features that I plan on having on my advert.

Checking the iPhone on a phone retailers website isn't a bad idea either, since it will give many specs.
http://www.phones4u.co.uk/apple/iphone-5s/
Here we've been given the different storage spaces of the iPhone in GB, the resolution, display inch, weight, dimensions, stand-by time etc. All of which is very useful information but not widely accessible on other websites.

Another website which is good to look at is the EE website on the iPhone 5s, here we will be able to see what they're personally offering. Something vitally needed for the advert I am making.
   http://shop.ee.co.uk/iphone-5s-16gb-gold/pay-monthly/details/
The selling points of the iPhone 5s are given. Touch ID, A7 Chip, New 8MP iSight camera, Ultra-fast Wireless, iOS7. It will be a good idea to concentrate on these features when creating the advert.

Tutorial 2: Chosen Competition and Entry Idea

I had a tutorial with my lecturer regarding my entry idea to the Horizon competition.

My idea to make a 160x600 (Wide Skyscraper) EE iPhone advert, which I found from the Recommended section of Google Adsense, for was accepted.

This was great as it meant that I could continue working on my advert and didn't have to recreate the wire frame and storyboard.

At first I wanted to create my advert in Flash and render it as an SWF, however he stated that having an SWF file as an advert would be problematic as mobile phones, especially apple made, don't like Flash nor tend to use it.

We came to a conclusion that having the advert made as a HTML5 would be most practical.

Currently, I have a trial version of SoThinks SWF Decompiler which converts SWF's to HTML.

Since there are many HTML5 converters out there, I will need to do some research as to which is the best one of which I can use for my advert.