The Internet Is A Picture Book

ChildrensBookWeekPoster_1.jpgI tried to get one of my little cousins to read Harry Potter last week. It was a great failure – he took The Philosopher’s Stone, flipped through it and handed it back to me.

“No pictures.” he said, “Not interesting.” And when I checked in on him later he was watching Spongebob on TV.

I had forgotten how kids are introduced to the world of reading – their first books are often filled with pictures, watercolour paintings and perhaps a few lines of text. Compare that to the stark novels of the adult world – words crammed into 500 or so thin pages, not a picture of the main character in sight. I remember reading my first ‘novel without pictures’ (gasp!): it was an Enid Blyton book, about a group of kid detectives. It left me feeling like a real grownup: goodbye to picture books now, the whole vista of bookland was open – finally – to me.

Pictureless Books vs The Internet

Here’s the truth, plain and simple: novels are remarkably unvisual things. Apart from the cover, the book itself is the pure domain of language. We don’t care if the page is white or yellow, crinkled or frayed: all that matters to us are the words written on it. And perhaps the font the novel is set in, though even that doesn’t matter much (my old copy of Pride and Prejudice is falling apart by the seams, and the typography is horrible – but I still enjoyed it).

When we come to the Internet, however, the rules of the game change. They shift so much that publishing a book and publishing online are two completely different things. No longer is reader perception of a story shaped by typography alone – we have many other factors that decide whether a reader is going to read and enjoy your work: navigation, graphics, overall ‘feel’ of the site. I have touched on readability when it comes to presenting your work online, and while that’s important there’s another major part of publishing on the web that I haven’t talked about yet – something I call The Picture Book Effect.

Put simply, The Picture Book Effect is this:

Credibility and perception of online content is shaped by the design/format in which that content is presented.

In simple English: your readers judge your work by the visual cues you have on your site.

The Internet Is A Picture Book

Oh yes, it is. Let me prove it to you. I am going to give you two opinion pieces to compare. The first one is Why There Aren’t More Googles, at The second one is entitled Terrorism and the Olympics by Nicholas Kristof, over at the New York Times. I want you to visit these two websites and read at least three paragraphs of both articles. Done? Done? Good.

Here’s my question: which one seems more credible?

Now many of you would probably say the New York Times, which doesn’t exactly prove my point, but we’ll come to that in a bit. The reasons for choosing the NYT is two-fold: first of all it is a major established newspaper, so it has to be more credible than a simple website run by some geezer you’ve probably never even heard of. The second reason is the one I’m getting at: the design of the NYT site oodles credibility, especially if you compare it to the paulgraham one.

Now I can’t really argue with the first reason, but I’ll give you something to consider. Imagine for a moment that the NYT site had Paul Graham’s site design, and had the NYT layout. Which now would be more credible in your eyes, in the time that it takes you to read 3 paragraphs? It would be the one with the NYT site design, wouldn’t it?

Visual Cues Tell Readers A Story

When I trawl the web reading blog fiction I notice quite a few things about site presentation, and sometimes I wonder if this is what is preventing online fiction from gaining a larger following amongst the web’s users. Readability is just one thing – in fact it is one of the easiest to fix. Most people know that black on white is good, or white on black … and if they don’t their readers (or lack thereof) will alert them to changing the colour scheme of their blook. Most blog fiction I read also has good typography – big, visible fonts that encourage reading by being easy on the eye.

What I do have a problem with, however, is the lack of visual identity a majority of these blooks possess. A prime example is The Legion Of Nothing, a work I love and one that I’ve been following religiously over the past few weeks. It’s got great writing, brilliant characters and a superhero plot going for it … but I find the site design a bit jarring. In fact, I had no idea it was a superhero story when I first started reading. Here’s why: the visuals on the site are that of an old world map, something you’ll expect for a fantasy novel, perhaps. Certainly not a modern, high-school, contemporary one.(I was expecting something like this, actually.)
The Legion Of Nothing Site

Jim Zoetewey, Legion’s writer, is a web developer by day (and a caped author by night), so I’m pretty confident that he’ll do a good redesign when he’s finally free. But let’s stop talking about jarring examples and take a look at some blooks who are doing it right.

Mortal Ghost and Scary Mary

Both aren’t standouts when it comes to design, but they do one thing right: they get the mood of the story across. Mortal Ghost has fire at the top of every page, and anybody who’s read it will know that a fire is a major plot point in the story. An ominous one, in fact – the synopsis of the blook warns you early on: “And then there are Jesse’s own memories of a fire …

Scary Mary, on the other hand, has one of the most memorable blook headers I’ve ever seen. The font used isn’t very nice, I’ll admit that, but the eyes stay with you long after you’ve left the site, and it is iconic. I associate those eyes with Mary whenever I see them (Mary, the main character, can hear ghosts) – and I can safely say Windvein has done a great job creating a strong visual identity for her blook.Scary Mary

Guidelines To Follow

The problem with working The Picture Book Effect is that it isn’t as clear cut as improving readability. Creating and enforcing a strong visual identity for your blook depends on your story and on the way you write, and there are designers who spend a few years learning how to design good site identities.

Here are some general observations: white backgrounds are more credible than black, though Mortal Ghost makes good use of black to paint an ethos of coming danger. This atmosphere makes Lee’s writing that much stronger, and it also helps to accentuate the tension in her story.

A single image – often placed in a prominent place – that conveys what kind of story you’re doing helps a lot in creating the mood of the site. You can’t expect to engage a reader with a zombie story if your site has pink flowers all over it, in much the same way you can’t hope to scare a child when you’re dressed as the Easter Bunny.

Visual identities are needed to produce strong reader experiences on the Internet, and this applies not only to blog fiction – it applies to every type of website: blog or forum – this one included. So the next time you surf the web keep an eye out for how designers dress up a site to make it feel fun, to make it feel corporate, or perhaps to make it feel downright boring. And when you do, come back here and tell me about it. I’d love to see those sites too.

Possibly Related Posts:

Category: Publishing · Writing Web Fiction
  • jz

    In my defense, I should mention that the original idea for my website was to have a wider variety of my writing available, some of which would be a bit experimental, making the theme of old maps and uncharted territory a bit more appropriate.

    Inconveniently, people started reading while I was still writing the first serial (which I’d originally intended to abandon and return to unpredictably)… and I had ideas for the next section… and somehow I never quite got around to moving on to other things.

    I intend to work up a better theme for the site one of these days. I’m a programmer/sysadmin more than a designer, though, so I’ll probably attempt to find a neutral template first and get something good later. Probably ought to buy the “Legion of Nothing” domain name too, eh?

  • Eli James

    Yes, I do realize it’s for all your work, Jim. And I’m actually very glad you didn’t abandon the first serial.

    You should purchase it, you know. You’ve got something really, really good going on there. I, for one, love Legion to bits.

    Go! Buy! Redesign!


  • Gnorb

    Excellent article. Phenomenal observations. While I tend to be fairly visually oriented, I’ve never consciously thought about how site design would add to credibility. Unconsciously, I’ve done it a few times, as maybe have most others who’ve ever actually designed a site. (The reason I chose Derek Punsalan’s theme as a basis for my own has in large part to do with just that: it looked more “professional”, more credible.) I’ll keep in mind the picture book approach in the future.

  • srsuleski

    You can’t expect to engage a reader with a zombie story if your site has pink flowers all over it,

    Heeyyyyyy. :P

    Heh, well, I don’t write about zombies, but I do use the Japanese Cherry Blossom theme.

    I use one site for all my writing — short stories and various serials. So I need my site to be as flexible as possible. Hence the theme is very light on the motif. It’s very basic white and black with brief accents of pink, and the Cherry Blossoms in the header. They’re mainly there to offset the starkness of the overall white on black design.

    I like having one central site (and domain name) for all my work, and that desire clashes with the idea of a visual identity for each story. I think this is something I will have to live with, as in the end I find the benefits of centralizing to outweigh the drawback of having each story look the same.

    I’ve made some effort by adding headers (which I’d originally created to use as ProjectWonderful ads) to list on the “About” pages for each story. Unfortunately, the ads other people are running on my site are probably more visible and distinct.

    I have to say, I love Sonja’s site themes for Fiction Murdered? and The Mutants. They each fit their stories perfectly.

  • Sonja Nitschke

    Thank god for Toptut. Because my sites were dog ugly before I found this website.

    One of these days I want to get a more personal site that’s both Picture Book Nice and readable and…me.

  • Eli James

    @Gnorb: Thank you for the kind words. =)

    @Sarah: lol! Oh dear. I wasn’t thinking about your site when I wrote that … the example just came to mind. Really!

    @Sonja: Yes. Your site designs do reflect the tone of your story. The mutants, for instance – very dark. Nice,

  • Windvein

    Well, you should’ve seen the font when it was pink and green! The font is called Graffiti Treat courtesy of That is a dangerous site to visit. Look at what I came away with.

    I drew the image so yay. I’m glad you like it.

    Mirrorfall has a pretty cool image header too, but it’s so damn dark! Can barely see the drawing to appreciate it.

  • Windvein

    And now I want to make my header BIGGER.

  • Eli James

    Serious?! I think it’s fine as it is, windvein! Don’t make it too big!

  • 2569025360

    It really a useful idea.I will have a tiral of this idea as soon as possible as have already frustrated by Moncler Paris and Doudoune Moncler  for a long time.Thank you very much for your continously post of effective tips.It really do me a great favor.if you have more information about  Moncler pas cher  can you tell me and i also like Moncler Homme ,my boyfriend want me to buy  Moncler Femme  but i can’t find a shop that sell moncler piumini,as i always want to be a Moncler 2012  before andisearc outlet moncler  for a long time, but i only get the result of moncler sito ufficiale ,then i Walk into marketing and marketing center, to find ,and i find a good display of Sito moncler and UGG Italia, my sister want me to buy stivali ugg  but i only find ugg australia  it really drive me crazy!you know, next month i will marry with my boyfriend and i want to look some prezzo ugg  and ugg scarpe i search shop for a long time they are all so if you find good also, you can leave a email to me! thank you!