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
Wireframes
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…
Color Scheme
HEX: #6af74f
CMYK: 52 / 0 / 100 / 0
RGB: 106 / 247 / 79
HEX: #2251f0
CMYK: 83 / 69 / 0 / 0
RGB: 34 / 81 / 240
HEX: #e52b50
CMYK: 4 / 96 / 62 / 0
RGB: 229 / 43 / 80
HEX: #ec4908
CMYK: 2 / 86 / 100 / 0
RGB: 236 / 73 / 8
HEX: #ffc5b1
CMYK: 0 / 27 / 25 / 0
RGB: 255 / 197 / 177
HEX: #656faa
CMYK: 68 / 58 / 7 / 0
RGB: 101 / 111 / 170
HEX: #18323e
CMYK: 89 / 68 / 54 / 52
RGB: 24 / 50 / 62
HEX: #1d143b
CMYK: 94 / 95 / 43 / 53
RGB: 29 / 20 / 59
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.
Design Influences
** 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.
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.
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…
