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. 

Graphical Inspiration - Yiying Lu

Website: http://www.yiyinglu.com

This is the work of Yiying Lu. She is an artist based in Sydney, Australia. She has a similar style to that of Christopher Lee however, her style has less of a hand drawn look to it and is more mathematically and anatomically correct in my opinion. Although I prefer the style of Christopher Lee I think that this is probably closer to what I will end up creating for my website and iBook. The reason is that it is still colourful and unique however, it is a little cleaner and more anatomically/scientifically correct. That is an important aspect highlighted by the brief. 

Her website contains a gallery of her work including the Twitter "Fail Whale" that brought her a certain amount of notability. She has quite a diverse and broad spectrum of styles that can be detected in her work. It is blocky and vibrant however, the degree of vibrancy changes a lot from piece to piece as does the complexity of the shapes and intricacy of designs. 

As you can see if you compare this:

To this:

The first is far more subdued and and intricate whereas the second is sparse, simple and very vibrant. I think that the first style is much more fitting to the images I have in my mind and so that is what I can see influencing me the most.

Overall her work is really accomplished. I love the colour choices she has picked for most of her designs and I think the more complex, mathematically perfect designs work the best. I want to try and combine both Christopher Lee's colour choices and graphical identity with Yiying Lu's more anatomical, scientific drawing accuracy and more computerised, perfect looking vector style.

Graphical Inspiration - Christopher Lee

Website: http://www.thebeastisback.com

This is the work of Christopher Lee. He is a graphic designer based in California. He draws with a really unique, vintage, cartoony yet tactile style. It is hard to describe. His style is both vibrant and simplistic. It is what I aspire to come close to replicating for my work. I want to combine small, vector graphical elements in this style with a structure and feel similar to the Boston Globe website I looked at earlier. I feel as though if I handle it correctly it could work really well.

Here is a link to a gallery of his work:

Link: http://dribbble.com/TheBeastIsBack

The colour spectrum he utilises is very fitting to the colours I had in my head. They're soft, pastel colours coupled with splashes of much richer, more vibrant colours. This works well to create a nice overall feel whilst still highlighting a particular area or object. This is something that works really well and I can use this technique both in my images and also in the text. I can choose a key colour that I can use throughout my designs as a highlight colour. This will strengthen my brand identity.

His drawing style is quite vintage and cartoony. I think I may have to adhere more to anatomical proportionality and more photo real objects. This is the only major draw back with his work is that it wouldn't really suit the brief of a website containing A level content. However, if the text and other information is at a high enough level then this style of cartoony drawing may in fact add something really nice to the site and work really well.

My main problem with academic texts and sites is that they are either way too text heavy and bland. It is usually the colour spectrum and image choice that lets them down. I think that with a more vibrant colour spectrum and unique art style I could really bring a new and successful flare to this genre and create something really engaging.

I will also use the same style and ideas in the iBook. This if anything adds more freedom with this kind of style. I can have larger images and really go down a more playful, creative, interactive route with the iBook as it isn't as conventional and established as a website and it is still a relatively new form of media distribution.

iBook Inspiration

Website: http://www.touchpress.com/titles/theelements/

This is what I found most inspiring in terms of iPad technology. I love the simplicity of function that bears within such complexity and depth. It makes a usually scarily daunting topic to delve into so inviting and easy to use. I love the layout where there is a large image on the left hand side with the detailed information along the left. It is so interactive and playful and really makes the subject that is usually boring very interesting and fun. 

It does well as hiding depth that isn't baring at the front and really distracting however, if you want the information it is only a touch away. It really is a masterclass in interactive iPad design and definitely something to base my iBook upon.

The style is very harsh, contrasty, dark and scientific. I am looking to go down a much brighter, friendlier, inviting route with my design. That is going to be the only major difference though I think because I do really like the functionality of the design and the structure of the app as a whole. It really works.

It also deals with shifting perspective very well:

I think that because of the time frame I have for this project, I am just going to commit to one orientation but it is good to know that this app is successful in both landscape and portrait. I shall look into this further before finalising the orientation I am going to go for.

This app is really exactly what I was looking for. The iBook seemed alien and different because I'd never encountered one properly before. I think I was a touch daunted by the seeming difference from the web and I didn't, at first, feel as though I had a leg to stand on to start designing. After a bit of searching around and discovering this app I feel as though it is a lot more manageable. This app is exactly the structure and level of interactivity I think will compliment the graphical style, the structure, the colour space and the nature of the way I am going to tackle the topic. I am excited to start applying my ideas to this structure.

Responsive Website - Clean Air Works!

This is the third site I found. I love the look and feel of this. There aren't really set columns. The whole site looks like a single column that was centred. I love the simplicity and graphic style of this website. The vector aspects really pop along with the really vibrant colours. I must say that I do feel as though I prefer The Boston Globe sites design a little more than this one however, they do both work. I think that combining vector elements, similar to the ones on show in this site, with the look ad feel of the Boston Globe site would be really successful and make the vector elements really pop against the background. 

This is the site at portrait tablet size. As you can see the sites structure doesn't shift too dramatically however, a few things do change. The main thing that changes is that the bottom navigation bar does pop up so it is not longer on a rollover. This is interesting as it is something I often feel I overlooked when thinking about design and structure. When on a touchscreen tablet like the iPad you loose the ability to have a rollover because there is no rollover state with your finger. This is something to remember that I need to not only shift the structure and size of the site I also need to take into account the various differences and limitations that come along with device shifts.

This is the site at portrait iPhone size. It goes absolutely single column and frames the content really nicely. This is similar to the Boston Globe site and reinforces in my mind the fact that I want my site to do the same at smaller sizes. I also really like what happens to the nab bar and maybe something to consider when I create my site. The only limitation with this is it takes up quite a lot of real-estate when coupled with the logo and title at the top. 

Overall I think that the graphical style and colour spectrum of this site coupled with the sophistication and structure of the Boston Globe site would combine to make a really successful and pleasant to use, engaging website and I am excited to begin trying to figure out how I can best make that a reality.

Responsive Website - Grey Goose

This website is a website for a drinks company called Grey Goose. Their website is very simplistic however, instead of being heavily text based with simple, limited colours it is heavily image based with more vibrant colours. They still share aspects that link back to my original ideas. For example they both have neutral, simple colours and both share a very blocky, square look to them. This is the website at desktop size as you can see it is very simplistic in terms of column count and also is predominantly one big image. This is interesting as it still adheres to all the structural aspects that I liked about the other design however, tackles them in a completely new way and has a completely different look and feel.

This website only actually has one break point and that is to portrait iPhone size. The lack of columns at larger sizes means that it can just simply scale down to tablet size without having to cross through any break points. At this size it goes down to a single column design which is 100% width. There is some padding around the text however. I am not really a fan of this. I like the idea of all the content being in a single block down the page. This has reassured me that I want there to be a little bit of space around all elements at all times and, similar to The Boston Globe site, never actually go to fully 100% width. 

All in all this site is really nice and does work well. The responsive design is quite limited which simultaneously makes it really simple and strengthens brand identity however, it does make it quite odd at some sizes and would probably benefit from some break points.

Responsive Website - The Boston Globe

I wanted to look at simple, narrow, blocky websites and how they handled responsive layouts. From the beginning I knew that I wanted to try to create a simplistic, modern (yet classic) feeling website. To inspire myself and also to see limitations and mechanical properties I thought that trying to find websites similar to what I can envision creating would be a good idea. With that said the first website I found was The Boston Globe.

This is the site at desktop size. As you can see it is a 3 column design with space around the left and right sides. This is something I like I toyed with the idea of having a 100% width design however, I think this is more classic and pleasing to the eye. I love the fact that there is a clear edge to the content. The images and navigation really create a solid idea of a frame that I really like. I also really love the colour scheme. It is so simple, classic, sharp, sophisticated and strongly linked to the idea of  newspaper.

This is the same site at portrait tablet size. The layout stays three columns but now it more or less 100% the width of the screen. This is quite nice looking however, I might try to have fewer columns, thus freeing up more space either side of the content.

This is the same website at portrait iPhone size. It jumps down to a single column and is now again more or less 100% width. Also the navigation bar retracts to a drop down menu rather than a series of words. I think this looks really nice and simple and I think 100% width at this size really works. I also like the simplicity of the nav bar after the jump and I at first was hesitant to say I wanted to create a drop down nav structure at this size however, if I design a custom button that I am happy with then I think that it might be a sensible idea.

All in all this site is very clean, spacious and aesthetically strong at all major break points. I think that this is something that will heavily influence my design and content structure.