Design Practice 2: Interactive Spaces: Development

So I've set up the overall comic book template I will be using for my online portfolio, I'm creating a background of various comic books scatted on a wooden desk with a large comic book open in the center of the page, this will give the illusion of reading my portfolio on the canvas of a comic book. The hardest part surprisingly was finding an image of a comic book/magazine that was folded over on its self with a visible spine to place in the middle, I had to take one of my own magazine, fold it over and scan it to get a suitable image. Various photoshop effect are placed on the header and the canvas to create a comic book feel, effects such as chrome and poster edges.

Scanned magazine spine incorporated into my template.

 In terms of the code, I have encountered various problems so far, firstly I had to make my container tag relative to the divs to enable my absolute positioning inside the div's to position correctly on different monitors and browsers, I have tested the layout on different screens and browsers and It's perfect, except for one old version of Internet explorer, which I must fix. Custom fonts have also proven to be a problem as I didn't know they would show up as default fonts on different computers, I have amended this by imprinting comic-book font words into pictures instead of being typed. I also had to add the following for my site to work in Internet explorer  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">]

Here is an example of quality comparisons when it comes to youtube, we learnt that you should always consider the codec, format and quality of images and videos you embed on your site, If your web page loads to slow, viewers will simply move on to different sites. .jpeg are used for photos, where as .gif and .png are better for banners and buttons, they also have a lot less bits of colour in them. It is crucial to minimize the quality of images and videos in order for optimum accessibility's for all users, I will be using 360p video embedded into my site, along with reduced quality .png graphics (seen below) for butons and boxes.

So at the moment I'm in the process of adding visuals to the homepage to branch of to various pieces of my work and blog posts,  I have established a main navigation's within linked to Home - Portfolio - About Me - Contact - Blog, along with social networking links at the top and bottom of the page and an archives of blog post also at the bottom. I have a core mainframe to replicate now and my main aim is to continue with the comic book theme throughout by using black and white lines, photoshop effects and specific fonts, I will post again when I have completed more.

Design Practice 2: Interactive Spaces: Inspiration and Brainstorming

Collection of images, colours and fonts which I feel reflect my
personal interests and preferences and describe my personal branding. 

Through my inspiration search and mood-board I have discovered a mutual theme throughout, comic book style and superheros. My wire frame will be that of imitating the layout of a comic book page, I believe this is an appropriate theme to incorporate into my online portfolio. As I'm pursuing animation for year 2, what better to represent myself as a animator than with animation at it's rawest, comic books.

Above are some relatively simple comic book page templates, different content will reside within the constraints of the different boxes, creating the effect of reading a comic book while surfing my site.

20 Insane Comic-book Style Photoshop Effects:http://psd.tutsplus.com/articles/web/20-insane-comic-book-style-photoshop-effects  
Comic style font's: http://www.dafont.com/theme.php?cat=102 
Tutorial: http://net.tutsplus.com/tutorials/site-builds/create-a-comic-book-themed-web-design-photoshop-to-html-css-part-2/

My Wireframe:

Design Practice 2: Interactive Spaces: Inspiration and Brainstorming

I am looking for inspiration in a number or areas of web design, obviously I'll analyse a few completed online portfolios which impress me in the beauty and creative department, but I will also be looking for basic, minimilistic and easy-to-use portfolios in terms of navigation, language, communication and being aesthetically pleasing to the human eye, mainly for use in designing my basic wire frame. I will also look at existing company logos and taglines that create unique personal branding. 

Innovative & creative portfolios:
http://www.pikaboo.be/
http://okaydave.com/
http://kulturbanause.de/
A lot more here: http://www.instantshift.com/2009/01/05/90-inspirational-and-creative-portfolio-designs/

Wireframe Ideas:

http://www.tv.com/
Small title at top with navigation bar underneath, search bar to the right. Rectangular main content section underneath nav, underneath that a spotlight and news section
http://marvel.com/
Small title at top with horizontal long navigation bar underneath, small rectangular box with main content, with a news/updates section to the right.
http://www.benhulse.com/index.php
Title and navigation into one, floating in the middle.main picture underneath with a footer links under that.
A lot more here: http://vandelaydesign.com/blog/design/minimalistic-web-design/

Logo's and Taglines

1. Got milk? (1993) California Milk Processor Board
2. Don’t leave home without it. (1975) American Express
3. Just do it. (1988) Nike
4. Where’s the beef? (1984) Wendy’s 
5. You’re in good hands with Allstate. (1956) Allstate Insurance
6. Think different. (1998) Apple Computer 
7. We try harder. (1962) Avis 8. Tastes great, less filling. (1974) Miller Lite
8. Melts in your mouth, not in your hands. (1954) M&M Candies 
9. Takes a licking and keeps on ticking. (1956) Timex

Design Practice 2: Interactive Spaces: Brief

Another five weeks, another brief:
You are to design a 5 page interactive website using Adobe Dreamweaver that acts as a digital portfolio and promotional online resource for your artwork. This should display good design principles, a flair for self-promotion and a good understanding of the underlying coding. It should also show an understanding of the importance of networking and linking to social networks

This project is basically about creating an online identity for myself to showcase my work and hopefully attract future employees, at the same time It'll also help develop my visual literacy for design. Designing will involve aspects such as; planning out the branding, layout, target audience, content, colours, feel, aims and intentions, most elements of design have a purpose of some sought and need to be logically planned out pre-production. I do actually really want to improve my core art skills and visual literacy, so hopefully I can learn these new skills and apply them to the animation pathway when I start.

So far I have learnt how to set up a basic template in dreamweaver for my website, created by HTML coding. I have gained the knowledge to set up a root directory for my site, set up the <head> and <body> tags for the page, format text with the <b> and <h1> tags e.c.t, add lists and links, experiment with the <div> tag, attach a CSS to individual pages and then alter: the page background, the <div> tags lengths, boarders and images, changed the colour, font and size of text and generally learnt how to work with CSS and apply class ID's within the coding.

First Test:

There's just a basic screenshot of my experimentation with HTML and Dreamweaver, If I can just not get lost in the code this time like I did with the last interactive media project, I'm sure it'll be enjoyable. I already have some basic ideas flowing around for the theme and layout for the site, so I'll get them on here ASAP.

Music Video For A Client.

Avegastar - Calling All Fears - Music Video by MediaDobson

I forgot to post this a couple of months ago, but I'll put it up now. I directed and produced a music video in my spare time for a local alternative rock band named 'Avegastar'. I planned out everything from the story scenes to the film noir lighting and the various camera shots. I was trying to create a visual representation of fear and the effects it has on a individual mentally, as well as blending in a high energy performance from the band. I made this before I had chosen the animation pathway and I did it mainly to see if I would prefer the moving image pathway, it gave me some good practice and an interesting insight into how I would feel selecting film for year 2.

I've Finally Got Um': Visual Essay Update!

I won't go into in-depth detail to how I came to the decision (that's what the essays for) but the pathway I've finally decided upon and which I am selecting for the 2nd years is...

My Four Practitioners:

1. Shingeru Miyamoto (Nintendo) - It wasn't a difficult selection, as the picture indicated Shingeru is a incredibly influential game designer and fits nicely in at the start of my essay, he represents my early discovery into the world of game animation. He's been creating pioneering, industry-shaping video games and hardware for nearly three decades. His contributions have been blatantly copied by competitors just as much as they've been applauded by players around the world. His resume includes greats such as: Donkey Kong, Mario Bros., and The Legend of Zelda, Mario Kart, F-Zero, Star Fox and Super Mario 64.

2. Phillip Dobson (Eurocom's Lead Environment Artist) - Another easy choice, Phillip (as the second name suggests) is a relation of mine, my cousin. He played a significant part in my aspiration of becoming an animator, we had the same eduction, family and environment growing up, My philosophy is: "If he made it, why not I?" He specialises in environments which is relevant as this is an area I am interested in also, the idea of creating a world in which people interact within is highly creative and almost 'god-like' to a degree, a occupation rarely found in other jobs. His resume includes: Spyro the Dragon, James Bond 007 Goldeneye, Harry Pottor and more.

3. Bruce Timm (DC Comic/Animated Universe) - This one took some more thinking about, but overall I believe Bruce to be the most influential figure to me, in terms of contributing to my early fascination and enjoyment of animated TV shows. He is responsible for personifying legendary comic book characters into animated worlds, his character designs truly do shape and represent the modern image we have of huge popular icon such as Batman and Superman. The fact that his animations are important enough to influence the more popular medium of film is a great achievement in it's own right. His resume includes; Flash Gordon, He-Man, Tiny Toons, Superman TAS, Batman TAS, Justice League, and various animated films. I would love to be able to design characters at his level.

4. Hayoa Miyazaki (Manga, Animator, Film Director) - A more modern discovery of mine rather than an early childhood inspiration this time, Miyazaki who has attained international acclaim as a maker of animated feature films. His work visually and imaginatively is on a completely different level to anything else out there, the unique beauty of his animations display intelligent meaning on; nature, life and love. I truly believe that animation is special, that it has the power to take you to unimaginable places of magic, where the possibility's are endless and restrictions are non-existent. This is something that other media forms cannot achieve. His work is the best example I can think of that reinforces that idea, it represents animation as more than child's entertainment but as an art form. His resume includes: Spirited Away, Howl's Moving Castle, Castle in the Sky, Ponyo and more