Project Description (500 words)

My project will address the academic field of design’s standardisation, focusing specifically on typography. In fact, the standardisation, according to Espejo (2016, p. 296), “made the product familiar to readers and served as a criterion with which to differentiate it from other formats”. Thinking of this quote, I intend to argue that the most recognised products tend to spread certain design standardisation. So as to achieve the goal, I will depict how the fonts, including Helvetica Neue, Myriad and Garamond, have gained global recognition and secured their position in the world of design, after Apple has mass produced them. The narration is based on the idea to show the high usage of the fonts through statistics in order to lead the viewers to the questions about the indispensable characteristics as well as the values behind these typefaces. Then, it will be illustrated that the main advantage of the fonts is the fact that Apple has given them an exposure.

Based on the pilot material, it will be possible to produce the larger project in terms of data  as well as critical insight. What I mean is presently the statistics, which I have collected, is not accurate enough. In essence, I have included it on the website so as to show how the page is going to look visually. However, in the future I aim to get an access to some archives of data base because it will make the value of information much higher as well as give more criticism to the work. Regarding the other pages, they are more likely to be improved technically in terms of animation and interactivity so as to produce more engagement.

I feel that for the main part my project can interest those who have some passion about design and the issues around it. Precisely, it could be both amateurs and professions who try to investigate the field of typography. While doing the research, it has been discovered that design plays a particular importance in the life of the generation Y or millennial (Ponchione, 2014). Therefore, I have decided to target this group predominantly since it is already a large segment. Moreover, the potential research on typography’s statistics can have some value for researchers, attracting them to the website.

Considering the history of typography that emphasises some contribution of the web to the fonts’ lose of identity, I feel that is essential to cover the problem in digital space. Furthermore, millennials are used to be associated wit digital reality, especially with social media platforms. Therefore I can promote my project there, what is quite beneficial since I can ask friends to help with promotion for free or pay reasonable price for marketing tools.

 

Reference:

Espejo, C. (2016). The Invention of the Gazette, Media History, 22 (3-4), pp. 296-316, DOI: 10.1080/13688804.2016.1149458

Ponchione, A. (2014). Perspectives Trends Millennial Mind, Hospitality Design,  36 (3), p129. [Online] Available at: http://connection.ebscohost.com/c/articles/95957118/perspectives-trends-millennial-mind. [Accessed 28 Nov 2016].

Final Version of the Websites’ plan

In this blog post, I would like to present the final explanation of my website’s plan, giving all justifications of the choice.

Overall Design: Basically, I have built the website, based on the principles of neon aesthetics, because it has reference to pop-culture and evokes a strong sense of modernity that is valuable by my target audience (Millennial).

Colours: I select black colour as a background because it creates a sense of mystery (Chapman, 2010), making users asking what is the secret about typography they don’t know, as well as signifies neutrality and simplicity, valuable by generation Y.

Typography: Because the goal of my project is to touch upon dominance of sans-serifs fonts,  without any doubt Helvetica as it is main representative has been chosen as the main type of the website. What is more, according to Elliot, S. and Barth, J. (2012), this font is especially beloved by my target group.

screen-shot-2016-12-06-at-12-26-29

The first page will introduces users with the topic, while the visuals will make them question what is wrong with typography.

The home page shows the range of 3 fonts that users can explore. The dark shade has been created to underline the sense of modernity as well mystery , while lights out effect has been created to make you feel that the secret will be revealed if you click on the image. Behind the fonts, the timeline, which consists of the words (‘discover’), is presented to create a sense of connection between these three types.

screen-shot-2016-12-09-at-01-51-30

The statistics page will demonstrate the influence of the font, focusing the attention on its high use on the web. The graph itself is built on the principles of data visualisation since it is a ‘modern trend’ that is able to present the information beautifully as well as comprehensively and simply. The blue rectangle has been used to create a feeling that it is a profile of Helvetica. In the next term, the graphs on this page will be animated. Besides, the slideshow that let users explore the information about all 3 fonts will be provided on the same page. However, as it has been discussed previously, there will be 2 other pages that are supposed to look totally identical to this one. Depending on the made choice on the home page, the slide show at first will depict the selected font and then others .

The final page will suggest that the values of the fonts are disappearing. Basically, the focus will be to show that due to massive use of Helvetica, Garamond and Myriad, their identity hardly lays role . Regarding the visual look, a timeline is presented once more. However, in this case it is mostly used to signify the presence of typographic trends. The colour of yellow, red and blue have been chosen so as to play on contrast with black, illustrating innovative aesthetics (Chapman, 2010).

Reference:

Chapman, C. (2010). Color Theory for Designers, Part 1: The Meaning of Color – Smashing Magazine. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/ [Accessed 8 Dec. 2016].

Elliot, S. and Barth, J. (2012). Wine label design and personality preferences of millennials. Journal of Product & Brand Management, [online] 21(3), pp.183-191. Available at: http://www.emeraldinsight.com/doi/pdfplus/10.1108/10610421211228801 [Accessed 7 Dec. 2016].

 

Final Changes (Statistics Page + Values Page)

Basically, I would like to reflect on the changes that I have done for the values’ page. Inasmuch as this page has lots of details to change and add, I have immediately started working on it. In fact, I have realised that I need to find the data that would show the names of the big brands that mass-produced Helvetica, Myriad Pro and Garamond after Apple. This information could help to focus users’ attention on the fact that Apple has set typographic trends, while other companies without much considerations of their valuable characteristics just spread them even further in the digital and real world . Indeed, although I had collected some information, while doing previous research (like I found that Microsoft bought the licence on Garamond several years after Apple used it), I was in need to make more accent on tech-based companies since the website will be promoted on the web for its heavy users, millennial. Surprisingly, the main obstacle was to find the dates when the companies have started using the fonts. In end, I discovered that Adobe Acrobat mass-produced Myriad Pro in 2005 while Apple adopted it in 2002. Regarding Helvetica I wanted to underline its undeniable dominance, therefore I constructed animation in the way, which emphasising that it was produced by massive amount of companies. Next, so as to make an animation brief and engaging I used just the names of 3 big corporations since if I use more the message can hardly be understood.

screen-shot-2016-12-08-at-15-37-37statistics

 

After I found and incorporated all information within the animation, I decided to show it to some people. Actually, it has appeared to be too fast.Therefore, I have asked my tutor for a solution and in essence has been recommended to check if the text is read slowly twice (in this case everyone can get the message). In fact, I spent hours to work on it because of the huge amount of details and texts there, but as a result I had made it be played slower. However still  I am not sure if it is the right speed. Hence, I feel in the next term I need to adjust it by organising focus group where people will share their opinions.

Regarding the page with statistics, I added button with hyperlink to the next page. So as to make users be aware of the purpose of the next page, I named the button ‘discover the values’ because it is pretty clear and does let users get the point.

screen-shot-2016-12-09-at-01-51-30

Development of the final page

Whilst experimenting with the final page of the website, I came up with an idea to use connotative sigh of label to emphasise the influence of Apple in establishing design’s homogenisation as well as make users feel that the fonts have become popular due to their mass-production. The one thing that I have been worried about is to what extent this element will match the overall design. Therefore, I have showed the pretty much finished version to my tutor to ask how does everything work all together.

In fact, I was suggested to avoid using this label because, firstly, it will look like I am attacking Apple, what appears to be ethically incorrect. What is more, the aim of my project is to educate people about types, focusing their attention on the fact that the values of the fonts are disappearing in the time of corporate-driven design, however, if too much emphasis is put on Apple, the idea will be hardly understood. Therefore, I decided to change the concept a bit. Literally, the fact that Apple had mass-produced the fonts, while other companies started using them afterwards.

Then, so as to keep the narrative clear, I have decided to leave the page with statistics for the submission. Obviously, it will be used for better articulation, demonstrating the design that will be applied when the reliable figures will have been found.Therefore just statistics about Helvetica will be shown on the page.

 

Experimental: Animation (Landing Page)

In this blog post, I would like to reflect on the new animation I have produced for the landing page.

Basically, it was quite easy to accomplish therefore I have tried many options, like I changed the order of the elements and adjusted the speed of transition so as to achieve the desirable effect.

Version 1:

Version 2:

Basically, although I created much more options, here I placed two most successful versions. In the first version, at first the lines that are constructing the rectangle as well as the word ‘typography’ are appearing. Then, smoothly the line, moving to cross the word, is becoming visible. The problem that I have figured out is that it does not feel that the line is transfixing the word. In the second version I have solved it by changing the order of the elements. Precisely, initially ‘typography’ as well as the line that is crossing it are slowly appearing and then the rectangle is being constructed through the lines.

I feel that the importance of this page consists in the idea that it can attract users from the beginning and give them a small sense of narrative’s development. So, this page is like an introduction to my story. Hence, I have built the animation that let users see how the composition is constructed, focusing their attention on the line that is coming through the rectangle to the ‘typography’, transfixing it. This has been done to make the users unconsciously question what is wrong.

Project’s Cost. Justification.

In this blog post, I would like to discuss briefly the potential costs of my project. Without any doubt, I will need to spend money to host a website.The easiest way to do is through muse official site, because I have created a mock-up using this program, what means that I can just buy the domain while in case of other platforms’ use I need to rebuild it completely. Basically, there are two price options, which let you get monthly or annual access. I feel it will be more profitable to buy yearly access since the difference in price is minimal, whereas the difference in capabilities is more likely to be quite visible.

screen-shot-2016-12-09-at-03-04-59

Besides, I need to promote the website via social media. Although I can ask my friends to help with promotion it will not be enough. Therefore, I need to refer to some marketing tools, predominantly on a Facebook, since it is possible to target people based on their interests. Its another bonus is that it is possible to select the budget that fits you. So I can spend around a pound to promote my website for particular amount of days.

Reference:

Muse-Themes.com. (2016). Muse-Themes.com – Adobe Muse Templates | Muse Widgets and Blog. [online] Available at: https://www.muse-themes.com [Accessed 9 Dec. 2016].

Plan of The Website

In this blog post I would like to present the full detailed plan of my website.

I will start with landing page.

landing

Basically, when it appears a user needs to click on the rectangle to move to the next page, which is home page. Actually, there is no other way to come to this page after a user clicks on the button rather than reload the website’s link.

The next page is home page.

page1-move

After a user moves to the home page there is some choice where to go. Literally, it is possible to select Helvetica, Myriad Pro or Garamond Pages.

The pages with Helvetica, Myriad Pro and Garamond are supposed to be done a bit tricky so as to make users follow the narrative that I have constructed.

statistics-page

In essence, both 3 pages will be the same. What I mean is, if one selects page about Helvetica to start, in the beginning the data about Helvetica will be presented as an animation and then a user can click on the circle, located on the bottom of the page, to discover the statistics about other fonts (this will work as a slide show). At the same time, if users will choose another font in home page to start, for example Garamond, the page will present the statistics about Garamond in the first place and then it will be possible to observe information about other fonts. So to put it all differently, depending on the choice, the page starts from the different elements but overall it will look totally the same. This strategy has been chosen due to several reasons. First of all, so as to produce the most effect as well as to persuade an audience about Apple’s influence the final page should summarise the values of all fonts of the website. This means that if a user clicks on “Discover Its Values” so as to move to the final page, without viewing the statistics of other typefaces, the narrative does not make any sense. Therefore, I have realised that  I should not give the users the options between coming back to the Home Page so as to choose another font for consideration and going to the Values’ Page that is final part of the website (therefore, statistics page does not show home page button, instead there is just an option to go to the Values Page).

In fact, this means that I need to create an animated graphs, working as a slideshow. Basically, I have found the videos that will be able to help me to realise it as at the next stage. Here are the links:

The final page is Values Page.

values-page

After all, the final page with values will appear. In fact, after the animation ends at the top left corner a button, which let users come back to Home Page to play it all again, will appear. In essence, such sequence has been chosen because it is the best way to control the narrative and make sure the message is delivered.

Pages With Statistics (Visual Mock-Ups)

Basically, all 3 pages with statistics and general information about the fonts are going to look the same.In fact, I have decided to make them look totally similar because each page that is going to be changed one after another contains too much data and it will be extremely distracting if they look differently. Without any doubt, I will use the information about fonts’ release date, designer and category. Then, I got credible data on how many websites used the typefaces. The image with Helvetica already represents the reliable figures. As for Garamond and Myriad, I have the figures (can be found in previous blog posts), however I did not include them in mock-up since the pages have been done for visual purposes mostly. Other information has been written, based on the Internet (some figures have been just imagined). As well, while searching the images about Helvetica, I found the picture that represented typographic analyses of the font and included it in my representation (as you can see some parts of ‘Helvetica Neue’ are selected by shapes of blue and yellow colours). As for Garamond and Myriad Pro, I decided to recreate this analysis, however I was unable to find it on the Web. Although once more I drew it for visual purposes still I need to find a specialist, who will help to choose the right parts of the letters that emphasise the belonging of certain font to particular category. I was thinking to contact later some tutors in our school who have proficiency in typography. As well, they can help me to find the archives and sources that provide an access to the reliable data about type’s use.

Reasons Behind The Selection Of The Pages

In this blog post I would like to explain the reasons behind the selection of landing page, home page and values page as the main pages to represent the website. In essence, the complete website is supposed to be composed of 6 pages. However, for representation I have chosen just 3 of them. The first reason is that this term is based on research development and its main purpose to develop the complete idea of the way the project should look and tries to achieve in terms of the concept, while for the next 12 weeks (next term) I need to create a plan that suggests what I need to do further. Therefore, I am unable to include all pages.

Initially, I was thinking to include the page with data visualisation since I have spent quite a lot of time to create it, making it look impressive. That page definitely illustrates the design skills I possess. However, later one I have a thought that the page, despite its visual attractiveness, does not contain reliable data. Therefore, I started thinking to animate the landing page that would be essential part of engagement’s creation, home page that is the fundamental part of the website and lastly the values page that will let me represent the narrative clearly and comprehensively. What is more, if I try to sell the project to some organisations, justifying what I am doing, they can help me to get an access to reliable data regarding typography. As a result, it could give my work more credits, making it an outstanding source, where diverse data about the fonts, is presented.

New Landing Page

Basically, I have continued my research for the engaging landing page and this time I was more productive.

123

In essence I took some inspiration from the image above. To be more precise, I liked how the letters were manufactured by 3 lines of different colours. Based on this principle, I created an image that you can see below. I added the main colours, visible on my website and made them transparent to create an effect of cloning and uncertainty. Besides, I located letters disorderly within the frame. This has been done to make users unconsciously question what is wrong with the font.

screen-shot-2016-12-03-at-20-40-37

 

Then, I have found the image that you can see below. In fact, I felt this image could be extremely relevant in terms of the concept as well as design.

screen-shot-2016-12-03-at-20-52-38

Therefore, I created my own version. So as to realize given design, I changed Font to Typography. Besides, I filled only the stroke with blue colour so as to maintain the overall neon look of the website. Actually, I really liked the image, which I got. The reason is that, the line, crossing the image, will make users feel that something is wrong with typography. In other words, from this page the narrative of the website is being developed, letting the users engage with the story from the beginning.

screen-shot-2016-12-03-at-21-06-21

Since I liked both of the images I have decided to compare them by putting in Muse.

screen-shot-2016-12-03-at-20-54-20screen-shot-2016-12-03-at-21-11-54

In fact, I felt both images work good, regarding the concept, therefore once more I asked an audience about its viewpoint. Basically, the image with font reminded of some vintage motives, making it a bit out of the context. What is more, regarding the look, the second image looked more attractive. Hence, I have decided to make the image with typography be my landing page.

Alongside, I have tried different colour options.Precisely, I used blue, yellow and red since they are the main colours. As a result, I have discovered that anyway the blue looks the most effective and suitable.