The Characteristics of a Less Conventional Website with Examples

The Characteristics of a Less Conventional Website with Examples

The evolution of web design has changed significantly since the creation of the internet. Back then, a Geocity webpage could be as simple as a brochure, using a multi colored background and gaudy text effects. It is interesting to note that with the progress of technology, websites have become more complicated; codes come into play and incredible design techniques are produced.

People noticed its power; the power of the internet has advanced so rapidly that there is a boom in this industry. Websites become more visually compelling with effects becoming more eye-popping.

Characteristics of a less conventional website

Dissection of Web Layout

These days in web design, the focus of creative layouts is to draw the attention of users. The current state of most web pages is designed to cater to the eye of readers where readers would start scanning with fixations from the upper left of the page. This is evident even from the early days of web design where it is similar to today’s conventional wireframe of a webpage shown below.

Conventional Layout

By dissecting both old and new sites, we can spot similarities between the two layouts. The master heads, navigations and content are placed at the same areas.

Dissection of Old Site

Characteristics of a Less Conventional Website

The Undefined Grid

Using a grid layout is a great way of displaying your content and images neatly. However, breaking away from the strict grid layout is a great way of establishing a contemporary and fresh non-typical website layout. Even though unconventional websites do not follow the suggested grids, they are still able to achieve usability, allowing users to glance and read the page at ease.

Siete De Febrero

It can be a little hard to achieve usability with undefined grid layouts, but if you are able to pull it off, it would definitely give your site an element of fun and energy.

Great Splash of Images

Filling the background with a professionally taken photo enhanced by skillful photo editing, makes the site look like a full-screen flash site. Images play a very important role here because they are huge and they almost fill the full screen of the browser. They should be visually appealing and/or impactful to the eye.

Tony Chester Folio

Overlaying the image with a translucent box for your content helps the reader to read them more clearly.

Scrolling Horizontally

Vertical scrolling is the most common way of scrolling web pages. However, websites that allow horizontal scrolling gives a magazine-like feel to the site. Scrolling horizontally may be a chore at first, because you are unable to use the scroller on the mouse. However, it is something you can get used to it because many such sites uses JavaScript, so the page would animate horizontally just by clicking on the navigation buttons.

Faux

Most of the time, horizontal scrolling occurs in sites with less content and more images, such as photography portfolio sites.

Slim Vertical Layout

This is a less popular option when trying to be unconventional. The main navigation and content is placed right after each other in a straight row. This means that the user’s eye will be scanning the page within the vertical zone of this layout. Such a layout should be designed carefully, as the page would get very long if it is content heavy. Scrolling too much is not advisable.

Samsys

Showcases- Bringing the Modernist Layout into Web

Tomas Pojeta
This site contains rich illustrations, filling up the whole screen of the browser. There is no typical navigation bar sitting on top or at the side of the screen. Its navigation is placed at the top or bottom right of the screen and navigation in this site is almost linear. Scrolling up and down the site gives you the feeling as if you are looking through a brochure-like website.

Pojeta

Bada Bing
Bada Bing’s site is also uses an image that fills the whole browser. The interesting placement of the main navigation beside the logo, gives visitors easy access to other pages. Its homepage consist of an interesting animation – the image moves vertically and its content moves horizontally. Although it still uses some elements of a common web layout, the positioning of content, images and navigation makes this web page interesting and experimental.

Badabing

Kustaa Saksi
Although Kustaa Saksi’s site follows a grid-like layout, it still looks rather experimental because the navigation is camouflaged with images. Users are required to rollover the images in order to find out what the link is about. The overall layout is neat, simple with a hint of the modern look.

Kustaasaksi

Camellie’s Portfolio
The navigation bar in Camellie’s portfolio site is placed at the bottom, somewhat hidden in the beautiful and detailed illustration. Of course web design experts may argue that the navigation is the gate way to the other pages of your site and it should be placed at a prominent area. In this case, it is the total opposite. In fact, the illustration helps to lead the eye to the navigation at the bottom left.

Camellie

Work At Play
This is another company site that uses JavaScript to animate the pages, moving them horizontally. In every link, the background is filled with a black and white image, contents are all placed vertically, and there is minimal horizontal scrolling.

Work At Play

Aspired Mind
It is quite impossible to define the layout of this site. The navigation is placed within the typography on the left. One may not know how to navigate through the site at one glance, but with the help of the floating blue bubble, it tells the user what they’re clicking on.

Aspired Mind

Fudge
This site uses the layout interface of Photoshop. The homepage is not scrollable except for the center column. Although grids are quite evident here, it is an interesting way of displaying information because it has adopted the look of a print media for the web.

Made by Fudge

Only 2 Designers
This site has the characteristics of a slim vertical layout. The width of the white canvas does not expand when contents are loaded within that area. Its contents are concentrated within the white spaces, and no scrolling up and down is required. Such rare layouts should be designed with care, as the page will get very long when content gets heavy.

Only Two Designers

FM & M Management
With the advancement of scripting, more websites are starting to look like it was done with flash. This site consists of a professionally taken image, with simple graphic elements overlaying on top of the image. Subtle animation and choice of colors, gives this site a contemporary look.

FM & M Management

Rezoactif
The use of 3D graphics gives a futuristic look to websites. Typography, the choice of color and the play of lighting, plays a big part to disguise a simple table in this layout.

Rezoactif

DesignYour Life
Design Your Life is a photography showcase website where users scroll vertically. Scrolling horizontally engages the users differently, providing a different viewing experience to them.

Design Your Life

Frozn
Drop down menus are a great way to hide links when there are too many of them. This site contains interaction cues to help the user to look for these hidden links in the page. It uses an uncommon table layout that is expandable when users click on the arrows.

Frozn

Leg Work Studio
Line art is the main focus in this website. Pages animate vertically in a swift action when users click on the links. Although it uses traditional style of illustration in all the pages, animation is used effectively to help enliven the site.

Leg Work Studio

Towards An Experimental Future

Through the years, professionals have set certain standards for designing the web. However, with the recent rapid outburst of designers and professionals in the creative industry, web design principles are gradually altered. This alteration is accepted by users. And this acceptance will modify users’ knowledge of interactive cues and habits of surfing the net. Who knows, going experimental might be the next hot trend on the web.

Charlotte’s interest is in web interface and design as well as motion graphics. Her absorption with her work is mostly due to her attention to detail and passion for the world of design. Winding down after work, which consumes much of her time; she enjoys traveling, exploring new places, gastronomy, and fashion.

Comments

  1. / Reply

    Wow, I love some of the exciting and experimental sites here.

    Great collection for inspiration,

    Thanks!

  2. / Reply

    Thanks for this excellent post. I really like how you not only included examples, but you broke it down and explained your reasoning behind each one.

  3. / Reply

    I personally prefer scrolling compared to hunting and finding that “next”-button after each article. With scrolling I can just sit back, relax and spin that mousewheel. It requires so little effort I cannot really think why someone would want to cut content into smaller pieces by hiding it through the use of buttons unless the content gets too heavy to load.

    • WindupHarlequin,
    • November 12, 2009
    / Reply

    The problem I have with some of these examples is navigation that requires you to roll-over images and hunt around. Such a system functions perfectly if you’re able to see the website clearly, have javascript enabled, and have the time/patience to look for hidden elements.

    The fact is, though, that not everyone does. Screen-readers, visually-impaired users, those with older browsers or those who aren’t used to hunting around websites will find these difficult to use. There’s nothing wrong with less conventional designs – they should be encouraged – but some standards, such as obvious and persistent navigation, have arisen because they work for everyone. When designing sites like these, bear in mind that you could be alienating a certain section of your audience.

      • Charlotte,
      • November 14, 2009
      / Reply

      Thank you! That’s very valuable. I agree that a less conventional site would alienate a section of users. However, it really depends on who the site is targeted at.

      Some unconventional sites are so difficult to navigate, it causes the user to exit within seconds. But some unconventional sites are designed so well, it encourages users to click further and further. I thought that was interesting.

  4. / Reply

    I love unconventional designs and I like to look at how other designers try to differentiate themselves. I recently tried to go with a unconventional layout for my front page.

    • stope,
    • November 13, 2009
    / Reply

    For those who don’t uderstand Polish: the slogan at FM & M Management page says: “We’re to busy to create a slogan” xD

  5. / Reply

    We all know aside from good content, having a good design on your site make a great impact to users. There are designer who makes a little more complex website that makes the project more expensive, while other focus on the basics, conventional yet very pleasing.

  6. / Reply

    Wonderful design, I love

  7. / Reply

    Thank you so much for listing my website album.alexflueras.ro – A quick note though, the site is scrolling horizontally, not vertically :-)

      • Charlotte,
      • November 15, 2009
      / Reply

      Thanks Alex, made that amendment.

  8. / Reply

    Thanks for listing my design http://www.sam-sys.com. When i check with my site http://www.toopi.in , Very less people are only visiting the inner pages. So i use all the useful content in one page as much as possible instead of creating more navs and pages.

    Thanks~Suresh~www.toopi.in

    • coocootoo,
    • January 13, 2010
    / Reply

    Most of that is about web designers trying to look different and yes definitely “Experimental”
    But I don’t think that is a “Web 2.0” “Trend”.
    It is too complex to make wierd looking pages like that so if most people can’t do it then it won’t become a trend.
    It’ll just be like an artistic style like Van Gogh or Salvatore Dali paintings.
    And how many people can paint like that?
    Or how many people can play the guitar like Jimmy Hendrix’s style.

    1. / Reply

      I absolutely agree

  9. / Reply

    Awesome post thanx for sharing…i just want add that “illustrated” and “Grid-based” web sites are the most popular these days while the space is getting narrower for Flash Designers..thanx for CSS3 and HTML5..and some great scripts like Raphael.js looks the same like flash..:)

    thanx again :)

  10. / Reply

    Great Post and website examples. Forces who to rethink their design concepts.

    Thanks

  11. / Reply

    These sites are really hard to find. The style and the concept of the design is really unique

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.

d
c