Colour Research.

So, I changed a lot of my colours so I feel like I should do a re-post on colour research.

WC

 

(All bookstores seem to have red websites – for this reason I want to use red as minimally as possible). Whicoulls webpage is mostly made up of block colours that are highly saturated but follow their logo colours. Because I don’t have a logo to choose my colours off of I thought I would pick an array of colours that don’t really related, but are not disgusting together. These colours will need to be close in hue, without shading.

BROWN

 

 

 

 

I want my colour pallet to be more fun and visually pleasing than boring white and red, I took a lot of inspiration for my website colour pallet from the template below.

a-book-apart

I have many assets to my proposed website, the only definite one I know I will have to create and use is the shelves. I will go with a set of three browns and later them up to create the illusion of shading to create the shelves. As for the rest of the colours, the colours below were ones that I found reoccurring in library websites, however I have changed the lightness and overall saturation value of them to make them ‘pop’ off of the page. This is my final pallet for my webpage.

COLOURS

Fabulous Research

its_called_being_fabulous_pewdiepie_gif_by_2awesome4u2-d608gsx

 

Can I do a research post on making my website fabulous?
Yes.

 

So, in a more correct term, this will be a ‘Style Research Post’.

So I recently changed the style of my website dramatically and I thought this would require some explaining. I guess somewhere along the way I deleted all my photo layers and went … “yes, this is what I want”. No photos. Ever. Anywhere. This makes my website heavily illustration based, which for what I am going for, works quite well.

11-01_minimalism_web_design_ld_img

 

So, what is minimalism? Basically the way I see minimalism is stripping down assets to their most basic, or block form where if you removed one more layer you wouldn’t really be able to distinguish what you were looking at. Minimalist art is made of solid or block colours with very little detail. The only issue I have is the idea that minimalism websites can look a little ‘basic’, like the person didn’t really know what they were doing.

Reference: Week 5 Progress Report
https://shaunidrought.wordpress.com/2014/04/15/week-5-work-in-progress-report/

This WIP report shows visually what I am going for. Minimalism, almost. A sort of few layers extra on the minimalism train. Another way that minimalism and I don’t get along is the fact that I’m not a fan of unused white space.

 

So, my style will be: Minimalism, almost.

Wall-Shelf-Storage-Furniture-Design-TEEbooks-Mauro-Canfori-Grande-Mixte-590x413images (1)

 

 

 

 

 

 

 

My illustrations will be inspired by a book shelf, and things that you may find on or around a bookshelf.

I want to have a solid base shelf for my header text to sit on, or perhaps I may integrate my text in a way that makes it look as if it is a sculpture sitting on the shelf, or even the title on the spine of a book. I will also have other elements like a vase, photo frames and other things you might find on a book shelf (or even hanging on a wall).

Something that I though could be quite cool would be adding my own little impression to the website, and adding a 21st key because my 21st is coming up and I’m all about ruthless self-promotion.

595

Another idea I thought of was an array of ornaments, like a set of Russian nesting dolls, or perhaps a tea set – just to add a personal touch, (‘flare’ if you will) to my design.

 

 

 

The point of this research post was to talk about my overall intended style, and particular illustrations that I intend to make to really pull my design together, sorry if this didn’t come across.

ūüôā

Font Research

/*American spelling, everywhere*/

When looking at fonts for my website design I decided my first choice would have to be serif or san-serif /*maybe not for the whole document but for the title at least*/.

I picked san-serif. I know logically serif would have probably been a better choice and I could have argued that it’s the most common of the two used in books but honestly, if I had to look at a page of serif font I would probably just end up biffing my computer off of the highest roof that didn’t require too much climbing. I guess if I feel like a sellout using a san-serif font I can change it later on, but at the moment, I cannot justify the mental strain of looking at it.

A font I really like, that I feel works really well with other fonts is ‘Letter Gothic Standard’, this is the font I will work with on my page to get it looking right, I may change the font later to something along the lines of one of the following:

 

  1. Please Write Me a Song: http://www.dafont.com/please-write-me-a-song.font
  2. Roboto: http://www.dafont.com/roboto.font
  3. Basic Title: http://www.dafont.com/basic-title-font.font

 

(but then again, these would need to be from FS.com)

 

I abringiton-17-1lso needed to pick a font for my logo.
I decided my logo would be simple, like an IOS logo /*cringe, I honestly couldn’t think of anything more fitting*/ but circle. I wanted something extravagant for this font. Something with flare -spirit fingers-

So, I started my search at Dafont.com, I know we were meant to use FontSquirrel.com but I’m a rebel without a cause. Plus the logo is going to be exported as an image, so I won’t actually need to load the font into my CSS, just the image I make in Photoshop.

So, here we go. The fonts I looked at for my logo were:

  1. Brannboll: http://www.dafont.com/brannboll.font?text=Bookshelf
  2. Wolf in the City: http://www.dafont.com/wolf-in-the-city.font?text=Bookshelf

 

I picked thelogose two fonts as I wanted something that would really make a statement on the page and ‘pop’, while still looking classy as heck. I ended up picking Brannboll as the capitalized ‘B’ is actually really nice and is reminiscent of a initial you would see heading a chapter in a book, (well for me anyway). I ended up just putting¬†the B in a circle, easy I know, but that is essentially all a logo is, a simplified concept that ties into your website name, and color scheme. I added a nice drop shadow to make it come off of the image and to make sure it was actually visible because without the shadow it sort of just sinks into the background imagery.

Other fonts I considered:

  1. End of the Dream: http://www.dafont.com/end-of-the-dream.font?text=Bookshelf
  2. Moonflower: http://www.dafont.com/moon-flower.font?text=Bookshelf&back=theme
  3. Manus: http://www.dafont.com/manus.font?text=Bookshelf&psize=l&back=theme
  4. Halo Handletter: http://www.dafont.com/halohandletter.font?text=Bookshelf&psize=l&back=theme
  5. Cheddar Jack: http://www.dafont.com/cheddar-jack.font?text=Bookshelf&psize=l&back=theme
  6. Bite the Bullet: http://www.dafont.com/bite-bullet.font

Looking at other websites with similar concepts to mine has also helped with my font decisions:

National Library of New Zealand
http://natlib.govt.nz/

The website uses the same font, with variations in size, color, bold/italic/underlining – that is basically it. As this is not something I want to do and I actually want to have two different fonts, this hardly appeals to me – but it makes me feel a little bit better about my san/serif conundrum.

Even websites a little closer to home
AUT Library
http://www.library.aut.ac.nz/   /*Oh! I need a search bar!*/

These websites only seem to use serif fonts, which has got me thinking “how mainstream do I want to be here?” #hipster ¬†(Sorry Matt).
But I think I’ll stick to serif, now that I’ve written about it for 20 minutes I think I’ve made up my mind.

 

Now that I’ve got my fonts sorted /*to some extent*/ I think I’m ready to move on.
ūüôā

Layout Research

This week I thought I’d have a look at a few examples of some type inspiration.
Considering I’m not 100% on my idea so far, I thought it would be a good idea to you-know, draw some inspiration.

So one of the things that I’ve found interesting is the fact that we’re literally just making a theme for a website, all that we’re doing is arranging the components and making them look funky-fresh. Being a big typography person I’m a little underwhelmed, but that’s cool I guess.

By the end of this post I would like to have an idea of a colour scheme and a font idea for things like headers and such.

One thing I really like is the look of a beautiful, clean and plain website. I find nothing more visually appealing! Topped off with a hint of retro and I think I’d be on to something! With this in mind I started to have a look-sy on the interwebs.

Kitchen-Sink-Studios

#1 – Kitchen Sink Studios

What I like about this website is its instant first impression. Apart from a few ¬† ¬† font issues its actually quite lovely – the layout is easy to read, the colour scheme is nicely linked, it’s not cluttered and it has a very cosy layout – however it still leaves a little to be desired.

Something I really like about this website is the bordering. I’m not usually a big fan of the whole, “oh wow look, it’s a notebook on a desk” idea, but this actually doesn’t look to bad – sort of like a piece of paper on a desk but less in your face.

The lines that separate each block of text are nice, but a bit over used. The smaller text offers a nice break in the text but I feel as if there are way to many of them, and the change in colour is actually off-putting for some reason.

The colour scheme itself is okay – the use of three main pastel colours against a plain background is nice, but they’re not colours I would go for myself – unless they are company colours? Who knows – it’s just a template.

The italics is off-putting, and the font’s don’t really match. But the website layout is quite nice and something to work with.

pointless

#2 – Pointless Corp

I love the layout of this website, I especially love the fact that it is unrestricted and the text is not bound to any boxes or other shapes, but simply sectioned in a very subtle fashion. I also like the retro appeal of this website as it is not overpowering but just enough. The type is modern and stacked, a little too far apart for my liking, but hey!

An issue that I am coming to realise is that I want to do all these amazing things with the type, but we are unable to touch the HTML file for this assignment, so this means that I cannot have type that is visually interesting, I can have a line of type – which is guttering if I’m honest.. I also cannot simply replace the type with an image file because I cannot touch the HTML to delete the type, all I can do with this website is style the type in a way that appeals to me, which is become more and more restricted each time I look at the brief…

I do not know what the limitations are with type, I do not know if it can be bent in css – I’m not even sure what the limitations are with fonts but I guess I’ll find out..

So, looking at plain and retro I’ve come to this..

6-Retro-Wordpress-Portfolio_1331539678167-580x388

Nothing too flash, but then again the student examples shown that did quite well were not that flash either. I think the idea is to create a website for functionality that is visually appealing, and uncluttered. This is a nice example of this, even though it is too plain for my liking, I see potential to build upon the foundations of such a template, to incorporate my own design idea’s and to give it pizazz and junk.

There are elements of the 10 or so template websites displayed here (http://designwoop.com/2012/04/inspiration-a-collection-of-retro-web-designs/) that I would like to incorporate into my design

A website that I really like the look and overall feel of is http://blindbarber.com/  .
It’s use of minimal colours (black, white and blue) is nice because it makes the website look clean, uncluttered. This is the feel I will be going for – now I just need a topic, right?

What about the style? The background? Well.. what about a chalkboard? Or is that too indie/hipster/funky-fresh?

stock-vector-web-design-portfolio-template-vector-illustration-122220499

Well, I like the idea! Maybe I will give it a shot as a style idea as a mock up and see where it takes me.¬†The thing that I’m stumped on is still the fact that I do not have some sort of subject-matter for this website. Flicking through the HTML I am reminded of some sort of ‘for a cause’ website – even though I am not aware that the CSSZG is irrelevant I feel it is still a good building block, like a spark to ignite an idea – charity.¬†Is it insensitive to at this point mention that I am thinking about making up a fake charity? Don’t judge me.

I think I need to sleep on it ..

</publish>

Idea Research

Before my research could even begin I had to pick a topic, an idea. These are usually long coming and uninspiring in history, but after sitting down with a friend I managed to flesh out an idea that actually got me excited about this assignment – games.

A few dumb questions sprung to mind after the tutorial:

  • What was the point of Zen Garden CSS? (http://www.csszengarden.com/) is this the text we are working with or are we unconfined? Can we make up our own text? Are we making a website “theme” from scratch, unrelated to ZGCSS? Or are we making a website theme that is to become the backdrop of ZGCSS?

Another dumb question …

  • The two website “themes” are to be for the same website just different styles? Or same style different layouts? Are we supposed to use the same assets just arranged differently? Or can they pose different and distinct genres? I think the example Matt used was “one can’t be for a¬†beautician while the other is for a bank” .. and I get that, but what if, for arguments sake you did ‘Live Children’s Entertainment’ where one was focused on a clown, while the other was focused on a fairy … can the website backdrops have completely different feels and looks but still be for the same thing? Or are we to just recycle our assets and lay them out differently – one horizontal, one vertical?

Okay, I think I’m done with stupid questions for now. Onto actual research…

The Last of Us 2Alice Madness Returns Gameplaybioshock infinite gameplay 2

I’ve definitely played some beautiful games in my life thus far, and with the recent release of the next gen consoles I’m sure there will be many to come, however I cannot predict the future so I think I’ll just stick to what I know…¬†Something I love about all of these games are their own visual “style” and appeal. Each game is complemented with a very distinct composition of visual elements.

Take for example American Mcgee’s Alice: Madness Returns…

Alice Madness Returns Cover

The sequel to Alice, Madness Returns (2011) is visually stunning in its own morbid way. The game has earned a respective 8.0/10 with a Steam Meta-score of 70 and is a game that is inevitably close to my heart. There is nothing quite like a trip into wonderland, and the beauty and over-saturated bliss married up with the devastation and debris riddled “new wonderland” is it’s own category of beauty.

This more than anything gets me thinking about the desired style of the game I would promote and how such a style would fit in with the overall design of the website.I want to marry up the style of American Mcgee’s Alice: Madness Returns with Bioshock Infinite. Why? Let me explain..

bioshock infinite gameplayBioshock Infinite (2013) is by far the most visually captivating game I have ever had the pleasure of playing. Perhaps one of my favourite things about this game is the ‘Bioshock feel’ of each game. They hold something between them that is reminiscent of it’s previous counterpart in the series. Along with this, there is a very obvious style to the game franchise itself. There is a notable steampunk come grunge feel about the game that is felt in it’s menus, it’s interfaces, it’s product promotion and mostly throughout the game itself.

400px-Bs_main_menu

This style is something I would like to incorporate into the style of my website concepts. I know I’m not able to produce a similar backdrop, however there are pieces of the game that stand out to me as potential stylistic ideas to think about and to incorporate into my website such as the rustic, worn look as well as the novel, almost circus like fonts used.

bioshockwebsiteI decided another point of interest would be to look at the website itself for the game. The website itself is rather disappointing as I found user generated content a little more inspiring than Irrational Games formal website for the game itself. The colour pallet is not really what I’m looking for at all.

There really are so many directions I could take this assignment, this is simply a few hours of rationalised brainstorming trying to mould something out of nothing. However I do feel as if this style of art is something I am completely capable of accomplishing with my extensive knowledge of Photoshop and other such skills. It is also something I am passionate about so I know I would be willing to put the hours in as opposed to an idea I would half heartedly finish for deadlines sake.

I think I’ll sleep on this idea, maybe come up with a few others ..
Maybe flip a coin? Where’s the harm in taking a weekend to decide?

I have thought of a few other ‘theme’ ideas in case:

  1. Film and Video
  2. Newspaper
  3. Books
  4. Minimalism
  5. Music

References for Images

Electronic Arts Inc . (2011-2014). [Game] Alice: Madness Returns . Retrieved from http://www.ea.com/alice. Retrieved 7th March 2014.

Sony Computer Entertainment America LLC & Naughty Dog Inc . (2013, June). [Game] The Last of Us. Retrieved from http://www.naughtydog.com/games/the_last_of_us/. Retrieved 7th March 2014.

Take-Two Interactive Software Inc & Irrational Games. (2002-2014). [Game] Bioshock Infinite. Retrieved from http://www.bioshockinfinite.com/home. Retrieved 7th March 2014.