Coding

I have officially started coding. It is a lot easier, less daunting and more fun than I had imagined. Before I started, flashbacks of my nightmarish experiences with Dreamweaver and Photoshop in the last web project I undertook came flooding in however, hand coding is far easier. You are in full control of what is happening and, more often than not, if something has gone wrong you have typed it recently and it can be found and fixed quickly. No one or nothing is holding your hand and "helping". It's all you. If something goes wrong, you've made a typo which can be easily fixed. I loved this about hand coding . Also Brackets is excellent with a capital E. So happy I downloaded it!

I started out by preparing the logo and nav elements in the page. As they were really all I needed to worry about right off the bat. I then put in the links onto the nav:

As you can see there are two logo's there. I knew that when I got down to mobile size changes may have to be made and so I entered this as a precaution and made a file path up that I thought would make sense as somewhat of a placeholder. After this was all written out I then jumped into the CSS and got it all looking how I envisioned it.

Both graphical elements are PNG's exported from Photoshop. This was the only way to get these elements looking right I think. Trying to build them in CSS would have been a nightmare. The only thing live is the nav links as that is a necessity. I will only address problems and challenges with the code in my blog from here on in because for the most part the majority of coding will be equal in challenge and demand as this.

Brackets

It may just be me being finicky, but I didn't want to use text wrangler for this project. Text wrangler was the program suggested by my tutors (and the one supplied on the uni machines). I thought it seemed a little clunks and I didn't really like the interface and flow to the program. I decided to search for an alternative. I had heard of some of the famous ones such as sublime text and BBEdit but they looked similar to Text Wrangler and a bit daunting. That coupled with the fact that there was an eventual cost tied into them put me off those as well. After a bit of searching I stumbled upon Brackets by Adobe:

Source: http://brackets.io

This is a new program that isn't really used to extensively in the web scene as of yet and is still in beta. It is free and looks very user friendly and intuitive. And that is the key thing. Intuitive. I have never delved into web coding before except for briefly dipping my toes into Dreamweaver. I wanted something that looked nice, worked well and was reliable. Adobe encompass all of those traits. That coupled with the screen shots/videos on the brackets site made it a sure thing. It colour codes all of the assets in a really clear way. There are shortcuts to see the CSS in the HTML page and to actually live update the site in chrome whilst you are editing in Brackets. One of the key aspects that drew me to the program however was the colour selection. You just type out an RGB or HEX value into the CSS and then click it and press command+D and you can see a full, extensive colour selection toolkit. This was one of the main aspects that drew me into this program. The ease of use without dumbing down or compromising any of the more sophisticated features. It's the little things like the colour selector that make a big difference for me.

I have downloaded the program and will use it to build every aspect of my website.

Nav Progression

After designing my logo it inspired me to finalise the design of my nav element in a similar fashion. I really liked the flowing ribbons I had created at the bottom of the logo badge and I wanted to apply a similar effect to the background of the nav element to create somewhat of a visual focal point. This is important because I plan to have my nav element be sticky. This means that it will scroll normally until reaching the top of the page at which point it will stick and stay the top of the page, over the top of everything else.

I originally had somewhat of a stringy design for the nav which I wanted to thicken out and bring to life. After playing around with the design of my logo and adapting the techniques to a flat banner (as apposed to a curved one).

I managed to turn this:

Into this:

I much prefer the graphical style of the second design. I prefer it's blocky style. The way the flowing is conveyed and the overall look of it. It fits infinitely better with the new logo and creates a strong visual impact. The only problem I foresee having to overcome is the issue of scaling. The element being a rigid size cannot really be shrunk as it will throw all of the proportions off and lead to warping and other nasty side effects. I may have to re-create a version of this using CSS at a later date that will scale smoothly to smaller sizes. Luckily the main body for the nav isn't too complicated so that shouldn't be too challenging. 

The shadow underneath I added in Photoshop because the shadowing tools within CSS3 are somewhat limited and I couldn't get this level of specificity within the shadow using the rules I can apply. The shadow will help to blend elements beneath it in a realistic and intriguing manor.

Logo Evolution

I only prototyped a logo for the mock up. With the new look and feel that I created I didn't think that just plain text would suffice. I think that a bit more of a graphical impact is required for the logo and a bit more graphical separation between the headings and the logo. The new layout & colour scheme luckily has freed me up to be far more adventurous in my graphical endeavours. I originally used the font Gotham HTF for my logo due to it's thick, impacting, bold yet modern and sleek style. The font still looked nice and had all the characteristics I was looking for with the new design however, I thought that the font alone wasn't popping that's why, in the mock up, I put an inner shadow on it to try and bring it to life:

I did this because it adds a little bit of life into the word and draws the eye and it also ties into the theme of the ocean in a very subtle, not cliché way. I liked the idea of subtly using depth to link to the ocean. Instead of trying to make ineffective water graphics and implementing them. I instead subtly used depth through shading certain elements. I wanted to make it look as though (in the example above) the title has been pushed into the background and it actually sitting back in space. I also wanted to make the nav element sit on top of every other element both physically and graphically and also push video and images etc. out from the background. This would create discernible edges and borders without using solid colours or jarring visual elements. It is soft, subtle and effective.

Back to the task at hand. The logo wasn't quite doing it for me. I could imagine it with other elements on the page all utilising the idea of depth through shading I just discussed. It would become somewhat lost. This made me want to revamp it and really make it jump off the page (as I also wanted to later, use it as a link to the homepage). I took the pink colour I had already specified and ran with it. 

My goal from the beginning was to move away from the utilitarian, boring, black and white imagery usually associated anatomical and scientific learning and replace it with a more vibrant, exciting, cartoony feel. Having recently progressed from an A level course myself I could really see that style being effective for me and so I feel confident it would appeal to the companies target audience. To tackle this I wanted to go with a kind of childlike feel that would have a strong visual impact. It would also soften the figures and information given and allow for some quite creative graphical liberties.

With that in mind I brainstormed logo ideas that would loosely tie into the childlike nature I just envisioned. Something that quickly arrose was the idea of like a scout's badge. Something that would be stitched to a uniform and show they had gained the knowledge that the image related to. I started playing with the idea until eventually finalising this as my complete logo:

I am really happy with how it came out. I think it balanced sophistication and modern style with childlike flair very well. The banner beneath the badge adds the sophistication and graphical competence. The badge itself brings softness and childlike joy. I really like the juxtaposition that comes along with making the vector style which is really cartoony, smooth and digital represent such a tactile, physical thing. It works really well I feel.

A Change of Heart

After my pitch I decided my design was not up to scratch and thought the best way to highlight areas that needed addressing was through the use of a mock up. 

I used a combination of Illustrator and Photoshop to create my website to the specifications I had outlined in my pitch and used basic shapes as place holders to video/images. I immediately felt the website wasn't working. The main issue I felt was the colour scheme. It was bland and brown and muddy. In the style tiles and small segments I had constructed previously this wasn't as apparent to me as there wasn't the sheer quantity of brown on the page so It didn't overwhelm the eye. I did like the idea of contrasting colours throughout however, as it enabled me the ability to create focus and be able to add emphasis to certain points. The orange and blue worked well for this. Blue is obviously the colour of water and the first thing that pops into your head when you think of the sea. 

Blue is a primary colour. To find a complimentary colour to a primary colour (with an RGB colour space/wheel) you simply have to combine the two other primary colours. The colour that creates is a secondary colour. This is because it is the combination of two primary colours and thus is a tier down. If you create a colour wheel containing all the primary colours in an RGB colour space and all the secondary colours they produce then you can see all the complimentary colours visually as they are exactly oposite each other. This makes it visually intuitive to pick colours and you know they are complimentary as this technique was developed by artists and has been common place for years.

Here is an example of a colour wheel showing complimentary colours:

This is a rather crude representation of the theory however, I feel that it summarises the point perfectly and shows all the major complimentary colours. Of course this is only ballpark figures and there is a considerable amount of wiggle room within these parameters. You can select nearly any value of blue and orange and combine them and they will look good together. I know this combination of blue and orange works as it has been used in cinema and 3D animation an enormous amount. It is one of the most common (if not the most common) lighting set up in cinema and has really come into it's own in recent years. It works so well because both the colours contrast and so do their meaning and connoted emotions. Orange is warm and comforting while blue is cold and sterile. This creates physical, mental and aesthetic juxtaposition which just works in every aspect. This validated my choice in my eyes and I knew it was tried and tested.

All of these factors made me think that I definitely wanted to stick to complimentary colours; I didn't want a quantum shift to mono-chromatic or anything and I did want to stay within the blue range in complimentary with orange however, I couldn't get the orange to look right. It was a little too much and looked gimmicky. After some tweaking and trawling the web for inspiration I eventually tried a pastelle pink against quite a soft blue and was really happy with the results. It is on the very edge of complimentary colour rules as it is technically closer to violet that orange however, it does still work with aesthetics due to the high amount of white in both colours. It softens them and ceases the harsh contrast making it nicer to look at and blend better. Adding white values to the orange didn't have the same effect and didn't speak to me in the same way.

After a considerable amount of toying I was eventually able to convert this:

To this:

As you can see there are similarities between the two. The font face and spacing/metric style of the faces are similar the main changes come in the form of colour and background flourishes. I thought that the colour alone didn't do enough to really create interest and dynamism to my design. However, it did allow for a far greater amount of flourish and detail within it I felt. The pink and blue really opened up a whole new art style as it was fresh, modern and exciting as apposed to boring, old and quaint. This allowed me to toy with the ribbon idea and other pushed in and pulled out ideas. Both of which added subtly to the ocean theme with very small, yet present, ties to depth. 

Overall this colour scheme and metric change looks drastically different however, it still shares almost all of the themes and ideas that I was so hell bent on including in my original pitched idea. It is simple. That was always the main goal to aim for. I wanted a website and iBook that would be simple to navigate. Easy to use. And aesthetically pleasing. My original idea, I see now, was overly simplified. The colour, the layout, the font, the amount of images/rich content and the little flourishes were all kept to an absolute minimum. This was something I was aware of when re-designing and I wanted to leave as many of those aspects as I could untouched. I think I have achieved my goal of updating the look and feel of the site whilst only really changing the colour a little, adding a little more focus on rich content and adding background flourishes and detail. Everything is still presented in more or less the same manor and the feelings/emotions evoked (although being slightly cooler as aposed to warmth) are the same. The designs are both clean, sophisticated, modern and minimalistic. I do feel as though the second design is just much more striking. The aesthetics work better and it echoes back to the content far more. It is the colour of water and the borders around the video and shadowing throughout really echo back to a theme of depth which is in my eyes the main thing connoted with the ocean.

Pitch Feedback

My pitch went well! Everyone seemed to like my designs and the direction I was going. The structure was good and the content interesting & appropriate. There wasn't a large amount of feedback or a vast spectrum of points to pick up on. That was the only issue. All the feedback I got was positive and said it was good which didn't give me much to ponder or address. Which is both a good thing and a bad thing. It is good as it let's me know that I am heading in a positive direction and the choices I have made so far make sense and look good however. I don't feel as though it was strong enough praise to mean that my design was perfect and flawless. It was merely good. This raised concerns for me.

Although on the face of it a "good" design is technically alright. It doesn't feel as though it excited or inspired. It merely functioned. This isn't good enough for me I feel. I wanted my design to stand out and be fun and exciting. I wasn't sure however, what aspect needed addressing. My classmates were equally puzzled. One classmate mentioned that he thought my design seemed a little sparse and plain. This is something that always sat at the back of my mind as a concern however, as I haven't begun to create my website or iBook it hasn't become obvious to me. 

Overall I think I need to have a fiddle with my designs and ideas until I have something I am truly happy with and one of the best and easiest ways I can see to do this is to create a mock up. This was something my lecturers tried to steer the class away from but I really feel as though it'll help me put everything in perspective and see the design as a whole. This will flag up concerns and aspects that need to be urgently addressed.

Typographical Inspiration

GREYSCALEGORILLA:

Link: http://greyscalegorilla.com/blog/

This is a website dedicated to tutorials for Cinema 4D (industry standard 3D animation software), After Effects (industry standard compositing program) and Photoshop (industry standard photo manipulation software). It has recently been redesigned to be sleeker, smoother and easier to use. The redesign, in my eyes, has been hugely successful. It is almost seamless with and perfect with it's very minimalistic design with bright yet soft colouring and is definitely something I shall draw from when designing my site. However, the aspect I want to focus on is the font. It is sleek, sans-serif and professional looking. 

Below is a section of text from the website:

As you can see it is very nice looking, simple yet sophisticated and professional. It is a designers font. Informal yet presentable and friendly. This is exactly the feel I want to accomplish with my design. I want my website to be educational, professional and reliable without feeling to authoritative and boring. A serif font would seem to much like a text book or an essay that you are being forced to read, dictated in a language that seems to be trying too hard or talking down to you. That is not what I want. I want my website to be conversational and informal. This will help students really engage with the material and not feel as though they are being forced to read it but that they are almost conversing with the site and that the dialogue is helping rather than dictating to them.

I wanted to find out what the font used on this website was and after a bit of digging through the CSS I found this:

The font used is "OpenSans". This is a web-font provided by Google and free to use. I have previously stumbled upon it in my earlier searches for possible fonts. It is great to see it at use in a site I am interested in and see how good it actually looks. I definitely think this is a strong candidate for the font I am going to use due to it's simplicity to find and use.

SMASHING MAGAZINE:

Link: http://www.smashingmagazine.com

This website is dedicated predominantly to web design. It has really interesting and useful articles which spans from giving designers code for new and interesting buttons/effects to detailed reports into consumer patterns and data. It is a great resource and very well presented. I was drawn to it initially for the colouring however, pretty quickly I was drawn to the font choices. They mix sans-serif with serif, caps with non-caps. It is really interesting and works fantastically well. Now I probably won't be mixing sans-serif with serif fonts but I really like the sans serif fonts and having two of them could work pretty well.

Below is a section of text from the website:

As you can see they mix serif fonts for headings with sans-serif fonts for body text and small links. This works well however, I was mainly interested in the sans-serif fonts. In particular the blue one at the very top for the section header:

I love how blocky and simple it is. It would be really successful at least as a header font but hopefully as well it would look great for body text. I love how it is not too sharp and looks so mathematically perfect even at small sizes. It would be perfect for my design.

I again went digging through the CSS and HTML and eventually found this:

The name of the font is "Proxima Nova". I hadn't heard of this before so I went searching around the web. I found it pretty quickly on sites that allow you to purchase fonts. Probably the best was this http://www.myfonts.com/fonts/marksimonson/proxima-nova/ however, I am a student and would prefer not to be splashing money about on fonts. I wanted to see if I could find it anywhere for free. Unfortunately however, after a fair amount of searching it seems as though it isn't:

Looking back to the CSS it seems as though everywhere that Proxima Nova is used there are backup fonts also specified. Namely Helvetica Neue, Arial and Helvetica. These are all also viable options. I know that Arial is one of the most widely available system fonts available. This is definitely something to consider.

CONCLUSIONS:

After all the research I think that I am going to try and use Arial. After seeing the second site I think I prefer the blockier and more metric look that Proxima Nova and Arial have over the more rounded look of Open Sans. Having said that I am going to use Arial I may look into purchasing Proxima Nova in one of two weights, as it is only $29 for each weight which equates to roughly £19 and I can afford to spare about £30-£40 as I can to use it for a personal project later if need be. However, if I am happy with Arial then I think that is the best bet due to it unparalleled compatibility.