Find some examples of information graphics. For example bus timetables, city maps, diagrams or representations of statistical data. Look at the way they are designed and try and work out the decisions the designer made. What can you learn from them and when would it be appropriate to use a similar design solution? For this exercise you are going to describe your immediate surroundings using information graphics; this could be a plan of your desk, the layout of your house, the arrangement of objects in your cupboards or your morning journey; anything will do. Before you start you will need to think about scale and about how you will break down the information for your design. Create a graphic that represents an aerial or front on view of your location. Be mindful of the hierarchy of the elements in the composition and the dynamics needed to draw the viewer’s eye from one stage to the next. Use typography, numbers and colours to describe what is being represented. You may want to produce a key to help us understand what is being shown, as well as a diagram title to put things in context. Keep all your sketches and notes in your learning log.
Research
What is an Infographic?
According to the Oxford English Dictionary, an infographic (or information graphic) is “a visual representation of information or data”.
But the meaning of an infographic is something much more specific.
An infographic is a collection of imagery, charts, and minimal text that gives an easy-to-understand overview of a topic.
What Are the Different Types of Infographics?
1. Data visualisation:
Data visualisation is simply a visual representation of data. We consider it an artistic science, as it uses design aesthetics to increase data comprehension, synthesis, and ultimately recall. Whether you’re looking at meta patterns or single data points, data visualisation translates that data into a visual language you can easily and instantly understand.
2. Information Design Infographics
While there are many different presentations of infographics, there are three general categories that infographics can fall into:
Information design is a subset of graphic design that focuses on the display of information efficiently and effectively. It’s a broad category, encompassing many functional design disciplines.
It differs from data visualization because it is not made from specific data points but rather concepts or other information, such as process, anatomy, chronology, or hierarchy.
3. Editorial Infographics
Although major publications have been featuring infographics for decades, there is a shift in the style and type of visual content they are producing. This trend has also been spurred by the rise of social. Infographics have become highly shareable content, so publications are embracing the medium to better engage readers.
Previously, editorial infographics were limited to simple bars, lines, and pie charts, using illustration solely in more complex features to map an area or show the anatomy of an object.
Infographic Design Styles
Regardless of the content or data depicted—editorial or branded—infographics are more flexible than ever in terms of their design format, allowing you to tell your story in unique and engaging ways. That said, the most common formats are:
Static infographics
Animated infographics
Interactive infographics
Each serves its own purpose and can be a powerful storytelling tool—when applied properly.
Pinterest boards
The Pinterest boards, I collected covered things like statistics, timelines, maps, guides and situations. Some were typographical, some illustrative and some used photographs. These gave me an insight into what this exercise was about.
Design process
Ideas for infographic:
House layout
School run
Everyday routine
Eating habits
Travel
After spending some time thinking about the list that I have prepared, I decided to make an infographic poster about places that I have traveled.
To make this poster, I have used Illustrator. I found a world map on freepik. Then decided to consider the continents that I have traveled within as well as the people I have traveled with.
Self reflection
At first, I was struggling to choose a subject for my infographic poster. So I made a list of couple of subjects. I thought about each one and the travel subject looked more appealing.
I think my design is simple and clear to understand, I believe that infographic design shouldn’t be very complicated. I kept my colour pallet limited with limited elements to finish my design with.
Choose a book by an author you are familiar with. You are going to design two different covers for it, one using illustrations or photography and the other using just type. Design the whole cover including the spine and back page. Include the title of the book, the author’s name, a brief description of the story and any other information you think is necessary. As you are working remember that your design is intended to help a reader know what the experience of reading the book will be. Is it a serious text book or an off-beat funny novel? Are the readers expected to be young women or older men and does this matter? Is it an ‘easy read’ or ‘literary’? Does the publisher have a house style you need to be part of? When you have finished critique your work – which of your two designs do you feel works the most successfully and why? Make notes in your learning log.
The book that I have chosen for this exercise is The Handmaid’s tale by Margaret Atwood. The reason that I have chosen this book is I’ve read the book and watched all the series, so I thought I have a clear vision about the book to help me with my book cover design.
The Handmaid’s Tale, acclaimed dystopian novel by Canadian author Margaret Atwood, published in 1985. The book, set in New England in the near future, posits a Christian fundamentalisttheocratic regime in the former United States that arose as a response to a fertility crisis.
Previous book cover designs
I’ve done some research about the previous book cover designs for the Handmaid’s tale. This book was published in many countries. So we can see different designs from around the world.
Mind mapping
Thumbnails
I made 2 sets of thumbnails, just type, type and illustration.
Design process
Found a silhouette of a woman on free pink, changed the colour and added shadow in illustrator.
Then took the image to Procreat and added some handwritten text and some lines around the neck. The line around the neck is to represent captivity.
I used Photoshop to complete my design. Made three Artboards for front cover, back cover and spine. The size for the cover is: 198mm x 129mm for the back and front, 198mm x 20.3mm for the spine.
I needed to pair my handwritten type with another type. I decided to use a sans serif type to give the design more modern look and looks better with the handwritten type. The type that I used is Open Sans.
I used the same size for the design, just using type. The pair fonts are Open Sans and Brush Script MT.
Final designs
Mockups
Self reflection
The brief was to choose a book by an author you are familiar with and design two different covers for it, one using illustrations or photography and the other using just type.
It was a nice experience to have freedom as well as restriction to make a book cover design. I followed the same colour pallet for my designs. I used Photoshop to complete my design since it was easier to make three Artboards for front, spine and back. It was helping me to consider the design as a whole.
I think both designs have their own eye catching elements, however I personally prefer the second one, just type. The first design took more time and might be something different from other previous book cover designs for this book. It might give more clues about the content of the book to people who want to buy it. But the second design is minimalist and it doesn’t give you any clue about the book, which might be more exciting for some readers.
Many hundreds of paperback books have been produced over the years. Look at as many variations as you can find to see how different publishing houses designed their covers and how the covers fit together as a series. Select a particular publishing house and describe their design style in your learning log.
Book cover design examples
Pinterest boards, book cover design series
4 Different ways to brand book covers for series
1. Same Cover Concept with Small Differences
2. Different Cover Concepts with One ”Signature Element”
After looking at different book cover designs, I like the idea of making a puzzle pieces of the book series, I think it’s a clever idea!
Published June 2012 by New Directions Publishing Corporation
Designer Paul Sahre both treated book covers like puzzle pieces or tiles in a mosaic; collect the whole series and you can put the whole picture together. Sahre keeps the four volumes by Clarice Lispector fairly uniform, adhering to principles of minimal design.
Although the covers complete a puzzle, the colours for each piece are different. The colours are from an analogous colour scheme, which helps the design to work as a set.
The typefaces that have been used are the same as well as the composition.
In the example above not just the front cover, but the back cover makes a puzzle as well. With the same colour scheme, typeface and composition.
Overall Comments Part 4 has focused on typography’s history and application. Overall your response has been good, therefore gaining a better understanding of type design, font families, and typography in context to graphic design. There is much good work here to build upon, so well done, take this knowledge forward to Part 5 to continue developing your creative thinking, craft and digital skills.
I feel happy with the feedbacks. I know that there are lots more to learn about type and I need to spend more time in exploring different types.
Project: The visual word Typography uses both written and visual languages, you were asked to explore this by visually representing a range of words. To start always use InDesign when using type and graphic design for layouts, Photoshop type will be ‘soft’. Once you start to manipulate type as image then use Photoshop or Illustrator, which you have done in step 2. Step 1: You have generated some good examples of how movement of letterforms can represent the meaning, agree with you that ‘speed’ and ‘shy’ work particularly well, ‘squeeze’ also works. Good to see you have considered white space of page as part of the communication, so important when designing layouts. Next time think about what else you could do to the letters such as cut them up for ‘shattered’ or reverse them for ‘shadow’. How might using all caps or all lowercase change the visual communication for example ‘serious’ in all caps or ‘soothing’ all lowercase? Research a few examples where a word such as ‘sophisticated’ would be appropriate for example designer brands or expensive perfume or ‘soothing’ children’s medicine. Some focussed research underpinning understanding of type styles / categories / application and what / how they visually communicate, will help you develop on from this exercise. Step 2: You have generated a great range of expressive words, the most successful are those not reliant on additional elements, in some respects those are working towards logo designs. Therefore ‘shattered’ ‘saucy’ ‘style’ are some of the most appropriate. Consider which words communicate purely through the typeface and composition (typography) and which are typefaces requiring additions (logo). Next, think about which words might be appropriate for what type of project for example a mens wear shop, a romantic novel book cover, advert for women’s product. Overall good start part 4.
Things to be considered
Researching a few examples where a word such as ‘sophisticated’ would be appropriate for example designer brands or expensive perfume or ‘soothing’ children’s medicine.
Which words might be appropriate for what types of project
Project: Anatomy of a typeface To explore your understanding of how a typeface is constructed you were asked to undertake a typographic jigsaw puzzle. This is such a good exercise to understand specific characterises of typefaces, in this case Baskerville. You have done some sound research about the typeface, but you haven’t really analysed it in your own words. In addition the brief required you to draw the letterforms into the sentence, which would develop your visual understanding of individualcharacters, shapes and form, relationship of each character to the next, spacing and alignment. A digital program in effect does that for you, but it is only a machine and it doesn’t always do it correctly, therefore by doing this exercise digitally was not helpful in learning about typography. Using Procreate has been helpful in terms of developing your digital skills but the correct program to use for typography is InDesign. So you need to trace type always using a sharp 2H pencil, quality tracing paper and draw really accurate rule tram lines, this will help you to carefully render each character and letter spacing. This takes time and lots of practise, therefore you will need to do quite a few versions, do not rub out and correct but start a fresh so by the end you have a collection of traces to compare and contrast the differences. This process will help train your eye when using type digitally making you a better typography.
Things to be considered
Using pencil and tracing paper to help with visual understanding of individual characters.
Project: Different typefaces You were introduced to some of the ways typography can be categorised, asked to create your own sample book of typefaces, and identify fonts you could use for a number of different design jobs. Good to see some research for this brief and that you are using InDesign.. The type specimen book is working well to show each selected font and how it looks typeset as ‘Quick brown fox….’. Be cautious of using colours because, what you have designed is called a ‘blad’ or sample of what the book could like like, therefore colour for a complete specimen book would be problematic as you would run out of colours. Colour in this instance is decorative and therefore distracts from actually looking at the typefaces and choosing one to use. What you could try is one weight and size for each typeface example in a colour, to show how it would look. Just using red would be suitable as red and black were originally the only two colours available for mass printing. You have added the styles in right hand column for Raleway specimen, so be good to be consistent and do same on Baskerville and Courier.
Things to be considered
Not using colour for the specimen book
Trying is one weight and size for each typeface for example in a colour, to show how it would look.
Project: Typesetting This section explored typesetting by looking at magazines in terms of how easy they are to read, and using Lorum Ipsum to typeset text. Magazine: You have chosen a range of magazines but you haven’t evidenced analysis of them. Suggested ways to analyse examples has been provided in previous feedback part 2/3 please refer to it to help you develop your analysis skills. So trace layouts to thoroughly analyse every choice the designer has made such as: font, serif or sans serif, weight, words per line, line length, text size, leading, gutters, paragraphs as line breaks or indents, text range left, centred or justified? Is there a change of text size for headings, introductions, main copy and captions? Consider how does the design communicate content in context to audience? On a separate post ‘Diving with Sharks’ double page spread you have addressed some good analyse and Developed InDesign skills. Good to see thumbnail sketch but it is just one. Next time explore a range of ideas generation and draw them more accurately with a higher level of detail. As a designer its always best to to be able to select the most interesting and appropriate layouts for development. You will always to need to have options to work with and show a client. You are working through a very sound process to establish magazine grid structure and layout design using InDesign for digital iteration. You are clearly looking at your research examples but you need to evidence how, what you are looking at is informing what you are doing. Really good to see you have used a type size to line length working to average of 8 words per line, linked text boxes ensuring horizontal text alignment, boarders and column widths are comfortable across the spread, and you’ve worked to baseline grid, excellent. A few details to be aware of are widows, orphans, hyphened words and deep leading in headline text. Parish advert: Same comments above apply here. The concept of your design is totally appropriate, lovely colour pallet, choice of image and appropriate typeface selection. Church rarely have a budget for advertising; did you consider reproduction in one or two colours? Did you test your design portrait format to avoid heading text clipping image? As a graphic designer you need to proof read text “ marks are incorrect. As with the magazine layout, this parish advert just requires refinement of a few details. Sports poster and flyer: Same comments above apply here. Remember to use Photoshop or iIllustrator for image generation then import to InDesign for layout design and adding text. Your use of type and image, hierarchy of information, layout design is defiantly getting more confident. Good self reflection, overall you have shown really good progress through this quite demanding long exercise, well done.
Things to be considered
Showing evidence of analysing: font, serif or sans serif, weight, words per line, line length, text size, leading, gutters, paragraphs as line breaks or indents, text range left, centred or justified
exploring a range of ideas generation and draw them more accurately with a higher level of detail
being aware of widows, orphans, hyphened words and deep leading in headline text
Proof reading
Project: Hierarchy You were asked to typeset headings, sub-heading and body text for three different pages. You have methodically worked through this exercise which has clearly developed research analysis and InDesign skills. The three chosen layouts presented as final designs all show you are developing a good understanding of typography. There are a few general points to take into consideration next time — with text make sure you have approx 8-12 words per line so there are no rivers (holes) through your text, your measures are short so reduce point size and/or select a slimmer font. The tec mag is a good example of font size to line line to words per line.
Things to be considered
Making sure to have approx 8-12 words per line so there are no rivers (holes) through the text
Feedback on assignment Creative and analytical thinking, Visual and Technical Skills For the Show Me… assignment you produced a cover and short article for a magazine on typography. Research and analysis: You cite lots of interesting examples to stimulate ideas generation. Primary research is that conducted by yourself but in the context of creative practice it is research that you have actually generated such as your own sketches of type found or drawing letterforms or your own photographs of your own collection of magazines, with your own critical analysis written in your own words. Secondary research is material researched by someone else, so books with academic critical writing for example on type, typefaces, typography and general graphic design such as poster and magazine/books; your selection of magazine covers are an excellent starting point. Eye and Baseline are very good case studies to examine for this project. However, you don’t appear to have researched the subject of the brief, type foundries? Choose three foundries that produce type using different technologies, compare and contrast processes in context to production. There is no evidence of critical analysis writing to demonstrate how and what has informed your work, see previous feedback. Next time, use actual copies magazine examples to enable you to trace grid structure, type and image relationships, scale and size of published format. Having actual magazines will allow you to feel the paper texture and weight. Search used section of Amazon or Ebay. You need to correctly Harvard Reference all examples shown, make it absolutely clear what is your work and what is by professional practitioners. Ideas Generation: Your sketches are more detailed, which is good to see, but very limited range of ideas, see previous feedback. So you need to consider how your research has informed your understanding of different type foundries; informed understanding of this task; informed your ideas generation? Use this information to produce a broader range of ideas generation. Development: You evidence creative process through digital iterations, next time draw the letterforms first as this will help you explore the potential of the shapes. Your following process developing in Procreate then Illustrator was good practice, you acknowledge that quite a few versions should be drawn first; did you do that? What calligraphic styles from your Pinterest board did you refer to inform the decisions you made, learning by example? Final outcomes: Work evidences some awareness of type in context to magazine design, good use of grid structure, type size and line lengths. Analysis of your ‘primary research: typeface design’ examples would have shown you that what is being discussed/described in the text should be illustrated with images, a publication of this type needs to be both visual and informative. Why did you decide not to illustrate the text? Reflection: Review you work against research examples, learn from best practice. The refining of outcomes is a craft in itself requiring time and attention to detail, which you suggests you clearly understand. You have learnt a great deal about type throughout part 4, how central type/ typography is in context to graphic design. Overall well done.
Things to be considered
Evidencing of critical analysis writing to demonstrate how and what has informed my work
Using actual magazines next time
Using Harvard references for all the examples have shown
Sketchbooks Research and idea development, Context. Practice drawing letterforms, character spacing and leading; select three typefaces with similar characteristics to compare and contrast such as Baskerville, Times, Garamond, Palatino, Bodoni, Perpetua etc (refer to page 87 of student handbook) print off full alphabet, choose a sentence and trace each character, do not rub out to adjust spacing just lay another sheet of trace over what you have done and correct this way. This way you can check through and see all amendments made until confident with a final trace. When designing: thumbnail sketch your designs, scale up to actual working size, lay tracing paper over and develop ideas. Resolve all the design decisions on paper first. Select best solution, transferand refine using InDesign. If you work from thumbnail sketches straight to InDesign the fine detailing can get lost in translation. It is difficult to see the size, scale and relationship of the typography in context to the whole when working on screen, often at a much smaller size than actual production. Doing printouts in BW as you work on a project is a good way to test what you are doing is working successfully. Learning Logs or Blogs / Critical essays Research and idea development, Context. Your research points asked to find out more about an area of typography that interests you, as well as documenting some vernacular typography. Your history of type research appears to have come from just one source and therefore provides a good general overview of the history of type, interjected with different aspects of calligraphy often associated with different cultures. This has helped to underpin your general understanding of calligraphy within the overall history of type. Next time use a range of resources to seek research examples, in addition to writing historical facts write in your own words analysis of examples chosen and show images of what you are discussing. Next analyse of letterforms in context to graphic design to demonstrate understanding of how type and type, letterforms and typography communicate a visual as well as written language. So collect your own examples of type, analyse and distinguish between font styles and application such as fonts for shop fronts or packaging or road signage etc. Your alphabet identifying type research, I agree with you that using an online type identifier isn’t easy especially at this early stage of your studies. When analysing a font first scan/photocopy an enlarged section of the text then use tracing paper to trace a line of text as before. This will give you an overall feel for the typeface set in text, such as the character shapes and letter spacing. Next is to repeat the process tracing just the characters that have distinct shapes, such as the ‘a, o, e, u, m, h, y, w’ in lower-case and upper-case. Really analyse the shapes of the bowls, the stokes of the characters ‘thicks and thins’ the shape of the serifs, the height and length of the ascenders and descenders. A book I previously recommended The Thames and Hudson Manual of Typography by Ruari McLean is the best bible about type to use. Identifying magazine tittle typefaces are always difficult to identify as they are often specifically drawn just for that publication such as Vogue which is called the ‘masthead’. McLean’s book would however help you to identify the style of serif font it has be drawn from, by the names of the strokes and feet, see chapter 5 Letters for printing. Your vernacular typography research, you have shown a few examples collected online. As you recognise type is everywhere, now we are able to get out and about a bit more, carry on building a visual collection of examples that you find on the street. Look out for ‘ghost signs’ which are particularly interesting. You may also find it interesting to look into another culture that has low technology such as areas of India or Brazil, where many street signs and advertising is still painted by hand. Generally you need to write-up more fully your reflection of learning for each exercise (better in places than others): what you learnt, what went well, what you could do differently next time, how the exercise will help when doing the assignment project. Could you please title and number each post same as in course handbook to make navigation of blog a bit easier 🙂
It would be worth reading books that help you to develop your graphic design creative process further. Preferably see if you can access the following through library or online. Type as visual image you may be interested in Art and Text by Black Dog Publishing and for hand lettering Hand Job: A Catalog of Type by Michael Perry. David Jury is a writer about typography and books, About Face: Revisiting the Rules of Typography is in particular is a great read. A great handbook about type is Thinking With Type 2nd Ed: A Critical Guide for Designers, Writers, Editors, & Students by Ellen Lupton. Understanding grids Grid Systems in Graphic Design … by Josef Muller-Brockmann. You can also access St Bride Library online https://www.sbf.org.uk Pointers for the next assignment The final part of the course focuses on layout by exploring how to design leaflets, flyers and posters. This is an opportunity to thoroughly investigate the best designers, analyse their work and how they craft excellent design, learn by example and apply what you have learnt when exploring, developing and refining your own work. Refer to feedback provided throughout the course to date, to help you now make better informed design decisions. Use recommended resources to develop your understanding of creative thinking and production of graphic solutions. Always critique your work with comparable professional designs to help you recognise where improvements can be made.
Choose a magazine, newspaper or journal and work out the grid or grids they have used. You will probably need to look at least four pages to get a feel of the layout. Measure the size of the pages, the margins, the text columns and the gaps in between them. How many columns do they use? Is it the same on every page? Can you identify the fonts they use? Do you have it or one with similar properties? How do they use photographs and illustrations? How much ‘white space’ on the pages is there? Draw up a two page spread using the same grid as the magazine. Indicate text using Lorum Ipsum and indicate images by either filling a picture box with a 10% tint or using a picture from your collection. When you have done this see if you can develop the grid further. Select a title and images and see how many variations you can come up with. What happens when you alter the body font or headline font? Do different kinds of images change the ‘feel’ of the publication? Do you think the readership for each of your variations would be the same? Does the image you choose suggest a different design? Which ones work best and why? Make notes in your learning log.
What is a grid?
In design, a grid is a system for organizing layout. The layouts could be for print (like a book, magazine, or poster), or for screen (like a webpage, app, or other user interface).
There are a lot of different types of grid, and they all serve different purposes. Here are some of the main examples:
Baseline grid. A baseline grid is a dense grid of equally spaced horizontal lines that determine where text will sit. Baseline grids are often used in combination with column grids, to make sure that the lines of text in each column align uniformly across a spread. A simple example of a baseline grid is a sheet of ruled paper, like you probably used at school!
Column grid. This is the most common type of grid used by graphic and web designers. It involves taking a page and splitting it into a number of vertical fields, which objects are then aligned to. Newspapers and magazines use column grids extensively.
Modular grid. Kind of an extension of the column grid, a modular grid involves taking a column grid and adding rows to it. The intersecting rows and columns create “modules” that can then be used to govern layout decisions. Magazines and corporate reports often use modular grids.
Manuscript grid. This is a one-column grid that simply determines where in a page the text will sit. Classic, “traditional” books use a manuscript grid, with the layouts of facing pages mirroring one another.
Pixel grid. If you’ve ever zoomed in close to a Photoshop document, you might have seen a pixel grid pop up. Digital screens are made up of a microscopic grid of millions of pixels, and sometimes designers get in close to edit images pixel-by-pixel.
Hierarchical grid. This refers to any irregular grid that accommodates specific content needs. A hierarchical grid may be completely freeform, or it might be composed of two superimposed grids, or other additional grid elements.
The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.
—Josef Müller-Brockmann
Magazines:
I normally read the magazines digitally, but found these three architectural magazines to examine.
I have chosen the third spread for analysing it in depth.
I have used font finder website to find the fonts. For the headline, the closest font l could find is Helvetica and for the body is Baskerville.
The Max word in each column is 7 words, so I will use that to set the font size.
Based on my measurements, I have made a document in InDesign.
Variations:
For the first version, I used 3 columns and the same title similar to the original layout. But just made a change to the image position, which put it in the middle of the sheet. The font type and size is the same as original.
This layout is clean and simple and I think that this layout looks like an article that would be seen in an academic or an engineering magazines.
I used a full size image to cover the whole sheet for the second version. The number of the grids are 12 and 4 columns on each page. To make the texts stand out, l have used a blue box with less transparency.
I think this article due the full bleed picture is more likely to be seen in a travel brochures or home magazines.
The number of the grids are 12 in this version. The first page has got a different layout compare to the second page. Again the title is the same here.
This layout is my favourite one, because of the mixture of different layout for each page. I think it can be found in beauty or home magazines.
For my last version, I wanted to have my layout very different from the rest. I have used a full bleed picture and used a green box underneath and blending mode to make the colours more vibrant. Put the text inside the hexagons.
This article because of its unusual layout probably would suit specialist magazines or corporate brochures.
Mockups
Self-reflection
It is interesting to see how a layout of the page can change the feeling of it. I understand that the elements to change in each article is quite a lot; the number of the grids, the image, the typeface, the size of the font and number of the words. Changing in each element can have a dramatic effect to the look and feeling of the article and the purpose of using them. I just concentrated on the grids and image mostly for my variations.
Context Typographers and type foundries (the companies that commission and produce typefaces) have always had to promote their latest designs to printers and designers to show off a particular typeface, its different fonts in a variety of sizes and contexts, and the unique features of it. Once Specimen Sheets were the main way of doing this. Nowadays most of that marketing takes place online – research type foundries on the internet.
Brief
Design the font for use on the cover of a magazine called type and write a short article for the magazine using a range of typefaces, with typographic illustrations, drawing on all that you have learned in this section. The article should include sections on: • what makes a typeface interesting • how a typeface is constructed • question marks.
Requirements Do a mock up of the magazine cover to show where and how your title font will appear along with other cover elements. Produce a magazine article that is attractive and interesting enough for someone to want to pick it up to read, and which shows off what that you have learnt so far about typography. Add illustrations, photographs and colours as you want.
Analysing the brief
Key words:
Design a font
Type
Cover page
Article
Attractive
WH Questions:
Who is the target audience? Whoever is interested in typography.
How to publish it? Printer
How to make the magazine stands out? It needs some research.
Whatfont should I choose? It needs some research.
What is the colour palette? It needs some research.
Primary research
Research about typeface design
Secondary research
Typography magazines
Primary research: Typeface design
Pinterestboard
Pinterest board of typeface design
Secondary research: Typography magazines
Pinterest board
By looking at these examples, what I think that help them to be attractive are:
Quirkiness
Bold colours
layout
Grids
The name of the magazine is not necessarily important. They all have some different elements which distinguishes them from others.
Mind mapping
Since calligraphy is one of my interests, I have decided to go for a calligraphy typeface for my font design.
I knew through my research that there are quite a lot of script fonts. For my design I would like to make fonts fancier with more decorative elements.
Design process
Initial magazine layout sketch
I used Procreat on my iPad pro to sketch my letters. I can understand that for each letter I probably need to make couple of versions to help the combinations of letters work together.
Then I took letters “T, Y, P, E” to Illustrator and used pen tool to trace the letters. Shape builder tool and width tool were used as well.
For the background, I have made a pattern on Procreat.
Then I took it to the photoshop and added some colour and used multiply blending mode.
To design the magazine, I created an A4 document in Indesign. The margins were set to 15 mm for the top, bottom and outside and 18 mm for inside. The bleed were set to 3 mm. The number of columns 4 and gutter 4.2 mm. The font that used is Roboto Bold, Regular and Italic. 12 pt for the body text and larger size for the headings and subheadings.
The image for the inside of the magazine is from Pexels.com.
Blending mode and transparency were used for the effects.
This part was an opportunity for me to research and learn more about typography and font design. I think that I have a better understanding about typefaces, their structures and the mood that they represent in each content after this part. I believe I still need to learn more about typefaces and fonts.
Designing a font was a challenge, however, I was enjoying the whole process. My font choice was a decorative font and I really like the overall outcome, which I think it reflects my style. But I need a professional eye to criticise my work. So I am looking forward to hearing my tutor’s feedback.
References
Carter, R. Day, B. Masa, S. Megastar, Ph. Sanders, M. (2015) Typographic Design: Form and Communication
Using about 500 words of Lorum Ipsum (or other dummy text) you are going to design three different pages: • an interview with a TV actor in a listings magazine entitled: Will Sheila tell the naked truth? • a review of a new piece of hardware or software in a specialist computer magazine. • a book review in a newspaper’s weekend edition. Research these types of publications and identify three different combinations of typefaces appropriate for each publication. Now you need to invent headings and subheadings for your articles. Set these combinations so that your header is above 12pt in size, your body text is 12pt or below and subheadings sit in between in your hierarchy. You will need to create some text to allow you to show your combinations in action. Use your text to describe your decision making process, why you think the combination works and what your intentions were.
An interview with a TV actor in a listings magazine entitled
Primary Research
I searched through RBdigital magazines and found couple of TV listing magazines and took a screenshot of some pages.
The listing magazines
By looking at these examples, my understandings are:
Very colourful
Lots of images
The combination of serif, sans serif and script typefaces for the headlines
Body texts are either serif or sans serif typefaces but mostly sans serif typeface
The typeface for the subheadings are mostly the same typeface as body text but bolder and bigger
Drop cap applied in most pages
Font pairing
Design process
I started with an initial sketch for the layout of my page.
Initial sketch for the layout
Through my research, I found that TV magazine’s sizes are A4 (210*297 mm). In InDesign I opened a document and set the top, bottom and outside margins to 15 mm and inside margin to 18 mm. The bleed was set to 3 mm.
Lipsum.com was used to generate 500 words lorem Ipsum.
Font pairing
I had a look at the couple of font pairings and I decided to go for Lust Slim and Artifact for the heading Regular 44 pt and Proxima Nova Soft Regular 11 pt for the Subheading and body text.
A review of a new piece of hardware or software in a specialist computer magazine
Primary research
The tech magazines
By looking at these examples, my understandings are:
The backgrounds are white
Mono or duotone colour for the types
Couple of images of the device
Name and model of the device at the top of the page or underneath a photo of the device
serif typeface for the headings and subheadings
Sans serif typefaces for the body text
Specification box at the bottom
Design process
Initial sketch for the layout
I opened an A4 document in InDesign and set the top, bottom and outside margins to 13 mm and inside margin to 14 mm. The bleed was set to 3 mm for each side.
Lipsum.com was used to generate 500 words lorem Ipsum.
Font pairing
After some research about font pairing for the tech magazines, I’ve chosen Garamond Bold 31 pt for the heading and Garamond Bold 17 pt for the subheading and Helvetica Regular 10 pt for the body text.
A book review in a newspaper’s weekend edition
Primary research
Newspaper’s weekend edition
By looking at these examples, my understandings are:
White background
Mono or duotone colour for the types
Couple of images of the book cover and the author
A combination of a serf typeface and a sans serif typeface
Drop cap applied mostly
A serif typeface is mostly used for the body text
Design process
Initial sketch for the layout
For the newspaper, I’ve opened a 315*470 mm document in InDesign. 13 mm margin for all sides and 3 mm bleed.
Lipsum.com was used to generate 500 words lorem Ipsum.
Font pairing
I used Baskerville Bold 64 pt for the heading, Open Sans semibold Italic 43 pt for the subheading. Baskerville Regular 12 pt for the body text.
Self reflection
I am really glad that l have finished this exercise. This exercise helped me become more familiar with InDesign. Also, made me to research more about each publication and find a lot about different layouts for each publication, type hierarchy to convey a particular message to the target audiences as well as font pairings. Using different fonts help to catch the viewer’s eye. Also, I found out that to adjust a text in a document besides the font size, there are other elements, which need to be considered like, kerning, leading. Text wrap is important as well to adjust an image on the document. I also found out that the number of the columns, margin and gutter sizes can be different in each publication, which depends on the amount of the text and the overall look of the layout.
Lorem Ipsum is dummy text with more-or-less normal distribution of letters that makes it look like readable English. It has been used for many years and some desktop publishing packages now use it as their default model text. If you don’t have it already, go to http://www.lipsum.com and generate as much as you need. Now select one of the designs from your research that you like and think works. Using the dummy text, try and copy the layout and design as closely as possible. You will need to measure the margins and column widths. If you don’t have the exact typeface get as near as you can. If you are copying a page that includes photographs just leave 10% tinted boxes to indicate their position. Is the type serif or sans serif? Is the text set ragged or justified? Are there spaces after paragraphs or are new paragraphs indented? How many columns are there to a page? What happens when you alter the fonts, change the alignment, adjust the leading or tracking?
I have access to more than 3000 magazine titles through RBdigital. I had a look at couple of them and chose an article from Woman & Home magazine.
Then used Adobe capture to detect the fonts that have been used on this article.
I was able to install the fonts, I was looking for apart from Memo Banner, which I couldn’t find the free version. So I went to my second choice which was Lust.
Then I took the page to InDesign and set the view to actual size to be able to use the ruler to make the measurements for the margins and gutter.
After that I set up InDesign based on those measurements.
Self reflection
It was a nice experience in terms of analysing magazine layouts, typefaces, hierarchies and the balance between the type and other elements on the page.
I did try to choose the closest fonts, which was available to me to make my design as close as possible to the original design.
InDesign is quite new to me, with this exercise I had the opportunity to improve my knowledge and deep dive into this software.
Create your own sample book of typefaces on your computer that you can refer to. Organise them into: • Serif for continuous text; readable at small sizes and those suitable for headings. • San-serif for continuous text; readable at small sizes and for headings. • Script fonts that look handwritten with a pen or brush. • Decorative fonts only suitable for headings or ‘fun’ uses. • Fixed width, techno and pixel fonts for use on the web or to give a computer appearance. Identify which typefaces have bold, italic, black or light fonts. Now identify which fonts you might use in each of the following commissions: • A short story in a woman’s magazine entitled “I thought I loved him; now I’m not so sure”. The story is 1300 words long so you will need to identify a text font and a headline font. • An advertisement in a parish magazine asking for more helpers on the flower rota. The finished size is A6 landscape and the text reads: “Can you add that important artistic flourish to our church? We desperately need more volunteers to join the flower rota. If you can help or would like more information please contact Jennie jennie@vicarage.co.uk.” • A poster to advertise an after-school club for boys aged 13 – 14. The poster will be A3 size and the copy reads: “Bored? Feeling got at? Nowhere to go? Then why not come and join us on Tuesdays and Wednesdays after school in the Old Gym. We’ve got football, ping pong, table soccer, computers, Karate, cooking and lots more. All free just come along.” • Your friends’ engagement party. They want a flyer A5 size to send to their friends as if advertising a club night. The copy reads: “Mandy and Josh are finally going to do it…well almost!!!!! Come and join them on Friday 24 March from 8pm at the Golden Calf to celebrate their long awaited engagement… and yes lots of presents would be gratefully received particularly if we can drink them!!!!! Then have a go at mocking up each of these. Try different fonts to see how each changes the feel of the text and make notes in your learning log about which works best and why.
What to consider, when choosing a type?
Selecting an appropriate typeface or family for text usage is a key aspect of a design project. The best starting point is to confirm the requirements of your client and the needs of the audience.
Making the time to explore appropriate font options – whether it takes a few minutes or most of a day – is a smart investment. It will pave the way for an effective design solution and save time in the long run.
Here are seven key factors to consider when searching for an appropriate text typeface:
Demographics Know who your intended audience is, including their age range and particular interests. Be clear on the goals of the piece. Whether you are selling a product or service, or providing information or entertainment, your typographic objective is to engage the audience. For instance, a very young audience (such as that for children’s books) requires a typeface with simple letterforms that “beginning reader” eyes can easily make out. On the other hand, designing for a high tech audience might warrant a typeface that looks clean and modern, or even edgy.
Legibility To attract and hold the reader’s attention, typefaces intended for text should be legible and easy to read. Save more decorative, eye-catching designs for headlines, titles, and other more prominent usages.
Copy length For a book, magazine or newspaper, the typeface you select will be used to set lengthy copy. For this purpose, the degree of required legibility is greater than if the typeface were being used for just a few lines or a paragraph or two. For shorter copy, a typeface with a bit more personality can be considered, because the reader’s attention is less likely to be distracted.
Serif vs Sans It is commonly accepted that serif typefaces are easier to read for lengthy copy than sans serifs, especially at smaller sizes. This is true in many situations, but not an absolute rule. Other factors to consider before making your decision include the reading environment, meaning whether it will be in print or on the Web, and the design characteristics – especially the legibility – of the typeface being considered.
Font family size Explore the project’s typographic requirements, and determine beforehand how large a font family is needed to meet all of your typographic needs. While two weights with italics might be enough for some jobs, others might require additional weights and versions to create good visual hierarchy necessary for a strong, effective piece.
Special features: Many projects can benefit from the use of small caps, multiple figure styles, fractions, an expanded range of ligatures, alternate characters and perhaps even swashes – or expanded foreign language support. Many of today’s OpenType fonts come with some or all of these features. Be sure to check for those you require when conducting your search.
Print, Web, or other media: What media do you need the typeface for? Be aware of all media in which the typeface or family will need to appear. If just print, then your font search will be simpler. But if it is needed for the Web (via Web fonts), ebooks, smart phones, or other uses, you will need a typeface that is available and appropriate for all usages, and performs well in all required environments.
Sample book of typefaces
I searched for some example of a sample book of typefaces, I found THE TYPE SPECIMEN BOOK. I had a look at some samples from inside the book for some inspiration.
I decided to make a sample book for some of my chosen typefaces. I have chosen one example for each category.
Serif font: Garamond
Sans-serif font: Raleway
Script font: Artifact
Decorative font: Blenny
Fixed width, techno and pixel font: Courier
I have chosen the same sentence for all my font choices to be able to compare the amount of space they need.
I am going to stick to my chosen typefaces in this specimen book for this exercise.
A short story in a woman’s magazine
Examples of woman’s magazines
Initial sketch
Design process
I found my image from pexels.com, in Photoshop I added more background. Then moved it to Indesign for the background. From a Loren Ipsum generator website, I generate 1300 words of Loren Ipsum and paste it to my document. Because it’s quite a wordy text, I went for a serif typeface (Garamond 10 pt) for the body text. And wanted to pair it with a sans-serif typeface (Raleway) for the heading.
I made another version, using Blenny for the heading.
It’s obvious that the second version doesn’t show the seriousness of the story because of the fun typeface used for the heading.
An advertisement in a parish magazine
Initial sketch
Design process
I used Photoshop for this ad on a parish magazine,. I found my image from pexels.com and added more background to it. I paired A script typeface(Artifact) with a sans-serif typeface(Raleway). Then made another version, using Courier typeface instead of Artifact. The second version lost its sense of artistic feeling.
A poster to advertise an after-school club for boys aged 13 – 14
Initial sketch
Design process
For this poster, I have used Illustrator. Because of the subject, I paired Courier typeface with Raleway. Then made another version with Artifact typeface and Garamond. The first version has got a modern feel and I think it’s more suitable for this poster and the target audience.
A5 size flyer
Design process
I used Photoshop to make this design. For this flyer I wanted something funky and fun. I have found the image on pexels.com. I paired Benny typeface and Raleway to give it a funky and modern look.
For the second version, I used Raleway instead of Blenny and Garamond instead of Raleway. It’s obvious that the flyer’s loosing it’s fun and funky feeling.
Self reflection
The exercise did however serve its purpose. It showed me how type can influence the design of various documents and the feel of the overall publication. It also depended on the target audience as to which typefaces would be appropriate for them. The type of publication can influence what typefaces should be used and who they appeal to.
This exercise was really useful in making me more aware of how type and the way it is used can have a big impact on what is being designed.
It was an interesting but long exercise. It helped me to deep dive into the fonts and typefaces. Also, it was an opportunity to practice InDesign.
For the first part, which was making a sample book, I had some problem to choose one typeface for each category out of all the available typefaces. After using my chosen typefaces for my designs, I was not sure if I had a good choice or not. For example I chose Garamond as my serif category, but after using it as a body text I wasn’t quite sure about some letters eg. letter “g”. Maybe Bodoni was the better choice!
For the second part, designing a flyer, a poster and an ad was quite easy, since I was quite confident with Photoshop and Illustrator. Hence designing a magazine was a bit challenge. It took me some time to get myself familiarize with the software features.
I tried to pair two fonts for each design and to show that It works, I swapped some fonts in each design. And made a mock-up from the final design.
I can say that after this exercise, I can understand the influence of using each typeface in various documents to give it a right feel. For choosing a appropriate type we need some information about the purpose of the document as well as knowing the target audiences. Comparing two exact designs with different fonts speaks for itself.
Maryam: OCA Graphic Design 