Web Design Styles

Below are descriptions of some of the web design styles we use. To view or buy our web design packages, hosting options and additional elements, please go to our prices page.

When you have your site designed by Designtion, you are ordering a completely customized site. Designtion does not use templates, and as you can see from our portfolio, no two sites of ours are alike. We have, however, catalogued and coined our own design categories to describe the styles of design we use. View our portfolio and click on "order by style" to see examples of all of the styles listed below. Feel free to use these terms when describing the type of site you want:

Contained A contained design means that the content does not take up the full width of the window, either by having a set pixel width or by having a set percentage width. In our portfolio, unless otherwise noted, contained is short for fully contained, which means that the height and width both do not take up the full window.

Our contained designs usually have a rectangular visual border to frame the content. Most flash and contemporary looking sites are fully contained. The advantage of contained sites is that they look elegant, and they will look the same way in all browsers and do not depend on browser window size. 

It may seem like you can't fit a lot of content into a contained design, but we have found a variety of ways of having a lot of content fit in a small space. These include using iframes, thumbnails and blowups, pop up windows, DHTML javascript scrollers, flash, creative cropping and layout, splitting content up into several pages, smaller fonts, and concise content.

Full Width In full width sites, you intentionally try to use the entire browser window. Designtion.com is a full width / vertical stretch site. Full width sites work well with a horizontal navigation, and are good for displaying a lot of content at once. 
Vertical Stretch A vertical stretch design is a technique for having an element of your design stretch to match your content. Most sites on the web use the vertical stretch technique. Table based designs easily accommodate vertical stretching, as does CSS based design. 

Vertical stretching often uses a repeated image in the background to appear as if the content box is stretching; most of the time the images themselves don’t actually ‘stretch’. The drop shadow behind this content box uses this repeated image to “stretch” to the bottom of this content:

Often vertical stretch designs have a fixed width, like this content box has: the designer doesn’t care how tall the box is, but does care how wide it is.

While a similar horizontal stretch technique is used frequently to stretch elements to a full width of a page, such as the top blue bar of this page, a fixed vertical and variable width content box technique is rarely employed on the web, probably because it would be hard to read.

3D Effect 3D effects are anything that makes part or all of a design look ‘3D’, to stand out from the web’s mostly 2D content. 3D techniques can vary, from rendering complex scenes in a 3D modeler, to ‘faking’ 3D effects in photoshop with gradients, angles, and perspective. Technically a drop shadow is a 3D effect, but in our portfolio we only mention 3D effects if they are a major part of the design. We particularly like 3D items that rotate, because they look more striking and are harder to 'fake'.
Grid A grid design simply means that when the site was designed, a grid was used, and an attempt was made to keep that grid in place. Most sites have some degree of grid design, but certain techniques, such as square images and proportional cells with color backgrounds, make the grid stand out. Grids look especially good when content, colors or images line up to such a straight line that the lack of content almost makes a line itself. Generally the grid is implied by the content, and not actually shown.
Flash Flash is a media for vector-based animation and interactivity, owned by Macromedia Inc., and is widely prevalent on the web. At least 80%-90% of web viewers can view flash content, and it is even starting to appear on cell phones and other mobile web devices. A site can be designed completely in flash, or it can have flash elements that are contained in boxes, or even float transparently above the content on the screen. 

Flash is great for video, sound, and games. It’s, well, flashy, and can add appeal, fun, and ‘eye candy’ to your site. Poorly done though, flash sites can take forever to download, be hard to navigate, and otherwise be annoying. The animation on the home page of this site was done in flash.

Frosted Glass Frosted glass is a technique for making an element of a site look like it’s translucent and refracting the light of the background behind it. Frosted glass in architecture is used to diffuse light to create a contemporary look. In web design it can give a site a sophisticated and 3D look. 
Pixel art Pixel art is a web design style that peaked in the late nineties, that uses non-anti aliased lines and fonts to create a clean look. It was inspired by video games, especially early 'pixelly' ones and those that use an isometric 3D viewpoint. As sites began using smaller and smaller fonts, pixel fonts looked particularly clean and contemporary. While pixel art is a complex art form in and of itself, its glory as a web design trend has been fading as it’s been gradually replaced by the bigger, simpler design standards of web 2.0. 
Brushed Metal Brushed Metal in real life is a technique of brushing or scraping metal when it’s hot to give it a textured / grainy look. It was created by Apple as a design style in its design of OS X 10.2, and everyone’s been copying it ever since. Brushed Metal gives elements a 3D and industrial, sturdy look.

View our portfolio to see these design styles in action, and use our pricing form to get started and tell us what you have in mind!

Designtion
918 W. Winona #407
Chicago, IL 60640