• Tweet

• Tweet

Every year there are new trends in web design layouts due to the advancement in web technologies. Since CSS3 and HTML5, website design has changed significantly and with the help of various jQuery and minification tools, websites have become incredibly fast considering the amount of code that they are handling.

Delibar
The content area on the Delibar website looks like a pile of two pieces of paper, with the navigation items holding them together. It also features a subtle JavaScript effect that smoothly moves them up when you hover over them.

Blue Door Baby
The Blue Door Baby navigation bar is styled like a ribbon that is laid over top of the feature area. The menu items are text-image replacements that have a subtle inset-text effect. (Learn how to create the inset-text effect).

Mystery Tin
The Mystery Tin navigation menu is arranged vertically. The active menu item has a background that wraps around the side of the content area. Similarly, hovering over a menu item shows a smaller 3-D ribbon.

psdtowp
The navigation menu bar on this website is designed to look like it’s on a higher plane. Additionally, mousing over a menu item shows a speech bubble with a description of the item.

Harry Bissett
Harry Bissett’s navigation is made to look like it’s popping off the page.

Sower of Seeds
The navigation bar on Sower of Seeds looks like it wraps around the content area, making it stand out for the user.

Alexarts
Alexarts features a background of a city waterfront. Navigation menu items are in large speech bubbles that point to different elements of the scene. Hovering over a navigation bubble propels it slightly upward, a subtle indication that it is interactive and is the current target.

Bush Theatre
Bush Theatre uses thought bubbles instead of speech balloons, which in comic books denote the subject’s thoughts.

Tienda
This colorful illustrated website depicts a scene of an alien and kids connected to a rocket ship. The vertical secondary menu is creatively integrated into the illustration: they’re spoken by the alien protruding from the top-right of the page.

Rob Alan
Irregularly shaped speech balloons make for a distinguished look on Rob Alan’s website. The speech bubble opens a groove in the main content area, which visually connects them.

SproutBox
The active item in the SproutBox menu is highlighted with a darker green, and the corners of the rectangular speech bubble are rounded. Placing your mouse over an inactive menu item displays a similarly shaped speech bubble.

Kingpin Social
Kingpin Social’s primary navigation menu is hard to miss, with its big size, rounded corners and copious padding. The active menu item is highlighted with a speech balloon.

Contrast
The Contrast website features rectangular speech balloons that have a sketched look. The speech balloon is repeated throughout the design, denoting a clickable element (such as the “Archives” link on the side and the “Read More” link for blog posts).

Design Spartan
Design Spartan’s primary navigation bar highlights the current page with a colorful and textured round-cornered speech bubble, which pops out because it’s set against a dark background. Each menu item has a different color, making each section of the website easily discernible.

Definitely Dubai
The Definitely Dubai design features rounded rectangles; drop-shadows give them depth. The active page is highlighted with a white rounded speech bubble.

Originally posted 2014-09-02 16:49:54.