Sunday lottery not so friendly after all

Today we had an interesting exercise to see how accessible some web pages where to everyone, the main reason for this was to test if it was user friendly for people with disabilities (for instance - some one who was blind) Yeah... I didn't know that until now but it is possible for someone who is blind to surf the internet, but as I found out it can prove quite difficult with most web pages because of all the 'bell's and whistles' that come with todays web pages (for instance flash applications and button) lets take a look at this page quickly



At first glance this web page looks pretty normal... well it is really. A pretty normal layout, normal colours, easy navigation. But what happens if you have a disability that prevents you from using a mouse and you can only use a keyboard effectively, well you are pretty much screwed with this page as they definitely didn't think of this one beforehand.

For example: I tried to navigate this with the keyboard and found I had to press the tab key 16 times just to get to this page. I then couldn't even see what I was highlighting most of the time, I finally managed to get on the flash window to start choosing my number. then more hell started, it was more difficult than I thought to choose a number - when I pressed up on the keyboard the selection square would either 'decide' to go upper left or upper right - I had no control over this. it was exactly the same if I pressed any of the other arrows, all in all it was bloody frustrating.

We then had a look at trying to make the text bigger on the page for people who had problems reading small text and also tried to change the background colour for people who had difficulty seeing black text on white, as you can see the text started overlapping and there was no change to the background colour whatsoever, also there where so many flash applications in this page that the majority of it didn't even change at all. Not very good at all. We also took a look at a program called Lnxy that changed pages into brail for people who couldn't see but it had so many links and other crap it would be almost impossible to access, even when you selected an option on the page it would redisplay the whole thing again... madness! Afterwards we had a look at what this page would have looked like to a colour blind person or to people who couldnt see very well. For the colour blind people it would have been damn near impossible to read the numbers on the balls, for the people who needed more contrast I believe they could have seen it easier if they just turned the contrast up on their monitor and got a decent pair of glasses, also there is a magnifying tool that comes with windows so there is another solution.

Heres are the answers for the sections (anyone reading this blog probably wont understand them so just ignore it, it's for the lecturers)


2.1 Monday, charities lottery
2.2 yes
2.3 yes, text that embeds flash features

Step 3

1. no it is not obvious you have changed the page
2.1 no its difficult
2.2 Pi553s me off, it's difficult.

Step 4

1. I could not see the selection box very easily and it took me 7 clicks to get to the 'play lottery feature'

2.1 no, its random
2.2 no, the flash controls are not very use-able
2.3 again pi55es me off!

Step 5

1 Not really, you could always up the contrast on-screen.

Step 6

1.1 some text changed but not by much... all the flash text did not change.
1.2 Flash text is fixed an seen as a picture not as text. also there is not much space left for text to expand.

1.3 Yes I expected the flash sections to remain the same. it is however not the desired result the user would want.
1.4 Flash sections
1.5 yes definitely for colour blind and hard of seeing people.

Step 7

1.1 poor - some sections could not be accessed
1.2 unusable - you could not use this page without plug ins
1.3 poor - extremely difficult to navigate using just the keyboard
1.4 poor - usable but not very nice for the user who has colour blindness
1.5 Ok - Most things could be seen by changing the contrast on screen or using a simple magnifying tool (however it is difficult to navigate when the screen is magnified)
1.6 it did not change much at all because of all the flash related features, trying to change the text colours did not work very well either.

Identities project - work so far


I have been working quite a lot lately on our Identities project and will show you what I have achieved so far.

I started by acquiring the E4 logo from the internet, a pretty easy task at first until I tried to experiment with it in Flash MX - it was a sharp Jpeg image at first but when I tried to 'Trace' it automatically so I would have points I could manipulate it turned my once smooth image into a bunch of jagged lines... yes it still resembled the E4 logo but was not 'clean' enough to be used. But never fear Illustrator CS2 is here, all I had to do was fire the baby up, stick the Jpeg in and with the handy Pen tool manually trace the image (which took roughly 7 minutes) - I smiled at my new vector image which could be zoomed in infinitely without loss of quality- there was a few lines that needed to be touched up but it was still a workable model to experiment with but I intend to make it flawless for my future use. So first I set about experimenting with animation (the reason I chose the E4 sting project in the first place) I later found out that I could have acquired a vector image version of the E4 logo from their website. I am also planning on changing the colour as it is more pink than purple (I would like to thanks my tutorial group for pointing this out) I will keep the pink version if I do a valentine theme though.

Animating using Adobe Premier

I chose Adobe Premier to Animate my first piece of work in because I believed I would have more effects and smoother movements than I could get out of Flash (which was my initial intent) I could also import higher quality sounds which would not be compressed as much when compiled to the final version, also I had the option of editing all the components if I wished on the university computers before I wrote it to DV tape. I started by creating all the simple components I would use in Illustrator CS2 first and exported them in PNG format (So I could keep transparent backgrounds) I then put all the components into the Premier Bin and started to slap them on.I found that Premier was flexible but required a hell of a lot more layers and skill to use than I would of had to do in flash as would probably only need three layers in flash but with premier I needed a layer for almost each component ( I probably could of narrowed that down if I made the field a single component which consisted of three individual components) I came up with this






If this movie does not play click here
I Would like to thank Adrian Snodgrass for helping me fix the size problems I was having with the window of the player.

Needless to say it was a successful test and I learned quite a lot about the capabilities of Adobe Premier, it was definitely not designed for animation but could still prove useful in the future.

I am also currently working on a sketch/Flash MX animation - I have found a link that has an example similar to what I'm going to accomplish - The story is crap in my opinion (not very good surrealism at al - the word I would use would be 'Lame') but the technique is pretty good.

Here's the link

Fun with Magazine's

It was now time for me to move on to other matters, Designing a T.V guide. I instantly decided that Illustrator was the best choice to do this as it offered previews of font styles on the fly, it would also be easier to position and manipulate elements on-screen. I started by knocking on the doors of all my flatmate's and humbly asking if they had a T.V guide, eventually I acquired one (The daily telegraph - Television and Radio) and started to browse over it. The structure was simple and easy to recreate - the main problem I came across was finding a suitable font style, I came across 'Courier New' and decided it was the most suitable, however I did have to change the Tracking, leading and horizontal scale of the text . here are the two pages I produced.

I learned quite a lot about stacking large quantities of text and images into small spaces and still keeping the page looking good at the same time, I do however think that I need to further design these pieces of work and possible add more pictures, also the 'Monday's Highlights' definitely needs to be converted back to flat text instead of the 3D filter I used as it looks out of place. I have also learned to place text and images with the correct text-to-image positioning on a page, I gained most of this knowledge by reading

•
Gordon, B. & Gordon ,M. Revised addition 2005 .The complete guide to Digital Graphics Design,London : Thames and Hudson LTD

Postcards

I Chose to design three postcards for my identities project to get to know more about branding, text-style, image positioning and effect,slogans and colour usage on a page. I have seen some good posters and flyers that attracted my attention and wanted to create something of my own - there where three books in particular that helped me create an accurate example.

•Gordon, B. & Gordon ,M. Revised addition 2005 .The complete guide to Difital Graphics Design,London : Thames and Hudson LTD

Letterhead and Logo design (top design studio, Los Angeles). 2003, Massachusetts, untied states of America : Rockport publishers,Inc

•Forrester, M., 1987. Everything you always suspected was true about advertising – but were too legal, decent and honest to ask, Glasgow: William Collins Sons & Co. Ltd

The Top two books helped me with the design side of things and the book on the bottom of the list helped create the slogan itself.
I started by looking at designers of posters that I liked, I found that the ones with a more simplistic design grabbed my attention more than other complex pieces of work, here are three examples I looked at and liked.
















The afterhours package (from Letterhead & logo design) grabbed my attention the most - Simple and to the point - it said to me 'Here's our logo and here's some details if you want to find out more' it was very cunning because it grabbed your attention (with it's bright orange colour) it was easy on the eyes at the same time and was simplistic enough to remember clearly, An excellent design.

I wanted to create something similar but also with my own slogan, I looked up different types of layouts and text/image positioning in the book 'The complete guide to digital graphics design' and started to experiment. I came up with some awful designs to start off with but the more I played around with the design the more it evolved - even my original slogan 'Magic in the air' 'seeing is beliveing' became a more forceful yet refined 'There's magic in the air''Can you see it?' I decided to use the font Myraid that was hollowed out with a black and white gradient to make it look well... more magic. I also replaced two of the E's with the E from the centre of the E4 logo. the reason I positioned most of the text so close (and all bundled up) near the E4 logo was to get peoples attention to that area - also I wanted to link E4, 'The air' and 'Can you see it?'. I believe it worked quite well, I also chose to modify the E4 logo slighly by shifting the border to make it look more 3D (my intent was to make it seem more modern but I have no problems with the original whatsoever)

I think I am on the right track now and have gained some good experience, I hope to stick to my time-plan and accomplish what I have set out to do. I still wish I had never said that I was going to do a web page though but it will be invaluable experience I'm sure.