zeeemanzz-blog

[zeeemanzz-blog]

Narrative and Storytelling Websites

Heroes & Villains https://scm.ulster.ac.uk/~B00643456/DES310/heroes_villians.html Bird Project https://scm.ulster.ac.uk/~B00643456/DES310/DES310.html

[zeeemanzz-blog]

Narrative and Storytelling Illustrations

[zeeemanzz-blog]

Narrative Storytelling Prototypes

Responsive Nav https://scm.ulster.ac.uk/~B00643456/DES310/prototypes/header.html

CSS Animated Buttons https://scm.ulster.ac.uk/~B00643456/DES310/prototypes/buttons.html

CSS Animated Birds https://scm.ulster.ac.uk/~B00643456/DES310/prototypes/bird1.html https://scm.ulster.ac.uk/~B00643456/DES310/prototypes/bird.html

Animated Image https://scm.ulster.ac.uk/~B00643456/DES310/prototypes/orbell.html

Maps https://scm.ulster.ac.uk/~B00643456/DES310/prototypes/map1.html

[zeeemanzz-blog]

When thinking about the bird project I thought I would attempt to draw the takahe bird.

[zeeemanzz-blog]

Bird Project Wireframe

When considering the bird project website I am going to have it responsive I’ve a sticky navigation bar at the top of the desktop view and for mobile view have a sticky drop down navigation bar

[zeeemanzz-blog]

Idea generation

When thinking about the bird project website I feel that having leafs down either side of the site will give it that jungle feel as seen on my style tile, this is the drawing I came up with for leafs before bringing my ideas into photoshop for the style tyle

[zeeemanzz-blog]

Inspiration

I have a 1 year old son and he always watches this song on YouTube, with the bird project in mind I aim to give the website a feel that it is directed for children to read, this song walking in the jungle gave me an idea as to what colours to use and feel I want the website to have

[zeeemanzz-blog]

Idea generation: Im thinking this css/js smoke effect will work wonders in the background of the heroes and villians web page

[zeeemanzz-blog]

Inspiration

I found this lovely little illustration and animation on rafael veronas Web page

“ MYKITA I did the Illustration and Animation for the Intel Labs "Alternative Power Architecture”, bringing low-cost, powerful solar power to rural communities that don’t have reliable electricity. This video was commissioned by the guys from Jess3 -“

http://www.rafael-varona.com/

[zeeemanzz-blog]

Inspiration

I came across this funky little blog dedicated to art and photography, there was one piece that really struck me, its an illustration of a jungle trapped in a bottle with css animation the colours gave me an old 1960s feel for some reason it reminded me of the 1968 beatles animation movie “Yellow Submarine”. This piece was created by rafael verona I got really excited when looking at this is as it is relevant to me at the moment because i am currently working on css animation. Of course i had to check out his page. I found out that he is an Illustrator, Animator and Web designer, some of his work is really cool, must see.

http://www.rafael-varona.com/

[zeeemanzz-blog]

Inspiration

Came across this blog dedicated to type, thought this was pretty awesome, there’s some lovely retro items with flat branding design, just shows that flat design has been about for decades.

[zeeemanzz-blog]

Idea Generation: After watching some ripper street to get the feel for heroes and villians isl started sketching, I was thinking about illustrating a woman hanging and have css animation to get her to swing as the background for the webpage but I think it might take the viewers eye away from the storytelling.

[zeeemanzz-blog]

Idea generation, this old fashioned style logo and the old building itself got me into the whole heroes and villains theme, I liked the colour of the typography with the dark backdrop and think this would be a nice colour for the heroes and villains header.

[zeeemanzz-blog]

Heroes & Villians Prototypes

Responsive Navigation

http://scm.ulster.ac.uk/~B00643456/DES310/prototypes/header.html

CSS Animated Buttons

http://scm.ulster.ac.uk/~B00643456/DES310/prototypes/buttons.html

[zeeemanzz-blog]

Week 7

This week we learned about flat vs skeuomorphic we looked into the history and realised that design is like everything in this world, style is forever changing, old styles become hip and new again, this was a great lecture today and the website was awesome, i hope to one day be able to make a page like that. We have been tasked to add some CSS to our Heroes and Villians one page website

[zeeemanzz-blog]

Week 6

This week kyle went over all the work we have to date in the lecture, he seen some of my style tiles and i think he was impressed with the Bird project.

[zeeemanzz-blog]

Deliverable 3 - Typography

After some research i decided to do a Paul Rand quote which was found here : http://kovick.com/quotes/design_is_so_simple/

After a few hours researching the typography i eventually came across a webpage of some of his work then came to the conclusion that the above typeface is futura.  https://fontsinuse.com/designers/1242/paul-rand

I searched google fonts and typekit data base and could not find a free futura font, after some research i found there was a free alternative to futura which is josefin sans and slab  https://fonts.google.com/?query=josef which i imported into my HTML. I knew i seen this futura font before then later realised upon retrieving the alternative that i had seen a similar typeface in some of Josef Muller Brockmans work http://www.designishistory.com/1940/joseph-mueller-brockmann/

This is my finished design, it is somewhat different that the original image of the quote that i seen as i have added an image in an attempt to make up for the fact that i could not retrieve the exact typeface i was looking for. https://scm.ulster.ac.uk/~B00643456/DES310/typography_project/paul_rand.html