Techniques in Feature-Rich Websites

Design is not so difficult once we know some principles, technique. And at the first time, we feel very nervous when we start to design something because we always think we could not image and we are not enough talent to do art things. But don’t worry. Design is also a science that combines with art.

In websites, the navigation and organizing contents are always issue. Designers should consider how they can handle the contents, arrange, layout it in a nicely way and how users can get the content without effortless.

I read this arcticle from the They show some techniques on how to keep design simple and organized with text, color, image in the design, how to organize the contents and how to make web layout much more user-friendly. Take a look and see how easy it is. There are 2 steps you should keep in mind when starting  layout a new website.

  1. Determine what contents need to be presents. Plane for homepage, internal page, form pages, or any special pages.
  2. Well-organize each piece of content in a list based on hierarchy. Need to determine which layout should be fited, which style is suitable with content.

Today, we will study the technique in featuring rich webdesites. There is one example that showed you how it worked, and one homework for you. Pratice it and then you can get it.

I.  Technique: Keep content organized

Keep content organized by arrange type a layout in hierarchy; by grid; and by arrange type, layout in hierarchy

1. Apply grid layout into your layout:

Using grid is a great technique for keeping your content quite organized and hierachy. It can also help the content separate in both physicaly and visually.

2. Directory Structure:

In case, the content of web is quite big, we should use sitemap to determine which pages are connected and how they can connect.

3. Arrange type and layout in hierarchy:

Many feature rich website organize content by keeping everything simple, using hirerachy to lead the users’ eye where need to be read.

3.1  The elements create hierarchy are:

  • visual weight (color, constrast, lightness and darkness, size, unique font, text color, proportion and density, complexity)
  • F Pattern

3.2 Take a look of this example to see the hirerachy in this web:

The elements create hierarchy in this web

  • Visual elements:
Text color Header: blackThe sub header: red colorDate: greyParagraphy: grey
Contrast Use black, grey to make the hireraryUse red sub header to get users’ attention
Poportion Same hierachy when pictures have the same sizesIn different categories, use different background.The news & Updates option ( White retangles with same size and same formart text); Video Archive (White retangles with videos. Have the same hierachy with same white retangles, video sizes, and same red texts).
size Different sizes for different contents.
  • F-Pattern: in this web F-pattern will be design to get information more constructive and easily to read.

4.  Pratice: Find out elements create hierarchy in any webs  you like.

II. Show content in the box.

In Twitter, there is a content such as name, email, in the box to help user know what is it for. It’s also reduce the space in the design so that it make layout has more white space.


  • Increase white space
  • Make users more concentrate
  • Scan faster, take less time
  • An advantage in signing up with a quick registration process  (from 3 for  5lines) and additional content
  • An advantage in logging-in where user had experience and had known  exactly where could be type what.


  • In sign-up form with long content, it might be not good because people don’t know exactly which box content for what.

III. Only show content when hover.

There are a lot of websites doing: only showing content or features on hover to help user interact with content more quickly


  1. Make users more interactive contents
  2. Take less time than the click to open new page
  3. Scan faster.

IV. Tabbed content.

It similar with hover because with the tabbed contents, the content will open in only on each tab and the other components do not change. Tabbed content is an easy way to show or hide content upon the visiter request. Tabbed content can be used for Tabbed option in navigation menu. The content could be paragraph or image.


  1. Saparate content into steps or sectons for the visitor to easily navigate
  2. Open a new tab but do not open a new page

IV. Showcase slider

Slider work similar with tabs, that can show each content, so that vistor see have a overall show.  It is different with tabs is that tabbed option can choose whatever tab you want.  But if you have a lot of tabs, you don’t have enough space to design. So you have to change into sliders.


Show a lot of content that we want to show


We have to see all slide sequences. We can not interrupt and jump from this slide to another slide.


If we want to navigate the content with sliders, we can put the numbers, or small circles to help users navigate easily. give the good navigation for user by hover on the icon “—>”, the page will move to the left, so the content will appear that help user take less effort to move mouse. 

Resource: Kayla Knight,


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: