Have You Designed Your Page Layout?

When it comes to making a new website, one might hesitate about where to start… The first question that comes to my mind is: How would I arrange my page? Where should I put this, this… and this?

Then I paid attention to some of my favorite Web (home) pages and found some similarities within their page layout/arrangements!

1. If You Love a Concise Homepage: One Large Picture and Smaller Grids Beneath

In many websites, there is a small, concise but clear navigation bar at top of the page, followed by a very large banner picture with several pictures/icons of categories not so equally distributed underneath it.

In this way, your web page is filled in with deliberately selected pictures, instead of boring subtitles.

In the example of Ssense, although the background is white/transparent, the selection of pictures add vivid colors to the overall web page, making the audience relaxed and happy:)).

WechatIMG2.jpeg

Farfetch, a website that shares mutual audiences group with Ssense, looks pretty similar to Ssense, with navigation bar (and alert) on top of the page, followed by the large banner picture. However, in this case, the banner picture is much wider that almost filled in your screen, leaving less space and attention to other pictorial contents. I guess this depends on how much you want your audiences’ attention to be distributed.

wechatimg4

Such type of layout seems to be widely used in fashion clothing websites. The concise arrangement creates a sense of “high-endness” to the viewers.

2. For a Concise Homepage, You Can Also Try a Full Screen Photo.

fresh-one-page-designs-36

This is the LinkedIn Monitor Page in 2014. Although this page no longer exists… I found this picture online and really enjoyed it.

I think this could be widely used in our class projects. The full screen pictorial creates whatever atmosphere for the viewers without distracting the viewers from the highly concentrated words in the middle. We can introduce our project ideas in this homepage and let the viewer have an idea just at the first glance without further movements.

3.For More Informative Pages, It Might Be Nice to Have Grids Equally Distributed.

The example is Farfetch’s editorial page. It wants the audiences to pay (almost) equal attention to different topics and pick their interests.

 

WechatIMG5.jpeg

4. Even More Informative…

I always enjoyed reading articles on the New York Times website. With the newspaper-like layout, their webpages are just as informative as they could be.

WechatIMG4.jpeg

This page is also distributed by grids. However, each grid is filled out by headlines and smaller briefs. The font usage is also deliberate crucial in terms of highlighting specific words that might interest you, “Journalism that matters” for instance. The super small pictures attached to the small columns just seem like an icon here. However, they definitely add some colors and vividness into the page.

 

 

Advertisements

~ by xz849iris on February 7, 2017.

 
%d bloggers like this: