OEP Website design - Comic book layouts

I've put in a little research to try and source the various layouts that have been implemented over the many years of comic books.

A great starting point was to look through 500 Essential Graphic Novels: The Ultimate Guide, by Gene Kannenberg Jnr.

Obviously by it's title, you can guess that flicking through here provided me with page after page of various layout schemes.

Here are a few* of the key ones that are used often throughout the genre:

Obviously these layouts all work around the amount of content they need to display. This last one, for example, would only be able to hold 3 indiviudal parts, yet this isn't necessarily going to rule it out as our website isn't 50 pages. In fact, I actually like the diagonal boxed one, it doesn't seem as square (because it isn't!) and appears a bit more dynamic.

--

Elsewhere, the 500 Essential Graphic Novels book proved a good source for the type of look I was wanting to achieve. Obviously you can use the noir style title, but what components make up that look visually? This framework helped me in my exploration of the comics available, and I found some great examples of goody/baddy comics. Brooding blacks a go go!

Sin City (Dark Horse) - Needs no introduction really. Noir at it's comic book best in my opinion; high contrast black and white, shadowy making the images appear striking, dramatic. Sometimes the use of red/yellow is used for emphasis/character personalisation.

The Fixer (Drawn & Quarterly, 2005) - These images caught my attention due to having a high attention to detail, but also content in the images. Some comics are the simplest line drawings on the page, whereas this could have any section of it's illustrations cropped and still you would have something to look at and explore.

Judge Dredd: The Complete Case Files 01 (Rebellion, 2005) - One of the many comic books that go for a white on black, rather than black on white look. It gives it a different feel, a villainous, evil feel, I think.

Blankets (Top Shelf Productions, 2003) - Although not a book about good vs evil, I liked Blankets for it's use of strong black lines for emphasis.

Zorro (Dynamite Entertainment) - The blacks contrast strongly against the white in the Zorro comic books. The exacerbated contrasting, along with much shadow is one of the effects that I intend to put into action.

Road to Perdition (Paradox Press) - I think this one caught my eye due to the realism of the illustrations, particularly the characters. Of all the graphic novels I looked through, this one seemed to most represent photo-like comic book illutsrations.

This genre analysis proved worthwhile, as it has opened my eyes to what others have done in the field. The techniques are becoming quite clear for what I need to do to achieve a realistic interpretation. Furthermore, it has spurred me on with some great ideas for content.

Although I can't draw, my camera buddying up with Photoshop can make illustration-like images. Perfect. This is where I'm heading next.

@

OEP Website design - Designs

in the time between blogs, I've been working away at finding ideas for my Sin City inspired piece.

From the last post, straight away, one good design struck me, which would be to make a website that looked akin to a comic book. 

 

I've taken this on, and put some ideas down, as can be seen. To give it a comic book feel, I've adopted the typical box laden page setup. I think it definitely has potential as I wouldn't just be restricted to this 2x3 column layout - there are actually several different ways of varating the content on the page. 

Also, as previously mentioned, the Flash banners could be embedded within a selection of the frames and from a viewers point of view, could be perceived differently, as they wouldn't be like the usual advertisement banners. Instead, they would further, echo, or reflect the content that is around them.

--

The next design I came up with was to capitilise on the theme of Sin City. The main scrollable section of the site would contain comic book themed images, but layed out to appear as if it's a building within a city. The outer left and right sides would then tie in with the look of the centre, widening the city visual.

--

Using Ricco Torres' images as a focus point, I noticed he capitalises on making his images large and detailed. This technique could be used, and is used, for online websites. The main section of the site would be setup in a black and white scheme, using comic book type fonts, whilst the outer borders would feature a large, highly stylised, black and white comic book image. It would definitely have a visual impact on the page, and probably even dominate the feeling of the site, setting the mood instantly.

--

Last but not least, I understand and recognise that Sin City now stands as a movie in it's own right, away from the Frank Miller graphic novels. In the vein of iTunes cover flow, I thought that I could update the comic book images by using a shiny, but dark modern look. This would probably come across as very web 2.0 but that's not a bad thing in my eyes. You would slide through the images, and likewise, when going to different sections of the site, they could still be presented in the cover flow format. I suppose it would have quite a gallery feel to the whole piece.

--

Of them all, I still think the original comic book idea is the best. It's this one that I've been playing around with in my head for the longest, has the best options that I can develop, will look good, is kind of different, and so in all, I think I shall be going forward and progressing with that design. 

@

Fireworks Safety project

Develop a new public information campaign promoting fireworks safety.

Create a simple Flash animation that promotes safety and consist of between 6-8 seperate Flash sections, that include animation and some interaction.

This should appeal to all ages that may be involved but particularly families.

I decided to aim for the family scenario, but perhaps slightly older than normal, i.e. families with children 10+, as I feel these are perhaps at most risk of misusing fireworks.

With this piece of work, I aim to put over the importance of right and wrong where fireworks are concerned, following up with the consequences of a safe or sorry approach.

To make the Flash appealing, motion effects that draw the eye will be used, furthermore, the colours used will be attractive and bright, not just pastel/plain colours. Younger people like vibrancy in colour. Bearing the target audience in mind, the text and messages displayed will be simple to understand, meaning their message is clear and understandable.

I believe that interaction does aid learning as the user wouldn't be able to progress without doing so. It should feel user directed, as in, it isn't being broadcasted directly at them, instead, they are directing their way through and finding out themselves. The user is making the decisions, they are bringing about the cause of effects, so it should feel a bit more personal too.

Designs -

'Pick and Click'. Clicking on the correct items related to safe firework practice earns a point, incorrect answer is minus point. Depending on score, you are told to start again or you see a fireworks presentation.

Be Safe Not Sorry.' Clicking on one of the links, you are given a checklist that you must mark to be able to progress. One details safe practice, one details dangerous practice. Checking the boxes for Safe shows a sparkler video, whilst sorry shows an ambulance and burns injury.

'Q & A'. Answer the question by inputting in a text box. Enough correct answers allows you to use the mouse as a sparkler. Incorrect asks you to try again.

'R U 18?' You are a 15 year old, scanning a box of fireworks at a checkout. You get asked are you 18? Choosing yes (i.e. not the truth) shows a scene where you are told an adult must set up and supervise the fireworks, and then a burns injury. Choosing no shows a crowd enjoying fireworks safely.

'Fill the gap'. From an selection of words, you must correctly complete sentences. Each correct answer provides a point, the more points the more choice you have of which firework to launch. Each different value firework shows a different video.

'Build a bonfire'. You have to click and drag debris wood into the designated area. Once the bonfire is built, 6x hedgehogs try and nest in the bonfire. You must stop the animals by clicking on them. Once all completed, you take a match and light the bonfire.

--

I decided to go with the Be Safe Not Sorry design. I liked the 'youth' targeted look and believe it does work and appeal to the target audience. I tried to infer that safe is fun, by means of the rainbow colour effect, whilst sorry is dull, being monotone black and white.

I initally tried the design with a very simple black/grey/white palette and knew it wouldn't cater for the age group, it didn't have enough visual stimulus.

The inclusion of photographic images in the piece are strong effective metaphors, they are what we see, as opposed to cartoon illustrations which can sometimes trivialise the content.

The video of the sparklers is nice, it serves as a reward for having completed the checklist. However it did pose some questions as it isn't necessarily fully representative of the advice being set out. The contrast from safe, to sorry, with the ambulance and burnt hand however is a real, visual indication of the issues concerned with fireworks safety.

The suitability of the injury picture came into question, there were far worse examples available to use, but I deemed the hand to be an appropriate compromise for the target audience - not too offensive, but shocking enough.

I managed to achieve the implementation of the checklist, getting the AS3 to disallow progression without checking the boxes. This way, they have to stop and pay attention to be able to go forward. I did wonder about adding red herring options, but then thought that somebody could take those on board and misleadingly believe them to be true.

Also, I managed to get in quite a few pieces of advice about wearing gloves, have a bucket of water, not returning to a lit firework, so this in theory, succeeds on the informational aspect of the project.

Difficulties in this project were met when it came to creating the design from paper to computer. The ideas theoretically were good, but perhaps a little too advanced to achieve in this short span of time. Likewise, if I wanted to be truly creative, I could have illustrated everything myself, but again, I didn't feel confident enough to achieve this and fine tune the look, so it looks credible, in the time.

If anything, I do wish I could have made a more technically advanced piece, it seems perhaps a little simplistic when considering the complex possibilities of Flash.

@

OEP website dev - perfect ezine example

Whilst browsing, I came across this Nintendo ezine which bettered the Setanta one I talked about previously. It's perfect in every way:

• You want to just click to turn the page? Fine. Click, and the page turn will animate for you, turning both forwards and backwards.
• You want to turn the page manually, yourself? Again, fine. Click the outer edge of the 'page' and whilst holding down the mouse, pull it across. If you even do it at an angle, it still represents page turning as it would in reality! Plus, it's got a realistic shading effect.
  

I'd really like to see how to implement this (UPDATE! - From my searches for info, it appears the page turn effect is actually now open source! Advanced Action Scripting goes on behind the scenes but this doesn't come as any surprise!).

Page turning in my Online Environments comic book site? Hmmm, we'll have to see about that.

@

Web 2.0 graphics

I'm really into the visual trend that they have attached to the term 'Web 2.0'. I would characterise it as being about gradients, shines and reflections. It makes a plain flat image appear shiny, and modern, and everyone has joined the trend.



Hey, I even adopted the look for my own logo (cast your eyes to the right of this post ---->).

I came across this tutorial that shows how good Web 2.0 graphics can look, and also, how simple it is to achieve. I think it's a technique that you don't even noticed applied, you just recognise the graphic as looking good.

Check it out

@

"Critique an image thats speaks to you"

Serenity, by liveanoptimisticlife

In my opinion, this inspiring picture succeeds on a number of levels.

Firstly, it has been captured for a range of viewers: fellow photographers, travellers, people interested in natural Earth, and intends to display geographic features (the mountain, the lake) but also the abstract qualities of serenity and calmness. What confirms it's success is how it appeases all target audience's needs. It comprises a good point of focus, the tonal colours blend nicely, it encorporates a range of physical components and is visually interesting/attracting due to the reflection/mirroring achieved whilst working with water.

A standard photography technique that I think has been applied well is to capture the main object slightly off centre and as can be seen, we have the mountain just to the left of centre, but this is then also balanced out by the boat off centre to the right. Furthermore, the blacks of the boat, juxtaposed against the transquil pink/purple of the lake makes for further visual distinction. It plays nicely on the eye.

The piece fits in nicely amongst other pieces of ambient landscape photography.

In terms of difficulties that could have been faced, obviously a sunset happens once a day, and is only for a limited amount of time. Therefore, capturing it would mean there wasn't a lot of time to get it just right.

When considering where the creator could go from here, it would be interesting to see the image captured at different stages throughout the day, so we can see the progression from morning to midday to night. This could be achieved by digital alteration of this picture, but one of the defining points of the picture is that it captures natural beauty, and so to capture nature naturally, without interference, would be nice to follow up on.

@

Halloween banner dev

BANNER (For some reason, I'm having problems embedding - the coding never executes? )

In all, I liked this task, it's the sort of area I would be more than happy to work in, in the future. It incorporates Flash interactivity, motion graphics and visual design... things I like!

Obviously spending time online, you become used to Flash banners flashing, moving and so on, to try and catch your attention. In terms of what works well with myself, I find simple movement with good aesthetics (not firework lights and sirens screeching) can draw the user and denote a feeling of quality. Taking this on board, when sketching out designs, I thought it important to keep it simplistic. Karl thought we should exploit the idea of interactivity and incorporate in the design.

As far as I was aware banner sizes ranged from as little as a 'micro bar' at 88x31 to as large as a 'leaderboard' at 728x90. Flash however, seems to stick with the middle ground with it's template offerings, and so I opted for 336x280.




The first design featured the typical pumpkin, and dark cobwebby background. Upon clicking, it would zoom into the darkness of the eye of the pumpkin and text would fade on, inviting them to come to a Halloween Ball.

Although this would have been a good design to implement, it felt too simple. It didn't really maximise on what you could do with Halloween - scaring, etc.



The next was a more interactive piece, offering the choice between Trick or Treat? This means it is user navigated and they should feel a sense of involvement when interacting with the banner. They are choosing a route towards an outcome.

After opting for this design, really nice visual backdrops were found, and so the continuation of a good visual look was prioritised as important to maintain. The original design didn't quite fit in with this goal. The image of a smiling child just didn't fit, it was a little too... amateur? To overcome this, an image of some luxury confectionary was chosen. Combining this new image with a fanciful typeface means there seems a bit more to the Treat section now, it seems a bit classier.

Another point that I thought should be exploited was using a contrast between trick and treat, light and dark, good and evil. Hence, when you choose Trick, the page remains dark and denotes a bad tone. Meanwhile, the Treat section is white, so feels light and airy. The transition between the sections is therefore also more noticeable and emphasised.



The final design decision revolved around sound and whether to include or not to include. Initially, the decision went against using audio effects as from experience a noisy banner can be more off putting rather than enticing. However, I thought that the shock moment would be more exaggerated and striking with a cackle effect. The simplicity of an evil laugh works well, it's meaning connects very well with the user and hopefully makes the impact better.

---

Word of warning though, my copy of Flash automatically set templates at AS1. This is understandable to a degree - you want to make it so the banner will function in the most basic version of Flash enabled browsers. However, what with AS3 being the future and all that, this banner is made of a blank AS3 canvas modified in size.

@