Mobile Web Design & HTML
This responsive, mobile landing page was designed and developed for a special holiday discount on Webroot Mobile Security for Android mobile & tablet devices. The goal of this mobile web design project was to design and develop a responsive mobile landing page for visitors interested in this special offer.
Traffic would primarily reach the page via a link in an email newsletter sent out by the company, and although many visitors would be checking their email on desktop or laptop computers, more and more users have their email delivered to mobile devices like Android and iPhone, so having a responsive mobile landing page for this offer was critical for the mobile user experience. Additionally, this was specifically an offer for Android Mobile Security, and it was important that Android mobile & tablet users could view this responsive mobile landing page without having to zoom in on their device, and also have direct access to the Android Market to purchase and install the product immediately if they wanted to.
Mobile Web Design Details
Since the intended audience of this responsive mobile web design project was mobile browsers and tablets, a clean and lightweight design was used to elegantly highlight the product in use on Android phones & tablets as shown in the product image, as well as the simple messaging on the page title for the special offer. Immediately following the title, the pricing area and primary “Buy Now” call to action button on the mobile web page is featured with the full price crossed out, and the special price in a large and high contrast font. This pricing presentation and “Buy Now” functionality is also included at the bottom on the page for mobile devices so that users are able to take action after scrolling through the product features and highlights. For desktop and laptop computer browsers, the responsive mobile web page design shows the product photo large and to the right of the main column, but as the browser is re-sized, the web page layout becomes completely responsive and flexible so that the content in always visible. For mobile browsers, the web design & layout load in that responsive state, with the product photo reduced in size, and moved below the pricing, call to action, and main column product features and information. This allows the most relevant content and the primary call to action on the page to appear as close to the top as possible for mobile users on Android and iPhone devices, as well as tablets.
Technical Implementation
This responsive mobile web design layout was designed and coded around a standard 960px grid framework, and uses javascript for mobile device detection and responsive page layout adjustments on mobile and tablet devices. For screen resolutions over 960px, the full layout of the page is displayed, and for standard screen and mobile resolutions below that, the javascript mobile detection triggers changes to the CSS classes and HTML document structure to reformat the web page incrementally for the most common mobile screen resolutions.
Boulder Brochure Design
Boulder’s Gorilla Logic engaged Cloudburst to update their sales and marketing brochure designs and print materials for several of their software products, as well as corporate marketing materials and other brand collateral like business cards, T-Shirt, and water bottle designs. The primary goal for this project was to create a unified, branded, and contemporary look for the brochure designs, business cards, and other print materials for use at trade shows, conventions, and online marketing as well for this Boulder company.
The existing company logo design was the primary inspiration for the brochure design and print materials, along with a thorough analysis of the Boulder company’s existing marketing materials and brochure designs. Incorporating the existing brand colors and fun marketing message, we explored brochure design ideas that featured the unique product logos, and large primary graphic images to show the software product and “gorilla” company theme off in a unique and compelling way.
Brochure Design Elements & Details
The front of the product brochure designs have limited, and concise product messaging with clear iconography for various operating systems that use the product, as well as the company logo and clear web contact info. The large background was chosen to exactly match the background of the Boulder company’s website design to create a consistent, compelling, and rich visual user experience. The rear side of the brochure designs have more detailed product features and functionality that highlight the benefits of each product, and improvements over previous product versions.
Brochure Design Production / Printing
After the design concepts and brochure designs were finalized with this Boulder company, physical design proofs were ordered to have the final print documents approved. A heavy-weight, slightly glossy paper was chosen, and the documents were printed in full CMYK color, with full bleeds so the color reaches the full edge of all pages. A local Boulder county printing company was used for the final Brochure print production, and several runs of these designs were ordered and delivered on short notice and with great success and product quality. The end result was a stunning set of brochure designs and marketing materials that create an incredibly professional image for the Boulder software business, and a consistent brand identity for their product lines.
Boulder Uvize Logo Design
The Uvize logo design was created over the summer of 2011, and incorporates an open book & pages in brilliant blue color tones to symbolize the goal of this Boulder Educational company: to prepare high school students for their journey into college and future educational experiences. We initially began working with Uvize on the Boulder logo design as part of a greater project that first included the logo design portion of the project, followed by another project phase that included customizing a WordPress installation and theme based on the creative logo design to reach out to their targeted demographic of both students and their parents.
We were challenged on this Boulder Logo Design project to create a simple, iconic, and memorable graphic logo design that conveyed all the concepts of “Academic”, “Youth” and “Modern” for students as well as their parents. Blue was the client’s choice, but we worked closely with the client to dial that color choice in to something bold, bright, and easily readable on both light and dark background colors through many creative rounds & revisions. Other elements within the logo design, like the open book graphic, by itself does not read as a specific letter, but within the logo design, this iconic book & pages graphic takes on new meaning, and clearly communicates as the letter “V” within the logo design.
In the large image of the logo design above, you will see the logo sitting in the newly customized website template, including customized background, graphic elements and layout. The logo design files files were delivered to the client in a variety of vector and raster formats for maximum flexibility and use, including transparent .gif, .png, and .eps vector formats so that the client can use in other formats, and re-size the image without any loss in quality. This is especially helpful in fulfilling other brand materials like business cards, letterhead, t-shirts, notebooks, and other printed materials.
iPhone/Android Yoga App
The Little Yoga Studio iPhone & Android Mobile App was created for this Boulder Colorado Yoga Studio, and serves as an easy way for their Boulder-based students to quickly access the most up-to-date class schedules, instructors, and yoga studio contact info. This iPhone & Android Mobile App Development project was tightly integrated with MindBodyOnline’s class schedule API, along side the Boulder Yoga Studio’s WordPress website, to dynamically deliver the most current, real-time yoga class information to the mobile app.
The Little Yoga Studio offers low-cost & convenient $10 drop-in yoga classes in Boulder anytime of day. Offering their clients a simple, easy-to-use, Mobile App for iPhone & Android devices allows students to stay current with class schedules, cancellations, and instructor substitutions throughout the day in real-time. The Mobile App also features Google Maps location information for the Boulder Studio, as well as iPhone & Android integrated Mobile App calling features to make contacting the Boulder studio as easy as a single touch inside the Mobile App.
Mobile App Development for iPhone & Android
The iPhone & Android mobile app development process stemmed heavily from the Little Yoga Studio website design and existing branding & marketing materials, and it was a requirement that the mobile app have a consistent user experience with the website, and physical yoga studio location in Boulder, Co. After initial wire framing & interface design creative was approved by the Boulder client, the mobile App was rapidly developed and deployed for testing onto several different physical devices including iPhone, iPod Touch, iPad, and HTC Thunderbolt. The functionality behind mobile app user interface leverages jQuery mobile library for iPhone/iPad/Android touch functionality, as well as custom graphic elements, icons, textures, and other interface elements. During early stages of the project, the Mobile App was reviewed by this Boulder client, and feedback was incorporated into the final mobile app that is now available in both the iTunes App Store, as well as the Android Marketplace.
Rapid iPhone & Android App Deployment
For this Boulder client, an important factor was that the mobile app be developed & deployed simultaneously to the iTunes App Store as well as the Android market. Boulder, Co, is a very tech-savy demographic, so having a mobile app for the Little Yoga Studio adds significant value for both yoga students in and around Boulder, as well as for the business itself by aiding the marketing & promotional efforts during the critical early stages of this new business. Mobile App updates are also enabled so that additional features and fixes can be offered automatically to all that install the app on either iPhones or Android devices.
Leglube Ecommerce Website
The LegLube Ecommerce website was designed & developed for this Boulder, Colorado, company as a fully customized WordPress installation and Ecommerce shopping cart solution with full Paypal gateway integration as well as custom account creation for retailers to be able to purchase wholesale products for placement in the stores in Boulder and around the country.
Web Design Process
This project began with a thorough web design review process to identify the look & feel that the client wanted for the LegLube Ecommerce website, which ultimately was a clean, open layout with subtle shades of grey throughout the design and easy navigation to product and cart pages. This created a great visual contrast with the physical product design and product photos on the site, which feature bright, vibrant use of color and brand consistency with the LegLube logo design. We worked very closely with the client during the design phase of the project to achieve exactly the experience that they wanted for their site visitors.
Web Development Process
The approved creative web site design was then implemented as a fully custom WordPress theme and shopping cart solution that allows both typical consumer purchases, as well as wholesale purchases by retail customers that have created a LegLube “Retailer Account”. The cart experience is identical for both types of customers, the only difference being that a different set of products are available for verified, logged-in retail customers, and taxes are dynamically applied different to both customers as well.
A custom registration form and process was created to allow wholesale/retail customers to quickly create a new wholesale account, verify their email address, and then get right to making wholesale/bulk purchases through this Ecommerce web store. In addition to typical account info, LegLube verifies all new retail accounts through a custom built WordPress Admin tool interface that lists all new accounts that are pending approval with contact and business information.
As a way for Leglube retailers to get the added benefit of listing their physical location to site visitors that are interested in knowing where they can find LegLube products in stores, we integrated Google Maps Store Location fuctionality with search and embedded map functionality into the Location page on the LegLube website. This map interface allows customers in Boulder, and around the country, to search and find stores near them that carry LegLube products. This creates an added benefit to both retail and regular site visitors to see the product reach on this interactive map interface.
Shift Giving Website Design
The Shift Giving To Nature Website Design project was a fun and creative project with an incredible message & overall goal of helping site visitors connect with charities that raise money to protect endangered species. After an initial consultation with the client, it was clear that this Boulder web design project would need to center around a primary video that the client created, and strongly evoke a connection to nature and the natural world while maintaining a clean and elegant look and feel on the site.
To accomplish these overall design goals within the actual website design, we started with a vibrant sky blue gradient, and then added cloud elements and rays of the sun coming from just beyond the top of the display screen. We then added flourishes of organic elements, leaves, plants, and grasses to naturally frame the video window and create a rich, vibrant setting for the final video piece. Other elements within this website design creative include a prominent text logo and tag line featuring subtle gradients, as well areas for site visitors to sign a commitment pledge, and sign-up for email newsletter reminders. Several Non-Govermental Organizations (NGO’s) are also featured in the lower portion of the design to encourage and facilitate site visitors to start making donations to these organizations as easily and quickly as possible. Social media components for Facebook and Twitter are located beneath the video, and allow visitors to “Like” the site and also to “tweet” the Shift Giving To Nature page directly to their twitter feed. These social components allow for faster and viral sharing of the www.shiftgivingtonature.org URL, and helps their compelling message to as wide an audience as possible.
After several round of website design revisions with the client, the final site design was reached, and coding and development began. WordPress was requested by the client as the preferred platform for the final website, so we developed the original creative design into a custom WordPress Theme, and fully customized the admin interface so the client can easily and quickly make updates to the site. Full control over the video code, site analytics, pledge statistics, and Aweber email list integration and newsletters, as well as the NGO’s listed on the site are fully maintained and populated by the client.
Denver Energy Logo Design
The Home Energy Saving Solutions logo design was created in early 2011, and incorporates a rich & vibrant green, as well as an energy efficient bulb as a substitution for the letter “E” of “energy” in the company name. We initially began working with Home Energy Saving Solutions on the logo design as part of a greater project that included the logo, and then designing and developing a website based on that logo design to inform customers about their services, home energy efficiency improvements, home energy audits for customers in the Austin, Texas, area.
We were challenged on this project to create a simple, icon, and memorable logo that conveyed the concepts of “Home”, “Energy”, “Efficiency”, and “Environmental Improvements” for homeowners as well as green energy solutions. Green became the obvious color choice, but we worked closely with the client to dial that color choice in to something bold, bright, and easily readable on both light and dark background colors. Other elements within the logo, like the CFL bulb, by itself does not read as a specific letter, but within the logo design, this energy efficient iconic graphic takes on new meaning, and clearly conveys the energy message that is core to this companies values and services. Additionally, a roofline graphic element was extended from the top of the first letter of the company name, and extends across the entire logo to create the effect of a home building protecting interior elements, like the energy efficient bulb. The termination of that roofline is pointed, and gives the logo design a modern and edgy look that the client was also looking for.
In the main image of the logo design above, you will see various examples of the logo deliverables, including full color, single color, and inverted options for use on darker background, also shown in full color and single color options. These files were delivered to the client in a variety of formats for maximum flexibility and use, including transparent .gif, .png, and .eps vector formats so that the client can use in other formats, and re-size the image without any loss in quality.
QR Code Viral Music T-Shirt
This QR Code design project was an extension of an earlier QR Code Campaign in Boulder, Co, for the band SoundRabbit, that may actually be the first-ever viral QR code t-shirt designed specifically for free music downloads! QR Codes are just like bar codes, except that they can be “read” by free QR reader Apps on iPhones, Androids, and Blackberry Devices, by taking and scanning a photograph with the mobile device. In this case, the QR codes in each design are for a single song, and that song is downloaded directly to the iPhone or mobile device where the user can either save the music, or start listening to their new (and free) music immediately! The overall concept behind these “viral” QR code shirts, is that fans of SoundRabbit can literally “wear” their favorite music or songs by the band, and immediately share it easily with their friends and anyone else they happen meet along the way.
QR Code Design Process
In collaboration with members of the Boulder, Colorado band, SoundRabbit, these QR Code design concepts were explored and then created each with a unique design and implementation. For the “Don” QR code free music download viral t-shirt design, we incorporated a custom stylized windmill vector graphic to tie into the song topic, which is about the story of Don Quixote, and along side we incorporated the song title and SoundRabbit band name in a whimsical font treatment. The QR code itself is designed into the base of the windmill graphic, and rotated 45 degrees from the usual QR code display to follow the lines & angles created by the windmill blades.
The “Hazel” QR code free music download viral t-shirt design uses a much more straightforward & slightly larger QR code presentation, as well as the song title (above) and band name (beneath). These womens QR code t-shirts currently come in pink only, but further merchandise runs may include more color options for SoundRabbit fans.
The third viral QR code free music download t-shirt revisits the “You Are Not A Pirate” campaign we previously created for SoundRabbit, with additional song options and a larger quantity of physical shirts. This QR code t-shirt is unique because 4 different & full length songs are available for free download on this single piece of clothing! The graphic design style for this viral QR code music download shirt design uses clean, bold fonts and tight line height for the primary messaging, allowing for interesting use of the negative space between the text lines to invert the text and background colors.
These shirts were printed by Advantage Design in Lafayette, Colorado.
Need Help on a QR Code Design?
We LOVE working on QR Code design projects, and would love to talk with you if you have a QR Code project in mind that you need help with. We approach every QR Code Design project with fresh eyes, and will develop a completely unique QR Code design and application for your marketing project – just get in touch with us to get started! Contact us now…
Additional QR Code Shirt Photos:
Best Buy Landing Page
This landing page design was created to allow Best Buy Reward Zone customers the opportunity to download and install a free version of Webroot Internet Security Essentials and Webroot AntiVirus as part of a one-time, special offer. The design of this page is clean and modern, with an emphasis on the physical product, and primary call to action button on the page to download the software.
After product messaging and content were completed, we implemented the various design elements, company logos, and other page content into this web page design, and launched the pages for public use. This landing page design features subtle grey-to-white gradients and textures, horizontal line details to separate content, and a simple color scheme (following brand guidelines) to really bring focus to the product messaging as well as the boxed product itself, and give page visitors a simple pathway to download the product they came here for. Ease of use for this page was the primary goal of this design, as well as letting Best Buy customers know they came to the right place to redeem their customer rewards.
We completed and coded two similar landing page designs/layouts for both the Internet Security Essentials product, as well as their Antivirus product, with slightly different messages and the appropriate product shots and related product awards for each page. Webroot headquarters are located in Broomfield, Colorado, and this projected was completed for Webroot’s online marketing team in a collaborative design effort with many rounds of revisions and creative designs. Cloudburst Design Studio is based in Lafayette, Co, and serves clients local to the Colorado Front Range, as well as across the United Sates.
Monarch Logo & Web Design
This logo & web design project for Monarch Communications, in Louisville, Colorado, was completed on an accelerated timeline beginning with logo design creative, and finishing with a fully customized WordPress installation, theme, admin panel, and banner graphics on the site. The client was interested in a clean and contemporary look for their logo, with an equally clean web design layout to draw attention to the primary service of the company, which is case studies and building customer reference programs.
The client had their primary colors, Blue and Green, picked out in advance, and several rounds of creative were explored during the logo design process to reach the final logo design. A san-serif font treatment was used in this butterfly logo design, with subtle gradients and light effects to create the finalized look. We prepared horizontal and vertical “stacked” variations on this logo, and delivered these to the client in .eps vector formats for printing on business cards and brochures, as well as .jpg raster graphics for use on Facebook, Linked In, and Twitter accounts.
For the Web Design portion of this project, we began by setting up hosting, email accounts, and custom WordPress installation, and then began developing the theme for this project as well as custom banner graphics and other web design elements. Custom WordPress admin interface controls were created to allow Monarch Communications to easily add portfolio items and other content into their site in the future, and four banner graphics were added to the site homepage. In addition, this website was submitted to all major search engines, all pages were coded and implemented to maximize SEO benefit, and Monarch Communications has detailed web analytical tools to measure and assess their site visitors and overall site impact on the web.
This logo design project and website was fully completed and launched in less than 2 weeks time from start to finish, which is a highly accelerated schedule for a project of this scope.
