Before I start designing for my website I thought it would be a good idea to look at others.
Below I have picked some out that I think will benefit me the most;

Above here is 4 wireframes which looks like 4 different pages for their website.  Even though they aren't labelled, you can tell what parts of the website remain there over all of the pages.  On the top left you can see a rectangle with a cross through it.  Just from this I can tell that its likely to be a logo.  The footer reamins at the bottom of the page throughout as many, many web pages do.  The navigation looks fixed at the top of the page, again very much the same for most web pages.  This might not be the greatest example because these wireframes above are very sketch like, making them hard to read but I feel everything I look at will encourage me and inspire me for my own layout.  Again on the last wireframe there are 2 main columns and one small one to the left.

Above here looking at this wireframe It is more clearly laid out than the first one.  I really like the way the navigation is laid out.  It is situated on the top right in a neat tidy way.  It is confined to a small place  allowing space on the left for a title and sub title.  This one doesn't give many ideas compared to the first one because it does look plain and a bit bare.

The wireframe above is clearly laid out but in a sketch like form like the first one.  I love the way the logo is stretched right across the page.  This is visually interesting and captures the viewers eye.  Something as simple as this may even keep the visiter on the page.  Another thing I like is that the navigation stretches across the page too.  As I have been searching wireframes it has become apparent that the horizontal nav is very popular.  I may want to use this in my design.  The content is distributed into 2 columns.  I like the way that the most important content has priority over the smaller one giving the visiter/viewer knowledge that this should be read first.  This is because on the right side it is labelled that that part will be a blogging feature.  

The one above here looks very amateur but in my opinion laid out very well.  In the centre of the page there is a fairly big box labelled photo.  I think that having a big photo/image on your website is key to keeping the viewer on your page.  This wireframe is for a homepage and when fully built in my opinion will be a successful page.  In order all the individual boxes are labelled Head, links, search.  I will not have a search option/box on my website because it isn't needed.  The brief states that the content level needs to be for A level students therefore all the content will be on the page. 

I am fairly bare in terms of ideas for my website but slightly more ahead now looking at these wireframes.  I feel I can confidently produce wireframes for my website.  However, It is noticeable that these ones here that I have chosen to evaluate only present at Desktop viewing port.  The brief states that we need to produce a responsive website that can be viewed from desktop, tablet and smart phone view.  I am yet to think how I am going to go about this as I havent done much research in responsive design yet.  However these wireframes have given me rough ideas in terms of layout for desktop view such as navigation and image layout. 

I have started designing some Logos.  As I've been told before I shouldn't jump straight into the software and get lost with it all.  I have my content and focus all thought out and planned/planning.  The brief says to design a logo called 'Wonders Of Nature' then your chosen subject, mine as you know is reefs.  Below is just a mock up of a logo just to get a feel of the software as I havent used Ai in a while.  This is by no means going to be my final logo as I may play around with elements/add things to it.  I have done this to inspire myself.  I have added a 4pt stroke weight to the logo title with a rough natural drawn line style to it.  I have done this because it adds texture and looks hand drawn.  It gives the feel of variety depth.  The fish I also created in the software.  I just copied it from an image.  I used black and blue colours just as a trial and error scheme, after a very basic search on reef fish.   

This one below here is another version only with a lighter stroke weight of about 1/1.5.  I like the idea of simplicity as I feel in most cases simple is the most effective.  I think if i go with any of these ideas, negative space around the typography and image (logo) will be essential to a successful piece of design.

This one below is the same one as as the top one but I've added a dis-colourant type of effect to my reef fish blending out some of the colour.  The image almost looks drowned out.  I like this feel.  I think it could work but as I say, these are just designs and I did these as i felt like it was vital for getting my head back in and around the software got when I design illustrations for my website.  Over all I like these logos.  They are a nice piece of design but it's early days as far as logos are concerned.  I like the typography and my illustration I created but more re-search and planning needs to come into this to get a suitable designed logo which I could use.

I have been looking at Logo design to give me some inspiration for my own.  Before I started to research others I have an idea in my head what I want it to look like.  These are some of the ones I found;

These logos are the ones that have inspired me for my own.  I have noticed the great deal of colour been used in each of them.  The 'Antarctika' one on the last line is one of my favourite as the front of the ship makes its way through the front of the logo.  It uses the gestalts principle of 'Continuation'.  However it doesnt quite make its way through the whole of the logo but there is signs of this happening here.

The one to the left of that labelled 'Cadex' uses a clever technique.  'Closure' is being used here (negative white space)  to give off the illusion of a sphere.  The colours used in this logo are very uniform like and represents the company well.  The font is very blocky all in capitals.  I think that this makes it look professional because it creates impact and has a modern feel about it.

On the top line is a Logo and they are called 'Brown Deer'.  I love the symmetry used in this logo because of its pure simplicity.  The colours are perfect for this being brown and green.  This gives off a very natural feel about it combining elegance too as the individual lines are so sleek.  This logo wouldn't give out the same positive impact if it didn't have the white space around it.



Overall looking at these logos it has given me a few ideas for my own.  I think its clear not just looking at these but others too, that simplicity plays a huge roll in the design of a logo.  Its sleek and professional.  Logos can be any size from an A3 but of paper to a stamp, so simplicity is key.  As far as colours go, I will not have mine very complex in terms of colour because I am planning on having quite a colour background.  This is because my chosen subject is Reefs.  This would clash and would not look good.

After doing a more extensive search I have settled on formations of the 3 main different types of reefs being Great Barrier, Fringing and Atoll. What threats they are prone to past and present and what different animals inhabit these reefs.

Here is just a few images I found when doing some research on reefs in general.  These are very broad.

Here we have a coral reef;

Here is a map of the flow of ocean currents;

Another coral reef;

A reef from above;

Map of reefs around the world;

I've now started to look at websites about my chosen topic to gather more on content and get inspiration.  Something that i admired was this site below.  This is an interactive reef website.  There is reef wildlife shown and you can learn facts about them by clicking on them.  An interactive feature is hovering over the animal as it then becomes highlighted.  I like this because it makes using the site enjoyable and fun.  Once clicked on, a window overlaps the reef environment containing facts, their role and threat.  This is just one part of the website.  It offers a lot of in-depth information about reefs, corals, what can be found in them, threats and just about everything you need to know.  This site is very helpful.  

Below is a website I found on the great barrier reef.  This is relevant because part of my focus will be on the great barrier reef.  This website offers reef tours, events, facts and places to go in North Queenland.  They offer reef tours with over 100 ways to experience the great barrier reef.  This isn't the most interactive website I've found but I love the navigation and general layout.  When you hover over the orange tab headings a drop down box becomes available leading onto other related content.  As you scroll down this drop down box different images appear for different things to do which is a great part of interactivity.  Although as I said this website's main focus isn't interactivity at all but it doesn't need to be.  I think this was produced on how to deliver so much information about themselves and what they offer in the most productive way.  Below here is a good landscape photograph of a scuba diver in the reef.  This enhances the reef and enlightens it with colour.  

I love how on every page there is a different background photograph/image relating to the topic your on.  This site offers a great deal in terms of holidays, Great Barrier Reef accommodation, activities and facts.  This is properly my favourite website I have come across so far for reefs.  This is because it's easy to use, looks visually interesting and does it's job.  It is more interactive than I first thought as everything you seem to click or hover on displays an automatic image or information.  The most fascinating part of the website I found to be was the interactive slidable bar.  It reads 'What kind of getaway are you after?' then next to it is a slide bar going from Relaxed to Adventurous.  This makes this website fun and actually suits all age groups as it's fun and easy.  Once you slide the bar to a specific point like I have done as you can see below, It will list some different Great Barrier Reef holidays.  Giving you a range of activities.  For example for relaxed you get spas, chilled days out and a general layabout holiday.  Maybe more for couples.  When I moved the bar to 'Adventurous' I received action packed holidays such as scuba diving in the reef, jet skiing, jumping out of planes and even riding rapids.  The content is delivered very very well so this website has inspired me a lot.  I like the idea of using a background image at the back.  Its inviting and striking.

Here is another example of a background photograph being used as part of the structure and layout.  The colours are really vibrant making it a visually pleasing piece of design.

I have been re-searching reefs for over a week now and I think I have my main points I would like to cover in terms of content.

These are;

- Different types of reefs ( So 3 main reefs which contain different living animals )
- Global warming's effect on reefs
- Where to find different reefs located all over the world

I am choosing these 3 main topics because after re-searching I have found them to be broad and there is a lot I could state factually about all of them.  I also think they are interesting but yet to develop/think  visual elements for these.  I am continuing to research roughly through reefs to know more about them.

I'm currently looking into interactive websites to get a look and feel what I can accomplish for mine.  Remembering that I am focusing on Reefs and finding my angle.  These are the following websites I've found that inspire me;

These websites are interactive showing off their different aspects in different ways.  The audience  changes for every one.  The first is the Disney website aiming at mostly children.  The colours are bright and enlightening.  There is a fairy tale land in the back drop surrounding the graphics and button elements.  I think they have done this because the background sets the Disney fairytale scene that Disney's all about.  Being magical and mysterious.  This encourages viewers to stay on-site.  The next screen shot is of a website called 2012.beercamp.com.  We got shown this in class and it's a website about a beer camp in America just about beer drinking every year.  I love this website and they seem to be designed very creatively every year.  This site is based on a book and you open it by clicking and dragging which is great.  It's interactive and playful.  This is what everyone wants so people come back and tell people about it.  The colours are vibrant and match the background making it eye-catching to the viewer.  The folding book feature is really creative also interesting the viewer.  Obviously I can't produce something for my project quite like this, but still inspires me.

I've been looking more into reefs for my research.  I have searched into different types of reefs, where they are over the world, different animals and their habitat etc.  I am still researching into my 'angle' for this project but as i continue to know more about reefs and what they are this will soon become clear.  I knew from the start that for my iBook and website I want to include some of the fantastic colours that can be found within them.  Something to be found in my final outcome in weeks to come will hopefully be full of life and colour.

AF103 & AF106 Design for the Web and Interaction design


Wonders of Nature

Pitch: 9am Monday 25th March 2013
Crit: 9am Monday 20th May 2013
Hand-in Date/Time: 4pm Friday 25th May 2013

The Brief

To produce a piece of interactive documentary narrative which utilises a wide range of media, delivered as an iBook for the iPad and as a responsive website that will not only be displayed on Desktop but tablet and smartphone devices too.  Also producing material for a new series of publications called ''Wonders of Nature''.  The material needs to be an educational resource for L3 students in schools and colleges and this content has to be factually correct.  We will create an 'Asset Register' where we will list all of your resources and include a fully referenced link to their source.  We have to develop our own visual approach that will be consistent across the products we create.