• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

words + pictures

by Tim Baggaley

  • home
  • contact
  • Words & Pictures on Facebook
  • Strapping Times on Instagram
  • Strapping Times on Twitter

typography

How to think like an artist

March 28, 2020 by Tim Baggaley

Drag-and-drop self-build website services are cheap and convenient but can an analogue ever be as creative as an artist?

Spoiler alert! No, they can’t. Computers don’t think like humans because they think in binary mathematics. Humans think in some far less constrained, more fluid way which we do not understand. But we know this; a five-year-old can learn to catch a ball and develop a reliable skill for it without performing a single trigonometric equation, let alone any differential calculus. Ask a robot to catch a ball but using no mathematics and you’ll be staring at the blue screen of WTF? for a long time…

Painting by numbers is the analogue of drag-n-drop

Painting by numbers is the analogue of drag-n-drop

Self-assembly websites providers like Wix, Weebly, Squarespace, Shopify et al make it easy for someone with no technical knowledge to populate a simple framework. In bespoke-built websites, developers argue about whether to use themes on WordPress or Drupal, or a completely custom frame. While the different platforms my facilitate creativity, none of them supplies it.

The truth is, developers are not designers and creativity is not a function of the canvas, it is what the artist brings to it.

Creating a unique website

The artist brings elements created specifically for the project and are, thus, truly unique. Logos, branding, all aspects of design need to be distinctive to set the product apart from its rivals.

Clues are in the design

The design of this panel is inspired by the days of print production before Apple Macs brought Desktop Publishing to the party.

The masking tape securing a piece of paper to a pasteboard, the scalpel, propelling pencil and the printer’s marks are all visual cues familiar to anyone who knows old school print production. These are semiotics are visual clues to the viewer, we use their own knowledge to connect to the content of this panel. It is a nod and a wink to those in the know.

In this panel, the only user content is the text. The visually rich look is a consequence of the typography and the page furniture artwork.

In the panel above, the artwork you see is built into the design. The website user does not need to upload any of the graphics or place any code, the furniture is placed around the user’s content automatically.

How to have
Fun with Fonts
in your website

Note too, how the use of fonts helps to set the scene. The manual typewriter body copy and the Dymo embossed labelling-style heading are both call-backs to when making pages was a hands-on practice.

We can use clichés to get the ball rolling. For example, if we are choosing a font for a website about Wedding Services and another for a Heavy Metal band, there are established tropes we can draw on. The same two fonts, however, would work equally well for websites about writing long-form poetry and gothic fairytales so from here, we tailor the design further.

Illustrating the point

Automated online tools, at best, apply only the broadest strokes in the most common formats. The analogues which perform these functions work literally because that is the way computing works.

An analogue thinks literally, a designer thinks laterally

But a designer thinks laterally and figuratively. When designing a website for ‘Cloud Cycles’ online bicycle rental service, putting a cloud shape behind a bicycle silhouette can only be, at best, a starting point.

We need a hero

Hero – or header – images on articles should not always be exactly a photo of the subject under discussion. The image can illustrate the content in such a way that the viewer gains an insight into the article’s content but not necessarily literally. This image is crucial in communicating, at a glance, an overview of the content of your publication. It is in this moment that the visitor decides whether or not to look further into your content.

This photo is a genuine landing page hero image on a business site. What does it say to you? To us, it says 'kill me now'...

This photo is a genuine landing page hero image on a business site. What does it say to you? To us, it says ‘kill me now’…

The clever use of figurative illustration can make a connection with the viewer by, essentially, flattering their intelligence. The sense of ‘I see what you did there’ in your visitor makes a connection that a purely documentary image won’t.

The following example is typical of the sort of thinking that needs to go into picture research.

Literal v metaphorical

The brief:  We need an hero image for an article about infrastructure resilience in cities in preparedness for catastrophic incidents. The story is about how to maintain existing infrastructure – transport links, communication channels, utilities – and deploying emergency services as needed in the face of some major incident – terror attack, natural disaster, system failure (eg: power outage). It is about coping with disasters on the scale of a large, urban conurbation.

Avoid specificity: An aerial view of a city in a photo will be of a particular city but the article applies to all cities. So how about an illustration? We dodge the specific city reference but the image will show roads, railways, maybe power lines too but we can’t hope to illustrate, literally, every piece of infrastructure that falls within the remit of the story.

The focus: The story is not about the disasters, it is about infrastructure coping with them, so we don’t want scenes of damage caused by specific types of incident. We want an image that represents an intelligent, flexible infrastructure which has good communication and can survive or adapt in adverse conditions.

What can we think of as a visual metaphor for such a network?

The image of bees on a honeycomb is illustrating a concept and the viewer recognises this within the context of the article.

Most websites have a single purpose. They are selling a particular product or service or addressing a particular subject and if this is illustrated literally, the images can be very samey. Hero images are more powerful if they have creative thinking in them.

Web apps execute simple commands, they do not think creatively

But if you put ‘semiotics’ or ‘metaphor’ into a Google image search you’ll get a dog’s breakfast of annotated diagrams with written definitions. Both concepts rely on artistic interpretation and utterly defeat literal translation in the binary code that computers operate in.

A unique design employs well-established tropes, even a dash or two of cliché, but also a big slice of inspired creativity. For now, at least, you can’t get that from a web app.

Think like an artist

The Kiss after Gustav Klimt by Inna Ruda

The Kiss after Gustav Klimt by Inna Ruda

Gustav Klimt and a cat

Gustav Klimt and a cat

Put the words ‘Gustav, Klimt and cat’ into Google and you get a photo of the celebrated artist holding a cat. Put the same three words into an artist’s imagination and you can get something far more interesting. Talented illustrator, Inna Ruda, came up with a take on Klimt’s celebrated work; ‘The Kiss’.

‘Like’ what you did 😉

The first time we saw this illustration, we laughed. It is a mixture of the sublime and the ridiculous; it is a confabulation of highly regarded, classic art and social media’s most popular junk: cat pictures. It is a comment on how the modern world is enamoured with the instant ‘likes’ of the equally instant images posted to social media. Scrolling through endless memes, we are failing to see and appreciate true art.

We might be wrong. We might be misreading the artist’s intention here but that does not matter, the point is, the illustration provokes thought and examination in the way the photo of Klimt holding a cat doesn’t.

What was the artist thinking?

Artist Inna Ruda with a cherry on top

Artist Inna Ruda with a cherry on top

Not that, says Inna. I have a client, who produces home decor and dinner plates with funny images on them. I paint a lot of cats and dogs for this client, and one of the ideas was to make a set of plates with ‘popular cats’ on them, like Einstein cat,  Elvis cat or Frida cat.

It turns out, there are already dozens of Cat-Fridas and about four or five Cat-Van Gogh’s self-portraits.

I thought it was very funny and decided to have fun with it. For me, the ability to have fun in creative work is key to a good result. I drew a man kissing a grumpy cat as in ‘Kiss’ by Klimt.  I should say, I am a dog person and think that dogs are the cutest things on Earth. While cats, well, they are different. They are little furry beings dissatisfied with the behaviour of their humans. I find this to be very funny, so for me, a man kissing a dissatisfied cat – that is very true to life.

– many thanks to Inna for her contribution to this article and we agree, dogs are better.

Contributors

  • Inna Ruda – see more of this artist’s work

Resources

  • Freepik

Read more

  • Always judge a book by its cover – Graphic Violence
  • Finding your type online – Graphic Violence
  • Ridiculous stock photo clichés we can probably retire now – The Daily Dot
  • People Are Sharing Hilariously Bad Stock Photos Of Their Jobs, And You’ll Laugh Out Loud When You Find Yours – Bored Panda

The post How to think like an artist appeared first on Graphic Violence.

Filed Under: design, Trade secrets, typography

Finding your type online: using magazine typography in websites

July 13, 2019 by Tim Baggaley

Typography is the art of making words legible, readable and appealing. Since words make up the bulk of our communication, so typography is the biggest part of our design

The practice of typography comprises some long-established protocols which work well on our eyes, not simply because of the nature of the design but because we’re so used to them. Indeed, typography as a design predates type as a technology. Monks were doing elaborate things with illuminated letters as early as the 8th century, and the practice has endured through the invention of printing and the internet, in the form of the ‘drop capital’.

The elements of magazine typography

There are five, principle, elements in standard, magazine article typography. First and foremost, the Headline. This is followed by the Standfirst, then the First Para and then we are into the article’s Body Copy. Within the body copy, we use a device in amongst the paras called a Subhead or Crosshead.

A typical magazine article will look like this:

Standard magazine typography follows this hierarchy: From the top: ➊ Headline ➋ Standfirst ➌ First Para ➍ Body Copy ➎ Subhead

Standard magazine typography follows this hierarchy: From the top: ➊ Headline ➋ Standfirst ➌ First Para ➍ Body Copy ➎ Subhead

Magazine typography is designed to capture the attention of the reader and draw them into the article. The headline grabs the eye, then the standfirst tempts with a precis of the juiciest contents. The first para styling, often with a drop cap and sometimes with first line stying, serves to guide the reader into the start of the article proper.

A subhead goes here

The subheads function both as little tempters and as bookmarks. They are the cherries on the cake, inviting the reader to dip into the content under them and also serving as signposts to help the reader navigate the article.

A ‘pull-quote’ is a device for tempting the reader into the story

The subheads also serve the article up in bite-sized portions. A full page of plain text is intimidating, the reader will need to be determined to tackle it. Similarly, pull-quotes (aka ‘call-outs’) serve up tasty titbits and break up the body copy. Typography is all about making articles easy to read and these tricks have endured for so long because they work so well. Which begs the question, why don’t websites use them?

From web offset to the web online

When the world wide web arrived with the brand new concept of online publishing, it was incredibly limited. In the 1990s, we had barely half-a-dozen fonts that we could use, chosen for us by programmers. We did not even have Comic Sans back then.

The BBC's website was cutting edge web design in 1998 but typography-wise, it was the Dark Ages

The BBC’s website was cutting edge web design in 1998 but typography-wise, it was the Dark Ages

The development and expansion of Cascading Style Sheets (CSS) and the online hosting of fonts, means we can now use all the tricks of magazine typography to make our web pages as interesting and digestible as we do in print.

Google hosts an ever-expanding library of fonts, free to use, and a number of online services like Font2Web and Font Squirrel, convert any desktop font you have into a web one. Thus, we can use any font we like and using CSS, we can style them however we choose…

This text, including the illuminated capital, is type, not artwork. It uses a mixture of Google-hosted and self-hosted fonts. Perhaps not the easiest on the eye but it demonstrates what is possible with web fonts these days.

Website typography requires designing and programming. A programmer might know how to use CSS to select the first and second paras but it takes a designer to know what to do with this.

In this website, we use a first para which has its own styling and a drop cap, then the body copy with its own font and styling. We also use subheads and pull-quotes to break up the body of the text. On web pages, it is very easy, especially on the smaller devices, for the screen to be filled completely with body copy.

Automatic application

It is quite possible to build a website such that the styling is applied automatically and this is what we do at Graphic Violence. We build the typography in so that as you enter your copy and post your content, no coding is needed, the styling is applied automatically – but only to those elements whose positions always fall in the same place.

The headline, first, second, last para – all can be identified with CSS selectors and styles applied. The subheads and pull-quotes, however, are placed in the article at the discretion of the author. Thus, the author does need to tag these elements for the appropriate style to be applied.

‘Digest’ is an ever-popular protocol in magazine styling. It is the serving up of a buffet of short stories. On websites, we can place this smorgasbord of reading tapas around the main article, providing the reader with an appetising selection to follow whatever main course they are currently consuming

‘Digest’ is an ever-popular protocol in magazine styling. It is the serving up of a buffet of short stories. On websites, we can place this smorgasbord of reading tapas around the main article, providing the reader with an appetising selection to follow whatever main course they are currently consuming

It is worth noting that while the ever-expanding range of CSS tools allows all manner of design tricks to be deployed, CSS will not design web pages for you. Decisions about what fonts to use and how to use them, and how and where to use subheads and pull-quotes, requires a designer’s eye.

Pointers for website typography

  • Choose two fonts, one a ‘display’ font for your headings and then something clean and simple for your body text. It is old school practice to mix a serif font with a san-serif one, just as we do at Graphic Violence;
  • Give your opening para its own, distinct style to separate it from the body copy;
  • In your body copy, keep your paras short. Three to five sentences is a good length;
  • Use subheads and pull-quotes when you don’t have images to break up body copy. Aim to never have more than three paras without interruption;
  • Use bullet lists like this one, readers love them for quick information and they break up body copy, and
  • Use an ‘end mark’ to tag the end of an article. A very traditional and professional magazine style and fully programmable.

Designer v Programmer

In print there are few limits, a designer can let their imagination run wild. On the web, design needs to be complicit with programming and since the two skills often come from two different people, it can be an uneasy truce.

If every programmer who has ever told a designer that his idea isn’t possible puts a pound in the studio’s ‘I can’t be arsed’ jar, there will be endless funding for the Friday drink-up. Equally, though, a designer who does not know what can be achieved with programming is limiting their designing.

As the programming capabilities available on the web increase, so it opens to more creative design. The roles of programmer and designer overlap all the more as the skills of one become intrinsic to the role of the other. Cue the end mark…

Resources

  • Google Fonts
  • DaFont – Download fonts
  • 1001 Fonts · Free Fonts Baby!
  • Use your favourite font on your website – Font2Web
  • Create Your Own @font-face Kit – Font Squirrel

Read More

  • Typography rules and terms every designer must know – Creative Bloq
  • Typography in magazine design – Magazine Designing
  • 50 Examples Of Stunning Typography In Magazine & Book Designs – Bashooka
  • Best Examples of Typography in Web Design | Inspiration – awwwards
  • Top 50 Best Examples of Websites Using Typography – intechnic
  • 9 Best Practices for Using Typography in Web Design – Hackernoon
  • A Reference Guide For Typography In Mobile Web Design – Smashing Magazine

The post Finding your type online: using magazine typography in websites appeared first on Graphic Violence.

Filed Under: design, How to..., Tech, Trade secrets, typography

Primary Sidebar

Recent Posts

  • The FBI Is Coming To Town
  • the Digital Impressionism project
  • Tim Baggaley photographer
  • Using ZOOM is a calculated security risk
  • Lost in translation
  • Is your password rubb!$h?
  • ZOOM is the weakest link
  • Tory Party Do Not Resuscitate notice
  • How to think like an artist
  • Panic attacks, it doesn’t wait for an invite

Categories

  • design
  • How to…
  • Language
  • News
  • notes
  • password managers
  • passwords
  • Poetry
  • Security
  • Tech
  • Thoughts
  • Trade secrets
  • typography
  • Virus Diary
  • Zoom

Copyright © 2022 · website design & build by Graphic Violence