Over the last months we have seen a strong trend towards more individual web designs. These designs use realistic motifs from everyday life, such as hand-drawn elements, script fonts, pins, paper clips, organic textures and scrapbooks. That’s not a big surprise as they serve the function that faceless, shiny, glassy 3D-buttons completely fail to deliver: individuality and personality. “Personal” designs appear more familiar and more friendly. Used properly, such elements can give a human touch to design and communicate the content in a truly distinctive manner.
However, apart from visual design elements, one can also get creative with the layout of the site – its structure and the way the information is presented and communicated. To give you some ideas of how exactly it can be done, we have been collecting examples of creative design layouts. Design was more important to us than a concrete implementation of some creative idea. We also weren’t interested in whether the code validates or not. Below are some examples we have found so far.
We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!
20 × Getting Creative With CSS Link
Pavel Buben uses a magazine cover-style layout for his one-page-site. Unfortunately, there are no internal pages — it would be interesting to seek how they would be designed. An interesting and unusual approach.
AIGA Los Angeles3
AIGA Los Angeles uses boxes in a creative way. All design elements are placed according to the underlying grid, however they clearly break out of the boxes. This approach creates tension within the design and looks truly distinctive.
For its gallery section SpaceCollective uses a five-column grid. Text and images are perfectly placed on the grid giving the layout a complete form and a sense of order. Notice various font sizes and text styling in the design — they introduce a profound visual hierarchy into the layout that works perfectly within the complex, unpredictable layout.
Jason Santa Maria7
Jason Santa Maria has taken a truly different route with his site layout. Each article is laid out differently, with strong focus on typography and visual clarity. Below three of the layouts are presented. You may have a hard time finding similar layouts on the Web.
Checkout: Point of Sale for Mac (POS)11
At the first glance, Checkout looks like an ordinary Apple grid-layout. What makes the layout interesting is not only the position of its visual elements, but the fact that each section of the page has its individual (although consistent) design. Still, the layout is very scannable and intuitive.
At the first glance SMSParking has no layout at all. The design appears to be one single illustration — all elements fit perfectly with each other, creating visual harmony and a sense of balance and closure.
Rockatee uses asymmetry to position content blocks in an unusual yet appealing style. Notice that the left block perfectly aligns with the navigation option “Home” at the top of the page. The screenshot in the middle of the page spans exactly two navigation options and has the same width as the description block on the right side of the page.
The distortion in the layout is caused by the underlying organic texture. Although the design is perfectly aligned according to the grid, it seems to be chaotic at first glance. The tension between order and chaos creates tension in the layout and looks very appealing.
BL:ND ( blind )29
At the first glance, the layout looks underwhelming. What distinguishes it, though, are the choice of images sizes and a good use of white space. Notice how well negative space is used in the sidebar, where individual elements are clearly separated and properly aligned. The width of the images equals the width of the content blocks. Yes, the layout is boxy, but the wise use of whitespace makes it far from boring.
The portfolio of Hannibal31
Usually, navigation menus are placed in the sidebar or at the top of the site. William F. Leffert does it differently. His non-linear layout literally breaks out of the boxy structure and offers something quite different. Sometimes it’s enough to simply experiment with the position of design elements to achieve striking design solutions.
Creative design solutions can be as simple as this one. An elegant and attractive layout by URLshrinker.
The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. Once one of the sections is clicked, the main content area slides vertically — first the background image, then the content. If the content area also has some navigation options, they are slided vertically as well. In this situation it might be a slightly better design decision to use horizontal navigation instead to make it easier for visitors to distinguish between the primary and secondary navigation.
tap tap tap41
The layout on youlove.us is definitely very vibrant. It uses a large vivid background-image and a the scroll-effect to enable users to quickly jump from one section of the site to another. Notice that the navigation area is repeated four times, in each of the categories. Sliding effects are also used for each of the categories. Instead of using 20 separate page, the layout combines them all on one single page. The result is compact and user-friendly.
Method: A Brand Experience Agency
Lucuma also uses horizontal layout as well as a horizontal slider-navigation. The simple yet effective integration of background images, navigation, videos and content makes the layout unusual and distinctive.
Axel Peemoeller Design49
On this page all design elements are draggable and some of them are clickable. Images seems to be thrown on you in the first moment, but in the end they all make sense. This is an unusual portfolio which is memorable and interesting to explore.
IDEO presents everything on its main page. The navigation options are placed in the black boxes and somehow arranged among other content boxes. Once one of the black boxes is hovered, related content blocks are highlighted. That’s not something most users would expect from a layout.
Bohdan Levishchenko uses the same approach as IDEO, but presents all navigation option at the top of the page. Single works are presented as images under the navigation and spread throughout the layout.
Hotel Oxford – Timisoara57
A single-page-site with a very calm and comforting layout. All navigation options are available at the first glance. Once some of the options is clicked, the content block on the left is dynamically replaced. The logo of the Hotel Oxford always remains on its place.
thruSITES / Portfolio59
In this portfolio the illustrations of a designer’s works seem to somehow be loosely placed on an invisible rope. When one of the illustration is clicked, all other elements arrange themselves in such a way that the content which this illustration represents becomes dominant.
Erwin Bauer KEG61
5 × Getting Creative With Flash Link
The Secret Location64
The Secret Location, a media agency based in Toronto, Canada exemplifies their work, by providing an immersive flash experience around a conjured up story leading a character to follow a mysterious path that leads to the secret location. Very interactive approach, a very unusual site layout. [via65]
In his layout Kamil Gottwald enables users to define the width of site columns manually. To navigate vertically users need to scroll horizontally. Hence no vertical scrollbar is necessary. Multiple site views are possible.
“Let Muku Do You”: this friendly buddy just wants to remain visible and hence he tries to find some place on the screen to keep an eye on site’s visitors. The layout of the site is simple yet memorable — well, Muku makes sure he’ll be remembered after the browser window is closed.
Related Resources Link
You may also be interested in the following articles we published earlier:
- Design Showcase Of Creative Online Shops77
- 39 Creative Flash Designs78
- 65 Excellent Flash Designs79
- Exploring Design: Outstanding Start Pages80
- 1 http://www.pavelbuben.cz/
- 2 http://www.pavelbuben.cz/
- 3 http://aigalosangeles.org/chapter/
- 4 http://aigalosangeles.org/chapter/
- 5 http://spacecollective.org/gallery/
- 6 http://spacecollective.org/gallery/
- 7 http://jasonsantamaria.com/articles/cheesesteak-crawl/
- 8 http://jasonsantamaria.com/articles/oh-snap/
- 9 http://jasonsantamaria.com/articles/explain-yourself/
- 10 http://jasonsantamaria.com/articles/cheesesteak-crawl/
- 11 http://www.checkoutapp.com/
- 12 http://www.checkoutapp.com/
- 13 http://www.nofrks.com/
- 14 http://www.nofrks.com/
- 15 http://www.nikolamircic.com/archive/sms/index.html
- 16 http://www.nikolamircic.com/archive/sms/index.html
- 17 http://www.matrizcomunicacao.com.br/html/index.html
- 18 http://www.matrizcomunicacao.com.br/html/index.html
- 19 http://www.davidmihm.com/blog/
- 20 http://www.davidmihm.com/blog/
- 21 http://3rdm.org/
- 22 http://3rdm.org/
- 23 http://inside.nile.ru/#years-2008/
- 24 http://inside.nile.ru/#years-2008/
- 25 http://rockatee.com/
- 26 http://rockatee.com/
- 27 http://www.getlondonreading.co.uk/Home
- 28 http://www.getlondonreading.co.uk/Home
- 29 http://www.blind.com/
- 30 http://www.blind.com/
- 31 http://www.classicwfl.com/
- 32 http://www.classicwfl.com/
- 33 http://www.shopcomposition.com/
- 34 http://www.shopcomposition.com/
- 35 http://www.forgetfoo.com/
- 36 http://www.forgetfoo.com/
- 37 http://www.include-digital.com/
- 38 http://www.include-digital.com/
- 39 http://www.arcinspirations.com/kobe/
- 40 http://www.arcinspirations.com/kobe/
- 41 http://www.taptaptap.com/#groceries
- 42 http://www.taptaptap.com/#groceries
- 43 http://youlove.us/
- 44 http://youlove.us/
- 45 http://www.teamviget.com/
- 46 http://www.teamviget.com/
- 47 http://lucuma.com.ar/
- 48 http://lucuma.com.ar/
- 49 http://de-war.de/
- 50 http://de-war.de/
- 51 http://ideo.com/
- 52 http://ideo.com/
- 53 http://creativeperson.info/
- 54 http://creativeperson.info/
- 55 http://melissahie.com/
- 56 http://melissahie.com/
- 57 http://www.hotel-oxford.ro/
- 58 http://www.hotel-oxford.ro/
- 59 http://www.web-developers.net/portfolio/
- 60 http://www.web-developers.net/portfolio/
- 61 http://www.erwinbauer.com/
- 62 http://konigi.com/design/erwin-bauer-keg
- 63 http://www.erwinbauer.com/
- 64 http://www.thesecretlocation.com/
- 65 http://konigi.com/design/secret-location
- 66 http://www.thesecretlocation.com/
- 67 http://www.iameuropean.com/
- 68 http://www.iameuropean.com/
- 69 http://listen.grooveshark.com/
- 70 http://listen.grooveshark.com/
- 71 http://www.jeremylevine.com/
- 72 http://www.jeremylevine.com/
- 73 http://www.seymourpowell.com/
- 74 http://www.seymourpowell.com/
- 75 http://www.mukustudios.com/
- 76 http://www.mukustudios.com/
- 77 http://www.smashingmagazine.com/2008/08/06/design-showcase-of-creative-online-shops/
- 78 http://www.smashingmagazine.com/2008/04/02/39-creative-flash-designs/
- 79 http://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/
- 80 http://www.smashingmagazine.com/2007/07/17/exploring-design-outstanding-start-pages/