Issuu on Google+


A comprehensive form that tells stories of the constellations in relationship of the northern and southern hemisphere. During each seasons the sky alignments change, thus changing the constellations within the Northern and Southern hemispheres.The user will be able to learn relationships between hemispheres, seasons, the constellations coordinates, and greek mythology.

Developing a topic for my interface,

During the semester we had to

I had to chose between an event,

observe and document both objective

journey or place of my choice, with

and subject elements with layers of

an in-depth research, obersvation,

information that we translated it in

and documentation. I choose to do

our own words and visuals. The first

my topic on stars and the constella-

step was to develop three different

tions in realtionship to one another.

proposal ideas, and prepare visiual

I have always loved star gazing, I

presentations. The second step was to

have read many myths and read daily

develop representative storyboards for

articles about space on NASA’s site.

the final design. Then the final step

I wanted to display this information

was coding the interface along with

that would be easy for the user to

making a package design for the the

navaigate through.

digital interface.


I n i ti a l Pro po sa ls

Showcasing steps through a two week documentation on how to survive off the grid. I will be documenting my friend Travis who lives in a tree house by the Delaware river, completely isolated by the social norm. I will be showcasing his life style choices such as housing, clothing and food. Most importantly an interview why he chose to fall off the grid juxtaposed with interviewing people their thoughts of living on the bare minimum.

1.

FALLING OFF THE

GRID

THE GRID

FALLING OFF THE GRID


An informational interface on how beer forms part of a culture through beer-drinking. The user will experience a timeline on the development of beer through the ages and the process of making beer. The user will learn different types of beer and why it played an important rule in the past and the present.

2.

4

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur sequi nesciunt. consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis

nostrum


I n i ti a l Pro po sa ls- Ch o se n

Showcasing pictures of star charts through photographs and illustrations to represent mythological theories of stars verus scientific facts. The purpose is the showcase how people belived how stars were made versus scientific research.

3.

Star Gazing

Star Gazing X Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur sequi nesciunt. consectetur, adipisci velit, sed quia non


Mythological Theories - Religious Practices - Celestial Navigaiton - Heavenly Sphere

Mind Map

- Gods - Zodiac Signs - Greek astronomy

Scienitfic Facts - Gas - Photoelectric Photometer - Hertzsprung-Russell diagram - Galaxies - Supernovas - History - Celestial Navagation - Ecliptic - Hemispheres - Seasons - Constellations

6


Nava g a ti o n I dea # 1: Jour ney through P enns alvina

H

1

2

Home/intro page

Locations

Philly

Warmingster

Picture of the

Picture of

water front.

the suburbs

Vega

Vega

Alitar

Cetus

Stars within the locations

Andromeda Aquila


3

4

5 8

Allentown

Reading

East Stroudsburg

Picture of an

Picture of

Picture of open

open field.

famlands.

fields and woods.

Vega

Vega

Vega

Aquatius

Alitar

Pic es

Phenoix

Cetus

Capricornus

Cetus

Sagittarius

Cetus

Lyria

Phonenix

Sagittarius Phonenix Aquila Equuleus Lyria


Nava g a ti o n I dea # 2: C ons tellations through hem is p heres

c b

d a

NORTH (option 1)


NORTH

SOUTH

a. Pegaus

a. Libra

b. Pices

b. Herculus

c. Aquarius

c. Draco

d. Capricorn

d. Scropio

Shared Realtionship

c

10

b

a

d SOUTH (option 2)


Nava g a ti o n I dea # 3: C ons tellations through Seas ons & Hem is p heres

FALL

BOOTES

- myth image - click— star chart LIBRA

- myth image - click— star chart

C E N TA U R S

MAP option in each season

- myth image - click— star chart DRACO

- myth image - click— star chart

1

3

2

2

1. All stars 2. On click- two  are always shown 3. Map of those stars

SPRING

CEPHUS

- myth image - click— star chart AQUILA

- myth image - click— star chart

VIRGO

- myth image - click— star chart HYDRA

- myth image - click— star chart


SUMMER

URSA MAJOR

- myth image - click— star chart LEO

- myth image - click— star chart

WINTER

PEGASUS

- myth image - click— star chart AQ UA R I U S

- myth image - click— star chart

12 PAVO

- myth image - click— star chart PHOENIX

- myth image - click— star chart

DRACO

- myth image - click— star chart C E N TA U R S

- myth image - click— star chart


I ma g r y a n d I n sper a ti o n


14


Sketch es

Sketch one was based off three points that stay consent through out the interface. The importance of the three points is because they are the brightest stars that can be seen all year around. As the user goes across my interface, they will be traveling through different parts of Philadelphia. The further they get away from the city the more stars I will reveal. There will be five different locations that will continue to grow in mulitple of threes.

1.

2.


3.

4.

16


D i g i ta l Sketch es

Sketch one was based off of three points that will stay consent through out the interface. The three points stay constant because they are the brightest stars in the sky that can be seen all year around. As the user explores across my interface, they will be traveling through different parts of Philadelphia. The further they get away from the city the more stars I will reveal. There will be five different locations that will continue to grow in mulitple of threes.

1.


Sketch two was inspired by a telescope. I love star gazing, but living in Philly you don’t get to see stars at night, so I wanted to use a telescope to reveal stars. The user would be presented with the Philadelphia sky line (a blank sky). The user then would be able to drag their mouse across the sky, acting as a telescope to see the constellations.

2.

Then the user would be able to click with in the telescope to learn more about the constellations.

18


D i g i ta l Sketch es

Sketch three was my own interpretation of the

Each star will have a hover state to show the

constellations. I wanted to represent the galaxy

constellation. Once the user clicks on the star, a

in a 3-D model to give a feeling of space and

drawing of greek mythology interpretation will

movement. In the beginning there will be four

show up. The user will learn the about scientific

points represented for the seasons. The lines that

research and myths. At the end of each paragraph

connects the points will share a relationship that

the user will be able to click on a map button

will turn to show another 3-D model within

to show where each constellation sits on the sky.

those seasons. Everything will be connected to

Each constellation on the map will have a hover

show a relationship. The user will be able to click

state showing the degrees it sits on and the best

on the points that represent the stars to learn

time to see those stars.

more about them.

3.


20


Atempt # 1

This was my first attempt at Canvas HTML 5, I only got as far as into coding it in 2D form. Canvas was very difficult because it is made strictly in Java Script. It was difficult because you have to draw each object in “canvas space.� One had to know where each pixel lived in space. The problem that I ran into was converting it into WebGL. WebGL is another way in coding but in 3-D space. My code kept having syntax errors probably due to the fact that I was trying to learn a foreign language. I do not suggest anyone to try to code an interface in Canvas with only three months to do it.

3a.


22 </div> <!--<script> var message = ‘The version of ChemDoodle installed is: ‘+ChemDoodle.getVersion(); alert(message); </script>--> <script type=”text/javascript”>

var c=document.getElementById(“canvas”); var cxt=c.getContext(“2d”);

//fall to winter line cxt.strokeStyle=”#900”; cxt.beginPath(); cxt.moveTo(300,333); cxt.lineTo(900,133); cxt.stroke(); //winter to summer line cxt.strokeStyle=”#900”; cxt.beginPath(); cxt.moveTo(900,133); cxt.lineTo(750,600); cxt.stroke(); //summer to spring line cxt.strokeStyle=”#900”; cxt.beginPath(); cxt.moveTo(750,600); cxt.lineTo(450,533); cxt.stroke(); //spring to fall line cxt.strokeStyle=”#900”; cxt.beginPath(); cxt.moveTo(450,533); cxt.lineTo(300,333); cxt.stroke();

var compositeTypes = [ ‘source-over’ ]; //winter cxt.fillStyle=”#666666”; cxt.beginPath(); cxt.arc(900,133,10,0,Math. PI*2,true); cxt.closePath(); cxt.fill(); //summer cxt.fillStyle=”#666666”; cxt.beginPath(); cxt.arc(750,600,10,0,Math. PI*2,true); cxt.closePath(); cxt.fill(); //spring cxt.fillStyle=”#666666”; cxt.beginPath(); cxt.arc(450,533,10,0,Math. PI*2,true); cxt.closePath(); cxt.fill(); /fall cxt.fillStyle=”#666666”; cxt.beginPath(); cxt.arc(300,333,10,0,Math. PI*2,true); cxt.closePath(); cxt.fill(); ctx.globalCompositeOperation = compositeTypes[source-over]; </script>


Atempt # 2

3b.

This is my second attempt in creating sketch number three. I figured since I wasnâ&#x20AC;&#x2122;t able to code it in HTML 5 that Flash would be easier. I created a 3-D model in After Effects and rendered twenty videos of it turning to make it look like it was moving in Flash. This was also unsuccessful because the quality of the performance wasnâ&#x20AC;&#x2122;t as good as I had hoped it to be. I wanted this 3-D model to look fluid when it was turning and not like different videos playing.


24


D i g i ta l Sketch es

The final sketch happened to be an accident. It also ended up being my final design. I decided to break up the information by hemispheres and seasons. I was inspired by the functions of clocks and compasses. I decided to make a big circle that was constructed with dots around it, to represent stars. Each star is paired with another star to show a connection within that season. They are separated by the northern hemisphere and the southern hemisphere and when the user clicks on the star, it will show a line that connects the two. Two drawn images will show up that the user can click on to go more in depth about that star.

4.


26


D r awi n g s


28


F I N A L


30


CD Pa cka g i n g


Completed in partial fulfilment of GDES 401 01, Problem Solving, under the instruction of Rachele Riley, in the Graphic Design Department. The University of the Arts, Philadelphia, PA. Fall 2011


View code



Process book