The layout of Libération’s website is clean and maintains a nice balance between content and white space compared to other websites. In addition, it isn’t difficult to navigate around the pages because the important elements are easy to locate.
The nameplate is placed on the upper left corner, while the search bar rechercher is located at the top of the page, so that no one will miss it. Libération’s homepage has four clearly labeled section tabs of different colors at the top of the page. In my opinion, the horizontal setup of the tabs is easier to read rather than a vertical one. The sections, which lead to second-tier pages, include: La Une, Labo, Débats and mon Libé. La Une refers to the Front Page, and it consists of all the sections that are in the printed publication, such as World news, Economy, Sports and Culture. Labo is the Media Lab, which consists of videos, audio files and podcasts. Débats are debate and discussion, and it includes editorial pieces, blogs and forums where the users can read about other people’s thoughts and opinions on different topics. Mon Libé refers to my Libération. If you are subscribed to Libération, you are able to access the electronic version of the newspaper as well as newsletters under this heading. Below the sections and sub-sections are the different regional versions of the newspaper.
Overall, the website is very interactive. When the cursor is placed on each of the tabs, the labels below change immediately to match the topic. Because the subject heads are placed under each tab and are somewhat “hidden,” the homepage looks less crowded and has a clean look. In addition, when you click on each tab, different stories appear below the tabs, based on the topic. Moreover, there is a whole section that is devoted to videos, podcasts and audio files that allow users to interact with.
The mon Libé section is also found on the right column. And advertisements are found just below the mon Libé section. Unlike other websites in which advertisements are found all over the page, Libération limits the advertisement space to one column on the right side of the page. They are well organized in boxes, which further adds to the clean design layout of the page. The gray column to the left includes additional information, such as other article titles that pertain to the different sections.
At first glance, the website doesn’t seem to have many images. However, once you scroll down the page, there’s an image that goes with every article. Most of the images are the same size, but every now and then, there’s an image that is bigger than the other ones. There are both close-up and wide-angle shots throughout the website to add variety.
The main colors that reoccur are those of the nameplate – red, black and white. In addition, the colors gray and orange are used. The color gray is used for boxes, while orange is used specifically for the mon Libé section. This makes it easier for the users to locate where to find information regarding their personal account. Colors are also used to create hierarchy on the page. The colored labels make it easier for the user to find information on a content-heavy website. It also lets the readers know which second-tier page they are on because the line right below the tabs, as well as the 2-column box, changes colors to match the color of the section tabs.
As for the typography, the website uses both serif and sans serif typefaces, just like the printed publication does. However their usages are different on the web. The section headings, sub-headings, bylines and credit lines are in sans serif. On the other hand, the article headlines are all in serif. Furthermore, unlike the printed publication, the website uses sans serif typeface for the body text. The reason may be that sans serif typefaces are much easier to read on the screen than serif typefaces. The website also uses capitalization and thickness of the typefaces to create hierarchy on the website. For example, the main sections of the website are capitalized and in bold sans serif typeface, while the sub-sections are capitalized but in regular sans serif typeface. Also, certain headlines are in bold to call attention to the news story. Direct quotes are in italics to set apart from the regular body text.
Regarding the grid system, the website utilizes a 6-column grid, but it does not strictly follow it. As aforementioned, the mon Libé section uses one column, and the gray boxes use two columns. The remaining content uses all three columns on the left. But it is important to note that as the users navigate through the different pages, the grid remains the same, while only the content changes. Since it has a set structure on the website, it is easier for users to navigate around the different pages.
Overall, Libération’s website has a similar feel to the printed product because of the typefaces and the colors. In addition, it is easy to navigate and locate information. However, I personally prefer the design and layout of the printed product. Libération is a very photo-oriented newspaper, and it effectively uses photography as a powerful design element. Such is not the case on the web. Due to the limited space on the web page, the sizes of the photos are a lot smaller. Thus, it doesn’t seem to have the same impact. Furthermore, although the website is well organized and has a clean look, it seems to lack the vibrant personality of the printed version.