Migration Continued

i knew from my Initial Research that i definitely wanted to include a section on Monarch butterflies so i began my further research there.

Monarch butterflies that migrate have the average lifespan of 6-8 months, whereas the average lifespan of a monarch that does not migrate is 6-8 weeks.
Monarch butterflies are known for the incredible mass migration that brings millions of them to California and Mexico each winter. North American monarchs are the only butterflies that make such a massive journey up to 3000 miles. The insects must begin this journey each fall a head of winter which will kill them if they tarry too long.
Butterflies that emerge from the chrysalides in the late summer and early fall are different to the ones that do so during the longer and warmer days of summer. These monarchs are born to fly and know they must prepare because of the lengthy journey.
only monarchs born in late summer or early fall make the migration, and they make only one round trip by the time next years winter migration begins at least 3 summer generations will have lived and died and it will be the last years migrators great grandchildren that make the trip. These generations somehow know they way, they follow the same routes and even return to the same tree.

http://animals.nationalgeographic.co.uk/animals/bugs/monarch-butterfly/

http://www.travelswithtwo.com/wp-content/uploads/2008/06/monarchcluster01.jpg

Monarch butterflies can fly in still air at a speed of around 50 kilometres (30 miles) per hour, and considerably faster with a tail wind. They usually fly close to the ground, but have been found as high as 3,500 metres (12,000 feet).1 They have been known to fly more than 600 kilometres (375 miles) over water non-stop in 16 hours.

http://www.answersingenesis.org/articles/cm/v20/n1/magnificent-monarch

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9FPF_k4qaIBwtrOjzhDUwgCETEGznZXBO7i_N6cTIX4Abh7xbkhzTwSaREQnGUL6weHPZT0Dh4gRnBn_AeeSKIaY76VgbUWQteBWwN4NQ7Ggu4w3nGDfq3cZLeK49seHgC2bhkGGR_Q/s1600/monarch-butterflies-mexico_28112_990x742.jpg

Monarch butterflies know fall is here the same way that we do; they feel the chill in the air. While we adapt by putting on a sweater, the situation is much more serious for the monarchs. Temperatures below 55°F make it impossible for them to fly; temperatures below 40°F paralyze them. The monarchs originated in the tropics and can't live for long at temperatures below freezing.

At the same time that the air is cooling, the nectar supply that feeds the butterflies is dwindling. To survive, the insects begin migrating in late summer, flying with the wind to reach their winter homes.

Up to 100 million monarch butterflies migrate either to California or to Mexico each year. (This isn't the entire population. Some monarchs never make the migration.) There are more than 25 winter roosting sites along the Californian coast and about a dozen known sites in the Sierra Madre Oriental Mountains of Mexico. In both regions, butterflies depend upon trees for their survival. The insects cluster in pine and eucalyptus trees along the California coast and in ovamel trees in Mexico.

Wintering monarchs cluster together. The end result looks like massive clumps of feathery orange-and-black grapes. Each butterfly hangs with its wings over the butterfly beneath it, creating a shingle effect that buffers the bugs from the rain and creates warmth. The weight of the cluster also prevents the butterflies from being blown away.

Butterflies stay in their winter homes until about March, when they begin a quick retreat to their summer homes, at times traveling as fast as 30 mph.

http://www.riverdeep.net/current/2000/09/092900_migrations.jhtml

http://www.worldofstock.com/slides/OAC2053.jpg

i found some very high quality photographs of monarch butterflies which i thought could be useful as possible background for my pages- i also have a video from a david attenborough documentary that explains and displays the process of monarch butterfly migration which i have cut down to the monarch section and plan to integrate into my page. ideally i think id like to keep the monarch section to one but i have enough for two so it depends on the other animal migrations i focus on.

Nature inspired websites

Since the project brief revolves around natural wonders i wanted to explore websites inspired by nature in order to establish a possible design style that i could use within my own design

The website above is probably one of the more fun ones that i looked at, essentially you travel down the tree, and there are small interactive elements that move and direct you to various sections and content. i really like the colours and the fonts used and i love the how fun the design is, its got a very fantastical element which makes the content more interesting. using a tree could work well within my design (since I'm swaying more towards investigating monarch butterflies and they migrate to specific trees).
http://www.thepixel.com/blog/

the website printscreened above is one for beer, and again the overall image has a very fantastical feel, its almost like looking through a window into another world, small elements of interaction placed on short statements keep the content understandable whilst the light yellow background integrates warmth and contrast- there is a very vintage feel to the site which works well with the 'natural' theme.
http://www.somersbycider.com

mostly the cutout areas attracted me most to this design along with the grass that framed the main home page, i like the contrast in texture and colour and the movement of the cutout characters gives the site a jaunty homemade feel which is congruent with its overall organic subject. it manipulates a linear scroll down navigation but the overall style keeps it interesting without the need for complex navigation.
http://www.organicsupermarket.ie

Interactive Websites Continued...

                                             http://www.parc-amazonien-guyane.fr/#slide1
this website is relatively simple but i thought it was effective. the river shaped nav bar was a constant throughout all of the pages which i thought was an elegant way of conveying the natural theme. when scrolling down through the content the colour changed on each of the subheadings attached to the river design. each photograph was sharp and generated an effective background for the river navigation and the small squares of content. square shaped content boxes retains the sites overall simplicity, so far i have noticed that  smaller paragraphs of content have been used in a lot of the sites researched so i should definitely consider not overwhelming my pages with text when designing my site.

http://www.safestyle-windows.co.uk/secret-door/
i really liked the home page to the safestyle website, the closed door which you then had to click on to enter the site was a nice opening and operated much like the front cover of a book or magazine. the door itself contrasts against the background in texture, colour and style and i am instantly reminded of Narnia, opening the door to new content and by association new worlds. this is further stipulated by the actual content which is interactive photographs that can be moved within of different places, the tate section was the first and toured round the various artworks in each room.

http://www.celinek.fr

i wasn't exceptionally keen on this designer Celine K's website but i liked how each page was a little bit different to the last but retained the design style of the others, the swirly font worked really well against the backdrop simultaneously elucidating the subheading.

this is one of my favourite sites researched, i love the textures and the overall style and although the navigation is very simple ( a scroll down follow the arrows) the style and slight movement of the 'natural' aspects gives the site a sense of interactivity whilst the felt textures used make the design look really fun and understandable and i would consider using these textures and styles within my own design.

http://package.dego.lv

http://www.warmbodies.it

the website above is a spanish site advertising the film Warm Bodies, the red was what attracted me most to this website and i really loved the sheer white fonts and how they contrasted against the backdrop, the photograph of the main character acts as central navigation (you scroll down his form to various segments of content, videos and photographs that lead to different pages). The dripping heart logo is a constant throughout and really matches the overall style.

Migration Initial Research

Migration defined: As far as i can tell migration can be separated into 3 categories animal migration, Forest migration and insect migration. Animal migration is a long distance movement of individuals usually on a seasonal basis it effects, birds, mammals, fish, reptiles, insects and crustaceans. Forest migration is the movement of large seed dominated communities in the geographical space and time, insect migration is the seasonal movement of insects particularly in dragonflies, beetles, butterflies and moths.

There are many different types of migration and many directions that i could focus on within the topic ( i knew that animal/insect migration had the most scope so i plan to revolve my research around animal migration) despite this i have no real clear focus in which to base my content so i have decided in order to begin my initial research that i would investigate the top 10 extreme animal migrations that occur around the world in hopes that i could define a specific area of interest and base my website and i book around that. after googling extreme animal migrations these were my results:

1) An insect named the Katydid which after spending 17 years in the soil will migrate to the outside world to sing and mate, their migration can span across thousands of kilometres.

2)Lemming's are small rodent like animals and are usually found in the arctic, they migrate when their food supply is low.

http://sloannota.com/blog/wp-content/uploads/2012/11/28400_1600x1200-wallpaper-cb1289253002.jpg

3)Wildebeests migrate North to seek fresh grazing sites and water, the migration is halted by rivers where numbers are accumulated before being crossed.

4)Sea Turtles in general migrate between foraging and nesting grounds, some of which take them hundreds and thousands of miles away. The leatherback turtle for instance travels around 10,000 miles or more in search of Jellyfish. Green Turtles migrate west to breed. loggerheads migrate almost 8000 miles to feed and mature.

5)Salmon are born in fresh water, migrate to the ocean and return to reproduce ( if i did choose Salmon as an aspect i could include a section on the salmon that migrate in the UK)

http://sdakotabirds.com/species/photos/ruby_throated_hummingbird.jpg

6) Hummingbirds all have different migration patterns depending on species migrate due to season to avoid the winter freeze, Ruby throated hummingbirds for instance migrate between southern Mexico and Northern Panama ( they do not migrate in flocks but as individuals), a hummingbird covers generally 20 miles a day.

http://www.evilsunday.com/wp-content/uploads/new/2010/11/Migration-of-animals-4.jpg

7)Monarch Butterflies migrate due to season, they are unable to survive the colder temperatures, large amounts of monarch butterflies migrate to mexico to hibernate and can travel up to 2000 kilometres. it is only the 4th generation that migrates (they live for about 8 months whereas the previous generations only live up to 6 weeks)

8)Storks they migrate between Europe and South Africa to breed

9) Freshwater Eels migrate for breeding purposes and can travel up to 6 months and it has been said that the adults die after spawning.

10 Whales most species of whales migrate, the blue whales migrate thousands of kilometres to breed in warmer waters, humpbacks migrate for the same reasons breeding and feeding and travel huge distances.

So far i am very much intrigued by Monarch butterflies, hummingbirds and sea turtles although i feel that there should be more of a running theme to my content, so if i choose monarch's i would prefer to focus it on insect migration rather than various random animals but i plan to do more research around my specific areas before deciding.

http://www.seeturtles.org/1895/sea-turtle-migration.html
http://wiki.answers.com/Q/Do_lemmings_migrate_and_when
http://suite101.com/article/storks-and-migration-a48719
http://yellowtogreen.blogspot.co.uk/2011/04/10-list-of-animals-most-extreme.html
http://en.wikipedia.org/wiki/Salmon
http://www.hummingbirds.net/migration.html
http://www.whaleroute.com/migrate/
http://news.softpedia.com/news/Eels-the-Oddest-Migration-for-Sex-73420.shtml
http://www.monarch-butterfly.com/monarch-butterflies-facts.html

http://www.expertafrica.com/tanzania/info/serengeti-wildebeest-migration

Interactive Websites Initial Research

googling the term interactive website procured  these  results, i wanted to investigate how other websites integrated some interactivity since its a specific element in the brief, as well as this the interactive element  found on these sites can be applied to the i-book part of the project.

                                           
http://www.blacknegative.com/#!/bullittagency/
The website above was dominated by photographs, some of them helped to segment the content, others had small video segments amongst the gallery which added a sense of movement, altering various squares of writing by subverting the colour's when hovering above helped to emphasise various pieces of content and highlight individual headings. in order to move from page to page you had to click and drag the page over which once again mirrors turning the pages of a magazine something i think keeps the overall site exceptionally fluid and simple. when including interactive elements i feel that simplicity is key so when introducing various interactive elements i think that dedicating a full page to each action may help movement and the usability. one of my favourite pages on this site was one in which  worlds which change and spin, defined by recognisable landmarks and i love how the background to each has been made more interesting by faded lines and pieces of kinetic text which briefly accompany each world. these worlds are seen to light up and even disintegrate which is actually really in keeping with the sites overall style. Kinetic text is a really strong element on its music page, the repeats of which match the sections of video and the sound itself. i love the delicacy of the font and how each page is very different ( im not entirely sure what the site overall purpose is) but i love the interactivity of it and how it really involves the user.

http://kolonien.nu/musik/

The website above isn't incredibly interactive but i loved the font and the simplicity of the main page. the background itself is is the aspect that moves whilst the simple text remains static, i absolutely love the font and which combined with the sharp moving photograph/video (i'm not sure which) makes the website appear very clean. i also really like how the words and links to different pages lie amongst the background ( it isn't separated through shape; specifically boxes which seem to dominate most websites) and i find that this makes the site look more natural and fresh. as long as the font itself is interesting and legible i don't see why it has to be constrained something to consider when designing my webpage. i also think that since my website is aimed at level 3 students the site itself doesn't have to be generic, as an age group i think it would be more engaging if the site style and navigation was a bit more interesting.

http://www.socketstudios.com

the site above has a very simple navigation style one that could be considered boring but i liked its simplicity,it reminded me a lot of a Story Planet style of navigation each page was a stepping stone and you could choose which category you wanted more information on and scroll right to look at the content, scrolling down revealed various sections that were defined through a static photograph. i particularly liked the top screen since the background map contained various links and videos that played when hovered over. simple but effective and it placed greater emphasis on photographs which means that the pages are not text heavy.

http://www.nickcave.com/music/

the nick cave site above is another example of very simple interactivity each square (a song title or single cover) would change to the album cover once the curser hovered over the specific square.  i liked the use of squares since it created a montage like style, crowded but visually interesting again colours were also subverted in the solid fill squares which practically broke up the images and covers. the simple side bar navigation is easy to see and helps to clarify the various categories and although i find the white background very uninteresting it does ensure that the focus remain on the main content of the site although a texture could have been used on the white to provide more interest.

http://hofratsuess.ch/nachhaltig

although the site above is a spanish website i really liked the overall style the primary colours were bright and the rough 'felt' edges and 'sewn' arrow had a very vintage feel. following the arrows helped to include its audience although i is a simple scroll down navigation. i really love the style applied to the  images (as though they've been taped on) and the sewn boxes of content contrast against the background all of which appears to be soft and textural something i definitely want to consider when creating mine.

Responsive Website's Initial Research

A general search for responsive websites revealed these websites below, generally the navigation was the aspect that remained at the top after the resize which is something that i should consider when designing my own responsive website.

The website above is a website for an online magazine in which various authors write stories revolving around a set genre, so after the site has been reduced in size,  it uses downward scroll  to the content and then the  link to the next page is at the bottom, all of the navigation is placed pretty much after the intro content section (divided by story, new story new link new page), save for the introduction/home which is situated at the top. Each section manipulates a different colour scheme which generates contrast and visible division between each of the pages. large artwork begins each segment  (much like a cover to a book) each section has its own cover element although its not actually on a separate page.

 http://www.fray.com/issue3/

 http://starbucks.co.uk
the starbucks site above keeps the nav bar clear at the top of the page until the site is reduced to its smallest mobile size after which the navigation disappears and the main images on the page become new focal points. the logo remains firmly at the top of the screen and the main section depicted in the larger site (shown above) is the first element seen after reducing the size of the page. this main element, has several pages that you click on which leads you through the articles that are linked at the bottom of the site ( although this almost nullifies the scroll down option since they are placed on pages linked to the main content).  the clean white background contrasts against the dark green colour scheme and ensures legible information.

http://garethlawn.co.uk

the website above places the designers contact details at the top of the page, which prioritises that information. each segment is broken up by thin photographs (examples of his designs) and short statements explaining each although each photograph leads to a new page devoted entirely to that piece , again a photograph at the start of each segment helps to clarify and appeal visually but it also allows for the integration of a mini gallery at the beginning of each- something to consider when trying to display images relating to the same subject.

  http://www.nomineedesign.com/work.php

the nominee website (after being reduced to mobile size) devoted its first page entirely to navigation links to each section can be clicked on at the beginning or you can scroll down to the full section. after clicking on the navigation heading's you then have to scroll down to reveal the specific content. i mostly liked the site because i liked the solid coloured rectangles that  made the website feel like you were turing the pages of a magazine, each colour helps to segment and it creates both a clean and warm overall design.

overall this initial research has helped to display how information is divided into more important areas, which is a pivotal consideration in regards to a responsive site. navigation dominates the top, after which subheadings are then placed on the scroll down. since we have to code the site ourselves i dont wanna make anything to complicated but at the very least i have a general idea of how sites are divided and organised. 

Design for the web and Interaction Design Brief

To produce a  responsive website and i book revolving around the topic Natural wonders ( the topic that i have been assigned is Migration). both are supposed to be educational resources for A level students (the content can be sourced but must be fully referenced at the end) Visual appearance / approach can be the same for each and should be consistent across both.
at the end there must be finished website,
finished ibook,
working files for both,
asset register,
production schedule.