Responsive Web Design

For this project my website must be responsive which is a website which responds to what device it is being accessed on such as desktop, tablet, or mobile. As this was a requirement for my I looked at some other websites that are responsive as examples and possibly to get some inspiration. 

The first website I looked at was Microsoft being a massive brand it's important to keep up with the latest web design features and there web site does this by having a clean modern design. The website uses a image slider on the home page which shows the responsive element of the site really well, this shows the break points of the site really as it adapts along with the caption box to suit the size of the page. 

These images show the change at the breakpoints going from mobile to desktop. They are really clean and look professional whilst keeping all the information clear and readable. So for me this site works really well and does not lose it's interactivity or navigation features. 

The website uses 3 to 4 columns for desktop size and then moves down to 2 columns for tablets and 1 for mobile which works really well for the information on the site. It would be a system I would consider for my site depending on the information on my site.

Mozilla Website - The website for mozilla is another website I found that is responsive and changes between the breakpoints really well. The website layout seen on the right has a few navigation features layed out horizontally and spaced out well across the page. It uses a three column layout after the images at the top of the page. This was a good website for me to look at because of the images slider on the page which is something I am thinking of using on my site so how this was treated at the different breakpoints is something I will take note of. 

At tablet size the page is page is very similar too the layout at desktop size. The elements and features have had their spacing reduced to make it fit. This looks fine and the changes can be seen in the menu above the image slider where the options have become bullet pointed and the log has moved to the middle. 












Finally at mobile size the website goes to a single column layout and the navigation of the page has changed significantly but the website still works well and surprisingly still has the image slider just a much smaller version which with the imagery I will be using i'm not sure would work for me. 


The navigation for the site is something I will look at though with the drop down menu appearing in the top left which shows all the options in a really professional and clean way. 

Looking at the image slider at the different breakpoints the way it is positioned on the mobile layout doesn't really work for me. It feels clunky and is awkward to use which is not something I want to happen on my site. So at the moment I think the mobile breakpoint will see the end of the image slider on the page. 













http://engage.synecoretech.com/marketing-technology-for-growth/bid/169593/10-Examples-of-Amazing-Responsive-Web-Design


http://sixrevisions.com/design-showcase-inspiration/responsive-webdesign-examples/

http://designpin.co/responsive-web-design-20-great-examples/

Colours - initial thoughts

My initial thoughts for the colours I am going to use on my website were for them to be natural themed colours and if I use a background image of the grand canyon I need to make sure the colour scheme will fit in with this or the it will look disjointed. 

For the natural colours I immediately  thought of Greens, Blues and Brown as earthy or natural colours that would link to the grand canyon well. 

The browns would link to the earth and would suit the rocky imagery of the grand canyon. 

The blues link to the earth and the sky which is often seen in the grand canyon images I looked at. However in website it is generally used on business websites so I need to be careful if I use blue. 




                                                                           The greens are linked to nature and are often used on websites that link to nature in web design so green would be a good choice but I will have to make a colour scheme that goes well with it. 




Thinking about this more however the grand canyon has a lot of great imagery so using a background image on the site could be something to look at. If this is what I decide to do the the colours of the other elements need to suit this so they fit in and do not look out of place. This could be difficult but it also means that the background offers a lot of colour to the site so all I will have to do is build on this. 

Production Schedule

One of the leaning outcomes for this brief is too create and submit a production schedule showing how I planned out my time and how I have progressed over the course of the assignment.  To do this I have created and planner showing the different weeks then within these weeks I have written what I plan to do and what I want to have done by the end of the week. 

I also created a second schedule that narrows down these tasks so that  can try to stay on top of the project by marking out these task when completed. 


Also whilst following these schedules I will be updating my sketchbook with new ideas or thoughts throughout the entire project as well as learning HTML5 and CSS3 in lessons on Mondays and iBooks author in lesson on Fridays to help with the design process later on. 

Typography Choices

For my typography I wanted it to be nice and easy to read as unlike my other projects there was going to be a lot of written content on the site. So making this a simple font that people could read seemed like a good choice. Another thing I took into consideration was that it is a web based project so I also wanted to go with web safe fonts if possible. 

With this is mind I finally settled on Futura as the the font for headings and Trebuchet MS for body text as both are easy to read and web safe and they actually look quite good. 

However for other fonts I would need in the project I went a little different and picked some more stylised looking fonts to use on the logo but not too much otherwise in my opinion it would look out of place. So I played around a little with different fonts on the logo's and I decided to keep Futura for the grand canyon logo and add in a little detail on the "the" which was a hand-written style font called Kaushan script which I thought worked really well with Futura a just gave it that type of logo feel which separated it from the headers on the site. 

Finally on the wonders of nature part of the logo I wanted a natural style font so I went for something that gave me a slightly tribal or jungle feel to it which was a font called skia.

Here is a screenshot of my choices for the project but as I have explained my final choices were- 

Futura - Headings 

Trebuchet - Body text

Skia - WoN logo

Kaushan Script - Grand canyon logo

Planning for Pitch

As this is a big project the pitch for it will be big and have a lot more content than in previous assignments so planning for this will be really helpful and working out what needs to go in the pitch will mean I can create it as I go along doing the work. 

List for Pitch

·      Research

·     Into assigned category

·     Brief overview of content and what website/eBook will focus on

·     Source of content

·      Technical Research

·      Visual research

·      Colour Schemes

·      Typography

·      Visual style

·      Visual elements

·      Idea development (for eBook and website)

·      Wireframes

·      Navigation plans (for eBook and website)

·      Asset Register ?

·      Media I am going to use(images/videos etc.)

·      Sketches of mockups at breakpoints

·      Sketches of logo and header designs

·      Interface designs

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