4

I'm trying to figure out possible layout options for a website project. Its function closely resembles EnglishCentral. This website helps people practice spoken English through a series of videos with subtitles.

A typical layout for this sort of design uses a left category navigation area, and thumbnail tiles. But in the initial stage of this particular project, I'm planning on using audio and text only, which means the no image thumbnails could be generated. I also prefer not to use the audio waveform as the thumbnail considering it's not a sound marketplace.

I'm wondering what other options do I have for the layout of this website? Particularly the thumbnail tiles part, how do I replace them with only text and audio? And how to make it attractive at the same time? Any existing examples?

Any ideas?

Update:

I'd like to thank everyone who contributed ideas to my question. Originally, I was planning on not using graphic at all, and rely on texts. If typography were correct, it might look nice. However, in such a learning site, this scheme could be a bit too monotonous, and would be difficult to generate interest for users. So eventually, even though I don't have videos, I might use other form of graphics. A site like ThemeForest could've easily use screenshots as thumbnails, but they require designers to upload additional icons instead. So I'll think about using a combination of simple graphic, color-coding, and typography.

Improve this question
3
  • I have a similar situation--how many items would you anticipate would be in that collection?
    – Charles Wesley
    Dec 4, 2012 at 16:22
  • Well, it is like EnglishCentral, so there will be pages of contents, with each page holding like 20 entries.
    – He Shiming
    Dec 5, 2012 at 1:49
  • That is about the same as my use case. My faceted navigation could return anywhere from 5 to 30 results depending on the selected items. See my answer below to see how my approach might translate to your needs.
    – Charles Wesley
    Dec 5, 2012 at 18:05

5 Answers 5

Reset to default
3

Firstly, you need to choose layout not on the basis of aesthetics, but usability. When websites use tiled layouts for videos it's not because they're attractive, but because there's no strong hierarchy in the results and the thumbnails provide the best representative of the video's contents. You haven't said much about the items being displayed or how users will choose between them, so I couldn't recommend a layout.

However, I can talk about making a website attractive without the use of images. Broadly speaking, there are four ways that almost any website can improve its aesthetics:

  • Typography - if your content is text, then do it justice with well designed typography. Choose a combination of fonts that adequately represents your 'voice', and lay them out properly. Keep measures on the narrow side and font size / line height on the high side for readability.
  • Iconography - icons can provide powerful visual cues, but they mustn't be too bright and potent else they steal the focus of the content.
  • Texture - add texture and shading to UI elements. Use non-white backgrounds so you can then use lightening for hinting, and carved effects on lines. The lower contrast will also improve the appearance of the type.
  • UI elements - this includes not just form controls and the like, but containers for content, dividers - any visual element that carries meaning. Refine their appearance and use subtle effects to give your interface a high-quality feel.

Now, after implementing these four steps, you may still not feel satisfied. But be careful - make sure you are not confusing 'being attractive' with 'having visual focus' or 'being appealing'. If your site still lacks visual focus, you can remedy that with proper typographical hierarchy and subtle hinting. If your site still doesn't feel appealing, try to expose more content and value. But don't just add visual elements for the sake of it, as that will just add noise.

Improve this answer
1
  • Can't argue with the 4 points you illustrated. Thank you for the input. I think I have some ideas now. Though designing towards merely attractiveness is somewhat superficial, it's still easier to make it appealing. To me, it's much more difficult to design the layout for a site like craigslist.
    – He Shiming
    Dec 5, 2012 at 23:07
3

You could use color and font size to distinguish links/headlines by topic and popularity to lightend up the overly rigid feel you get when just listing the links. Use headlines, font size and negative space to create a hierachy of how click-worthy different links are.

Improve this answer
1
  • Thank you. Color coding device sounds nice. But do you have any examples? I don't want to to look like craigslist either.
    – He Shiming
    Dec 4, 2012 at 14:31
2

You could categorize the audio and text by type and associate a relatively-large icon with each type. Place a brief description next to the icon. That should help to give it a visual feel without needing video content. You could also let the color of the icons signify something, such as difficulty-level.

You could also divide the site into three columns (possibly based on difficulty level) so that you don't have text running all the way across the page. That way the text stays close to the icon it's associated with.

Here's a quick mockup of what I mean.

enter image description here

(The rectangles of color would actually be icons. The text would be headings and short descriptions linking to associated lessons.)

Improve this answer
1
  • That's a good idea. Though it's not very attractive. It's certainly not a match to thumbnail tiles.
    – He Shiming
    Dec 5, 2012 at 2:23
2

I would recommend going with a simple approach like Khan academy where you use distinctive icons along with text to highlight the the title and type of content.

enter image description here

The advantage of this method is that :

  • It allows users to assimilate a large amount of content in a short time
  • Uses universal icons to clearly call out the type of content that is going to be shown
  • The uniformity in icons and the use of just text ensures there are no distracting elements which draw the attention of the user all over the place.
Improve this answer
1
  • Thank you for the idea. The bad thing about google-like, or craigslist-like design is that it requires user to read text carefully. Image thumbnails require much less attention. Again, I might be approaching this question the wrong way.
    – He Shiming
    Dec 5, 2012 at 22:55
1

I have a similar use case where I have a faceted navigation UI with a result set displayed using the tiled technique. However the content does not lend itself to iconography or images, so my tiles are text only.

In place of graphic elements I am using meta data, text, color, and size to create a visual pattern that makes it easy for the user to evaluate all of the details of the search results.

For your use case, perhaps something like this might work:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I used the EnglishCentral web site's content structure for the sake of the example.

Improve this answer
1
  • Thanks for sharing your idea. Tiles of text links aren't really attractive. I might have asked the questions incorrectly. I'm not objecting the idea of using icons at least, pure text just don't work well for such theme.
    – He Shiming
    Dec 5, 2012 at 22:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.