Organisation | Schedule Pt.2

Schedule pt.2

Yesterday I pitched my ideas and as you can probably tell from the previous post I was very happy with the outcome. I have now written up the second part of my schedule. This details what I'm going to be doing over the next 6 weeks up until deadline day - 24/05/13. I have allowed myself an extra day each week to complete certain parts of my work e.g. week 8 i've allowed myself 3 lessons for section 1+2 to be completed. I think it will only take 2 days but if I allow for 3 days i've got time to overrun if things don't go as straight forward as they are planned. If i do complete all my work without the extra time then I will simply proceed to the next days schedule and work at that. This will mean everything will shift a day or so backwards allowing for extra time before deadline day.

Design | Web Background

http://i.imgur.com/qgpld.jpg

http://www.wallpapersmarket.org/wallpapers/2013/01/Tibet-Everest-1800x2880.jpg

I started manipulating some photos that I could possibly use as website backgrounds today, using Lightroom 3. I have made them black and white, and heightened the contrast as well. I then began to retouch the bottom of the photographs so that they would be easy to blend into a dark grey/ black background in Photoshop. They would then be ready for use on my website. 

I'm not sure if im definitely going to use either of these but I thought it was worth while doing them as its a big part of my website. 

Planning | Website Wireframes

Mobile

Tablet

Desktop

Today I've been working out the order of hierarchy for my website at each different breakpoint. Above are some simple illustrations that show the order in which the different elements will flow. Naturally there will be more elements than this on the page, but this gives a pretty decent overview of the order I intend on using.

I stumbled across a view different issues when I was thinking about where to fix my navigation. I figured it would have to be on the left so that it wasn't in the way of the websites content at much as if it were in the middle. I then thought about applying a hover/ click state to it which would allow it to be out of the users way until they needed it. A site that I referenced earlier in this blog (http://www.fleeangrybear.com/) uses this tactic and it works perfectly for both desktop and tablet breakpoints. When it comes to mobile navigation I will ditch the fixed navigation and have it simply sitting at the top of the page, with a "scroll to top" button in the bottom righthand corner as the navigation is going to be too large for use on most mobile screens. 

Inspiration | Monochrome Web Design

Source: http://www.toby-powell.co.uk/

This website for has a great use of texture which adds to the visual style without adding an extra colour. Its an interesting concept I'd never considered before, but one that I will definitely be able to use to compliment the film grain texture i've used already in the logo.

I've also had to change the ideas for my website. Due to it being responsive I won't be able to scale the divs that hold the information, as this would cause the information to be unreadable, rendering the technique of responsive web design completely useless. Fortunately all is not lost though as I can continue to use this design in my iBook. I will in my next post have some new wireframes to talk about.  I'm currently thinking full width background of a black and white mountain scene with around 80-90% width divs holding my content in place. Something like this:

Source: http://creattica.com/logos/emiar-visual-identity/91575

Inspiration | Typography

Source: http://www.bklynsoap.com/

Source: http://www.bklynsoap.com/

This is the kind of imagery I want to work with, black and white with a vintage feel. These screen shots were taken from Brooklyn Soap Companies website which has inspired me to use "Giorgia" as my heading font. Its also made me consider the line spacing as it makes the text a lot more readable - not something I would have thought about had I not stumbled upon this website.

Design | Navigation

Here's an illustration of my initial navigation. I came up with this idea when I was thinking about the content in terms of altitude as the air pressure changes as you get higher or lower. It is very rough, and the scale on it hasn't been considered at all yet, its just a good visual representation. I think it fits in well with my visual style that I've come up with so far as it utilises the same font and art style that my logo did. 

Development | Logo

 I've added the brush style to the "x" to complete the design. I'm definitely happy with this now and I will be using it for my pitch.

It was also suggested that I try to make the outlines of the mountains meet up, but I've tried this out above and I don't agree that it works at all. It takes away a lot of the shape from the logo and makes it look flat. 

Here I've darkened the outline, I like this but Im not completely confident in it yet because I think it could be a bit dark. 

Typography

After doing my first logo designs I've decided to consider some other fonts. I discovered something very surprising that I didn't think was going to happen - a serif font worked really well with my clean design, it contrasts and compliments it without being over powering. I think it adds an essence of formality too. I've added a brush texture over the top of it in Illustrator to match up with the grain on the logo. I don't know the font name, as its in an asian language, but I know its the 3rd font down in the asian font section on Illustrator cs5. 

If I'm going to definitely go ahead with using this serif font I will then continue this style through my heading font, and then use a more legible sans serif font for sub headings. I'm thinking of using a system font such as "Palatino Linotype" as this will pretty much guarantee that the font will be viewable on every different computer. 

Inspiration | One page

This first website is for Brooklyn Soap - It features an auto scroll down feature leaving you just enough time to have a look at the logo, and then you're fed a bit more information about the company.

Here is Chris Connolly's personal website - He uses a parallax function to allow for the background to scroll at a different pace to the divs that are placed on top. I think this is a great idea, and something that could be potentially helpful on my website. 

Research | Existing 1 page websites

As I declared in one of my previous posts I'm pretty certain I'm going to design my website as one, singular long page. With this in mind i thought it would be important to look at some existing one page websites as part of my preliminary research. It is also important to include such ideas in my pitch as its a big part of my design decisions. I won't be analysing every website in the same way, I will be only commenting upon which features are relevant or that I'd like to incorporate into my design. 

Source:http://www.gloriakozma.com/#/homepage

This is exactly how Im looking to display my website. A large image background on start up with the logo, and some supporting text underneath it. The navigation on the left side of the page slightly padded  on the left side to give it some breathing space. The bubble on the right represents where I'm going to place added information about Mt. Everest upon clicking a link. 

Source: http://www.teamnine.ch/screen.html

I really like this idea of having clouds, supporting text and the websites logo as the starting page. Although the colours aren't exactly what I'm looking for, its a clean cut style. I'd like to use this idea of having clouds to start off with in my website, and possibly the iBook too as the clouds would be above the mountain (in both reality & visually on the page) and so it would have a sense of beginning the journey downwards starting from the top. The idea of having a photograph of clouds, and then blending it into the vector style mountain could work really well I think.

Source: http://luke.so/etive/

 I'm not sure I'm going to do this, but it was definitely worth mentioning anyway. I have zoomed out to take this screen shot in order to show you how the pictures float over the lines between the divs on the background. This works well when you're zoomed in, and entices you to scroll down further to view the next section as you're subtly handed a visual taster. 

Source: http://www.colorsofmarketing.com/

The navigation shapes and icons on this website are fantastic, with the added drag and drop feature its a really fun and interactive tool to use. I think drag and drop would be fantastic, although at the moment I have no idea how to technically apply this to a webpage, let alone a navigation system.

The two sites below were chosen for analysis because I really like both of their colour schemes, one of them being vibrant, bright and airy. And the other being clean, minimal and classy. I can't decide in myself which would work better. I think the colours work better to attract people in the first instance, and its by far more common to see a bright array of colours for websites aimed at a younger audience. So would a minimal colour scheme with a splash of colour work as well for an educational website for 16yrs+ as they have a different taste...? It would, in my mind, make it far more fashionable and it would definitely be a different take on things, but whether or not its suited to education I don't know.

Source: http://joyndaycareapp.com/

Source: http://themecobra.com/

Inspiration | Logo

 Source: http://creattica.com/logos/emiar-visual-identity/91575

Source: http://www.behance.net/gallery/Fils-de-fer-Souvenir-14-18/6936613

These logos are my early inspirations for visual language, as well as logo design. I like the mix of an off white and charcoal black colours in the bottom logos, and the cleanliness of the top  image is quite a contrast but I also like this. Maybe a mixture of textures and colouring from the both would work really well.

Design | Logos in Illustrator

Here are a bunch of different logo designs i've come up with. I've used a typeface called Quicksand in its 'light' weight. I've played around with different weight strokes on the mountains, as well as different colours and grain effects. I really like the film grain effects as it adds an element of interest to a rather flat image.

 I think the design above highlighted by its size is the most successful so far. I've used a 2pt weight stroke and a film grain effect to give it another dimension that other vector images don't have. I think the simplicity of it will quietly compliment my website and iBook style. I've used an "x" below the main text to give it something to sit on as I felt the design without it (top right) felt a bit bare and didn't flow well. I think that the typeface could do with being played about with, as I haven't looked at any different fonts to see if they work any better. I played about with the layout of the text and mountains and I've concluded that  I much prefer the mountains holding the text up as it puts the series before that subject. Which I think in terms of visual hierarchy works a lot better than having the image on top of the text. Also, the text stands out far more when its on top due to the way we read things left to right, top to bottom. I find the mountains don't detract from the typography in the same way when they have a shape, such as the "x" i used above, to work as padding in between. 

Work to be done for the logo:

• Dull down the film grain slightly as its too intense
• Experiment with different font faces
• Confer with class mates about the design, see if any adjustments should be made

One page websites

source: http://www.bulletpr.co.uk/

Bullet - A London/ Brighton based PR company 

source: http://www.agcchicago.org/netpositive/

The Academy for Global Citizenship - A Public Charter school based in Chicago



Both of these website are single page designs, with as you've probably already guessed, all the information is on a singular page. I really like both of these designs, they lead you below without having any button/ text pushing the eye downwards. I like they way you can only see the tip of the iceberg as it were making you want to go further down. This is something I'm going to refine in my design, probably having a small tip of a mountain top creeping onto the page, tempting people to go further in. The idea of having a single page design is quite modern, and fashionable in my eye, and to successfully pull it off in both visual design and usability is my goal. Im thinking of utilising a jQuery smooth scroll function for navigation on my website. This means that there is a smooth transition, and a chance to see things on the way down that you might not otherwise see if there was just a traditional transition. 

Research | Content in detail

I began my basic research by saying I would like to look into these:

• What animals are found there
• Plants that live there
• Soil types (if any) 
• Air pressure/ Density
• Percentages of gases in the air
• Rock types
• How they were formed

After some consideration I've decided to go with this list:

• What animals are found there
• Air pressure/ Density
• Rock types
• How they were formed

Its only slightly shorter, but it concerns me that i won't be able to get the content together quickly enough to get the design on its way before its too late. 

Organisation of information will go like this. Air pressure and density will be part of the navigation, shown through a PSI gauge on the navigation as well as height above sea level. Animals, formation and rock types will be all part of the main content of the products.

Heights, wind speed, air pressure/ density, Rock types,- 

http://en.wikipedia.org/wiki/Mount_Everest & http://www.teameverest03.org/everest_info/index.html

Source:http://en.wikipedia.org/wiki/Mount_Everest

Although many claim it to be unreliable, there is a large bibliography at the end of the Wikipedia page to back up the information displayed in this web page, and with a wealth of information available with such ease I think it will have its uses. Team Everest webpage has some interesting information about the routes up the mountain, and general information that might be helpful to show in my product.

Mountain formation etc -

http://www.britannica.com/EBchecked/topic/197160/Mount-Everest

Source:http://www.britannica.com/EBchecked/topic/197160/Mount-Everest

The Britannica website is by far the most reliable source of information, and as the brief states our information must be "factually correct" I will rely on this source the most. It is by far the worst source in terms of usability but its the biggest source of information I've found to date with 14 pages stacked with information on Everest and its Geology. 

Developing ideas | Website

Source: http://www.aidandore.com/Cousin-Creative

I've come to the conclusion that I'm going to definitely use the vector art style featured on the Cousin Creative website that was designed by Aidan Dore. It has a subtle texture on it that I think gives it a semi realistic feeling, its not too clean, and it gives a rocky kind of look to it. The depth created by the slight shadow around the snow at the peak gives it a 3d look that I also really like.

I've also been thinking about whether to just have a singular mountain, or to convey the different heights through a small mountain range of say 5 or 6 different height mountains. I think it would work well, but I have an issue then with my subject are as it specifically targets Mt. Everest as an eco system, and not a bunch of mountains. It could cause some confusion. I will clear this up by asking my classmates in our next class to see what they think about it.

Inspiration | Click Button Start

I really like the idea of a click button start for the website. It looks really professional and I love the way the button then lines up with a shape in the navigation. Its definitely something I'd like to use in my website to start people on their journey up/down the Mountain on my page.

Research | Responsive web design

Source: http://www.microsoft.com/en-us/default.aspx

Source: http://www.microsoft.com/en-us/default.aspx

Source: http://www.microsoft.com/en-us/default.aspx

Source: http://www.microsoft.com/en-us/default.aspx

The brief states that I need to make a responsive design in order to answer one of the objectives of this assignment. Responsive design means that whether you're viewing it on a a mobile phone screen size, or on a 21inch desktop monitor you won't have to scroll horizontally. By stacking elements in a hierarchal order using CSS styling, the designer can create a website that fluidly moves as the screen size gets smaller or larger. With the majority of people only ever accessing the web from a mobile device, be it a tablet or mobile phone, the development of responsive web design is something very important for the future of websites. No one wants to have to scroll about too much to get the content they want.

Inspiration | Angry Bear website

Source: http://www.behance.net/gallery/Angry-Bear-Site-Illustration-Design/6346717

This is a website illustrated and designed by Brian Miller. Its exactly what I was envisaging my website to be, one page with a large illustrated background with elements over the top to support it.  The navigation is exactly how i imagined mine being, too. It is left aligned and is fixed in view as you scroll down the page. There is an extra feature that I really like about the navigation though. It is hidden until you scroll down slightly and are in need of it. I think this is fantastic idea and one that I will be experimenting with.

Nav before and after ^

You can see that the navigation has opened in the image on the right. 

Research | Which path to take?

Source: http://www.mounteverest.net/story/stories/ChomolungmaNirvana-theRoutesofMountEverestMay292004.shtml

Heres a map i found on the Everest Climbers website. It details the routes people take up the mountain, and where fatalities have happened before. When you click on the numbers for a route, or the scull and cross bones icon a pop up appears showing you extra information about the route such as the number of fatalities and the dangers along the route. It also shows the amount of summits you will climb, and who were the first people to complete the route and when. All of this is going be very interesting when it comes to choosing a route to detail in my product.

Sources of Info | Everest

I've found an excellent source of information for Animals on Everest. Although it doesn't give the exact heights they can live at, it gives me a direction from which I can research further:
http://mounteverestmethm.wordpress.com/animals-found-on-everest/

Another fantastic documentary by the BBC about climbing Mount Everest:

http://www.youtube.com/watch?v=HlAiU5fIaKY

A David Attenborough documentary about the Himalayas - Part of the Natural World series on BBC:
This doesn't specifically address Mt. Everest but it gives me a good overview of what it living on the Himalayas  and it does have some interesting points about Mt. Everest.

http://www.youtube.com/watch?v=fWtE4jT5c7o

Assets | Screen Capture

After some searching I've discovered you can do high resolution screen captures using an app, already installed on all versions of OSX, called Grab. It is simple to use and gives you the resolution that your screen is displaying at which is perfect. I know the images might make my website quite slow if they're really large, but I can always resize them in Photoshop if need be.

Assets | Photographs

By simply searching Google for "Mount Everest" I've managed to find this interactive panorama which was created by GlacierWorks, and compiles 477 images to give you a real sense of being there. The goal is to show people how global warming has effected the area, and to give them a view of the landscape that was never available before.

Link: http://www.dailymail.co.uk/sciencetech/article-2250676/Mount-Everest-The-incredible-interactive-BILLION-pixel-image-created-David-Breashears.html

This opens up another doorway for me in this project because it means I could now do what I previously thought was going to be an impossible task because I have access to these images. The only issue would be how can I capture them from the panorama? Because I know I can't capture screen shots at high resolution.

Inspiration | Website

Above are 3 websites I really like the imagery of. After seeing these I was pretty certain I'd like to go with a clean cut/ up market feel website but...

Then I found this whilst searching through someones User Interface blogger. This really threw a spanner in my certainty about the look and feel i wanted for the website and iBook because if I felt so certain about the first one, yet the second still seemed like a really good idea. 

It seems like such a good idea because I've found it difficult to find any image of Mt. Everest that is big enough to actually zoom all the way in and no pixilate. I've also found it difficult to find any portrait photograph suitable for my idea of having a background that spans the full length of a web page, or iBook document. Most large (above 10megapixel) images I've found of Everest are landscape, which would be fine if I didn't want to start at the bottom of the mountain and go upwards. It would require quite a lot of time to make the background images for each section, but once completed I think they would be very effective. I don't feel the need to have a realistic image, a relatively detailed vector would be perfect. 

Another idea I've thought about is following a common path up the mountain that most explorers who've climbed it have taken. I think this would be another interactive feel.