Roundabout Vision Board

 

visionboard-logo

 

Click Here To View The Finished Website

Welcome to the Roundabout Project Board… The goal for this project board is to communicate the creative and technical solution that will be provided to bring the business and online brand of Roundabout.com to life. Included below in this project board is our full proposed design and technical solution that we believe will best reach all of our creative, marketing and business goals for this website.

Design Questionnaire: Premium Interactive Design Questionnaire

Theme

Based on the answers that came out of our design questionnaire meeting we set a goal for this website design to illicit a response of, “This website (err go this company) is fucking awesome!” From our list of adjectives we came up with this phrase best captures the young, hip, modern and enjoyable vibe that this website design needs to embody. Our second priority once I have the website user’s attention, is to promote that Roundabout represents precision, dedication, knowledge in their field, inspiration, confidence and a company that takes pride in having a hand crafted-custom made approach to their work.

Since the 5th Element was chosen as one of our design inspirations, we let the inspiration from that movie influence many of our creative decisions. One of the conclusions I came to after watching the 5th Element several times was that the precision in the way the movie was crafted is what allowed them to pull off such an ambitious, outrageous and bazaar esthetic. If it weren’t for the intelligence and precision the movie was made with we would not have been able to take it seriously as a work of art. So doing our best to capture a sense of organized, intelligent and inspired chaos we began making a very bold and risk taking design that walks the razor’s edge between hip and professional. The result is a retro/modern and bold yet confident website design.

Website Design Inspiration Adjectives…

Hip

Retro

Fucking Awesome

Precision

Accurately the first time

Inspires Confidence

Dedicated

Knowledgable

Take ownership (Pride of ownership)

Young

Modern

Enjoyable

Trustworthy

Handcrafted, Custom Made

Website Flow Chart

ra_flowchartNew

Wireframes

wires_01
wires_02
wires_03

Font Family & Color Scheme

Starting from the Roundabout logo we set out to capture the design adjectives above with font choices and a color scheme that would be modern and contemporary, yet also allude to a retro vibe. To do this I paired the font from the the logo, “Myriad Pro Bold Condensed” with it’s widely believed compliment font, “CASLON.” This allowed us to capture a retro/modern feeling in my page design making my design difficult to place in time and keeping the design unpredictable. We chose “Montserrat” for the H2 and body copy font as it is a modern web friendly Google font from the Myriad font family and will read well in a browser as well as a mobile/phone device…

SG-90 Style Guide Creator

Color Scheme

Lime Green

HEX: #6af74f

CMYK: 52 / 0 / 100 / 0

RGB: 106 / 247 / 79

True Blue

HEX: #2251f0

CMYK: 83 / 69 / 0 / 0

RGB: 34 / 81 / 240

Amaranth (Rose-Red)

HEX: #e52b50

CMYK: 4 / 96 / 62 / 0

RGB: 229 / 43 / 80

Coquelicot (Poppy)

HEX: #ec4908

CMYK: 2 / 86 / 100 / 0

RGB: 236 / 73 / 8

Lite Peach

HEX: #ffc5b1

CMYK: 0 / 27 / 25 / 0

RGB: 255 / 197 / 177

Blue/Lavender

HEX: #656faa

CMYK: 68 / 58 / 7 / 0

RGB: 101 / 111 / 170

Anthrocite

HEX: #18323e

CMYK: 89 / 68 / 54 / 52

RGB: 24 / 50 / 62

Royal Blue

HEX: #1d143b

CMYK: 94 / 95 / 43 / 53

RGB: 29 / 20 / 59

Jet Black

HEX: #000000

CMYK: 50 / 50 / 50 / 100

RGB: 0 / 0 / 0

Fonts


For the Roundabout logo Myriad Pro Condensed was used. To pair fonts with the logo font for both the page titles, the sub-headings and the body font we selected two fonts. The first one is Caslon which we used for all of the H1 page titles. And the second font is Montserrat which is a Google font that is based on the Myriad font family.

sg_Fonts

Design Influences

SG-90 Style Guide Creator
SG-90 Style Guide Creator
SG-90 Style Guide Creator
SG-90 Style Guide Creator

** The color scheme we designed started with the Roundabout logo “Teal” color and inspiration from both the colors in the movie, The 5th Element as well as some of the bright colors that are now being used in other modern tech and fashion branding (See examples in “Influences” above)….

Proposed “Badge Design”

In our process of trying to capture a hand-crafted, hip and modern vibe we took inspiration from the “Fhloston Paradise” logo from the 5th Element and illustrated very retro/modern original “Badge Designs” to represent each of the four major sections of the website as well as creating an entire badge library, one to represent each of the services that Roundabout offers. What you will notice is that we have made a purposeful departure from the way that icons and colors have been used together in company branding of the past. The badges designs we are introducing below are not insisting on one uniform way of integrating color. This suggests a random and chaotic energy in the way we have designed the Roundabout badges. The end result is a cool ordered chaos; unpredictable, hip and modern.

visionboard-phloston-logo visionboard-badge-design

Home Page Design

For the home page design of Roundabout we propose a simple, uncluttered, straight forward and minimal solution that will put an emphasis on the one course of action we want the user to take. In this solution we propose using a dark background video from the machine room where we will introduce slight movement around the periphery of the page design, while the bright colored icons occupy the center of the page and invite the user into the site.

ra_comp-homepgNewest

Section Page Design

For the main section page design we have prepared two variations on the page layout. The first one on the left introduces design elements that are inspired by the time marker used in move making and caution tape with a chrome treatment. As well, this first comp features a three column approach to laying out the 13 Services. The second layout to the right removes the diagonal white shapes and puts more of an emphasis on the colorful background image. Too this design features a four column design for the 13 services that will be presented on this page…

ra_comp-OurServices11-25

ra_comp-subsectionAbout

ra_comp-subpgBio

ra_comp-subsectionOurTeam

ra_comp-subsectionTour

ra_comp-subpgAudio

ra_comp-subpgCC

ra_comp-subsectionContact