Sporting organisations very rarely change their logo, but if they do, it is generally met with great support, or great resentment. The badge on a shirt represents all that a team strives to be and the values it represents. History generally dictates only minor changes to a team logo over the years, in order to maintain the prestige, association with past success and to move with the times.
Earlier this week, to coincide with a move from one city to another, the Florida Marlins were rebranded the Miami Marlins. Accompanying the change of location is a change of team logo (see below). The question, for me, is does this identity really reflect the brand of a sports team? In my opinion, no, it doesn't. It could quite easily be a new Six Flags theme park logo, with the Marlin being pretty much unidentifiable from the original. The other issue is whether the new identity presents a determined and strong franchise, or a team of push-overs? Where is the aggression, the steel, the presentation of a team that digs deep and is tough to beat?
(Left) Florida Marlins logo. (Right) Miami Marlins logo.
The feedback, across a variety of sources, is pretty much 50/50. A lot of the negative comments focus on the 'immaturity' of the logo, whereas others are embracing the unique approach.
It takes me back to the early 2000's when the Toronto Blue Jays rebranded themselves. The powers-that-be believed that their franchise identity wasn't portrayed as a team that should be feared. So they set about changing that preconception and gave a lot of consideration to how they could make their key identifier, the blue jay, more aggressive and menacing (see below). Some would argue that the reincarnation of the blue jay is more eagle like, but there is no denying that the change presents, from the outside looking in, a much more ambitious and determined team.
(Left) Original Toronto Blue Jays logo. (Right) Current Toronto Blue Jays logo.
Logo refinement appears to be much more common in American sports whereas, in Europe, much more attention is paid to retaining a firm connection to the brand that preceded the amendment and historical values.
Could crowd sourcing ever play its part overturning, or being the key ingredient, in developing franchise brands. It is certainly an interesting consideration following the Gap debacle earlier this year and would be comparable to giving the fans an ultimate say in the way that their team is perceived.
Video is becoming a fundamental content type of any baseline digital publication.
The big consideration is video quality vs size. Hosted media can be linked to in order to keep the file size down, but for offline viewing your users may be left a little frustrated. Unfortunately, you then encounter the negative, where embedding video can result in a hefty download size. Many of the current publications that embed video generally limit the video length to around 1-2 minutes.
The next consideration is video playback size. Publications vary in the real-estate they allow their videos to occupy with developers sacrificing size for quality and vice versa. Which ever route is taken the end goal is to present an immersive experience for the user.
Producing a publication that contains video revolves a great deal around finding a happy medium that balances the quality and viewing size. Testing is imperative from both the user and end-users perspective. Keep an eye on .folio download size/time.
Last but not least is the file type that is accepted by InDesign to embed into .folio. The key is the codec... H.264 is the only way to go, with the file type being any that is supported by iTunes such as MOV and M4V.
This is an annoying trait of the InDesign 'Overlay Creator' when developing .folio content.
In this instance I was using the 'Image Sequence' plug-in. My original animation was a full screen interactive element which, in turn, disabled the users ability to swipe left/right to navigate through the page content. I therefore decided to set the background image to full screen, but reduce the interactive area, in order to retain usability and the swipe functionality.
As you can see from the screen grab below the interactive area is output in a darker tone to the remainder of the page content, therefore creating an undesirable page view. It is unfortunate and frustrating as you would expect a seamless merge between foreground and background.
Interactive content and background image colour difference
There is a way to rectifying this issue by masking out all image content that is duplicated in the background view, however, this is quite time-consuming and clearly the image shouldn't be rendered with different output colour values.
Whether this is a anomaly in the output process, or not, it adds an extra boundary/consideration to creating aesthetically pleasing interactive animations.
This is an issue I encountered last week. Adobe's usability in this situation was so poor it didn't even return a statement to say why the issue had occurred!
Thankfully the issue has an easy fix. Download and installation of the latest Adobe Publishing Suite tools is required. This will overwrite the obsolete tool set and remove any login errors.
Why Adobe don't make these updates part of their software update is baffling, especially when it removes the ability to login and work on .folio projects and is a fundamental update to the applications capabilities.
Download the latest Adobe Folio Producer tools and find out more information.
So you've loaded your presentation onto your laptop, packed the projector, printed the leave-behind visuals and are ready to enter the meeting room to pitch to your dream client.
After taking 10-15 minutes to set-up, make your introductions, say 'yes please' to the offer of a drink and placed your leave-behind visuals at the appropriate table settings, you are ready to go.
As a method of presentation delivery there is an extremely dated feel about this method. Enter, into the meeting room, Idea Flight. The ability to present peer-to-peer isn't a new concept, but it is via iPad (or any other tablet). What you are immediately placing in front of the audience is a tactile and immersive device that has the ability to present content at 100% of it's size at optimum quality and clarity.
Sure you are going to possibly have to shell out a little more money to allow each of your audience members to view the content, rather than share, if they do not have access to an iPad themselves, but the spectacle and intrigue you create is a great opening salvo. You immediately have the client hooked, they can interact rather than sit and stare, you make them a key component of the pitch presentation. For those that can not afford the outlay to purchase numerous iPads the VGA connector can be used to display the presentation on a large screen.
Idea Flight homescreen
Idea Flight is a simple idea that is executed very well
Your options are to either be a passenger or a pilot. The pilot being a presenter, the passenger being the audience. Passenger is the default download user type and for a small figure you can upgrade the application to a presenter profile.
The pilot can simply share his PDF presentation to any iPad on the same Wi-Fi network or Bluetooth range (max of 16 iPads via Wi-Fi and 4 via Bluetooth). Installing the PDF for viewing capabilities can be achieved by sideloading in iTunes or accessing a DropBox account.
Once in presentation mode the pilot can swipe through pages, zoom, pan, rotate and add notes. The pilot has complete control by default. The passenger is presented with a direct replica of the pilot's screen, including animation, with a minor time delay. An added extra of being able to 'unlock' a presentation gives full access to the interactive features to the passengers. On completion of your presentation you can also allow the passengers to download the presentation to their devices for offline reading.
What the iPad and Idea Flight encourage is a change to the meeting room environment, it adds a personal touch and engages both presenter and audience in a manner that helps break boundaries.
Clearly there are huge advantages in being able to present iPad prototypes in this method, but there are also key advantages to presenting web visuals also. People still have pre-conceptions about the browser 'fold' and where it should sit. As the iPad has a 1024x768 viewable space you are, in effect, displaying the optimum amount of browser content. Before too long 1024x768 will be a thing of the past, but you can at least answer the question confidentially for the time-being.
In time I am hoping to see the introduction of a file sharing option where pilot and passenger do not have to be sat on the same network or within the same Bluetooth range. This will clearly mirror screen sharing applications that already exist but would also complete a very capable and well considered application by Conde Nast.
The image creation for .folio file distribution doesn't stop with the content of your publication. There are a couple of other images/thumbnails that must be conceived in order to present a professional digital magazine.
One of these images is the front cover of your publication, which will be displayed in the Adobe Viewer dashboard, whilst the other(s) are the page thumbnails for your publication.
The sizes and application for each of these image types are as follows:
- Dashboard cover - 180x135 (in pro of 1024x768). This image is applied via the publication properties panel.
- Page thumbnail - 70x70. This image is applied via the page properties panel.
In both instances I found the best application was to create a 1:1 pixel perfect image, rather than scaling down larger images.
A great feature of creating and developing digital magazines for tablets is the ability to hide and reveal content. The method for putting this into practice can be simple, or complex, depending on the budget. Advertisers are using some inventive ways to let users explore their products including, magnification on finger press, gyroscoping of angles or tablet tilt and page scroll to reveal more. Methods are not restricted to advertising as each provides an immersive and interactive method to discovering pertinent content. Digital publications such as Wired and Project utilise this method in many of their articles to great effect.
Page content top
Page content bottom
The simplest of the three examples is to page scroll. Functionality is automatically embedded in any exported .folio article with more than one page. Within my own R&D project I chose the page scroll as an ideal way to display an opening statement on my first screen with the closing statement revealed on the second.
But how does the user know they must scroll to reveal more?
Each publication uses graphical devices to indicate the interaction a user must take to reveal more. These vary from publication to publication with the main usability requirement being that it must clearly represent the users next action. Some creatives accompany the device with text to describe the action. I'm of the opinion that if you are designing a graphical device the text should be irrelevant as the graphic should clearly indicate the desired interaction. If it doesn't then it fails to present a transparent UX.
Scroll indicators used in digital publications
Consistency for me is another key to achieving a desirable UX. If the user becomes familiar with the styling they know exactly what to look out for. It sounds simple but a downwards arrow, for me, is the clearest way to indicate that more information resides on a screen up gesture.
There is an added advantage to this style of content presentation, which is type can be presented at a legible size without detriment to the users experience. It also gives the creatives more freedom in how they address a page layout, with the page length limitless the conceptual aspect becomes much more exciting, challenging and compelling.
The answer in short is no.
Without jailbreaking your iPad the legitimacy of an association between Flash and iPad may seem far fetched but there is a very real advantage hiding under the Flash bonnet.
The advantage is that Flash is an extremely good animation package that provides simple and direct actions to turn static objects into dynamic, on stage, moving parts.
But how do I play these SWFs on my iPad?
The response is you don't. Exporting a timeline to MOV format will give you a direct representation of your animation that, via .folio (or one of the other digital magazine file extensions), can then be viewed on the iPad. As always there are limitations. The process of all animations being placed onto the timeline, rather than within movie clips, should be adhered to, otherwise the animation will not be replicated. Interactions will also be ignored and should only be created/assigned within the output source file.
It may be that the output MOV is needed to be tweaked to smooth animations out in a video application, but, in essence the movie is good to go and be imported into the publication source file.
With the introduction of HTML5 Canvas there is a clear direction that veers away from the use of Flash online (and within digital magazine content), but Flash still holds an advantage of being able to build the same animations in much less time. I'm not sure what Adobe has in mind for Flash, especially with the recent introduction of their web motion and interaction tool, Edge. But, for the time-being, Flash offers a cost-effective solution to producing online interactive content.
So there you go. Flash can be used on the iPad, you just have to use you imagination a little.
Exported PNG image sequence
The delivery method of digital magazines via .folio, Woodwing and other file formats have seen some interesting results when presenting interactive animation.
Tablet devices have breathed new life into simple image animation, purely due to the fact that all interactions involve touch. Simply by touching to navigate, and interact, presents an immersive and tactile user experience, especially when compared to using a mouse. The level of control is intensified as movements are much more spontaneous and human.
The variety of interaction is increasing from month to month. From simple swipes, to reveals, there are some extremely inventive approaches to image animation. Particular favourites of recent times include the gyroscope cover created for Project magazine by publishing group Seven. In reality the cover consists of a number of images that, based on your rotation of the tablet, creates a parallax environment. However, the effect generated is extremely impacting.
During my investigations and development of an interactive animation I have noted a number of guidelines that will assist in developing content for tablet devices. The most important, I believe, concerns the animation space. If you create an animation that covers your entire page real estate you will, most likely, negate the users ability to swipe to turn pages. This is down to the set-up of the animation area in the source file. I have taken the stance of allowing a 40 pixel border to cater for page-to-page navigation.
The animation piece I have put into practice using the .folio file format is a dissection of an old school floppy disk (where did they go?). Each frame of my animation is created as a separate PNG in Photoshop before import into InDesign's Image Sequence Creator. The naming convention for the PNG output should be sequential ie. image01.png, image02.png… and so on, with the collection saved in their own encompassing folder. If the animation is intended to work in landscape and portrait orientation, for best results, create your animation as a square composition. This way, on rotation, it will be much easier to re-apply and re-position your animation field.
Your updated .folio file is then pushed to Acrobat.com and accessed via Adobe Viewer. Locate the page that contains your animation for testing using your stated interaction technique. Refinement is key to a successful animation and you don't really gain a clear insight into its success until it's viewed in the environment it will be distributed in.
This is a piece of innovative advertising I spotted whilst watching the LA Dodgers vs Angels MLB last month.
ThinkCure is a Beverly Hills, community-based non-profit that raises funds to accelerate collaborative research to cure cancer. What better way to advertise your charity, in LA, than by mimicking the famous Hollywood hills signage. A real standout piece of immersive advertising which I am sure has reaped much reward.