Posted December 29, 2012 by Bandish Patel in Design

HOWTO – Visually Present your Website Content


From the very outset of the visualization science the primary moving force of the further development was a high demand of finding the ways to successfully and efficiently deliver the info. The significant cornerstone – or what we are now used to call “the message” – must be delivered to the recipient via the interaction process. Since the early ages humanity has been trying to improve the visualization techniques available (remember the Egyptian hieroglyphs, Greek geometry, and Leonardo da Vinci’s revolutionary methods of technical drawing?).

There is no doubt that computer graphics has pushed the development of visualization techniques to the limits by starting the new phase of this sphere. Without a doubt the leading role in IT visualization is taken by the problem of interactivity – any visual object which is being presented with a message to an audience must be relevant, useful and timely for a person.

Today there are 3 major forms of how you can visually present the info. These forms that can be applied to any web content are (i) text form, (ii) image-based form and (iii) videos. Let’s forget for a minute about the complicated explanations of visualization types in the web world (which are basically about two types of visualization – interactive and collaborative), instead we’d like to focus our attention on the things that we meet every day on the web simply by surfing trough various resources. The tips that we will point below will be useful for the bloggers and web design rookies because major content perception concepts help you a lot while creating the highly usable designs and promoting your blog.

Video content

HOWTO   Visually Present your Website ContentBeing a true leader of the web industry video content keeps pumping up its popularity and many experts forecast that this type of content will increase its major share within the next few years due the growing availability of video recording devices for the broad audience. While creating you video content you should remember several important things:

  • The perfect duration of the any video is about 90-120 seconds. Everything that’s longer than that is less likely to be perceived.
  • If your content requires more time than you should create an Intro (remember about the 90 seconds duration) and divide the rest of your content into sections, with a separate video for each new section. Plus, if you have the opportunity, provide a sort of a menu with links to these logical parts somewhere next to your initial intro.
  • Consider several types of the video content:
    • Presentation with a host – ye goode olde method which is taken from the TV experience, the classics of web video content. Speaker’s skills, background decoration and the content itself are the key points that will affect the audience. So please consider these factors if you’ll decide to create such type of video.
    • Presentation of the product interface and functionality with the voiceover. Sounds pretty much self-discriptive, doesn’t it? You show what you’ve got and why someone would want to have it, like in the TV ads from the 1980-s. Visual coherence and laconic text are important here because the visitor must be informed about what he sees right now on the screen. Well-composed, understandable texts along with the informative video support are the perfect combination for this type of video content.
    • Presentation of the product interface and functionality with the stock music soundtrack – as you may have guessed, the visual aspects are of primary importance here and the music plays only a background role. Don’t forget that sometimes titles and text pop-ups can be great addition to this method as well.


HOWTO   Visually Present your Website ContentImages truly rule the web and so far it is hard to argue with this fact. People like seeing beautiful pictures and there’s nothing you can do about that but to take advantage of it. Simple image can hardly be called a mighty visualizing tool because you have to support it with some informational load. For the efficient communication between your content and your visitors you may use some of the following techniques:

  • Charts (pie chart, bar chart, flowchart, etc.) – any type of charts has its own pros and cons so before creating it you should know more about it. For example pie charts are considered to be common in business and journalism due to their fame of being less “geeky” than the other types. Nevertheless it is the most ubiquitous type that you can meet almost everywhere. Flowcharts are considered to be more dynamic because they illustrate algorithms of processes, representing the possible steps is a sequence in a form of boxes and arrows. It helps to prosecute a step-by-step problem solution via visual objects. Less attractive yet powerful bar charts are used for plotting discrete data.
  • Diagrams – they have many common features with charts, though you can easily get lost in the classification of diagram types and the correlation with related techniques of presenting the information. The main rule about putting diagram to your content is to use the visually appealing images instead of default Excel colors, as well as the interesting and readable data.
  • Slideshows – any animation brings dynamics and visually attracts the visitors by intensifying the communication process. Slideshow is almost a perfect example of how you can enliven your image-based content. Slideshows are truly a versatile tool and they are very usable and convenient for any user. If you want to have attractive and eye-catching slideshow you should remember about small details like thumbnails, buttons, border stylings and so on.


HOWTO   Visually Present your Website ContentThe hardest thing about this type of content is that you cannot force users to read huge texts, the text is boring for the audience – especially in the recent years when everyone is on the run and would rather prefer an image form that’s fast to perceive instead of the plain text. However sometimes text is the only option. So what you have to do in this case is to visually enrich your text by vivid fonts, original backgrounds, tables, drop caps and other typographer’s little tricks that will stick users’ attention and force them to continue exploring the content. Attractive typography in the headings, italic and strong accents, small “scannable” paragraphs – these methods will always enliven even the most boring text and will help you to build right logical structure and visual coherence.

All three forms of presenting the contect mentioned here surely have their own advantages and disadvantages, even the plain text is sometimes better than the awesome video. None of these can be called universal and their efficiency level will depend on any particular case of presenting the content. But we want you to notice that the major success of your website is not only about the content’s quality – no one will care about how useful it is when it looks ugly. So try to use our suggestions and use them wisely in your further work. Cheers!

Read more about HOWTO – Visually Present your Website Content | Template Monster Blog by blog.templatemonster.com

Bandish Patel