Ashley Readler | December 10, 2012
BeeMobile.com WEB 1 | ART 324 Prof. Robbie Cobb
Ashley Readler | December 10, 2012
CREATIVE BRIEF
PROJECT Sketching, researching, designing, and creating a website for the new “BeeMobile” application by Julibee Design Studio Inc. located in New York City. OVERVIEW There 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. OBJECTIVES My 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.
AUDIENCE I 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. MESSAGE I 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.
Ashley Readler | December 10, 2012
DISCOVERY
RESEARCH On 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.
Ashley Readler | December 10, 2012
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.
Ashley Readler | December 10, 2012
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.
Ashley Readler | December 10, 2012
DISCOVERY
BRAINSTORMING Here 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.
Ashley Readler | December 10, 2012
DISCOVERY
SOLUTION Here 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”.
Ashley Readler | December 10, 2012
PROCESS
SITE MAP Symbaloo.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
Download (Beta)
FAQ
Tour
Features
Support
Login
Privacy Policy
Terms of Use
Credits
Julibee Inc.
Website Icons
Facebook, Twitter, Youtube
Ashley Readler | December 10, 2012
PROCESS
WIREFRAME
BeeMobile
Download (Beta) Tour Features Support
Think Outside of the Hive File
Tour How-to Support
Phone
Laptop
iPod
Login
Bee How do you use this app?
Tour How-to
Download
Support
Bee
Tour How-to
Download
Privacy Policy
Terms of Use
Support
Credits
Ashley Readler | December 10, 2012
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.
SELECTION
SIZING
GIll Sans
Think Outside the Hive
Gill Sans
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
12 point
Think Outside the Hive
8 point
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
12 point
Think Outside the Hive
10 point
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
14 point
Think Outside the Hive
10 point
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
Ashley Readler | December 10, 2012
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.
Ashley Readler | December 10, 2012
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.
Ashley Readler | December 10, 2012
REFINEMENT
WEBSITE
BeeMobile
Download (Beta) Tour Features Support
Think Outside of the Hive File
Tour How-to Support
Phone
Laptop
iPod
Login
Ashley Readler | December 10, 2012
REFINEMENT
GRID
Thi nkOut si det heHi ve ht t p: //www. beemobi l e. com/
L og i n
BeeMob i l e
T a k eaT ourofBeeMobi l e
J u l i b e eI n c .
Pr i v a c yP ol i c yT e r msofUs e Cr e di t s
e n t e re ma i l f orBe e Mob i l en e ws
Thi nkOut si det heHi ve ht t p: //www. beemobi l e. com/
L og i n
BeeMob i l e
T a k eaT ourofBeeMobi l e
J u l i b e eI n c .
Pr i v a c yP ol i c yT e r msofUs e Cr e di t s
e n t e re ma i l f orBe e Mob i l en e ws
Thi nkOut si det heHi ve ht t p: //www. beemobi l e. com/
BeeMob i l e
Tour F e a t ur e sS uppor t Downl oa dL og i n
Wh a ti sBeeMob i l e ? L e a r na boutBe e Mobi l ei n2mi n ut e s :
Wa t c hourot he rv i de os : BeeMobi l evs .Dr opbox
Thi si sBeeMobi l e
f r om Te a mJ u l i b e e
f r om Te a mJ ul i be e
Fi l eShar i ng f r om Te a mJ u l i b e e
J u l i b e eI n c .
Pr i v a c yP ol i c yT e r msofUs e Cr e di t s
e n t e re ma i l f orBe e Mob i l en e ws
Thi nkOut si det heHi ve ht t p: //www. beemobi l e. com/
BeeMob i l e
Tour F e a t ur e sS uppor t Downl oa dL og i n
HowdoIs h a r ef i l e su s i n gBeeMob i l e ? L e a r nhowt os ha r ef i l e si n1mi n ut e s :
Wa t c hourot he rv i de os : BeeMobi l evs .Dr opbox
Fi l eShar i ng
f r om Te a mJ u l i b e e
f r om Te a mJ ul i be e
Thi si sBeeMobi l e f r om Te a mJ u l i b e e
J u l i b e eI n c .
Pr i v a c yP ol i c yT e r msofUs e Cr e di t s
e n t e re ma i l f orBe e Mob i l en e ws
Thi nkOut si det heHi ve ht t p: //www. beemobi l e. com/
BeeMob i l e
T our F e a t ur e sS uppor t Downl oad L og i n
Down l oa dBeeMob i l e Thi nkOut s i det heHi v e
2. 0a v a i l a bl eont he s es i t e s :
BeeMobi l e Cont e nt Phot os S hor t c ut s S y nc S HARI NG
T r yBeeMobi l eBe t af orf r e e Av a i l a b l ef orn e wa n de x i s t i n gu s e r s . Ha v eaq u e s t i on ?Ch e c kou rF AQ
J u l i b e eI n c .
Pr i v a c yP ol i c yT e r msofUs e Cr e di t s
e n t e re ma i l f orBe e Mob i l en e ws