Japanese Characters as Sample Text to Explore Typography-Oriented Layouts

Sample text or placeholders are a common tool for designers to speed up wireframing or layout exploration when there’s no final content provided for a website. Block placeholders, Lorem Ipsum or contextual content are go-to resources because of their wide spread. In this article I’ll be going through a slightly different technique that focuses on building an unusual grid-based layout, while keeping a focus on typography.

Designing a WordPress theme, especially one for bloggers, puts in front of you all kinds blog archives that have articles with images, videos, author name, date, comments counter, buttons and the list can go on.

Blog archives of WordPress themes from Pixelgrade’s portfolio

For our latest WordPress theme, we tried to cut-out as much “noise” as possible in order to explore layouts that are suited for typography-oriented journals (eg. blogs with posts that lack featured images and focus on a title and a short description). As cheeky as we can get, we decided to use a new character set, out of our comfort zone: Japanese.

The Process

At the beginning of the project, we set two focus points that acted as constraints in our design process:

  • develop an uncommon layout that would support multiple blog posts
  • focus on type and how elements could harmoniously interact typography-wise

So the question is: how can we represent blocks of text as individual, homogenous units, while still keeping the shape and rhythm of words?

The first things that we reached from the shelf of possibilities were block placeholders, since every block of “text” is clearly delimited as a rectangle. Yet again, it didn’t fit the other criteria: solid rectangles don’t have the contour and gaps of a natural sentence and this might take away the breathing space Latin letters usually offer.

Shape and density of different types of text placeholders

Next shot was any other text placeholder that used Latin characters. Lorem Ipsum was an (too) easy go-to: it has no meaning for us, the generic placeholder, so we could focus on building the layout. Yet again, almost all the sentences in it look similar to each other and don’t resemble the rhythm of a real language. Besides that, it surely isn’t the representative content of any of our clients, so typography seemed neglected.

Craft for Sketch is our usual tool of choice: fast to insert, diverse (each insert has a new, random text), still using Latin characters though. It’s not that the Latin alphabet was a bad thing, but the familiarity of the language and letters shifted our focus more onto typography and pushed away the intention of building an uncommon grid-based layout. It felt like we could get more creative at this point.

The tipping point

Density comparison between blocks using different placeholders for text.

“Well you’re picky enough”. We thought that too. And while we were just about to settle on Craft, we somehow stumbled into some of our Japanese clients’ blog. And it just clicked. Japanese characters seemed to tick most of the points I went through on block placeholders, Lorem Ipsum and Latin-character text:

  • The letters in words huddle around and form quite a regular shape, close to a rectangle, compared to latin words that can go up and down more often.
  • Characters still have breathing space, but less than the Latin ones. A nice exercise to check text density is just to squint your eyes. Dense paragraphs come off darker (blocks), while rare ones are lighter (Latin characters).
  • Since we are not familiar with the writing system, we don’t understand much of what’s in there – yet, we know it’s a piece of typography. It takes our focus from interpreting the words and shifts it towards “hi, I’m some kind of a text section here” .
  • BONUS: I was talking about Lorem Ipsum not being representative of our clients. Indeed, most of our WordPress themes clients use Latin characters. It came to me that we might be loosing a niche when I was browsing our Google Analytics page: clients from Japan and China had an average bounce rate of 60% (which also can mean something or nothing). This exercise, correlated with my recent findings, made us aware of how easily we can dismiss a group of potential clients even by the smallest thing: choosing a character set (even if the project is still in-house).

Results

Draft layout explorations for a blog archive: three sizes of headings, shifted posts and various text weights

Conclusions

It’s important to know how to adapt your working environment and tools. Create a clear context of what you are working on and set up some constraints (these can be liberating). If you are at the point in your design process where you solely need to focus on the layout, block placeholders sound just fine. If you’re building wireframes, go with text placeholders that have familiar content to your client (Lorem Ipsum could work too, but let’s not). If you’re up for a risk, try any character set you are not used to 🙂

These little nudges that we like to put into our design process make the exploration phase more intriguing and fun. They allow us take a few steps back, refresh our minds and get creative juices flowing.  We see the value in such slight changes in approach, because they can turn into unique products and get us pretty pumped while we’re in the design playground.

Leave a Reply

Your email address will not be published. Required fields are marked *