Dreamography by Monique Ramos

Share your dreams with the world.

Contents Our Mission

Logos

Type & Color

Website

Dreamography App

Print Ads

Web Banners

Ambient Building Projections

Social Media

Our Mission From the start, our goal has been to connect Nytol and healthy sleeping to a wide audience beyond the typical sleep-aid consumer. So we decided to build a worldwide community for people to view and share the most exciting part of a good nightâ&#x20AC;&#x2122;s sleep: their dreams. With this in mind, we created Dreamography, a robust mobile and web application that enables users to submit the details about their dreams and explore what the world is dreaming. Dreamographyâ&#x20AC;&#x2122;s design stems from the surreal aspects of dreaming. We utilized dreamlike photography throughout the app, website, advertising, etc. To create a visual contrast, we elected to use clean and modern typography. The combination of these elements ultimately creates a surreal, but polished experience for the user.

Logo Our logo needed to capture the functionality of the app, as well as the Dreamography brand. We also wanted our logo to be able to work as an app icon as well, so it had to be recognizable at small sizes. The main elements of its design are the D shape for Dreamography, colorful overlapping circles that represent photo filters, and a crescent shape to bring in our nighttime theme.

C: 91 M: 51 Y: 47 L: 23

R: 18 G: 91 B: 104

C: 28 M: 0 Y: 33 L: 0

R: 185 G: 222 B:186

C: 10 M: 9 Y: 15 L: 0

Avenir abcdefghijklmnopqrstuvxyz ABCDEFGHIJKLMNOPQRSTUVXYZ

Neutra Text abcdefghijklmnopqrstuvxyz ABCDEFGHIJKLMNOPQRSTUVXYZ

R: 227 G: 223 B: 111

C: 13 M: 22 Y: 100 L: 0

R: 227 G: 190 B: 35

C: 71 M: 65 Y: 64 L: 68

R: 40 G: 40 B: 40

Standards For the colors, we found inspiration in theories developed relating to good sleeping habits. So we chose a more calming palette with cooler and muted colors. We added the mustard yellow for contrast. Our typography needed to be clean and simple so we landed on two sans-serifs: Neutra and Avenir. WIth Neutra, it has character perfect for telling personal dreams throughout while Avenir reads well for any smaller copy.

Website The website is mainly an exploratory tool, allowing users the ability to find entries, photos and videos based on the dreamsâ&#x20AC;&#x2122; content. People can read about specific dreams, comment and discuss their experiences, or browse media using our gallery page. The site functions as a social network for dreamers, building off the content of the mobile app.

LANDING PAGES The landing page consists of an interactive slideshow menu, allowing users to quickly sign up, sign in, and find their pages.

EXPLORE Users can utilize the explore page to browse top trending dreams, keywords, and other filtered content.

GALLERY The gallery page displays Dreamographyâ&#x20AC;&#x2122;s media, including photos, videos and cinemagraphs. Users can also select a dream by clicking on one of the sqauares, which brings up an overlay with the written dream, social media sharing, and comment functionality.

PROFILE Users can create profile pages to view their dream journal, photos, etc.

App With Dreamography, we wanted to give people the ability to upload their virtual dream journal with written entries, as well as user-generated photos & videos that represent their dreams. We created a mobile app that serves primarily as a recording device, allowing the user to write in their dream, take pictures & edit them with filters, blurring, and other effects, and share these with the online community. We also wanted to allow the mobile user to explore other peoplesâ&#x20AC;&#x2122; dreams, so they can read entries, browse photos, and participate in discussion all from their phone.

ALARM ALARM

ALARM

DREAM RECORDED DREAM

08:00 AM

08:00

ALARM

Our Dreamography app includesALARM a dream journal, alarm clock, explore page, camera, and gallery features. 1 2A:M1 8

RECORDED

SNOOZE

wants you to have a good

SNOOZE

CAMERAGO TO JOURNAL

RECORD DREAM JOURNAL

healthy sleeping and establish

CAMERA GO TO JOURNAL

night’s sleep. So we created Dreamography to promote

ALARM

SOUND

R E P E ATTw i n k l e

Never

SNOOZE

SOUND

Tw i n k l e

LABEL

SNOOZE Alarm

REAMOGRAPHY SETTINGS

CAMERA

THR

JOURNAL

S A T 2013 MAY SIGN IN

FRI

2S U N 3M O N 4 T U E5 W E D

9 10 11 112 2

THR

FRI

S AT

13 14

15 166 177 18 8 19 9 10 11 12

GALLERY 22 23 13 24 14 25 152616 17 18 19

27 28 16

29 30 20 31 21

22 23 24 25 26

27rabbit 28hole 29 I went down the and there was a jar or jam, so... 16

Alarm

CAMERA

30 31

I went down the rabbit hole and there was a jar or jam, so...

JOURNAL

sleeping and establish

JOURNAL

MAY 2013 J O U R N A L WED

0 7 : 5 0 AM

night’s sleep. So we created

a community of dreamers.

PASSWORD

TUE

0 6 : 1 0 AM

wants you to have a good

Dreamography to promote

JOURNAL

MON

0 6 : 0 0 AM

CINEMA MODE

PHOTO healthy ALBUM

USER NAME

SUN

1 2 : 3 0 AM

REAMOGRAPHY

dreamography.com #dream

0 7 : 5 0 AM

LABEL

CAMERA

GALLERY

0 6 : 1 0 AM

Never

VIDEO

Happy Dreaming

0 6 : 0 0 AM

R E P E AT

a community of dreamers.

EXPLORE

1 2 : 3 0 AM

REAMOGRAPHY

RECORD DREAM

ALARM

12:18

RAPHY

ALARM

MAY I went down the hole MAY and saw a small bottle with a tag that Iread wentDreaming down the hole Happy drink me so I drank it a small bottle and saw and grew to bewith so tall a tag that read that my head hit theme so I drank it drink #dream ceiling. Then I and sawdreamography.com the grew to be so tall rabbit again sothat I said my head hit the hello and askedceiling. if I GALLERY Then I saw the could follow him on his rabbit again so I said way to the queens, hello but and asked if I he said no. Butcould I follow him on his followed him anyways. way to the queens, but And that’s howhe it...said no. But I followed him anyways.

ALARM

JOURNAL

MAY

JOURNAL

I went down the rabbit EXPLORE CAMERA hole and there was a MAY jar or jam, so... I went down the rabbit hole and there was a MAY jar or jam, so... I started to fly up into

the sky, higher and MAY SETTINGS GALLERY higher. I touch... I started to fly up into the sky, higher and MAY higher. I touch... I waited and then he finally saw me. I MAY turned to face him... I waited and then he finally saw me. I MAY turned to face him... After an hour I finally caught the perfect MAY wave and then the... After an hour I finally caught the perfect

Users will VIDEObe able to set multiple alarms with a wide variety of “dreamy” alarm CINEMA alert sound MODE options to pick from. The alarm will wake you during the lightest PHOTO ALBUM sleeping phase ensuring you wake up feeling rested and refreshed.

CAMERA

REAMOGRAPHY wants you to have a good

REAMOGRAPHY R E A M O G R AUSER P HNAME Y CAMERA CAMERA

REAMOGRAPHY

USER NAME

FILTERS

JOURNAL

CAMERA

CAMERA PASSWORD

PASSWORD

night’s sleep. So we created

Our alarm will wake you up in the morning and immediately give you CAMERA GALLERY option to record your healthy sleeping andthe establish CAMERA a community of dreamers. dream, which can be typed in or voice recorded. SIGN IN Dreamography to promote wants you to have a good healthy sleeping and establish night’s sleep. So we created a community of dreamers. Dreamography to promote

FILTERS

ALARM

Happy Dreaming

JOURNAL

VIDEO

GALLERY EXPLORE

Happy Dreaming

GALLERY

CAMERA

EXPLORE

CINEMA MODE

OVERLAYS

PHOTO ALBUM

VIDEO

CAMERA SETTINGSCINEMA MODE

dreamography.com #dream

PHOTO ALBUM

SETTINGS

CAMERA DOUBLE EXPOSURE

VIDEO

GALLERY CINEMA MODE

GALLERY EXPLORE

GALLERY

ALARM

GALLERY

BLUR

CAMERA

ALARM CAMERA

JOURNAL

CAMERA

REAMOGRAPHY

PHOTO ALBUM

dreamography.com #dream DOUBLE EXPOSURE

SETTINGS DONE

OVERLAYS

DONE

CAMERA

GALLERY GALLERY

FILTERS

GALLERY

BLUR

BLUR DOUBLE EXPOSURE

DOUBLE EXPOSURE OVERLAYS

OVERLAYS

DONE

The dream journal is an easy way to view and organize recorded dreams and images. Dreams can be viewed in a calendar, full day, and mini day mode.

Print Ads To advertise Dreamography, we thought that traditional print ads could reach out to a wider audience. Creating a preview of our app, we placed a surreal photo in the background and described the details of a dream using our typography. Each ad tells a story, ranging from the bizarre to the humorous.

Share your dreams with the world.

Web Banners For our online advertising, we thought that we could utilize the clean typography and dreamy imagery that we included in our print ads. However, we thought it would be nice to make the photos in our web banners more interactive, so we elected to make them into cinemagraphs, which are short video clips that have been edited to make it appear that only one object in the frame is moving. This style of photography would allow us to make beautiful, but also subtle web ads.

Share your dreams with the world.

“and I could hear si rens i n t he d i s t a n c e , but we WE RE N’ T pani cki ng. I had my arm out of t he wi ndow and I was m aki ng wa ves wi t h my hand.”

Share your dreams with the world.

Ambient Building Projection In addition to our advertising and social media, we would utilize user-generated content to create largescale, interactive projections in metropolitan areas. The live ads would essentially pull photos, videos, and entries from Dreamography and project them onto buildings, making an interactive experience for the viewer. The general public would be encouraged to tweet their dreams to #Dreamography to bea projected onto a building.

Social Media To generate buzz on social media, we came up with a contest that would have a celebrity director create a video based on a top-voted dream. Users would submit and share their dreams on Twitter, Facebook, YouTube, and the Dreamography site itself to get the most votes and win the contest. This director would then film and edit the video using the Dreamography app and it would be placed on YouTube, creating additional buzz. Using the style of J.J. Abrams as our inspiration, we created a storyboard for a winning video.

This video describes one of the most common types of dreams: the chase dream. Our the protagonist is running from a mysterious girl who threatens him. Her eyes glow blue in the night as she stalks the main character in an alley.

Our character then realizes that he has a toy gun in his pocket and turns to face his attacker. A rubber dart sticks to her head with a thump, and she falls to the ground, returning her to a human state.

Contributors: Matt Castillo Sara Hruzek Monique Ramos Daniel Seong

Photography: Meagan McLendon