Fonts & Styles

Font research is important for this project because I have to pick fonts that are legible by a wide demographic, youngsters who may have only just started reading and may struggle with it. Also, when the demographic spreads across the world, there are going to languages the site is written in that uses the same font, therefore the site needs to be something that can be understood in all languages by very young children.

That said the main site wide font can be a simple sans-serif font, that matches the designs of large organisations like Apples’ ‘San Fransisco’ font and Googles’ ‘Open Sans’ font.

Looking through googles’ fonts featured at (https://fonts.google.com/) there are actually a lot of appropriate looking typefaces, it is simply a case of picking one.

The reason for using Googles’ fonts?

• These fonts are great because they are completely free to use, and require no liscensing whatsoever and are completely unlimited with no caps on usage.
• Cross platform rendering is fully supported by Googles’ content delivery network meaning font stability in different browsers and devices works perfectly.
• Loading times are much faster since they are compressed and are much more lightweight than self-hosted and Typekit fonts.

After the site wide font it is important to consider the other fonts that can be used to enhance the look and feel of the site. This is something I discussed in my design infleunces with the styled tourist guidebook of Amsterdam (https://akbrodie.wordpress.com/2016/12/09/design-inspiration-2/). Therefore I think it is important to look at some of the popular fonts in different countries that relate to the heritage of that country.

The system font I have chosen is based on a few different things, after a little research I found that a font that is popular with my target audience is comic sans because it big rounded and fun as seen below;

The problem with this font is that it has been rated one of the worst fonts to use in a design. Therefore I had to look a new, updated alternative version that has the same impact on the target audience. I managed to find the font ‘Varela Round’ which has a similar style;

The problem with this font is when it shown very small it seems too bunched together in terms of the letter spacing, therefore it is important to increase the kerning size;

With the site font sorted out, I was left with searching for the remaining fonts for the specific countries around the world that would require their own font to introduct the country. This was a reasonably easy process as I would find fonts that relate to the specific countries and then use that research to pick the specific ones. This can be seen by the the font examples below;

Advertisement

Content Layout

Understanding layout of content is going to be a vital part of my brochure so that I am able to present the web trends in a readable, fashionable way. Using a mixture of images, text and white space creates an interesting layout on paper. It is understanding to balance these elements that creates a visually appealing brochure. I have found that if you are to have text, to make it understandable, the best layout is to use columns of two or three. You can see quite a few examples of this method used below;

Some printed material focus their efforts more upon the typography than the other aspects of the design, this creates a different feel to the printed material, you can see some examples of this here;

This example is excellent because it also shows the method of cutout text to reveal an image through the text.

Another important thing I noticed in print is the shapes used to add additional interest in the subject is the addition of shapes and lines around a person or object. I think this allows the reader to instantly recognise what is at the centre of attention. You can see some great examples of this here;

References;
http://inspirationhut.net/inspiration/42-excellent-examples-of-magazine-layout-design-for-your-inspiration/
http://indulgy.com/post/pEfMtH34d1/layout-dansk-magazine
https://www.behance.net/gallery/Magazine-Feature-Magazine/9812813
(http://www.flickr.com/photos/marindsgn/3894231417/in/photostream)
http://www.amandamocci.com/#1906059/THE-UNIVERSE-POSTERS/
http://www.aisleone.net/2012/design/typographic-revolt/
http://www.opus-design.jp/press/item_539.html
http://www.magspreads.net/2013/07/fashion-look-book-layout-design.html
http://milesmind.tumblr.com/post/44590898712

Website Analysis 1 – thenutone.com

I am very impressed by the nutone.com, it is very simple, yet extremely professional. The company’s services range from web design and print to branding and illustration. Given they are a design company, the biggest aim of the site would be to show of the skills they have available. Their site takes advantage of negative space like I have previously spoken about (https://akbrodie.wordpress.com/2014/09/22/rosa-bonheur-the-lion-at-home/). Broken down into four simple sections.

Home

The homepage is simple, it has the company name twice, a couple of simple graphics, links to other parts of the site, and the social bar. The greeting is simple and is dominated by negative space. Salmon is used to colour the background, and I thought this was unusual so I researched the connotations of the colour, I realised that it may not have been picked for simple design aspects but also the meaning behind the colour. I found (http://www.mysticfamiliar.com/library/l_auras_colour_meanings.htm) with the meaning “people who have found their true vocation and love it” which would indicate that this company is not only good at what they do but they also love it  too!

Works

The works section is an interactive part of the site, when you hover over a box it names the company and tells you what work they did for that company. The page links and the social bar has moved to the sides to get of of the way of the content, allowing your focus to be on the centre of the page, which is where the client work, the most important content lies.

Something incredibly simple but effective I found while looking at this site is that all the colours run into each other, check out the pink running into the grey and also the grey running into the about section here. It gives the website a certain type of flow that you can’t really find many places on the web.

About

As found here (http://www.plosone.org/article/info%3Adoi%2F10.1371%2Fjournal.pone.0071161) it has been proved by a study based in the US that dyslexic people find it easier to read shorter lines rather than longer texts. This is the first time we have seen text as a whole on this website, and it keeps it short and snappy, more presentable with a shorter width and makes it look there is a nice simple block of text to read.

A quirky side to the site is the statement “Let us Lorem, your Ipsum” leading to the contact section of the site. While Lorem Ipsum is “simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s” (http://www.lipsum.com) thenutune have tried to create a somewhat innuendo sounding phrase from it. In the creative world, which the company would be making a product for, it makes them look like they have a sense of humour, and adds quirkiness to their site.

Contact

Again the contact section of the page is very simple. containing contrasting colours that leave the site looking far from bland. I feel that the fact that the site is simply one one page, it allows the user to experience without clutter or unnecessary content. The negative space on the webpage is key to making this site a brilliant experience for the user.

The future of Web Design

A website is designed to be a centre of information for businesses, indivuals and marketing purposes. Mostly websites are there top create action from the user, whether thats to purchase, share information, visit their pysical store or even use the service they provide. It must become easier for users to understand how a website works and how to use it. This will be done by making sites like their print counterparts by using full advantage of the technology that is available. Becoming interactive, using sharing for easy marketing and pageless designs for simplistic use. Many people try to second guess what the market is doing but given I am studying a three year course not only do I need to stay current and research what media is doing now, but by the time I finish my course some of the design elements will be dated and looked down upon. Therefore it is vital that I constantly try and work out where the Internet is heading, and use that to my advantage to create work that incomparable to anything else that is available at the moment. Audiences loose interest very easily and the average attention span is on average 7-10 minutes, online users spend a lot less time and will simple move on to the next site if they do not find the information they are looking for. People do not want to spend time reading a lot of information of a website and a 2013 study carried out by The National Center for Biotechnology Information, U.S. National Library of Medicine, The Associated Press discovered that users won’t read all the text regardless how many words A website that contains less than 111 words the user will read 49% of the text on average, this is a moderately small ammount of text in comparison to the average webpage that contains about 600 words on average, the user usually only then read about 28% of the text and then spend a further 4 seconds for 100 words on a page. This indicates that webites are doing themselves a disservice by creating a page with lots of text. Through other research I have conducted tht is available on my blog, white space with less text is key. While our attention span last for about 7-10 minutes on average, you can guve users a ‘break’ from your content, allowing their attention span to ‘reset’. While you don’t want users to take a break from your site, it might be easier and more intuitive to include a form of break on the site. In terms of being in a presentation where you address your audience pysically, you can ask questions, do something interactive, tell stories or move on to a new topic. While some of this is an alien concept to using a website, I think that taking advantage of the information I have just researched and implementing it in a site in a new, user-friendl way may capture the audiences attention for longer periods of time. Another interesting and key factor in creating a website would be to allow users to understand the website as soon as they visit the site without scrolling or clicking anything, ‘Above tthe fold’ is a phrase used for the area that users see before they scroll. Jakob Neilsen noted in 2006 that 77% of users do not scroll on a website and only 22% actually reach the bottom, this means something is going wrong with current design of websites. It would be considered important, given the facts, that summary of the page and its contents is provided above the fold. Benifits of pageless websites are that they can created with responsive or adaptive formatting meaning they’re much easier to use on a range of different devices. They are less common and leave a better impression on the user, making it something thy will want to share through word of mouth. Tell a story,, following a timeline down of a ficticious character that needs his/her roof fixing. water drop starts leaking through the roof, follow the waterdrop through the house, following the steps as you go, explaining the services. A visual journey that takes the user from the problem to the solution.

References:

http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

http://www.statisticbrain.com/attention-span-statistics/

http://www.mrmediatraining.com/2012/08/23/how-many-minutes-is-the-audiences-attention-span/

http://en.wikipedia.org/wiki/Above_the_fold http://firstresponsive.com/pageless-design-future-web-design/

http://www.google.com/nexus/5/ http://www.sequence.co.uk/media/278589/fowd.jpg

A history of typography

Typography dates back as far as 1200 BC when the Phoenicians gained independence from the Egyptians, they developed the first language composed entirely of letters. Greeks then went on to develop this by adding 5 vowels that we use today but missed spaces, punctuation or lowercase. The romans were the next to improve the language by keeping the “ABEZHIKMNOTXY” letters and remodelling the “CDGLPRSV”. “UW” letters were based upon the letter V and were being used by the year 1000, J based upon the letter I wass added by 1500. Only 57 years later in 1557 Robert Granjon ” invented the first cursive typeface, which was built to simulate handwriting.” The first groundwork to a different type of font was when William Caslon IV created the first ever font without serifs, called sans serifs was ‘ridiculed’ for it. Years later the arrival of the Macintosh and the original concept of Graphic User Interface (GUI) meant user could take advantage of a total of ten different fonts on screen. The explosion in font design was when apple created the Truetype font technology that allowed small time designers to create fonts.

The different types of typography

There are many different categories and sub-categories of typeface. There are many factors that can effect the way we perceive text, weight, style, proportional, monospacing & mood are all major factors in this. The difference between serif and sans serif can be seen in this image; Serif Serif fonts are usually used for large amounts of text, in print or online, Old Style serif, Modern serifs and Slab serifs are the three main types of serif.   There are many examples of serif fonts being used today, the ibooks app offer many font choices but only one being sans-serif, the reason for this is as earlier stated, serif fonts are usually used for larger amounts of text; Old Style Serif typeface is one of the original roman typefaces designed in the sense that the style of the letters come from the fact someone is writing them with a pen at a consistent angle. This Apple advert below shows a good use of the old style font with sloped serifs.   Modern Serif typeface uses many of same ideas to create the font but create a bigger contrast between the thick and thin lines, have vertical stress and minimal brackets. The TIME magazine uses this on the cover of their magazines.   Slab Serif  typeface have almost no contrast between the thick and thin lines with thick rectangular serifs, the most notable is the use of the font Clarendon Bold Expanded in the sony logo (original is top);   There are other uses of the typeface in mainstream media. The U2 album “How to dismantle an atomic bomb” has the exact same font as the sony logo (original is top).   The origins of this typeface was back in western “wanted” posters which i have mocked up here; Sans-Serif typefaces look modern as they do not have the the ‘serif’ details on the end of characters. The font can be broken down in to four major categories. Grotesque, Neo-grotesque, Humanist and Geometric. Grotesque typefaces are usually very similar to Sans-Serif fonts just without the serifs. It’s original meaning was “restricted to an extravagant style of Ancient Roman decorative art rediscovered and then copied in Rome at the end of the 15th century.” This cover of Vanity Fair shows an example of the use of a grotesque typeface in use, Sans-Ps-Cd (below cover) is very similar, but lacks the thinness and the height as you can see here:     Neo-Grotesque typefaces are plain and simple in comparison to the grotesque fonts. A modified version of Univers used in the HUGO BOSS logo, as you can see they have mixed serif with sans serifs which add clarity and contrast to the logo…   Humanist typefaces are the most legible out of any font, they have the biggest variation of the line widths. Easily the biggest user of this typeface is the BBC when they used the font Gill Sans.   Geometric typefaces are designed too look like they are layer out using direction. GQ’s cover is a mix between both Century Gothic and Futura, to further study the geometric font, I decided to research the covers that GQ do and then recreate my own.

I studied these covers for things that I would need to re-produce on my cover, a couple of things that caught my eye was there fact that GQ was behind the faces, two covers also feature a red transparent box with text about the magazine. The covers tend to feature about 3 different font colours and sizes alternated across the cover, this was something important I needed to use. I photoshopped the background out of an image of myself, and replaced it with grey to white gradient. Used layers to put text in front of, behind of and around me, using varied sizes on the different sections, I give it a very realistic look. I make sure the text layout is exactly like the GQ cover for example the text is structured to the left and right, the text is measured from the sides to be flush all the way down also has a red line along a title of a feature and the red plus sign at the bottom just like the yellow one on Robert Downey Jr’s cover.

Script

Formal

Formal Script typefaces were created usually between the 17th and 18th century, the best example of a formal script typeface is the Spencerian Script which was created in the 19th century. There are two major companies that have used variations of this font. First one being Coca-Cola;

    The only difference between mine and the original is the letter spacing. Coca-Cola’s are joint and are inter-looped. I have also created this image;       The Ford logo and Coca-Cola’s is very similar, using variations of the same font. You can see the font is varied to the point in which some of the small details are not the same, but you can see some of the similarities in the fact it flows like handwriting. I have also added the Coca-Cola logo in the top right just so you can note the similarities between the three.   Casual Casual Script typeface show a more relaxed, active hand. The fonts tend to look like they were created with a wet brush instead of a pen nib. They started to become mainstream in advertising in the 1970’s. A great example of Casual Script typeface being used was created by sbdesign with this design for a stationary company.   The next stop on my journey on typography will be to learn how to match certain fonts.   References: http://planetoftheweb.com/components/promos.php?id=174 http://www.noupe.com/design/a-crash-course-in-typography-the-basics-of-type.html http://en.wikipedia.org/wiki/Slab_serif (http://www.gngcreative.com/newsletters/images/serif-sansserif.jpg). http://farm8.staticflickr.com/7206/6880915996_44cb8620f5.jpg http://www.kitguru.net/channel/generaltech/matthew-wilson/sony-executives-will-cut-wages-and-forfeit-bonuses-this-year/ http://cdn.americansongwriter.com/wp-content/uploads/2010/08/u2112.jpg http://photos.imageevent.com/afap/wallpapers/musicpictures/u2/huge/U2-How-To-Dismantle-An-Atomic-Bomb.jpg http://oakdome.com/k5/lesson-plans/photo-editing/wanted-poster/blank-wanted-poster.jpg http://idsgn.org/posts/know-your-type-clarendon/ http://typophile.com/node/13516 http://www.honestjohn.co.uk/media/3297865/ford-logo-big.jpg http://download.fontmeme.com/fonts/10107/coca_cola_ii.html http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png http://en.wikipedia.org/wiki/Script_typeface http://williamaaronkelly.files.wordpress.com/2012/01/tumblr_kvfjo9wnlt1qz4s4lo1_500.jpeg http://th07.deviantart.net/fs43/PRE/i/2009/067/7/c/Time_magazine_cover_psd_by_almosh82.jpg https://akbrodie.files.wordpress.com/2014/09/42860-08-dec-gq-cover-796492.jpg http://www.drfunkenberry.com/2012/08/29/happy-birthday-michael-jackson-human-nature-howie-t-remix-listen-now/michael-jackson-gq-200809/ http://www.360nobs.com/wp-content/uploads/2013/04/Rober-Downey-Jnr-GQ-May-Cover-2013-360nobs.com_.jpg http://www.vanityfair.com/dam/blogs/2013/jennifer-lawrence-cover.jpg http://logopond.com/gallery/detail/159380 Featured Image: http://flaffitis.files.wordpress.com/2011/05/evolution_of_typography_by_silverthornz-d32ydi0.jpg