Website Research

In this project I must create a consistent visual style across my products so I decided to look into existing website that interested me visually to get inspiration about what direction I want to take my site it. 

The first website I looked at was a site for an illustrator which I really liked as it was clean and professional but also very visual. The white space on the site is used really well and emphasis the elements on the page really well and the slight textures on this give it a nice visual element.  The simple black and white colour scheme works really well and colour is added by the imagery on the pages. The red at the top stands out and this colour is also used for the hover effects which is clear and effective, the design of the site is really good in my opinion. The lines which go above and below the navigation and title break these elements up really well and visually separate them from the content below, this is definitely an idea I will look at when designing the visual style of my site. The colour scheme is not something that would fit my site but making the background of the content transparent so goes in the main background of the site would be a something to look at. 
Link - http://www.circografico.com.ar

Main Content

Footer

I was already thinking of using an image image slider for the home page of my site for a few reasons so the next site caught my eye as it was a different look and style to the other image sliders I had seen and pictured in my head, as well as this the overall site had a really good look.

The image take up the whole width of the page which I think could work for my subject as the grand canyon has some great imagery to go with it. The slider also has arrows to skip to the next image and a caption box to with it in the bottom left both of which i think are great little additions which would help the suer on the site. The skip button could mean they could move between the images at the own speed rather than waiting for the images to skip themselves and the caption help inform the user and make sure they know what they are looking at. If I do use an image slider on my site then looking at this as an option would be a good idea. 

the rest of the site also works well in my opinion the header and navigation fit into the top of the site really well and the colour change separates them form the rest of the site well on top of this they are spaced really well and look professional. The content below the image slider is in a three column layout which gives the website a good structure and layout. 

Mobile

Another bonus of looking at this site is that it is responsive which helped me get some idea about how to treat and image slider when going responsive. The website abandons the slider at the tablet and mobile breakpoints and goes two column at tablet size and one column at mobile breakpoint. The navigation also works well in the different breakpoints first reducing the space but staying horizontal on the tablet, and goes vertical for mobile. It works really well and flows between the breakpoints really well. And the image slider is sacrificed for this which in the hierarchy of the page made sense for the designer. 
Link - http://trufcreative.com

Tablet

Choosing the Focus

For the focus of my products I looked a lot at the different elements of canyons as well as individual ones. From this I decided that focus on the grand canyon, I did this for a number of reasons. 

• A wealth of information - Whilst researching the grand canyon I found loads of resources and content that could be used in the site, the resources ranged form images to sound effects, and the content or research I found had how the canyon was formed and the theories behind this, dating it back to when it was created as well as information about the environment around the canyon and the wildlife that can be found here as well as much more. 

• The most famous canyon - The grand canyon is easily the most well known and famous canyon in the world which links back as to why there is so much information available about it. With being the most famous canyon it has an interest in it and is also the most interesting and is the largest and most documented canyon. 

Overall I confident the grand canyon is the way to go as there are many topics to explore, some of which would not be available if I was focusing on another canyon or canyons as a whole so content is not a problem and the resources available will help a lot. 

Navigation Structure Research

I will be creating a website for this project so looking at the different navigation structures out there would hopefully give me some inspiration into what I want my navigation to look like and how I want it to work. My initial thoughts were to make the navigation as exciting and unique as possible although I have no solid ideas on this yet. 

With this in mind I started looking at existing navigations that are visually engaging but also work well. First off I found a blog that had a navigation which looked like it fitted on the page and was not blatantly obvious it was the navigation of the site.  

The home page looked like this with the HBPA in the top left being the navigation it's fairly basic but I like it because it's unique and not something I had seen before.

It showed the first letter of each part of the navigation and had a hover effect to add more of a visual element to the website. The colour were different for each section and the full word appeared next to the navigation when it was hovered over. I like the idea of this navigation structure as it's eye- catching and fits the pages of the site well. However I don't think it would be useful on my site as the capital letters of each section could be misleading and if the user doesn't know what they stand for they have to hunt for what they want to find. 

  

www.skialpine.com - Drop down menus

The next navigation bar I looked at I really liked as it used drop down menus in a really good way that suited the visual style of the whole site. They also appeared as part of the background on the site which I think works really well and keeps the navigation visually engaging. 

The menus dropped down when the topic is hovered over, these have a slight shadow effect to show what you are highlighting. The menus themselves appear as if they have just been pulled down and the slight shadow at the top of adds to that effect. I wanted to use drop down menus in my site initially but after looking at the possible options on my site I don't think this will work. 




Candccoffee.com - Animated Navigation 

So these were the basic navigation structures I found and liked that were fairly simple yet looked good, so I decided to look for some more unique looking example of navigation that were better looking visually. I found the candccoffee.com website which and a really good looking animated nav bar. The home page initially has no navigation as it animates onto the screen from the top as if it was falling onto the page as shown above. 

It then bounces and dangles there for the user to use and also has hover effects, the navigation never stops moving on the page which adds to the animation. I like this style as I think it is dynamic and it does not overpower the other elements of the site or force itself onto the users. With the hand-written fonts and elements on the site it also has a personal or friendly feel to the user. However whilst the navigation looks good and is unique it is also not really practical if someone was using the site for a long period of time as the animation happens on every page and to me this would become annoying. I still really like the way it works on the site but as my site is educational and aimed at college student I don't think something like this would suit it. 

The Grand Canyon Map Resource

Whilst researching the grand canyon I came across a few interactive map resources which would be a useful addition to the site if I decided to focus on the grand canyon. It would add a level of interactivity t the site and would be a way for the users to walk themselves through the grand canyon rather than just having everything explained to them.

Link - http://travel.nationalgeographic.co.uk/travel/national-parks/grand-canyon-map/

This map has the option of aerial or road views and would be a good feature to have on the site to show where the grand canyon is and the different sections of it so the user can walk themselves through and read about the areas they are interested in, it is also a lot more interactive than just putting up and map image of the grand canyon.

Researching Canyons

I began researching into canyons so I got a better understanding of what my subject was as well as hopefully getting some ideas in my head about what the products will look like and what they will be about. I decided to mix up my research between my blog and my sketchbook so I decided to look at the different canyons I could cover in my sketchbook and here on the blog look at the other information about canyons as a whole. 


How they are formed - 

My first piece of research was to find out how canyons are formed searching for this I found a lot of articles explaining they are created by erosion over time, erosion is the wearing away of the Earths surface primarily through water.  There is a lot of information and resources about this part of the topic so this could potentially be a section my products will cover, I could talk about the process of erosion (how and why it happens) as well as this I could talk about the time of this process and dating canyons to when they were formed. I could also go into detail on one or two canyons and how there formed too act as examples on the site. 

I found some really good resources on this and these also had links to further information if I choose to use this topic on the site. 

Potential topics -
  
   - Erosion 
   - History

Links -
http://www.scienceclarified.com/landforms/Basins-to-Dunes/Canyon.html#b

http://creationrevolution.com/2011/07/how-do-canyons-form/

Canyon Shapes - 

I also looked into the shapes of different canyons and explanations into this I found some good resources for this also explaining that canyons are diverse in there forms and that there are loads of different ways to define canyons such as rocky, steep, narrow etc. As well as looking into there depth and width. This links into the two main different types of canyons, these being plateau canyons and slot canyons, plateau canyons are formed on a plateau(basically a high piece of ground) and slot canyons are not open widely like the grand canyon for example and are often hidden beneath ground. 

I think there is some really good topics here that I could use on the site talking about the main types of canyons giving examples of these and explaining the shape and look of each type. As well as this I could go into the way these different types are formed, and talk about plateau level, and the different rock types in canyons. 

Potential topics - 

    - Plateau Canyons 
    - Slot Canyons 
    - Mixture of Both 
    - Plateau level 

Links -  
http://www.scienceclarified.com/landforms/Basins-to-Dunes/Canyon.html#b


Submarine Canyons - 

Another topic I could base my products on would be submarine canyons which are essentially underwater canyons. I found some really good information and articles which talk about this and explain that they are Narrow, steep-sided underwater valley cut into a continental slope Submarine canyons resemble river canyons on land, usually having steep, rocky walls, they are found along most continental slopes.  

So I could talk about the history and origin of a submarine canyon and go into detail about different views and opinion from scientists on these and the actual science behind them. 

Potential topics - 

   - History/origin 
   - How / why formed 
   - Different ones around the world

Links - 

http://www.wired.com/wiredscience/2011/11/ideas-about-the-origin-of-submarine-canyons-from-the-1930s/

http://www.eu-hermione.net/science/submarine-canyons

Subject for Products

The assignment revolves around the wonders of nature and so this is what the website and ibook will be about. As a class we were given around 15 categories to choose from such as earthquakes, glaciers mountains etc. I ended up with canyons which I don't think is a bad subject and there will surely be some interesting topics in this to base my products on for example I could focus on one particular canyon such as the grand canyon or I could go into how they are formed looking at the erosion or mix up a few different pieces of information for the products. 

So my next step is too start researching further into canyons until I find what I really focus my products or as mentioned above if it will be a mixture of info from the category. I don't know a great deal about canyons so hopefully I learn a few interesting things and start planning how this all fits into my products.

The New Brief

On monday I was given the new brief for the next assignment this include two modules and is titled wonders of nature. The assignment is to produce a ibook for the ipad and a responsive website for desktop, tablet and mobile, the products are educational resources which will be aimed at L3 learners so 16 to 18 year olds. The content must be factually correct and be engaging  for the user using a wide range of media and interactive elements, as well as this I must develop a visual style for my products which is consistent in both the ibook and the website which make the products visually exciting. 

The brief for this project included a list of what my products must at least contain : 

• A robust and user-friendly navigation system.
• Content to include: text, images/illustrations, sounds and moving image. 
• Animated navigational elements to accompany the content and enhance the user experience.

A   As well as this this the website must be using a "responsive navigation design" , for actually designing these products I will be using iBooks author to create the iBook and and hand coding my website in Notepad++, BBedit, Text wrangler or something similar. To create the website I will be using HTML5, CSS3 and media queries for the responsive elements of the website. It is also possible to use jQuery for further interactivity. 

      I will be planning the project and showing the design process in my blog and sketchbook throughout the project, showing research, idea development and mock-ups for example.  I will also be creating a production schedule and Asset Register as part of this project as a requirement of the brief. 

      I will be pitching my research and ideas on Monday the 25th march, including my contents and design solutions showing visual styles navigation plans, wireframes etc. I will crit these products on 20th May 2013 and the deadline for this project is Friday 24th May 2013. 

     Overall I am looking forward to getting into this project as I think designing the website and iBook will be interesting and also a good learning experience as I haven't used iBooks author before or created a website all out of hand code.