Font Selection Research Post

What I want to talk about in this research post is what I am looking for in a font. I want to collect a few different fonts and perhaps load them all in and see how they look on the webpage and go from there. Originally, what I was after was a serif ‘book style’ font to mimic the idea of a cook book. I’ve had a trudge through Dafont.com and FontSquirrel.com and the following are a few of the fonts that appealed to me.

Florence 
http://www.dafont.com/florence2.font

florence

What I particularly like about this font is that it is like a standard cook book, almost text book font, but it is italic. The letters seem to have awkward spacings and I find myself looking at this font a lot feeling as if it could be so much better. I am unsure of whether or not I will actually use this font. It was the first one I found that I really liked but the more I look at it, the more that awkward spacing stands out. It is something that I can fix, but not really something I want to fix. I also feel as if this font is very stretched out which is unappealing.

Ahellya
http://www.dafont.com/ahellya.font

Ahellya

I must admit I do like Ahellya also. I find the thickness of the font a little off, but something just seems to work about it. The spacing of the font letter to letter is quite good in the italic font but not so much in the regular (although I do believe this may just be my eyes playing tricks on me because of the change in thickness around the curvature of the font). I’m not a huge fan of the normal font, however the italic font is very nice and I feel as if the change in thickness could really help the font stand out against a picture (if it was white). The idea that I may use this font in ‘almost black’ makes me a little weary of this altering thickness as the darker I go, the more this will stand out.

Night Still Comes
http://www.dafont.com/night-still-comes.font

NightStillComes

Yes yes yes. I love this font! And I love how many variations it comes in. It is not often you find a font that allows you to bold it and italic it, but bold-italic!? Ahh. Superb. The spacing between the letters of this font is perfect in normal, italic and bold. This font just works. It will probably be the font I go with in the end.

Timeless
http://www.dafont.com/timeless.font

timeless

I feel a little bit of a struggle coming on to talk about the last two fonts seeming as the previous font was so good, but I will. This font is nice in its spacing letter to letter (however it could be like 2px smaller). However the bold is just wrong, so so wrong. It’s far to thick for a serif font.

Fine Style
http://www.dafont.com/fine-style.font

finestyle

I am a little bit torn. I really love the height of this font, it looks outstanding, however there are no variations of this font, and I have multiple lines of text to write. Something that could work is using this font as a title font and using Night Still Comes as a sort of ‘accent’ font that would only be used for the lines below the title. This is something I will address in my Work in Progress Report.

Where to from here? Time to see how they look on the page! Like my mum always said, everything looks like crap on the hanger, you’ve got’a try it on!

 

FlorenceFlorence

 

 

AhellyaAhellya

 

Night_Still_ComesNight Still Comes

 

 

TimelessTimeless

 

Fine_StyleFine Style

 

It annoys me how right she was, Fine Style was probably my least favourite (next to timeless) but looking at it on the caption it really looks great! Florence was probably my second favourite but looking at it on the image, it looks horrible! Especially the caption. I’m thinking perhaps Night Still Comes, with a Fine Style caption, or even a caption that isn’t italic. I think I might have a combination of fonts but I definitely think Night Still Comes will be my title font.

layout-main-image_01It just looks so dang good. 🙂

 

Behaviour/jQuery Research Post

What I want to talk about in this research post is the behaviour of my gallery. This will be a smaller post as it is easy to explain what I want but hard to research. I have spent a lot of time looking over what my options are with JavaScript and jQuery, and I have began to whittle it down to a few main idea’s of how I want my images and gallery to behave when both hovered and static.

Yootheme.com

Capture2

The first behaviour I find appealing is the above where the sub-images sort of make way for the image that is hovered.

What works: This could be a really cool idea, that the hovered image enlarges and the sub-images sort of make way for the image by resizing. It looks really professional and looks quite clean and advanced.

What doesn’t work: This behaviour actually removes the need to click to enlarge the main image. This would work well with images that are all the same size, but not quite so well with a layout that needs one enlarged image (which is needed in accordance with the brief). So this is sort of redundant, but still cool! Perhaps if you made the hovered image extend to a size that is still about half the size of the main image so clicking is not as redundant, but for now I think I will leave this and move on.

Capture3

 What works: The swipe effect on this example is really cool as to me it sort of seems like a cook book, which is actually a really neat idea. In my head I had envisioned a fade-out-fade-in effect when transitioning from main-photo to clicked sub-photo, however this could be just as effective with a slight fade as well.

What doesn’t work: Things I don’t like about this are obviously the layout, you cant see the sub-images which is an issue when we read over the brief. Also I don’t like this ‘tacky’ screen sort of look, where it looks as if you are looking at an iPad or something. This is exaggerated by the drop shadow. I really don’t like this sort of ‘realistic’ look where you feel as if you are looking at a real device, I would rather stay away from this. However I do really like the transitioning of this gallery.

 

Capture4

I think I should also express what I mean when I talk about this ‘iced’ or ‘frosted over’ hover.

What works: This is honestly one of my favourite things an image/hover selector can do and I think it will work really well when I am looking at a predominantly white gallery.

What doesn’t work:  In this example there are a few things I do not like. Firstly the sub-images do not extend all the way to the edges of the main image, not a fan of this one bit. I also don’t like the drastic change in sizing, I know this is a funny thing to point out but I really feel that if the sub-images had of been just a bit bigger I would have liked this gallery a little more. I understand it is done this way so that the arrows are prominent but they really don’t have to be. I’ve also spend a bit of time trying to decide where my arrows will go and what sort of decoration they will have, if any. I would prefer to see arrows on the photos themselves as it is a poor use of space to dedicate such vital space to navigation. I know navigation is a serious point of a gallery, but I do feel that arrows that perhaps disappear and re-appear depending on where the users cursor is will really be the way to go.

So the next question becomes, how do I get these desired effects?

jQuery Behaviour:  .fadeOut() .fadeIn() 

I’m not a fan of transitions, but I understand we need them for this assignment as it is part of the criteria. I’m hoping I can get away with a simple fadeout fadein, because I feel there is nothing worse than getting a website gallery that looks like Microsoft Movie Maker when you click next. So a simple .fadeOut() and .fadeIn() will probably be as far as I go. Or perhaps maybe just a .fadeIn() with a delay? I am unsure at this stage.

 

 

Conclusive points from Research: 

Point 1: Unselected images will frost over when one sub-image is selected. However when no image is hovered over all images shall be full color. How do I achieve this? The way I envision this to work is by setting a :hover state in the CSS to the desired <div> which will be the same color as the background of the webpage, but at a perhaps 70% opacity so the image that is selected will stand out. I’m not 100% sure what this will look like in code, however I had a good idea of a few methods to try.

Point 2: Arrows for navigation shall be over images, but transparent enough where they do not effect the image but are visible. I will need to add a hover so that the opacity changes to 100% when the cursor is over the image.

Point 3: I’ll try to keep away from transitions for my own sanity, but http://api.jquery.com/ does offer a lot, I may have a look through and see if I can find any that aren’t completely revolting.

Color Treatment Research Post

What I want to talk about in this post is the color treatment of my images. Color treatment is going to be a huge part of this assignment as we are making a gallery to show a pallet of images that need to have some string of unity between them. This research post will link to my Week 2 Work in Progress report, and I will integrate images from this post to illustrate why I have picked particular methods and editing techniques in color correction and treatment.

In relation to my style post, I needed to come up with a blanket treatment of style to my images, this will be based on my own personal preferences as well as a sort of trending appeal. Color grading, color correction and color treatment all relate to the “process of altering and enhancing the color of a video, image, or still image either electronically, photo-chemically or digitally.” Now we all know how important color correction is, and it really is a tool of bringing unity to a string of photographs within this assignment. I decided to research a few different color correction methods and pick which one would work best for my style.

A standard or base food photography edit would probably follow a similar path as the tutorial here: http://diethood.com/food-photography-edit-photos-photoshop/

Black and White Color Treatment:

Noodles-BW

 High contrast images consists of mainly blacks and whites with very few grays. High contrast images can seem stark and dramatic. Images with contrast in the normal range will have a few blacks and whites with a broad range of grays in between.

Filtered Color Treatment:

XProII

Popularized by applications such as Instagram, the way we colour correct and address color treatment has been revolutionized to a point where unfiltered images on social networking look bland and unappealing.

Tutorial websites:

http://speckyboy.com/2013/01/28/50-fantastic-photo-effect-tutorials-with-photoshop/

Low-Con Look Color Treatment:

4417318962_2f7fcb4260_m

http://www.digital-photo-secrets.com/tip/2857/how-contrast-affects-your-photos/#sthash.soM4Nt8J.dpuf

“Contrast is what keeps your black and white images from looking flat. Contrast adds dimension, and dimension can go a long way towards making a photo more engaging. It invites the viewer into the image.” But what if flat imagery is what you’re looking for? Contrast in black and white images is usually described with one of three labels: high, low or normal. Low contrast images have little or no highlights or shadows, and are really just shades of gray without much variation between one shade and another. Low contrast images are often described as “flat” or “soft.” What I am looking to address in the color treatment is the ‘tonal contrast’. What I need to address here is the mood I want to convey within my images and the entirety of the gallery. As I am going for a relaxing, light mood associated with good food, a softer or flat contrast would be best:

“if it’s an eerie or dramatic one, try to find a range of dark tones. If you’re going for a light, fresh mood, look for the whites and light grays. Use high contrast for scenes with greater drama and lower contrast for those that you want to appear calming or relaxing.” – http://www.digital-photo-secrets.com/tip/2857/how-contrast-affects-your-photos/

Final Edits

Week2Layout

 

Branding and Image Selection Research Post

In this research post I want to address my selection of creative commons images based on by desired theme and style (or branding). Sweet and simple.

Food Image References:
(Obviously I’ll pick from these!)
Bold =  used in webpage!

  1. https://www.flickr.com/photos/opticalodyssey/13924382794 
  2. https://www.flickr.com/photos/decor8/9506760153
  3. https://www.flickr.com/photos/lukechanchan/5254673272
  4. https://www.flickr.com/photos/shok/3262503022
  5. https://www.flickr.com/photos/kizette/7326927416
  6. https://www.flickr.com/photos/davidwoliver/6064006231 
  7. https://www.flickr.com/photos/artfulgourmet/5918515331
  8. https://www.flickr.com/photos/citrusandcandy/8163856806
  9. https://www.flickr.com/photos/wimdejong/10776478893 
  10. https://www.flickr.com/photos/bluumwezi/7844864754
  11. https://www.flickr.com/photos/citrusandcandy/8163859092
  12. https://www.flickr.com/photos/_lalalla_/7064321309
  13. https://www.flickr.com/photos/shok/4554022517
  14. https://www.flickr.com/photos/kopapa1116/12400731845
  15. https://www.flickr.com/photos/jcsyiu/4328326266
  16. https://www.flickr.com/photos/istelleinad/4113773452
  17. https://www.flickr.com/photos/opticalodyssey/13924382704

Of the images I picked, I wanted to keep a birds-eye-view consistency between all of the images, but I slowly began to realise that this wasn’t really doable and my searches were way to precise, “creative commons image, birds eye view, professional and clean looking photography on a white background,” the images were scarce. So I decided to take a new approach, and just look for creative commons images that looked clean and appealing and were arranged in a very professional manner, and these were the images I came across.

What I’m going to talk about here is why I picked each image, however the images have already been edited by me, and will probably feature in my ‘Colour Correction Research Post’ as well, I just didn’t save both edited and unedited files that were sized correctly, my fault. 

Gallery_Image_01

This was one of the first images I found and really liked. I almost couldn’t believe it was CC, but sure enough, it was! There is also an image I used by the same photographer which I will talk about at the same time. (below)

Gallery_Image_05

These two images are really cool and they provide a sense of unison without any editing at all. This is something that really appeals to me (that all of my images need to look unified as if they’re all going in the same cookbook or something).  These two images are (mostly) birds-eye-view, soft portraits that look professional. The trouble now is getting images that will work in the same ‘spread’.

Gallery_Image_06

I had no intention of serving up ‘just deserts’. I though about it for a while! I even though of perhaps making it a vegetarian gallery and posing the caption as a recipe, but I decided it was getting all a bit much so I canned that pretty quickly. I really like this image as it has a more ‘orient’ flare, while still being mostly birds-eye, professional and on a white backdrop.

Gallery_Image_04

After finding the above images and looking at them in sequence, I decided to start looking for images that were still mostly white, but perhaps on a table so another color was present. Roll on the fig train. This image is really professional looking and I feel as if it works in unison with the other images well, while still being a little different. I wanted to make the gallery look as if it was a persons portfolio, but I felt rude putting a persons name on there that hadn’t actually done any of this work, even if they didn’t exist. So I just decided that the aspect that would unify all of my gallery would be the fact that its all edible! And who wouldn’t love that?

Gallery_Image_03

Then, I wanted to add another slightly orient image in the mix. This image works really well as it is so bright and so close up it shows the integrity of the food and looks really good. The colors work well as its like an unexpected punch of color in the mix of my gallery, even after I desaturated the images. Not as unified but still looks great.

Gallery_Image_02

I’ll be the first to admit, I wasn’t sure about this image, and I don’t really know what it is about it. It just seems to work. It may be the similar color palette to the rest and the similar focus treatment but if that was the case I could pick any image because all food photographers treat the contents of a plate like a models face, soft focus, beautifully lit with no harsh shadows, and somewhat exquisite (provided the canvas is of some form). So I wen’t with this image! 

Gallery_Image_08 Gallery_Image_07

To be honest, the last two I don’t have a lot to say about other than their color palettes are strikingly similar to both each other, and the previous picture. They’re also a nice mixture of orient and not-so-orient, with a less traditional take on bread and lettuce. I think they look really good and I think all of the images work really well together. I threw a few more in the mix just to make sure I had made the right choices for images, and I’m sure I have: 

Week2Layout

Logo/Branding Research

So I think as I am portraying myself as a sort of well established brand I need a logo. I have a look at some cool ideas for logos that I thought I could use to incorporate this whole ‘Food for Thought’ idea. Below are the logos I researched and what I thought of them:

posterfoodlogoforkknifeprint-892aae035d3c5a05bf4a00bb38c3b320_h

Something I think I need to incorporate is this idea of the knife and fork. The images that I have chosen don’t actually have a common line of similarities between them, and I think that this is something I will not address. Therefore I think using a knife and fork in my logo is a good idea because we eat most (if not all) foods with a knife and fork. If I was doing deserts I would probably use a spoon, but I’m not. The next idea is how am I going to lay this logo out?

4831820~d06e11e3a9f99104c452854baea6f5a6d95c621d-stocklarge

I think because my photos are square, my logo should also be a basic shape. I think a circle is a good idea because it looks like a plate! Ahhh it just works! I have not decided if I will put my knife and fork on the plate or along side the plate (as shown above) it is something I will address in my Work in Progress report.

Now that I have an idea of what I want to put in my logo, although I am undecided of a main focus, like an ‘F’ or an acronym ‘F4T’, I need to decide on a style and a colour scheme.

11448220~93ee623baf659e18678c5a24d8e5f53febf5fe14-stocklargeThis idea is really cool, it makes the logo look like an apple as well as a fork. I actually really like this one but I feel as if in practice it may not look as good as this is a sort of logo and would look cool on a business card just by itself, but potentially over an image? I am not so sure. I will probably make a logo like this in my Work in Progress report, but I am undecided if I would use something like this.

What did I go with? Food_for_Thought_Logo

Basically, just a knife and fork on a plate, I think over the top of an image this could look really cool and it will be nice to see it all together on the webpage.

Gallery Layout Research Post

In this post, I want to look at my options for layout of the gallery and see what actually works and looks good by critiquing other galleries and hopefully bringing together some good ideas for a basic wire frame for my own gallery.

I began my research with a long look at what my options are for jQuery and JavaScript. What am I actually capable of producing. I found a lot of my information on http://www.jssor.com/ which is an online gallery of galleries. It gave me a few ideas of how I can make my gallery behave, but not so much of layout. Although behaviour is a big part of this assignment, it’s a jump too far ahead right now as I am just looking at layouts, I simply wanted to get an idea of what my options actually are.

gallery-layout-editor1|http://help.redframe.com/knowledgebase/gallery-layout-settings/|

So, the brief states that “the gallery will include six or more images, but will only show one full-sized image at a time”. If I’m honest, the amount of images does not bother me, I am looking more for a balance, where the amount of sub-images is only defined by the size of the main image, and the amount of images needed to balance this (or to at least border it). These basic layouts give good direction as to what sort of layouts could be expected from a gallery, nothing to flashy, just plain layouts.

A website I have found useful in beginning to think about what sort of sizing and general gallery layouts I want is designshack.net

Capture

 

Although what I am producing is not in fact a ‘thumbnail gallery’, this website has really helped inspire me with my layouts in getting a little more creative. A part of the brief I want to push a little is this idea of ‘one full sized image at a time’. The way I read this is one big image, and at least 5 other images of smaller proportion, but not necessarily the same size or even orientation. Now I will express my want for balance in this assignment, I want something that looks good, and I want all of the images to be the same orientation (landscape) and all high quality images. But what if you could see two images at a larger proportion to the rest? Now you’re thinking with portals.

thumbgalleries-6

 

This image got me thinking a little bit about this idea of showing a section of an image as a teaser as to what is next. I want to accentuate this feeling of desire, after all there is a probability that we will be dealing with food here, and who doesn’t like food (I say probability as I am known to change my mind). It would be really cool even if the ‘main photograph’ was broken into two sections showing the main photograph, and then a sub-photograph, like a close up, or even that relates to the next picture. This is hard to describe but I will go more into detail in my Work in Progress Report Post 1.

thumbgalleries-9

 

One aspect I do really like is this closeness, almost overlapping of images. Looking at this really makes me want to do an image gallery for Adobe products but I’m not sure of what sort of copyright rules surround that, however the top two right images almost portray what I am going for, this sort of seamlessness with matching background where you hover and the product frosts over. It is a really smart and professional look if done right.

thumbgalleries-3

Another aspect I also considered looking at was this idea of shapes and what shape my sub-photos would actually be. It was an idea I was instantly put off of as I’m not a huge fan of it. I may round the edges a bit on my photographs but is is not really something that appeals to me an awful lot.

thumbgalleries-18

Another thing to consider is that I actually have control of the whole page, and that my layout has a prescribed width, but no height. This is something I could play around with also. I feel as if this could be rather confusing to use and therefore my usability marks may be less and that is not really a risk I am willing to take. If not done correctly it can end up just a messy page of random photos with no relation other than subject matter.

While addressing the wire frame, I also need to consider that there are captions that need to be in place, and that need to change with each photograph. This is not a huge issue, but it is something that I really want to work well. I will address the fonts and typography layout in another research post as well as a work in progress report.

Conclusive points from Research: 

Point 1: My layout may comprise of one main image, one slightly smaller sub-image and then balanced by the remaining preview sub-images. The second main image will act as a preview for the image that is coming next when the play through button is pushed. If this button is not pushed, the image will still remain, but it will be an image preview for the image that would have been next (visual explanation will be given in my Week 1 Work in Progress report).

Point 2: My layout will need to take into consideration that all of my images will be landscape. If any images are not landscape they will be bordered to give the illusion that they are landscape, this is just a personal preference.

Point 3: My sub-images will be square and have a margin of less than 5px to make it seem as if they’re almost touching.