Category: Research

Typeface/ Typography Research

Definition: Typography is the way in which type is arranged. This incorporates the different typefaces that you use and how you layout design of the text that most suits your colour scheme.

Within this research I will break down the critical components of typography into:

• Typefaces
• Colour Systems

Typefaces:

Serif:

Serif typefaces, often used within print publishing have a particular type of stylistic design known as serif strokes, these strokes can be seen at the ends of the letters with a small flick or stroke. With this, Serif Typefaces can be further broken down into four sub-categories:

• Old style – Similar to Old English type, Old Style carries over the traditional look whilst updating it slightly. Each serif design is rather small, the letter forms themselves tend to be quite rounded with even thickness and strokes.
• Modern – Modern Serifs are predominantly used within the newspaper industry and use an attractive stylistic design of both thick and think strokes to create contrast. They are best used in an authoritarian manner because of its long-standing associate with the new and use in newspaper design.
• Transitional – traditional Serif typefaces are most popular in digital work because of its traditional style and modern serifs, it creates rounded shapes and has varying strokes.
• Slab – Slab Serifs are a bold and big typeface often having a thick and uniform strokes either with rounded or squared edges.

Sans Serif:

Often having a wide range in selection and being easy to read, Sans Serif typefaces have all the same characteristics of the their counter-parts, however, they don’t have the small strokes at the end of the letter making them contrast effectively against backgrounds.

Old English (or Black Letter):

The Old English typeface is a category for old type, dating back to the middle ages when they were made by pen and paper, these can be characterised by many elaborate and broke strokes for each letter. These typefaces often have a limited use range from one to two words, however, it gives a sense of age or history with what it is applied to.

Script & Cursive:

Script and Cursive typefaces are designed to mimic handwriting, the only difference between being Script typefaces are connected together, whereas Cursive isn’t. This elegant smooth typeface is stated to have a feminine feel and is best used in a large size as its legibility decreases with its size.

Novetly:

Novelty type incorporate a wide variety of different typefaces as they cannot be characterised into a specific category. However, because of this feature, novelty typefaces are often fun and interesting to observe and can be very playful when the mood of them matches the item or object that they are describing. Below is an example of a novelty typeface and how effective they can be when matched accordingly with an item/object.

Colour Systems:

CMYK:

CMYK refers to full colour printing using 4 colours Cyan, Magenta, Yellow and Black. This colours system is often used for physical printing, when something is being designed for the real world, the CMYK system will be used as it can successful recreate any colour in the visible spectrum.

When an image needs to be printed out, the CMYK process determines the percentage of each of the four colours that is needed to make that colour. Then when it comes to the actual printing of the image, it transfers those percentage values into small dots to blend together.

RGB:

RGB is the colour system that is used for digital monitors and televisions. Uses pixels, they are able to produce red, green and blue light at any percentage to create different colours via pixels, these colours produced are known as hexadecimal values.

Within RGB, there are also colours rules that can also be followed:

Analogous: Similar colours all within a range.

Monochromatic: The same colour along the same line – In Adobe Colour’ website, this line points towards the centre.

Triad: Three colours that complement each other, e.g. Green, Blue and Orange.

Complementary: Opposing colours in the colour wheel, e.g. Cyan and Orange.

Compound: Another variation of the complementary colour scheme, where additional shades of the complementary colours are added to the mix.

Shades: Shades of the same colour.

PMS:

Pantone Matching System that uses thousands of coloured swatches to match colours, for example, in a logo the colours that are used can be identified by a number from this system, often referred to it as a PMS number.

The benefit of PMS over CMYK is that only the colours that you need are being used, in most cases this will be 2 or 3, saving money whilst providing the most accurate colour as well as the sharpest details. With `CMYK on the other hand, 4 colours will have to be used in order to create the different colours due to combination of them all.

Modelling:

After completing my Learning Agreement, I determined that I was going to use c4d to model my products, i.e. the 3 different juice drinks. After this, I set out looking for tutorials on YouTube of how to create a bottle that not only looked realistic but also used a up to date version of the software.

After watching a couple of video’s I came across this by a user called GOGOLERIUS:

Within this tutorial, the user was able to successful create a glass beer bottle model from scratch using no plug-ins. Here are thew steps:

Firstly, a reference image was used to trace the side profile of the bottle using a spline, which was then placed into a ‘Lathe NURBS’ to turn it into a piece of 3D geometry – this was very interesting as I noticed that they traced the inside and outside wall of the bottle, thus giving it thickness.

Secondly, using the Point, Edge and Polygon selection tool, they were able to make fine adjustments to the spline to make the 3D model look better overall, this was then further improved by placing the spline (inside of the lathe NURBS) into a subdivision surface NURBS to smooth the overall shape.

Next, a flat triangular shape was used to form the cap. Once shaped accordingly, the object was placed into a cloning effector with a radial arrangement to fully form the cap. After arranged and tweaked so that no holes were visible, it was placed into a subdivision surface NURBS to smooth the object.

Following this, the next stage was to create the liquid inside of the bottle. The way in which the user created the liquid was very clever. In the first stage when creating the spline, the both the inside and the outside profile of the bottle was drawn and because of this it allowed the user to copy and paste it, they then began to delete the entire outside profile leaving the inner, they then used a loop selection tool along with the extrude tool to close off the hole in the top. By doing this they basically created a new object that fit perfectly inside of the original bottle model.

Additonally, now that the bottle and liquid has been created, it was time to add the label, this was done by entering into the polygon mode and creating a set selection based on the area I wanted the label to be on the bottle. They then create new material with label added to the colour channel, more specifically the texture channel within the colour, this was then adjust accordingly.

Lastly, texture creation is the final process that was carried out in order to complete the tutorial, this involved the creations of the glass material for the bottle, metal material for the lid and a coloured slightly transparent material for the liquid.

Condensation:

Furthermore, after observing current real world products and the way that they are marketed, I wanted to add water droplets or condensation to the outside of the bottle to make it look more appealing. I found a three part series of how to complete product modelling and rendering, which are thew two videos embedded below – the other video utilised a 3rd party renderer called Redshift which I don’t have, thus being useless to me.

In part one of the tutorial, modelling of the water droplet and additional techniques are shown. The man takes a primitive sphere, and manipulates it to look like an organic droplet that you would seen in real life, and then using the cloner and random effectors, he was able to create different sized droplets, with varying orientations all over the surface of the model.

Rendering:

In part two of the series, environment creation, lighting and render settings are shown. Fading in from the end of part one, the man starts to create a studio with a illuminated background and a mirrored floor to create an aesthetically pleasing scene. This is then accompanied by a 3rd party studio rig that it used to perfectly illuminate the model, which greatly benefited the rendering – using the physical renderer on adaptive and automatic settings to produce the best results.

In preparation for my project, I need to conduct some research into photorealistic lighting inside of Cinema 4D (c4d). From my Lighting Research post completed in semester A, I discovered that there were 7 different types of lights that are available for myself to use, however due to wanting my products to be lit realistically, I will be focusing on area lights and area lighting as it gives the most realistic and physically accurate lighting inside of the software compared to real life.

Following this tutorial below, I came across 7 elements that aid in making any scene or object look photoreal:

Scene:

This is the stock scene within c4d – I have displayed 5 primitives with different shade, curves and heights to denote how the lighting affects these different objects, and to furthermore determine whether or not its is photorealistic

1) Area Light:

In the first part, an Area light was added to the scene. This started to cast shadows on the objects where comparing it to the stock scene.

In terms of realism, this still isn’t very realistic mainly due to no shadows being present, however, when compared to the stock scene its much better.

2) Area Shadows:

In the Area light settings, ‘Soft shadows’ were enabled allowing the light to cast shadows in the floor of the scene. The benefit of ‘Soft shadows’ over the other option, ‘Hard’ is that the shadow has a soft diffused edge.

In terms of realism the scene is getting much better, this is where I feel the benefit of soft shadows is more apparent as it acts like the light is more of a soft box. In the real world, well defined shadows would only be produced in circumstances where the light is really close to the object or strong, like the sun.

3) Light size: – Larger light = Softer shadow & Smaller light = Sharper shadow.

The third part isn’t necessarily essential to do, however, it makes you think about the size of the your lights being used within the scene. The current size of the light being used in this render was 800cm x 800cm, which is about double the size when compared to it in no. 1 & 2. Specular strength & hot spot

Although the lighting hasn’t necessarily changed, the ‘Hot Spot’ or white dot on the objects surfaces has increased in size. The size increase has made that dot become much larger and subsequently seem more diffused – giving a completely different look to the scene. In reality, if the light was to become much larger, the shadows should become more diffuse as more light can reach around the object (even though this isn’t particularly present in my render).

Oppositely, if the light became much smaller the reverse would happen. The hot spot on the objects would become tiny and very bright and the shadows would also become much sharper, as there is less light to reach around the object.

4) Falloff:

In the Area light settings ‘Falloff’ was enabled (switched to Inverse Square because its physically accurate), this basically created a spherical boundary around the light. The objects or things inside of this boundary would be illuminated, however, this boundary had a strength gradient meaning the further away the object is from the centre, the less light illuminate it. This can bee seen below, where the edge of the boundary is on the objects, thus illuminating them and the background being dark.

When this was added to my scene, the results were dramatic. The lighting looked much more realistic as the light started to falloff before illumination the background completely. In addition, I feel that the shadows themselves also because more realistic too – specifically on the cylinder, the shadow reaching around the cure is more gradual then before and this is the same with all of the other curved shapes.

5) Luminance Objects:

The element added within this step was a luminance plane behind the original light source – the plane is the same size as the light object (400cm x 400cm). The idea behind this is due to the larger surface area of the shape, that it is supposed to give light interactions on the object and instead of just a bright hot spot, it was supposed to take different shape.

Although this was mentioned in the tutorial, I didn’t see any difference in my scene when this was added. Maybe due to multiple factors such as: Shape, Length, Position (in relation to objects) and Angle – this feature wasn’t able to fully show its potential like it did with the model in the video. However, I will be sure to keep this in mind when lighting my scenes just incase this works.

6) Global Illumination:

Global Illumination or GI is a setting that can be enabled in the render settings and describes their Radiosity solution. The radiosity considers the direct illumination of each surface of an object, and adds to that secondary illumination. This basically bounces the light off other nearby surfaces back into the environment.

When enabled, the results are impressive. The GI can be specifically seen in the shadows of the objects, as the surfaces of each object are reflecting more light back, dark areas close by get illuminated.

7) Sky/HDRI:

Within c4d already a few HDRI (High-Dynamic-Range Imaging) images are available for me to use straight away. Within the video, the HDRI is used within the scene add further reflections and ambient lighting to the objects in the scene. Below is an example of the HDRI’s that are already available, these feature a mixture or light and dark sections to increase the high dynamic range of the image, increasing its effects when implemented into the scene.

The HDRI was added to the scene on an enlarge sphere in the scene and it was adjusted and rotated so that a bright point within the HDRI was facing the right side of the objects.

 

With this final stage, I feel that the objects look very realistic, especially the sphere. Adding the HDRI gives the image some ‘real world’ reflections to the surfaces of the objects, which they would normally get in real life.

Within my Learning Agreement, I stated that I was going to use Cinema 4D and Adobe Muse in order to create all of the different forms for my concept company.  To support this decision, I am going to conduct some research into the different types of software that is available today, looking specifically at What they do or What they are most commonly used for within industry, What platforms they are available on, Cost of the software and Accessibility to me as a student.

Cinema 4D

Within my last semester software post, I concluded that “Cinema 4D is a 3D Modelling, Rendering and Animation software that is most commonly used within the television and advertising industry”, making it perfect for the task ahead as I was going to model the products for the company. Furthermore, due to its long-standing presence in the 3D software space, “it has developed a powerful set of MoGraph tools that can make real-world motion graphics by enabling cloning, the adding of effects and easy motion creation of objects” which would further benefit me in the modelling stages (Andrew Cartwright, 2017).

Another major factor contributing to use of this software in my project is a large amount of knowledge I have in it. Mainly due to last semesters project, I have developed my skills within this software drastically as I had to create a project without the use of a tutorial to follow exclusively or an help from an expert. This is a significant factor in my decision as having to learn a new software from scratch would be very challenging – especially due to the strand I have chosen where 70% of my mark is based on the final media product – this would leave no margin for error.

And lastly, another contributing factor to my decision of using Cinema 4D is that I already have the student version of the software. As stated on last semesters post “Cinema 4D has a limited accessibility as I can apply for a 30 day free trial, but as a student I am able to apply for a free and complete student license of the software which makes it a more viable option” (Andrew Cartwright, 2017).

Adobe Muse

Adobe Muse provides an easy way to create websites. With the aid of prior knowledge in the software and Muse’s design-oriented creation approach, making websites is incredibly easy to do – because of this factor, it makes it highly desirable to choose it as I will be able to create a highly functional website packed with functional aspects which would increase the quality.

Another factor in my decision to choosing Muse is my prior knowledge. From using the software in past projects such as my Level 2 assignment, I have developed a wide set of skills within the software of being able to create aesthetically pleasing websites with attractive rollover buttons that are highly functional. Because of this, when conducting research I won’t have to start from the ground up, I will be able to build straight onto the technical skills rather than start from the basics, which would further provide a challenge.

And lastly, another contributing factor to my decision of using Adobe Muse is its accessibility. Due being a student at the University of Lincoln I am eligible for free an Adobe Creative Cloud package, this grants access to myself to all of Adobe’ softwares – specifically Muse – which will enable me to create it.

Conclusion

To conclude, using both Cinema 4D and Adobe Muse would be the best options for me in producing the highest quality work possible (because of my strand choice). I already have a high amount of pre-existing knowledge within these software from successfully completing past projects. In addition, using this software would allow for increased workflow as Cinema 4D has convergence capabilities with other Adobe programs such as After Effects, which I would need to use to bring the renders together. Furthermore, because Muse is apart of the Adobe family, I can utilise other Adobe applications such as Illustrator or Photoshop to help create assets which would further make the creation process of the website easier. Another supporting factor in my decision is the accessibility, because of my student status I am eligible for free an Adobe Creative Cloud package which grants me access to all of Adobe’ softwares and further allowing me to get a free student license to Cinema 4D R19 – because of this, and due to the fact that I already have both sets of software it makes clear indication to selecting them.

References

Andrew Cartwright (2017) Media Project One: Software Research [blog]. 6 October. Available from http://andycartwrightprojects.blogs.lincoln.ac.uk/2017/10/05/software-research/  [accessed 19 February 2018].

Web design will be another aspect of my project that will help to contextualise all of my work. Studygin this book by Julius Wiedemann will aid my learning into the best web design to host videos on the site and will additional teach me the fundamentals to web design.

Within the book I will be specifically looking at Chapters:

• Types of Web Application (Page 13)
• The Project Development Process (Page 45)
• Interface Design (Page 93)

Types of Web Application 

Brand Sites (Page 13) – Brand sites are often referred to as ‘Brochureware sites’ that build up a brand or product for an organisation. The sole objective for these sites is to create an online identity or prescence that the audience can access. Often reflecting the brand image and company morals, the websites that are built are often very aesthetically pleasing, ultisling the same design conventions that are used throughout their products in the real world.

The Project Development Process

Design (Page 54) – The design of a website is critical, often broken down in to 4 areas: information architecture, verbal communication, the use of media and the user interface design, it is essential that my website my follow strict guides within these areas in order to create an highly functional and aesthetically pleasing site.

Information architecture is process in documcntmenting the process flows of the audience, in simpler terms it means it documents that ways in which the audience will use the website in order to access the relevant information that they are after. This process often under goes several revisions, refining the design to make it as easy as possible for the audience to get the the info that they want.

Verbal communication is the selective process of deciding which technical terminology to use within the website, which can be a difficult process. For simple products, this can easy as there are no real terms that need to be utlised in the explanation of the product, however, for my technical products there has to be consideration taken into what vocabulary is used to describe the product as the audience might not necessarily understand it.

Use of media, this process is the stage in which media is evaluated in terms of its relevance. Often when products are being advertised on the website, it might not be relevance for it to be shown to the audience through the use of a video, sometimes a image will suffice.

Interface design, often referred to the stage where the website is given a personality, this process defines the stage in which the website gets colour, typography, media and other design elements added to it.

Interface Design 

Colours (Page 97) – Colours have a powerful significance in communication, enabling them the ability to represent emotions and actions. Because of this, the use of colour a website has will greatly reflect certain meanings and messages behind it, this is why the colour of the website will often try an reflects the messages being the brand and the feelings that they want to denote to the audience.

Typography (Page 100) – Typography or font is the use of a particular style of text, this stage is very important as the type will need to be cohesive with the graphic style that is used throughout the rest of the website. There are often 3 different uses of type in a website or any publication: Heading, Sub-heading and Body Copy.

Layout (Page 103) – The layout of the information is the decision in which the placement of the text should be on the website. Most common layouts, columns are often used to break text up on a page to make it easier on the eye – convention used from print media which aim to make the page easier to ready but also aesthetically pleasing at first glance.

Jadav, A. (2003) Designing Usable Web Interfaces. New Jersey: Pearson.