Web Design Example: 3D Rendering

Introduction

This page includes horizontal and vertical screen shots from a 3D rendering Web page Web design.

The 3D rendering Web design home page begins with a large, polished, three dimensional background image. Users immediately see the quality of this company's artwork.

3D realism usually incorporates low saturated colors. The main page's 3D image features an interior with relatively low saturation, lots of air space and gleaming wood floors.

Below the 3D background, thumbnail image links gradually expand in response to mouse hover and mobile device tap events.

Navigation Bars

Each page includes an upper and lower navigation bar with links to the most important content plus a Contact button. The upper navigation bar displays with translucent blue. Viewers can see the 3D rendering through the upper navigation bar. The lower navigation bar, or footer, matches the translucent blue with a similar solid color.

The horizontal home page orientation demonstrates the translucent top navigation bar. You can see part of the background image through the navigation bar.

Thumbnail Images

The side by side screen shot demonstrates expanding thumbnails images. The left side displays the middle thumbnail image before viewers hover or tap the image. The right side, of the screen shot, displays the middle thumbnail image enlarged in response to hover or tap events.

The thumbnail graphics apply CSS3 animation to gradually increase in size. It takes 0.7 seconds for an image to expand.