Design a webpage with two related topics

craigslist is one of the most popular website but is a heavy mess. wired guys decide to help them for a redesign. Obviously, people do care about a design of a website.

When I was asked to design web pages, the top desires are always two points: First, User must be able to find what he wants by clicking in a couple of seconds. Second, user must be able to reach the page with minimal clicks.

I recently had a need to design a webpage. It must display two equally important and also related topics. When user open the page, he must be able to see both of them. How should I arrange them? <!– Many websites have emphasize solutions to this problem. For example, Offerpal Media uses dynamic moving tabs.–> I thought about all the options and came up the following list (illustration only, not functional):

1. Vertical dual display

 

 

Part I

 

 

 

 

 

Part II

 

 

2. Horizontal dual display

 

 

 

Part I

 

 

 

 

 

 

 

Part II

 

 

 

3. Single topic display with a menu bar

Part I || Part II
 

 

 

 

Part I

 

 

 

4. Single topic display with a tab

  Part I     Part II  
 

 

 

 

Part I

 

 

 

Option 1 puts “Part II” in a secondary disadvantage place. Options 3 and 4 damages “Part II” even more. So, the only candidate that I could use was option 2. But still, it lacks the feature that two parts are closely related.

I find that the website of Younexus has a smart solution. If you open that webpace, you see two parts in parallel: “Advertiser” and “Publiser“. This company is in the advertisement business. So, it makes sense that the website has these two parts. Are they closely related? Sure they are. But is this fact reflected on this webpage? Yes, it is by two means. First, the background image has a strip that “links” them. Second, if you move mouse over one part, you see a dynamically appeared banner that goes all the way to the other. This is achieved by Javascript. I suggest that you go there and give it a try.

Advertisements

Tags: , , , , , , ,

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s


%d bloggers like this: