Berikut adalah beberapa panduan untuk mengorganisasi Isi Website -
1. Know your content
Content organization starts with understanding the elements you are dealing with, and their relative importance on the page.
Traditionally, books were divided into parts, chapters, sections and paragraphs, each having their own set of typesetting principles and rules.
Though we’ve transitioned to a web era, that division is still present: parts are now site sections, chapters are individual pages or stories we decide to read, while section and paragraphs remain what they are.
If you look at a typical page from Apple’s website above, you’ll notice they paid a lot of attention to type and content hierarchy. There’s a clear distinction between page title, lead paragraph and individual sections of content, including headings of those sections.
The reading experience of such perfectly crafted pages is smooth and effortless — and the beginning point was understanding the content, the individual elements and their relative importance.
So before you copy-paste client’s text and start designing around it, take some time to actually read what it’s all about and how it’s structured — you’ll get a better idea on how you need to treat it.
2. Separate sections from paragraphs
As a reminder, a paragraph is a small piece of writing separated by new line or indentation — a section is a group of paragraphs dealing with a certain theme, usually having a heading.
Consider the example above. To the untrained eye, these 2 pages look identical or very similar — yet reading them is very different.
The page on the left makes no distinction between individual sections and paragraphs, as spacing between them is identical. This feels like running an endless marathon to the reader, instead of reading nicely formatted content.
On the other hand, the opposite page shows how breathing room between individual sections (called section breaks) can give the content much-needed structure and readability. In addition, the spacing between paragraphs has been adjusted to be less intrusive but still visible. All this makes for a more harmonious page design and a better reading experience.
So next time, give your paragraphs adequate spacing and give your sections a break.
3. Experiment with heading & body text combinations
The look of these websites is dominated by great combinations of heading and body type. Left: The Beauty Shoppe, Middle: Ana Majik, Right: 826 Seattle
Size, color, position, typeface. Those are just some of the attributes you can play with to make section headings pop off the page and give your content a whole new look.
But more importantly, never pick a heading style after you settle for body type — you’ll end up using more of the same, which is usually a larger or differently colored version of the same typeface. Instead, look for amazing combinations, experiment with both heading and body type, and find a combination that will bring flavor to your project.
Sometimes, this is all you need to make your work look beautiful. Here’s a page to get you started.
4. Use larger type for body text
This is the actual size of body text on Forbes — whatever you think about it, it makes for an amazing read.
If you hate seeing large type on-screen, here is what usability expert Oliver Reichstein has to say about it:
“16 pixels is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display… It looks big at first but once you use it you quickly realize why all browser makers chose this as the default text size”.
If you’re still not convinced, try reading a very long article with 12px font, and you probably won’t make it to the end. Using small type on screens dates back to the age when computer screens were embarrassingly small and it was necessary to show as much content as possible. Nobody thought about design or readability then.
Times have changed and so should you — use larger type!
5. Place images above related content
The page on the left is harder to digest than the one on the right — you cannot really tell whether the image belongs to the text above or below.
Our natural reading direction is left to right, top to bottom. But there is a catch. Our brain perceives and processes images much more quickly than text, which means we see images first, then naturally proceed to read whatever we find under them.
When you place descriptions above the image, your brain cannot process the information without extra heavy lifting, which results in a bad reading experience.
For this reason, the content that goes with the image should always be below the image.
6. Use type board for content-rich projects
For most projects, you can experiment with type while working with other elements in your layout — chances are you won’t be needing more than a page title, section headings and paragraph text.
However, if your project involves a complex content hierarchy, such as the one you can see on newspaper websites, you will be better off creating a type board.
A type board is simply an Illustrator file with chunks of typographic content that needs to look good together. It allows you to easily experiment with type combinations without being distracted with other design elements. Once you find something you’re happy with on the board, you can continue designing around that.
Why good content organization is more important than ever
According to research conducted by Dr. Martin Hilbert from the University of Southern California, the average person today receives a daily dose of information which equals to 174 newspapers. That’s not a mistake. We are processing thousands of pages of information every day, through reading, listening and watching.
As a professional designer, you will never get a chance to play a bigger role in this story than by organizing visual information in the most digestible and comprehensive way.
Bringing order to chaos is what content organization is all about. From a design perspective, there is no bigger or more important task than that.
What are you doing to better organize content?
originally found on
0 Komentar