BeeMobile Process Book

BeeMobile.com

Ashley Readler | December 10, 2012

WEB 1 | ART 324Prof. Robbie Cobb

CREATIVE BRIEF

PROJECTSketching, researching, designing, and creating a website for the new “BeeMobile” application by Julibee Design Studio Inc. located in New York City.

OVERVIEWThere is no current website for Julibee’s new application. The owners of Julibee Inc. are looking for someone to create a playful and easy to use website for there customers. They also want there to be a bee theme to the site, as the application is called “BeeMobile”, a play on the last three letters of the companies name: JuliBEE. The application itself has the ability to store and sync files so they be accessible and used by any device in any format. OBJECTIVESMy objectives for creating this website are to first research existing websites for file storing and syncing websites. I will study these applications and their own websites and draw inspiration from them. Next, I will sketch several of my ideas until I am able to come up with a solution for the designing of BeeMobile.com. After I choose my solution I will create a site map and select three pages that I wish to design and begin the process of creating them in Photoshop. I will expand on my process by also selecting typefaces, and a color palette.

Once I have the basics down I will begin refining my designs for this website. I will fine tune my designs with the help of a grid system until I feel that the end product is suitable and communicates that BeeMobile is a playful and easy to use website.


AUDIENCEI have come to the conclusion that the users of this application are in their teens to late 20s, or from early highschool to early college and possibly beyond.

MESSAGEI wish to communicate that BeeMobile is an easy to use application while also being visual appealing and interesting for people that are viewing the website for the first time. I also want it to be welcoming and easy to read, understand, and navigate for new and old customers and users.

DISCOVERY

RESEARCHOn the next few pages are images of websites that I used for inspiration for my own website design.


nest.com | The nest application may not be an app. for storing and syncing files, but the website is very well done - colorful without being tacky, and fun to look at.

icloud.com or apple.com | Apple’s site is not exactly what i’m looking for in a website, but it was a good source of inspiration for keeping things simple, but still explaining the product to the customer.


symbaloo.com | symbaloo.com was more what I was looking for in terms of playfulness. I looked to this site repeatedly for inspiration.

sugarsync.com | sugarsync.com was exactly what I was looking for in terms of playfulness. Like symbaloo.com, I looked to this site repeatedly for inspiration.


syncplicity.com | Like apple.com, syncplicity.com wasn’t exactly what I was looking for. This site was too business orientation for my concept, but I took screen shots in case I needed it for future references.

DISCOVERY

BRAINSTORMINGHere are some preliminary sketches of my ideas for my site map and my website. These are the very basic sketches that helped me work through bad ideas.


DISCOVERY

SOLUTIONHere are the final sketches I decided to work with for this project. I didn’t originally have a concept behind this site and wanted to go with the name “In Sync”, however I spent several hours brainstorming and came up with several new concepts and company names: “Virtuoso”, “Julibee”, “Evolve”, and “Parasol”. In the end, I decided to use my concept surrounding the made up company “Julibee”.


PROCESS

SITE MAPSymbaloo.com and sugarsync.com were the websites that most influenced me when I decided on my site map. I decided that creating a page dedicated to downloading and buying the application, a page dedicated to how the application works, a features pages that shows how special the application is, a support page in case customers run into problems with the application or have questions, and a login page.


Homepage

Features

Download (Beta)

Tour

Login

Support

Privacy Policy

Terms of Use

Credits

Julibee Inc.

Website Icons Facebook, Twitter, Youtube

FAQ

PROCESS

WIREFRAME

Download (Beta) Tour Features Support LoginBeeMobile

Think Outside of the Hive

Tour

How-to

Support

File

PhoneLaptop

iPod


Privacy Policy Terms of Use Credits

How do you use this app?

Download

Download

Bee

Bee

Tour

How-to

Support

Tour

How-to

Support

PROCESS

TYPE SAMPLES


Deciding which typeface to use was the hardest part for me. I wanted a typeface or a type combination that was playful, and had personality, but still wanted it to be legible and not look ridiculous.

I was at a lose for which typeface or typefaces to use. I knew I wanted to use a san serif type that wasn’t helvetica, but beyond that I was lost. I decided to go to identifont.com to help jog my brain of san-serif typefaces. that I could possibly try to use. After doing some research, checking which typefaces I had, I was left to decide between Futura, Frutiger, Gotham, and Gill sans. I tested each of these faces on the logo and decided to use Gill sans. Gill sans has personality without being overbearing.

Think Outside the Hive

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lectus lorem, iaculis in lacinia consequat, luctus quis arcu. Proin vestibulum diam at velit facilisis et blandit erat pretium. Phasellus sed elementum magna. Nam sodales blandit ante, ut porta erat cursus in. Suspendisse porttitor diam quis ipsum porta et tristique quam viverra

GIll Sans

Gill Sans

SELECTION

SIZING Think Outside the Hive


12 point8 point



12 point

10 point



14 point10 point

PROCESS

COLOR SELECTION


For my color palette I decided to stay away from the color blue because blue is the color used most often on the internet. I also decided that I wanted to use colors that people usually associated with bees: yellow, gold, black, and white - along with the color grey and maybe green.

REFINEMENT

LOGO First I did sketches in my moleskin of the bumblebee logo I wanted. Then, while I was on the internet, I happened to find a free vector pack of bees on the internet, one very similar to the bee I was aiming for. I also experimented with different weights of GIll sans to make it look as if the word “BeeMobile” was in motion.


REFINEMENT

WEBSITE


Download (Beta) Tour Features Support LoginBeeMobile

Think Outside of the Hive

Tour

How-to

Support

File

PhoneLaptop

iPod

REFINEMENT

GRID


http://www.beemobile.com/



BeeMobile

Take a Tour of BeeMobile

Julibee Inc. Privacy PolicyTerms of UseCredits enter email for BeeMobile news

Login




BeeMobile

Take a Tour of BeeMobile


Login



BeeMobile

Learn about BeeMobile in 2 minutes:

What is BeeMobile?

This is BeeMobile

from Team Julibee

BeeMobile vs. Dropbox

from Team Julibee

File Sharing

from Team Julibee

Watch our other videos:

TourFeaturesSupportDownload Login





BeeMobile

Learn how to share files in 1 minutes:

How do I share files using BeeMobile?

File Sharing

from Team Julibee

BeeMobile vs. Dropbox

from Team Julibee

This is BeeMobile

from Team Julibee

Watch our other videos:

TourFeaturesSupportDownload Login





BeeMobile


Download BeeMobile2.0 available on these sites:

TourFeaturesSupportDownload

Available for new and existing users. Have a question? Check our FAQ

Login

Julibee Inc. Privacy Policy

Try BeeMobile Beta for free

Terms of UseCredits enter email for BeeMobile news

BeeMobile

Content

Photos

Shortcuts

Sync

SHARING


Documents

BeeMobile Process Book