Second Font Draft

Don't know why, but I like this one. 


Unlike a lot of pixel fonts, I aim to keep this at a relatively large size, as opposed to shrinking it down so it's similar to the fonts here: http://www.dafont.com/bitmap.php


Those fonts have been designed using individual pixels, I would like to make it appear as though this font has been done as well, while still retaining indication of it being drawn by hand. For example the diagonal lines on the v, j, and l characters. I will be getting feedback on these fonts all at once to save time, also it prevents me from repeatedly asking people to look at my fonts, when I could just show them all at once. 


Again, these are just rough drafts, the lines are meant to be perfectly in line with eachother, however sometimes that isn't possible when drawing freehand. These design serve their purpose, and that was to see how each character could look when it's finished. I will do the uppercase when I've completed the next draft.  


Peace.

First Font Draft + Update

This is the first draft of all the lower-case letters for one of my proposed fonts. I'm aware that I'm very behind at this stage, and so I'll be working on this for the next week while I can leave my client project sidelined for a while.  I aim to produce at least drafts of each character, upper and lower-case (including numbers and punctuation) by the end of the week, which will correspond with a gantt chart that I'm creating. It's helped me stay on top of my client project, so I figured I'd make one for my prp as well to help me keep track of what I'm doing and how long I have left.

In case you're wondering why i'm not producing the font entirely on computer, I discovered that I actually need to buy the software in order to export font files. Additionally, I believe this may get me more marks. I do still need appropriate software to convert my bitmap images in to font files, and to smooth out any rough edges, but overall despite being more time consuming, I prefer the method of producing fonts. Mainly because I can focus on drawing a lot longer than I can focus on pixels.


Additionally you may also notice that the image is a little bit chopped up. This is because for some characters, I couldn't produce the glyph first time and had to scrap it and start again. Chopping it up and removing the duds just gives me a better overall picture of what the font looks like as a whole.


Finally, this isn't all I'll be doing before producing the font, I aim to get feedback from a diverse group of subjects and then take their feedback into account and produce larger versions of each character so that when it is finally scanned in, the resolution will be higher and therefore it will be easier to manipulate in illustrator. 

Developed Client Ideas - Evaluation and Decisions Explained

Here is my final developed design. I've tried to encompass everything I liked about my basic ideas into one super idea. I like it and I think it's accomplish-able. Although I'm still on the fence about what colour scheme to use. I'm also uncertain about where ''Stonebridge City Farm'' should go. Should it go on the navbar and push the links to the right, or should it stay on the image and allow the links to be centered. I think it's more consistent if I move it to the navbar as things like the facebook and twitter links can occupy the bottom bar and stop it from looking empty. It also makes sense considering that most website follow this formula, therefore avoiding confusion for the user. 

I've taken bits and bobs from existing websites as well, for example the navbar features at the very top of the page, much like the facebook navigation, which leaves me more room to be a little bit more creative with the layout and in my opinion, makes the layout more fluid and accessible. I've also included an accessibility option for users that may find the text too small to read. Instead of shoving the pinned up items further right and messing up the layout, the columns the text is in will simply be forced downwards as at the moment the maximum amount of space is being occupied and creating more space won't affect the design as negatively. 

The usage of real-life textures as a background is something I carried across from this design:

As you can see I used a wood texture for the background of the title, I think it's add extra variety instead of using gradients or solid colours all the time. You could also say that I've taken the idea of having the image in the top half of the page has carried across, although I've used that in most of my ideas and as I explained before, I believe it breaks up the page and makes it appear less formal as there is a greater absence of text. Additionally I used real life photography to my advantage in a different design (see below) and thought it worked well, thus re-enforcing the use of it in my developed design. 

I've opted against using graphics art to liven the page up, although I may use it on other pages where i feel it it neccessary. For the time being however, the home page doesn't require it as it's currently filled with elements that are actually useful to the user. Also I've gone with the idea that the header doesn't have to take up a large section of the page, after-all, if someone has 

sought out the Stonebridge website, chances are they don't need reminding of where they are. Which is another reason why i chose to move the 'Stonebridge farm' to the top right as that is usually where the site name is on websites that use the same principle. 

I've also taken into consideration my research. I've tried to incorporate blues, greens and browns. I found that the green was a little harder to utilise as it doesn't contrast well with blue. I know this because I tried using a blue background with green text and there was a noticeable difference in how hard the text was to read because of this. Which is another reason why I think the contrast between cream and grey works well. For readabilitys sake, cream background with grey text works well, even though I prefer it the other way around. Additionally I had trouble figuring out a suitable colour for the bottom navbar. That shade of green was the most suited, however I think it looks out of place and that there are better options in terms of where the colours are used. 

As far as fonts go, I've stuck to 'Georgia' as it is easily readable and comes as standard on windows computers, I also think it adds extra depth to the design. Verdana is usually too wide and trebuchet is usually used quite often. Helvetica is over-used and not to mention not everyone has it. Georgia ticks all the boxes. It's easy to read, looks good, most computers have it and it causes the least amount of problems in terms of formatting. I have used a custom font for the 'Welcome!', 'Latest New' and 'Recent Events' headers, but this can easily be combatted as I can simply make them images, the same applies for the navbar (Font name can be seen above which was used briefly in one of my later ideas, I thought it looked nice so I decided to experiment and it worked. The handwritten effect gives a more personal feel in my eyes). The fonts I used for the navbar was similar to one I used in a previous design however in used elongated descenders on some of the glyphs(see below), which I didn't feel worked well with the rest of my developed design. So I chose a similar looking font minus the italics and the aforementioned elongated glyphs, and so Aardvark Cafe became Elegance. 

Finally, I've also taken the idea of creating 'boxes' that feature a stripped down version of the site's content and are clickable to the appropriate page. This idea was taken from the idea above, however given the available space I couldn't incorporate the drop down description. Although perhaps I could make it so that when it is hovered over, the other boxes become transparent and the selected box expand for a brief description. I'd like to include this as it would be a nice flash element to the website. Two other things I took from my ideas was the continuation of featuring the 'latest news' element on the home page and the small header and site name, which I first used in the idea below.

Overall I am happy with how my design has come out. It may not look as professional as some websites out there but I believe it is infinitely better than the current website that is currently being used, and therefore is an improvement. I am aware that I will have to look in to php for things such as the rss feed and the new updates...although this is very simple stuff once I can get a grasp on it. Depending on how much time I have I may include the function to sign up for a newsletter. Although we will have to wait and see

Font Ideas

I'll be honest, I've been neglecting the PRP in favour of my client project mainly because I enjoy it more. So I've been trying to do some more prp work and this is what I've got. Instead of producing one font every two weeks like I initially planned, I've decided to try and do three at a time. So far I've got these three ideas, although they need tweaking and some development. I will develop different ideas if I think they're better than these ones and I'll give reason for it.

At the moment, my favourite design out of these three is the Everitt Roman (top image), mainly because of it's squarish character. I think this is one idea that I could do the least to and it still be viable, perhaps sort the capital's out a bit. I was thinking perhap combining the two projects I have this term and using that font for my client website. But we'll have to wait and see what it turns out like when it's finished.

The second font (middle image), I thought it would be a good idea to not make it so...linear? Some diagonal lines wouldn't hurt, especially for the flicks on the lower-case b and a. Also I'm considering lowering the high lines of the capitals.

The third font started off well, and went a little bit astray, I had a good idea what I wanted the lower-case character to look like, however I hadn't really thought about what I wanted the upper-case to look like, which is why the 'A' glyph is so out of proportion. This needs a lot of refining. The whole font needs to be made smoother and less jagged, I do want to keep it sort of angular but not too much as it just looks silly (take for example the upper-case c).

Most commonly used colours

I created a graph in Photoshop (no, I don't have excel) to show the most commonly used colours of websites that fall under City Farm when searched on Google. The results weren't surprising, although I have taken note that I thought yellow would be there, and no websites used it, on the otherhand I was surprised orange even came up. The only site that used it had large orange text as it's header and it should be noted that the same site that used orange was also the same site that used red.

I found that the most common two colours (especially in conjunction with eachother), were green and white. I knew it was a popular choice, but the majority of websites were either completely green or green with a white background for the text. This tells me that if I make a green and white website, it will look like every other website, which is not what I want. If my design looks the same as every city farm site then what impression will people be left with and would they be more likely to show more interest? Doubtful. Of course I'm not going to single out these colours completely, it's obvious they're popular for a reason, but as long as I'm aware that if I use these colours, I have to come up with something really special in the layout or the way the content is organised.

 Black was also present but not as a dominant colour, for example the text  or the navbar would be black.

PRP - Font Research - The Most Popular Fonts

Since I'm not very well-educated on what specifically makes a good font, I think it's important that I at least research the most popular fonts, and try and decipher why they are as popular as they are. Of course this is not an easy task.

"To say the least, ranking fonts is an obviously hard task… how does one measure aesthetic quality, the benefit of an item, its value to humanity and so fourth?"

That quote is taken from justcreativedesign.com, where a list of the 100 best fonts created was posted on March 9th 2009. I've decided to use this particular list to help me for two reasons:

• It's one of very few 'best of' lists regarding fonts.
• The criteria given to decide a fonts place on the list is well thought out and logical.

"...the judges ranked the fonts by their objective and various other weighted measurements:

• FontShop Sales Figures: 40%
• Historical Value/Meaning: 30%
• Aesthetic Qualities: 30%"

I prefer this method, multiple judges allows for a greater range of opinion and the choice isn't simply made by which font looks nice. Of course, there are one hundred fonts on this list, so I can't analyse all of them, instead, I will on be examining the top 9. Here is the list's top ten:

1. Helvetica [1957 - Max Miedinger]

2. Garamond [1530 - Claude Garamond]

3. Frutiger [1977 - Adrian Frutiger]

4. Bodoni [1790 - Giambattista Bodoni]

5. Futura [1927 - Paul Renner]

6. Times [1931 - Stanley Morison]

7. Akzidenz Grotesk [1966 - G nter Gerhard Lange]

8. Officina [1990 - Erik Spiekermann]

9. Gill Sans [1930 - Eric Gill]

Helvetica

Starting off with one of, if not the most famous font ever produced. Helvetica has seen widespread use since it's introduction since 1957 and with valid reason. I think one of the things that makes helvetica so popular, and I know that I'm not the only one to have ever said this, is it's simplicity. It's easily readable at a long distance and because of this, requires very little strain to read. One criticism I would give it though, is that because it's so simple, some may deem it too boring, or that it's not interesting enough. While I agree to some extent, it's a necessary concession to allow a font to be readable, rather than interesting. Afterall, it wouldn't fulfil it's objective as a font if were not legible.

Garamond

Garamond is a classic serif typeface, which has been in existence for what seems like forever, four hundred and eighty-one years to be exact. A mature looking font to say the least, the key is how effortless it is to read. While it lacks character, there are noticeable details that aren't apparent until a closer inspection. For example, the flicks on some of the characters go either side of the stem as opposed to just the one way, the length of these flicks varies from letter to letter, as well as being different lengths for the same character in some cases. While still managing to look proportioned and not so wonky. I suppose this is why Garamond is held in such high regard among many designers, although personally it's too conservative for my tastes. 

Frutiger

Bears a lot of similarties to Helvetica, although is more compacted and slightly less rounded on characters such as 'd', 'a' and 'b'. Which is why this font is often used as a helvetica substitute, as there are only slight differences between the two. You could say that this font has a more 'vertical' focus in regards to each individual character, it's the spacing however that stops it's from looking as though someone had a little too much fun with the transform tool. Of course when I look these fonts, I'm only examining the original standard version, rather than any bold, italic or condensed variations. 

Bodoni

Bodoni is a very thick font that gives the appearance of a horizontally orientated typeface (mainly when using lower-case characters). I like the aesthetic appeal this font possesses, especially with the numbering. Each numeric looks old-fashioned, but in a positive way as they are done in a more artistic manner. This also corresponds with the date that it was produced (1790). The type face also puts more emphasis on contrast, as you can see by the thick strokes mixing in with the thin, as though everything has been accentuated. While it is only really used for advertising today, it can still have a great effect on the reader as long as what is being read isn't too long. Because of the thick strokes, it sometimes makes this font a little bit more difficult to read than other similar typefaces. 

Futura

Again, this font bares some similarity to Helvetica as it's a sans-serif typeface. I immedietely noticed that the descenders and ascenders are a little bit longer, giving the font a nice variation in comparison to the more rounded characters. I also noticed that the 'j' doesn't curl at the end, an interesting choice as the 'g' is very rounded in comparison. Additionally, the dots above the 'i' and the 'j' look as though they are slightly raised. This could be because of the elongated ascenders & descenders. Finally, it's also note-worthy that there is very little variation in the stroke thickness used, as is common with a lot of sans-serif typefaces. This consistency adds to it's readability. 

I will add the other 5 tomorrow. Frankly it's quite draining examing and analysing different fonts!

Times New Roman

Like an old friend, Times New Roman makes another appearance. At first glance, Times New Roman appears to be very similar to Garamond, and in fact, most Sans-serif typefaces. But as always there are subtle differences that go un-noticed unless you take a closer look. Lets compare Times New Roman to Garamond

Both of these samples are 48px in size. Notice how although Times New Roman is more vertical than garamond (particularly noticeable on the "h" and "k" characters), despite this the spacing between word is greater, making Times appear wider as well. There are also notable differences in the thickness of the characters which also contributes to appearance of Times. Additionally, Garamond incorporates upwards flicks as well as downwards. I could examine the differences between these fonts for hours, but in the end Time New Roman is a good font for the same reason as most sans-serif fonts; it's readable, works left to right, is over complicated, is subtle. 

Akzidenz-Grotesk

A font that like Arial and Univers, is very similar Helvetica, mainly in the differences between each individual character, (example below). Akzidenz was the originl helvetica, although somehow, Helvetica has a more widely known reputation and seems to be more popular than it's older counter-part. There are slight difference between the height of each character, although only minute and of course very subtle differences betweene each character, some are actually identical to eachother. 

                                          

As you can see, there are striking similarities between the two, helvetica, in my opinion is a more refined version of Akzidenz. So similar are these two fonts that I cannot really say anything that I haven't already said before, deciding which one to use will not hinder or make your design any better, it's purely a matter of preference. 

Officina

A font that I'm not that familiar with, although I do recognise it as I see it used quite often for things such as site headers or large sized pieces of text, as opposed to the bulk of the content. 
This font has more similarities to old type writers, I'm not saying it LOOKS like the typeface used on typewriters, just that is bears some resemblance. 


For example the 'c' and the 't', both to me have some recognisable similarity. I like this font, it's a little bit difference while remaining readable. For example, the edges of the x are not flat to the baseline, but rather perpendicular to the stroke itself. Or the way the c isn't a perfect circle with a segment cut out, it's more of a rectangular shape. Simple, yet something slightly different. 


Gill Sans





Gills sans is widely regarded as one of the best fonts ever produced, which isn't surprising as Gill work as Johnstons apprectice while he produced Johnston ITC, the famous typeface used for the london underground re-design. Simple, clean and elegant in its own way, there is absolutely no stroke difference, only solid lines used which add to it's consistency. Allegedly, the upper-case of Gills Sans, uses the proportions of Roman typefaces such as Trajan and Caslon. The lower-case based on proportions of Carolingian script, which has "rounded shapes in clearly distinguishable glyphs, disciplined and above all, legible. Clear capital letters and spaces between words". 

So what makes a great font? Knowing the difference between readability and legibility? Perhaps, either way I do know that it takes a detailed eye and having some sort of ability at using details to enhance the overall appearance. Designing a font that I would like to read in should probably be my biggest priority, and then getting feedback on it and adjusting it accordingly. I've learnt that there are more differences to similar fonts that simply what each individual glyph looks like. It can include the difference between the ascender height and the x-height of lower case. The amount of spacing between Upper-case and Lower-case. The thickness of the stroke being used to create the letters. Many, many things make a great font. 

Asides from that, I've realised that I should probably spend more time than is necessary to great a good font, as it is the less noticeable details, choices and influences of the designer that reflect in the font he/she has created. 

Website Research

Introduction

I feel that if I don't do some type of research, that my designs will suffer in several areas. By research, I mean looking at and evaluating current or similar websites to the one that I'm designing for. This includes looking at:

• Commonly used colour schemes
• The type of content appropriate for a city farm website
• Layout style - Is it open, sectioned, artistic?
• Use of typography
• Site features - Increase/decrease type size, flash, change layout colours?

By looking at these things, it will help me create a website that put a focus on the user as opposed to what I think is necessary. What I mean is, by examining and analysing I can gain some insight in to the designers thought process and therefore develop my own thought process while I construct ideas, therefore (hopefully) making me a better designer and a better site for the user.

Current Websites

To start, I simply typed in to google 'City Farm' and viewed some of the results on the first page, as they would be the most relevant. 

Looking at the description that google gives me, I can immediately see that a lot of the blurbs include the words 'Educational', 'Recreational', 'local' and 'family'. Already I can see that a corporate looking website probably isn't what the farm would be looking for, but that's obvious. What those words do tell me however is that the site shouldn't take itself too seriously, indicating that any graphics art I might incorporate shouldn't be too polished, as this will imply a professional standard. It also tell me that the colour scheme should use bright colours and use of darker ones should be minimal, for obvious reasons. Basically, when visiting the site the user must not feel as though they've stepped in to an office or feel as though they are being communicated with in a formal manner. 

First website - Hackney City Farm - www.hackneycityfarm.co.uk

As you can see from the screenshot, it's not the most aesthetically brilliant thing you've ever seen, although it does the job. The website follows a conventional layout, featuring the navbar down the left hand side and the content in the centre. One thing I did notice that is missing from my designs is the Opening time are displayed on the homepage, as well as some shortened text describing the contents of the site under the 'Find out more about' and 'Courses & Workshops'. 

This is something that I feel I should include in my own designs as it saves the page from being overly spacious. It also enhances the users experience as everything they need is more or less on the homepage. Additionally, the manner of the text isn't formal but it isn't too informal, providing a nice balance. Something I should take in to consideration while I'm inputting content. 

Finally, the background and the colour scheme relate well, although not being outstanding in their appearance. The whole site has a little bit of a dated feel that I would like to avoid. Personally I think this is down to the fonts used for the navbar and site header. The fonts used for the content work well but I feel clash with the sans-serif typefaces used. Furthermore, primary use of the colour brown doesn't help the dowdy feel the website has. Something that I've noticed about a lot of these types of website, is the use of green and unfortunately brown as well, which I think is only effective if used correctly. 

Second Website - Kentish Town City Farm - www.ktcityfarm.org.uk

As similar story to the Hackney City Farm website, the website doesn't exactly tick all the boxes in the appearance section. Also, the use of green is present  but not as prevalent as the previous website I looked at. What can really be said? Anything good about this website, i've already said about the Hackney City farm because the layout and presentation is very similar. One thing that I will say about this website is that it's rather boring, the lack of colour and visually uncharacteristic layout don't do it any favours, although that aids functionality while sacrificing appearance. Which I suppose isn't all bad, as I would prefer a website that is usable, over a website that is impossible to navigate but looks pretty. 

Despite that, I think I could do better than this. It's quite unimaginative and a little bit dire, not a website that I would detest using, but not one I would enjoy. 

Third Website - Deen City Farm - www.deencityfarm.co.uk

Finally, a website that looks a little bit more up-to-date and current. This actually looks like it was made by a web designer as opposed to the employees of the farm itself. 

I like the way it's been laid out, with all the content in the centre and a nice amount of spacing in between each element which gives the content an un-crowded and presentable feel. I noticed that the home page features a small introduction to the site, which is good for me because that's what I initially intended for my own designs. Similar to the first website I analysed, there is a news section to the right of the content, although this time, because the page layout is more vertical, there is also a recent images element, newsletter element and some input boxes to sign up for the newsletter. While there is all this extra content, the page doesn't look crowded. 

The simple addition of a solid coloured background works well, although the lack of graphics makes the website look a little more generic than you would initially think when you first look at. I do think that the header and the fonts used could have been a little bit more creative, although I think that in the site's header's case, that was the choice of the farm rather than the designer. I say this because it's a relatively low resolution and doesn't fit with the rest of the website.

That being said this is probably the best website I've seen for a city farm, most of them are generally pretty...well general. Rather un-memorable design, with nothing that seperates them from other websites. Although, it's understandable as a farm website isn't exactly the highest priority on the list. I think most of the websites I've looked at have been designed for functionality as opposed to being made to promote the farm. But why not? Surely there's nothing wrong with gaining exposure as it would only generate more interest and make the name more well known. Whatever the reason, I believe that above all else, functionality is the top priority and therefore I should design around specific features, instead of designing the appearance first and cramming the features in around the design. 

Gantt Chart

I've allowed myself more time with the flash elements (or other forms of coding besides css/html) because I know that I will more than likely struggle the most with that area. 

2 more ideas

I've decided that one thing my websites have severely lacked in the past, has been the prescence of a graphics design piece to accompany the design. While my current ideas don't exactly rely on this aspect, I feel that I could benefit greatly from incorporating it in to my work. I like the idea that the navbar and the image have been combined to make one element, this allows room for more detailed/larger graphics design. This is a homepage that is purely functional. It's got the two things a homepage needs, a welcome paragraph and the news feed. I wouldn't like to add anymore text, although I believe I could have done something more with the bottom half of the page.

As you can see from my last two designs I've tried to use a different approach in terms of the amount of variety my designs possess. Personally I think it's working, however basic. Additionally, I've also tried to keep a wide element spanning the width of the page, to give each page a definable structure. I've also designed with flash i mind, as the boxes below the "Welcome and a big thank you for visiting" will drop down to display their contents, of course they will be click-able. With the second idea, I struggled for ideas to incorporate a graphics art piece. Although I don't think it necessarily needs it as the boxes need space to expand in to, however I think that when nothing is selected the page will look rather bland. One more thing, I've made the text more informal, because formality is something that I consider to be of a more professional characteristic, something which I associate with large companies, which of course the farm is not.

Two New Ideas + Older Ideas

  Here are the designs I submitted as part of my project proposal. I've excluded one of the design because it simply isn't good enough. In fact, I'm rather disapointed in myself that I even decided to make it. It's that bad. Anyway, here they are.

I think could be a potential base design for the final website. It's pretty simple at the moment, which is why I should evaluate it and develop it. I do however like the element of simplicity, although the homepage doesn't do what a homepage should do. It doesn't give a quick over of the website (the latest news, events and happenings at the farm) which I think is important not only because it's useful, but because it also makes the page more interested. There is a difference between beautiful simplicity and a design being outright boring. I think this is leaning slightly towards the latter, although there are definitely positives that I can take from this design.

While I really like the idea behind this design, and I mean really like it, I don't think it would appeal to the target audience that the farm attracts, which is mainly families. This style would be more suited to a record labels website or something along those lines. I do like how the elements on the homepage are clearly segregated, which makes for easy viewing at first glance. I also really like the colour scheme, green relating to  the farm aspect, and the dark grey reflecting the farm's location. The white merely being used as a neutral contrast for the text.

I think this deisgn is borderline, maybe with some tweaking it could definitely be a contender for the final design, although I think it maybe looks a little bit too crowded and edgy for a farm website, city or not. Despite this I like the layout, especially the ''RSPB Big Garden Birdwatch' section to the right. I just had trouble finding something to put next to it that wouldn't look out of place and I don't think that I fully achieved that. Perhaps some sort of graphics could go there, such as a logo or a mission statement from the owners? As for it being too crowded, I can easily fix that by playing around with the font sizes and positioning, as I left ample space either side of the main body which I can use to my advantage to try and make the design fractionally more proportioned.

Probably my favourite design so far, I think I've achieved a nice balance between professional and fun. I especially like the cow. That being said, the background isn't mine, so I wouldn't be able to use it in my final design without giving credit, and I don't know who the original author is. I can however take a similar photo myself when the weather allows me. I've also encorporated a slider at the top of the navbar, which will move whenever you click on one of the links, as i've been told I should try to use more complicated design aspects. While not useful, I think it would add to the overall worth of the site. Again, I like the colour scheme, it's 100% easy on the eye and not difficult to read. The layout is also nicely proportioned and doesn't look a shambles.

I tried a bit more with my last two designs, because frankly I'm fed up of designing extremely similar websites and would like to push my creative boundaries. I also have some research that I need to upload to explain the choices I've made, although I probably won't do that until tomorrow.