Parallax One Page Layouts

WebTrafficSchool.com is a single product mini site which offers online traffic school to people who need to dismiss their traffic citations in a hurry. A parallax layout would be the most sufficient way for visitors to quickly browse through the information and purchase the course that will help them resolve their driving violation. The page should be responsive and stands out from from competitors. Messaging must include a sense of urgency to encourage the audience to take action.

Version 1: “This happens to everyone”

This theme shows a distressed driver being pulled over. Her anxious expression relates a familiar story that happens to everyone. The flashing police lights in the background add a sense of urgency. The main colors used in this layout are #004987(gray), #f59527(yellow), and #929497(blue) which are inspired by concrete roads with yellow markings. Intuitively, the yellow is great for emphasizing text without looking too alarming. The blue call-to-action buttons make the layout appear more official and demonstrates trust. The rounded corner of the buttons add a touch of friendliness to encourage users to click. The font, Futura LT Heavy makes the messaging look serious and professional.

Desktop Layouts:

Tablet Layouts:

 

Mobile Layouts:

Version 2: Traffic Imageries

The second theme is a safer approach which shows imageries of traffic. Simple foreground graphics with a full width image backgrounds keep the site from looking too plain. This layout has a lighter color palette to convey neutrality. Using Futura Lt Medium adds a more business casual vibe. A thinner font styling, Futura Lt is applied to all call-to-action buttons. Some have price call-outs in #bb133e (deep red), to emphasize the affordability of the courses.

Desktop Layouts:

Tablet Layouts:

Mobile Layouts: