After some initial sketches and asset designs, i narrowed my favourites down to the above, from here i would cut them out and test them out, this was the beginning of the paper prototypes.
To test the paper assets out i needed a screen, so i created the above. at first thinking it would have a cleaner final outcome if it was hung on a wall with bluetac. allowing better lighting for photo evidence, and more permanent placement for any of the assets being tested, since paper prototypes can be very annoying due to the fact paper is easily ripped, lost, unintentionally moved.
i used a television themed boarder so i would have a better idea what it would look like on a real screen and if it looked cluttered or tacky.
In the end i stuck the boarder/base on a flat cleared surface for better accessibility
I began by deciding on the INFO BOX placement, i had to not only think what looked best graphics wise but what wouldnt obstruct the view of the football game.
I constantly must remember through out this project, that although my end goal is to create a decent graphic overlay, i must keep in mind who the target audience for these sports broadcasts is.
Although the information and branding is all important, none of it can distract from or get in the way of the primary asset ie. the game footage.
Not touching the boarder, but not unnecessarily far out seems to be the best place. The INFO BOX will likely be in the top left corner but there should be a appropriate amount of space between it and the screens boarder.
looks like a blob of sticky paint, too boxed in and the only thing the curve seems to do is make it look like stretched out. i think i want to aim for a hyper, energetic theme/shape to match the footage.
sleek, minimal but too cornered off?
fast paced looking, but because it points to the left it gives a dragging impression, which could unintentionally make the viewers hesitant.
still very sleek and suits the downward point.
looks slow and docile.
basic and simple, but its still very boxed in. too tame looking?
looks weighed down and heavy, would need to be bigger for better impact.
because its aiming to the right, it gives off a faster edgier look. but is it too sharp?
. Once i had tried, tested and narrowed down the INFO BOX designs, i tested them with the COMMENTARY designs. This would help decide on a commentary box, and pair off designs. after all theres no point in deciding on a decent info box and a decent commentary box, only to find they dont suit each other.
too boxed?
if i use a basic box on the bottom asset, the upper asset will need to have a more influential / effective appearance to bring the two together.
I think the commentary box is more dominant than the info box.
would the commentary box and text banner cut out footage or would the footage be placed above it so its not interfering?
although i like both these designs, i dont like them together.
Not fully covering the bottom section of the screen is interesting but it might distract from the info box and even the footage.
definitely looks like the box is out in no mans land. making it a dominant asset rather than an added extra.
low, high, centered.
I tested the placement on the banner that didnt stretch across the screen, wondering whether it would be too obvious, distracting and unnecessary
.It suits centered with appropriate spacing between it and the boarders, however it looks too dominant regardless of placement.
although i like both these designs and they are quite similar, i dont think they suit each other, when placed together they give off a sloping effect, leaving on side of the screen bare and even somewhat lopsided.
pointing in separate directions seemed like a decent alternative to the previous sloping problem, but instead it makes the screen look bare and centralized, leaving the assets not dominant enough.
re-positioning the boxes also didn't fix the sloping effect problem these two designs have together.
Would they be over bearing? not noticeable? cluttered? seem out of place?
This meant the tv base wasn't enough at this stage, so i created two more prototypes to see not only if theyd work along with footage but also if they'd work the same with different views/footage.
Because i had to do this so early in prototyping, it seems it will be an even more crucial element when it comes to the finished product, making this problem the deciding factor on whether or not i should have more than one screen in the final animation.
I created both a full uneventful view and a busy close up view so there would be a big enough contrast, allowing me a better understanding whether or not the graphics will suit all types of scenarios.
I actually think these designs suit the footage. but to be better safe than sorry i continue to play about with the asset placements and other asset pairings.
This pairing looks better with footage but its still not preferable.
The banner looks better higher up, however it would annoy viewers and contradict its original purpose.
close up of the improved, less obvious logo prototype.
Once i had the footage in place i noticed the LOGO was too obvious, cluttered and obstructed the gameplay. When i design the logo, or use a preexisting logo, i will be sure to make it there but barely noticeable, perhaps by fading the colour, making it opaque or excluding excess boxes, trimmings or designs ie. just the type.
This seems to be one of the best pairings that doesnt get in the way off the footage and still compliments each other.
This so far is my favourite pairing, it suits both types of footage, proving it will likely suit all footage scenarios.
This banner would suit higher up, only if it was a non constant.
If it boarders the bottom of the screen it wont cut off any footage, but if its higher like this test, it would likely suit an opaque colour scheme.
The above are the most suitable info boxes paired with my favourite simple and basic, single bordered low commentary box.
The above was a natural pairing of similar asset designs, however they make the theme a bit too childish and bubble like.
For the purposes of exhausting all layout options, i tested various placements with this similar pairing.
These two assets didnt suit without the footage, but i can see how theyd work together now that i have a better idea of what the finished model could look like.
This just reminds me how important it is to double test everything and not to dismiss any options even though they didnt work before with different circumstances.
These were to check if the constant assets worked with the footage.
Since i dont think the commentary box should be a constant asset or a highly dominating asset, i need to experiment with and without it.
These are my final three preferences.
The placements and pairings work best in my opinion.
Now ive narrowed down the many options, It was time to start full length paper prototyping.
Before i could create a full paper prototype i would need an idea on what would happen and in what order, so i started to plan it out, whilst i planned it, i decided approximately how many screens would be needed and what all would happen in each screen.
Above is the narrowed down OPENING SCREEN ideas and some of their pros and cons.
I narrowed the opening screen ideas down further to the above options.
i want to test them both before making a final decision.
without the branding/logo
with the branding/logo
transition ideas, peel away
transition ideas, slide away
without branding/logo
with branding/logo
transition idea, shatter/fall apart/rip apart
transition ideas, tear apart/slide in opposite directions -horizontal
transition ideas, slide opposite directions -vertical
The transitions between screens, even at this stage is crucial, especially for an opening screen after all its primary objective is to ease the viewer in and give extra information and tidbits.
The transition should of course suit the chosen opening screen, for example a tearing apart transition would suit the opposing team symbols screen and create tension or give off a battle vibe, but it wouldnt suit the generic stock image screen.
A dissolve is always a safe bet for any transition, especially if its moving to another scene or location, but throughout the design and creating process, i want to test and develop transition ideas and their underlying effect/theme. An appropriate, well thought through and designed transition could make or break a finished product and the user experience.
This is the basic screen plan and viewers journey.
It consists of three screens, the opening screen will have initial basic information and ease the viewer in and create the correct atmosphere for the upcoming footage.
Its purpose will not just be to communicate information but set the tone of the final prototype.
There wont likely be any moving elements except the transition to screen two.
Screen two will be where most of the animation will happen. it will have all the constant and non constant assets, Screen three will be a different view/scenario of the football game, it will allow the final prototype to be more engaging and in the end will be more for my benefit as it will show the final graphic layout can work with more than screen ones footage, view and events.
The three visuals above are the final drafts of the screens, layouts and assets that will be in the first paper prototype, after further design development.
0 comments:
Post a Comment