I'm reposting a blogpost I saw on the 'youthedesigner' blog recently, it's a new piece of software created entirely to build, edit and develop typefaces. It looks great visually, and I'm really keen to try it out:

Prototypo: A Streamlined Online Typeface Editor

Articles April 18, 2014

London-based international type foundry, ByteFoundry has created a slicker and smoother way in creating and editing typefaces. Called “Prototypo”, the open source online editing application will make the work of type designers less tedious and repetitive.

Prototypo features a streamlined way of editing typefaces with over twenty parameters to modify all built-in glyphs at once. Type designers can play, experiment and refine spacing and outlines of a wide range of body text fonts using sliders. The application brings a whole new approach of type design by letting you focus on shape design, integrating historical, mathematical and visual rules of this discipline to automate repetitive tasks.

ByteFoundry worked for five months to create the prototyping tool which now allows to quickly experiment with glyph shapes. The application is user-friendly to the point that it can be done by anyone regardless of prior knowledge and experience in type design. The application exports “A-Z” characters in .svg font files that can be converted online or in FontForge to .otf files, then refined using classical type design softwares before being used like any other font.

Prototypo is currently being funded through a Kickstarter campaign that will realize more exciting features for the application mainly allowing anyone to refine the type designs right inside the application. Thus making way for other new features including manual modifications of glyph outline, spacing and kerning, extended glyph sets, serif and glyph variations and auto exporting to various font files.

The funding goal of the Prototypo was reached quickly and now heading to hit the stretched goals with a lot more days left for people to pledge their support. Check out the video below or head over to the Kickstarter campaign page for more information.

On choosing the topics for my booklet/spreads in regard to Graphic Design, I decided to opt for these 5 categories to develop:

- Golden Section

- Colour Theory

- Typeface Choice & Appropriateness
- Layout & Grid
- Legibility & Readability

In terms of physical research, I'm showing the work we collected together as a group prior to reaching this stage. I'll start with:

Golden Section:

Expressed as an equation, when a is larger than b, (a + b) divided by a is equal to a divided by b (just look at the image below), which is equal to about 1.618033987. That number, often represented by the Greek character "phi," is the golden ratio.

(Image Source: mathsisfun.com)

The same theory can be used to construct a rectangle, called the golden rectangle. An image that follows the golden ratio can be placed neatly inside a rectangle that obeys the ratio. (http://www.hongkiat.com/blog/golden-ratio-in-moden-designs/)

For Grids/Blocks

The square created by the a lines would be your content block. The smaller rectangle would be a side or navigation bar. Once you have figured out the size of your rectangle, finding out how wide your navigation bar needs to be is easy math.

For this example, we’ll say your rectangle is 525 pixels by 850 pixels.
525 is a and 850 is (a + b), and b will be the width of your side bar.
To find b, we simply subtract from (a + b), which is 325.
Therefore the width of your side bar is 325.

Remember that your rectangle can be flipped around to suit your purposes, putting the sidebar at the top, bottom, or opposite side. As long as the ratio holds, your design will feel harmonious.

For Text

There’s a faster way to get the measurements you need and it can be applied with text content.

Let’s say your context text is size 12.
Multiply 12 with 1.618, the golden ratio, and you’ll get 19.416.
A header text size of 19 or 20 would closely follow the golden ratio.

The golden ratio is a language your mind understands, and by communicating with it, your ideas will come across more effectively. You don’t have to adhere to it exactly; the basic principle is enough. Applying the ratio to image sizes, the relationship between text and image placement and the creation of subdivisions within side bars are all possible concepts.

Grid Work: The Rule Of Thirds

If math isn’t your cup of tea, the concept of the golden ratio can be simplified. The rule of thirdsgoverns the placement of points of interest in a scene. Divide any given image into thirds both horizontally and vertically. You’ll get 9 grids.

(Image Source: digital-photography-school.com)

According to the rule of thirds, the vertices of those lines (where the lines cross) are the ideal placement for points of interest. People scanning the page are more likely to notice things placed near the points, and the division is comfortable to view. More complex design is possible by breaking down those thirds into further thirds.

(Image Source: net.tutsplus.com)

In short, the eye can be lazy and not have to search for important details. Our brains like this. Major images, news boxes, search bars and any other points of interest can be nestled on or near the vertices. This neat little shortcut will give you a design that is both easy on the eyes and makes people drawn to key pieces of data.

Columns And Font Sizes: Fibonacci Sequences

Another simple tool for web design linked to the golden ratio is Fibonacci numbers. A Fibonacci sequence begins with 0 and 1. The previous two numbers are added together to produce the next number in the sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… and so on.

A little math tells us that the relationship between sequential Fibonacci sequence numbers is startlingly close to the golden ratio – divide the any number in the sequence with the number before it and you will get – you guessed it – 1.618.

As with the golden ratio, Fibonacci numbers can be used to dictate the relationship between header and content text sizes. It could also be used to designate the width of columns and is especially effective in blogs and other text-dense layouts. Composition could also be built upon the concept of Fibonacci tiling, in which tile size is built upon using the Fibonacci sequence.

(Image Source: Wikipedia.org)

Graphic Design

Here is an example of book format and page layout construction applying the use of the Golden Proportion.

This Medieval manuscript framework, according to Tschichold, shows a text area that is constructed using the Golden Ratio. “The page proportion is 2:3 and the text area is proportioned in the Golden Section.” (http://www.webdesignstuff.co.uk/nl004/golden-ratio/application-examples-in-modern-design/)

I also found a very interesting article on how the Golden Ratio is applied on typography - shown below.

'The mathematical proportions of your typography are vitally important to how readers perceive both your site and your content.

Credit goes to Daria Buoninconti for her research on Golden Section

Colour Theory, the investigation of whether everyone see's the same colour, and legibility with colour:

So the ocean is blue, the sun is yellow but Colour is just an illusion. It doesn’t exist beyond this world. Our brains turn wave lengths into colour. Everyones brains are different though How do we know that if I look at a strawberry and say its red? That you don’t look at the same strawberry and see green? You agree that its red because you have nothing or no one to say that the colour you call red isn’t red. We know that not everyone sees colour in the same way we know that people with colour blindness see colours differently.

In terms of our perceptions we are alone there is no way of feeling other people’s reactions to any sense be it sight or even taste. Which brings up the question if we all live in our own bubbles unable to actually touch because of physics, unable to see into others minds unable to feel what others. Could it be that our preferences are all identical and perceptions are just something to add variety to our lives.

This is a video about blind man who tries to understand colour.

How does it work for him? He doesn’t know he is blind since birth. People have tried to explain it to him but he finds the concept foreign. He says its like trying to explain what the ocean sounds like to someone who has never heard it.

people try to explain sight sense with other sense. like that smell is yellow. this just confuses him as it doesn’t make sense. He knows red is fire and that a stop light is red but he has no idea what it looks like, he doesn’t know what black or white is either.

So that answers the question: Is my green the same as your green?

I went a little bit more website design based for the next question: Does colour improve designs?

The two images above illustrate what colours make us feel. I find this interesting because we could all be seeing different colours but through the push of cultural codes and day to day lives whatever that colour we see is we associate it with the emotions listed above. Knowing what colours make us feel could definitely help improve our designs.

This is interesting because red is also associated with danger and more people clicked it. I personally think its because the colour also creates excitement and increases your heart rate which would attract us to pressing the red one instead of the green.

Does Colour Affect Legibility?

White text, (particularly fine serif type) on black background is both hard to read and hard to print, the fine strokes often are lost unless the production methods are perfectly aligned.

Readability is reduced by up to 50% !
The three process colours CMY all have similar legibility problems when placed on black. The colours vibrate horribly against the black, definitely more so than white type.

Yellow is too weak on the white background to be at all legible in bulk.

'Colour is visual magic, a language of illusion.' Rob Carter - Color & Type
Two fully saturated and complementary colours vibrate as a result of simultaneous contrast.

When colour is applied to type, the interplay of hue, value, and saturation must be considered.

Type presented in a highly saturated blue and orange combination is very difficult to read. Adjusting the value of either the type or the background greatly increases the legibility. They suffer from having a competing brightness, fighting for attention.

Red and orange (close on the colour wheel) do not provide enough contrast for adequate legibility. Using a lighter tint of orange greatly improves the legibility.
Try not to choose letters directly opposite on the colour wheel nor too close.

Enough contrast must exist for a slim or delicate typeface to be legible on a light background.

The actual 'colour' of the block of text is decided by the characteristics of the font used. Using a slim font will appear as a lighter shade of the colour used.

The kerning and leading also affect this block of colour effect.

How Does Light Affect Colour Choice?

'If your room is north-facing, the light that enters will be softer and will produce a warmer effect, with darker hues that are darker-looking and light colors will be a touch more subdued. This is because light from the north adds a touch of blue. If the room you’re painting has a southern exposure, it will receive the most intense light. Darker colors will be somewhat brightened and light colors (especially white) have the potential to leave the room washed out. In the evening, a room on the west side of your home will have warmth from the orange colors added and can leave rooms that are orange, red, or yellow saturated.Eastern exposure adds a bit of green to your room’s walls, and you can brighten this room up with soft cheerful yellows.'

http://www.startrightstarthere.com/paint/interior/color_advice/how_light_affects_paint_color.aspx

Interior residential lighting is usually a combination of incandescent, fluorescent, and sometimes, halogen lights. Depending on what kind of light you’re using in a particular room, the effect that it will have on wall color will vary.

Incandescents
Incandescent light bulbs provide warm light with a touch of yellow or amber and are warmer than fluorescent bulbs. Bright and warm colors like red, yellow or orange will appear more intense if your room is lighted by incandescents. Cooler colors like blues or greens will be dulled a bit by incandescent lighting.

Fluorescents
Standard fluorescent lights give off a cool, slightly bluish light and work well with cool colors like blues
or greens. Some more specialized fluorescents can give off warmer light, but not to the degree of an incandescent.

Halogen
Halogen lights are closest when it comes to replicating natural light. Halogen light is mostly white and bright and doesn’t distort color as much as other artificial light sources. However, it can sometimes cool down colors.

http://www.idealliance.org/bulletin/feature-articles/8/22-color-preference-printed-color-and-psa-certification-part-2-how-light

Figure 2.2 illustrates that the three images, labeled X, Y and Z and displayed side by side in the Color Rendition Demonstrator, have different color appearance. Some might conclude that the three images are different.

In fact, it’s the three different lightings that give the three identical images a different appearance. By switching the images to different lighting conditions, as shown in Figure 2.2 and 2.3, the appearance of the image as displayed remains the same.