katie eldredge portfolio

KATIE ELDREDGEDesign 2012 – 2013

TABLE OF CONTENTS

Cultural Calendar

Authority

Energy Conservation

Measure

Modular Website

06

16

24

38

48

CULTURAL CALENDARDesign and Persuasion | DES 342 | Spring 2013

Design an artifact that addresses a defined cultural

identity in the form of an interactive print calendar.

Consider aspects such as sustainability, re-usability, and

experimental print design.

Based on my personal cultural identity as a young

Christian, I decided to focus on an issue of social justice

that is prevalent throughout every culture in the

world today, modern-day slavery. As I mapped out the

numerous avenues that this issue could be addressed,

my interests narrowed to its presence in the consumer

market. I created lists of word associations and initial

sketches that centered around three main ideas:

awareness, action, and sharing. My final artifact gives the

viewer a concise fact about a specific company, the ability

to write to the CEO of that company, and an opportunity

to share this information with others.

OBJECTIVE

SOLUTION

Cultural Calendar | Sketches8 9Design 2012 – 2013

Cultural Calendar | Iterations

voluptatem quia voluptas sit asperna-tur aut odit aut fugitvoluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam

January

To Apple CEO,

Front

6.25

in

4.25 in

6 in

Back

Facts:

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque lau-dantium, 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 aut odit aut fugitvoluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ip-sum quia dolor sit amet, consectetur, adipi-sci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium do-loremque laudantium, totam rem aperi-am, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam

Mr. Cook,


Timothy D. Cook1 Infinite Loop Cupertino, California 95014United States of America

Facts:January: 16

132027

S M T w t f s

27

142128

38

152229

49

162330

51017

2431

111825

1219

26

BackFront

Mr. Cook,


Timothy D. Cook1 Infinite Loop Cupertino, California 95014United States of America

Facts:January: 16

132027

S M T w t f s

27

142128

38

152229

49

162330

51017

2431

111825

1219

26

BackFront

10 11Design 2012 – 2013

Cultural Calendar | Final

1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6

16 26

7

17 27

8

18 28

9

19 29

10

20 30nov1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6 16

26

7

17 27

8

18 28

9

19 29

10

20 30 31dec1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6 16

26

7

17 27

8

18 28

9

19 29

10

20 30 31JUL 1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6 16

26

7

17 27

8

18 28

9

19 29

10

20 30 31Aug1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6

16 26

7

17 27

8

18 28

9

19 29

10

20 30sep 1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6 16

26

7

17 27

8

18 28

9

19 29

10

20 30 31oct

1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6 16

26

7

17 27

8

18 28

9

19 29

10

20 30 31MAR 1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6

16 26

7

17 27

8

18 28

9

19 29

10

20 30APR1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6 16

26

7

17 27

8

18 28

9

19 29

10

20 30 31May Jun 1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6

16 26

7

17 27

8

18 28

9

19 29

10

20 30

1 11

21

2 12

22

3 13

23

4 14

24

5

15 25

6

16 26

7

17 27

8

18 28

9

19

10

20FEB1 11

21

2 12

22

3 13

23

4 14

24

5 15

25

6 16

26

7

17 27

8

18 28

9

19 29

10

20 30 31Jan

12 13Design 2012 – 2013

Cultural Calendar | Final14 15Design 2012 – 2013

AUTHORITYImages in Communication | DES 321 | Fall 2012

Chose a subject of photographic study and develop

multiple explorations. Combine these images with a

chosen word and phrases assigned by the instructor to

create a series of posters conveying authority.

OBJECTIVE

SOLUTION My partner, Ray Delgadillo, and I chose religious

iconography as our subject matter for photographic

exploration. Our studies mainly took place in public

religious buildings and spanned from architecture to

hand-held artifacts. After collecting a variety of images

from Christian and Buddhist centers of worship, my

partner and I chose the word “Fray” as our central brand

or message, while the phrase “use and old idea” was

assigned to us by our professor. We selected images that

we considered particularly powerful and, taking into

consideration the formal qualities and structure of each

image, combined them with the specified text.

Authority | Sketches18 19Design 2012 – 2013

Authority | Image and Text Studies20 21Design 2012 – 2013

Authority | Final22 23Design 2012 – 2013

ENERGY CONSERVATIONDesign and Social Environment | DES 322 | Fall 2012

In a collaborative design process, create a series of

interactions that inform and initiate behavior change

in energy consumption. Work with fellow designers

as well as a website developer and members of the

University of Texas community in providing a three

week energy conservation challenge to the students in

the honors quad.

OBJECTIVE

SOLUTION Though this project required collaboration with my

entire design class, I was on a team that focused on the

needs of the overall competition. In early stages of the

process, I was involved with idea generation in aspects

such as of the logo and energy graphs, but as the project

continued, I specifically worked on the front-end design

of the competition website and communication with

the website developer. I also contributed by operating a

social media presence on Facebook and Twitter as well

as shooting and editing an overview video of the entire

project. With the combined efforts of my entire design

class, the competition successfully engaged students to

change their behavior and conserve energy.

Energy Conservation | SketchesEnergy Conservation | Sketches26 27Design 2012 – 2013

4th3rd

2nd

Average Consumption Current Consumption

-12%1st

5,000 4,847

Blanton

@Helen_says:

13 min ago via Twitter

Unplug devices when you aren’t using them. #QEC

About:In principio creavit Deus caelum et terram. Terra autem erat inanis et vacua et tenebrae super faciem abyssi. Facies et spiritus Dei ferebatur super aquas. Dixitque Deus: "Fiat lux" et facta est lux. Et vidit Deus lucem quod esset bona. Et divisit lucem a tenebris. Appellavitque Deus lucem Diem et tenebras Noctem. Factumque est vespere et mane, dies unus. Dixitque Deus: "Fiat firmamentum in [a] in medio aquarum et dividat aquas ab aquis". Et fecit Deus firmamentum divisitque aquas aquas ab aquis". Et fecit Deus firmamentum divisitque aquas quae erant sub firmamento, ab aquis super firmamentum. Et factum est ita. Et factum est ita. Factumque est vespere et mane, dies secundus. Dixitque Deus: "Congregentur aquae sub caelo ad locum unum et appareat arida". Factumque est ita. Et vocavit Deus aridam Terram congregationesque aquarum appellavit Maria. Et vidit Deus quod esset bonum.

1st 2nd

3rd 4th

About:

Helen says tips:

Blanton Littlefield

Carothers Andrews

43,200Current Consumption

+12%45,100Average Consumption

* power consumption in watts

4th

3rd

2nd


-14.07%5,000 4,847-2%Carothers1st

@Says_Diana:



About:In principio creavit Deus caelum et terram. Terra autem erat inanis et vacua et tenebrae super faciem abyssi. Facies et spiritus Dei ferebatur super aquas. Dixitque Deus: "Fiat lux" et facta est lux. Et vidit Deus lucem quod esset bona. Et divisit lucem a tenebris. Appellavitque Deus lucem Diem et tenebras Noctem. Factumque est vespere et mane, dies unus. Dixitque Deus: "Fiat firmamentum in [a] in medio aquarum et dividat

4th

3rd

2nd


+14.07%1,000 1,847-2%Floor 31st

Carothers

@Says_Diana:



About:In principio creavit Deus caelum et terram. Terra autem erat inanis et vacua et tenebrae super faciem abyssi. Facies et spiritus Dei ferebatur super aquas. Dixitque Deus: "Fiat lux" et facta est lux. Et vidit Deus lucem quod esset bona. Et divisit lucem a tenebris. Appellavitque Deus lucem Diem et tenebras Noctem. Factumque est vespere et mane, dies unus. Dixitque Deus: "Fiat firmamentum in [a] in medio aquarum et dividat

Energy Conservation | Website Wireframes28 29Design 2012 – 2013

Energy Conservation | Website Final30 31Design 2012 – 2013

Energy Conservation | Website Final

Launch PageA countdown to the beginning of the competition

Quad Energy Challenge Home PageGiving live feedback on dormitory energy use

32 33Design 2012 – 2013

Energy Conservation | Social Media

Twitter PageDirect communication with participants

Facebook PageCreating a community that shares ideas

34 35Design 2012 – 2013

Energy Conservation | Video

At the end of the competition, I worked with a small

group of designers to create a video explaining the work

we did for the Quad Energy Challenge. I shot interviews

and edited the video, while my classmates used After

Effects to add the graphic elements and text throughout

the final video.

The final video can be seen

on the disc found in the back

of this book.

36 37Design 2012 – 2013

MEASUREAdvanced Issues in Visual Syntax | DES 341 | Spring 2013

Design a measuring device that is specific to one

measuring task while challenging the viewer’s

preconceived notions of what a measuring device can be.

OBJECTIVE

SOLUTION In a combination of my interests in music and interactive

design, I developed a mobile application that measures an

individual’s rhythmical intelligence. Rhythmical intelligence

is an aspect of musical intelligence, which is a person’s

specific aptitude in tone, rhythm, and tempo. The

application requires the user to both answer questions

by listening to musical phrases and to play rhythms by

tapping on the screen. After examining interactive musical

games such as Guitar Hero and Simon, I determined that

to purely test musical intelligence, my application could

not include visual clues such as color or musical notes, but

rather had to remain audible.

Measure | Sketches40 41Design 2012 – 2013

Rhythmic Intelligence

ABOUT TEST

Rhythmic intelligence is one aspect of musical intelligence which is the capacity to distinguish the whole realm of sound and, in particular, to discern, appreciate and apply the various aspects of music.

Characteristics:Recognize patternsEasily memorize musical phrasesTap along with music

About

BACK TEST

Are these two rhythmic phrases the same or different?

REPLAY

SAME DIFFERENT

Hearing Rhythms

Are these two rhythmic phrases the same or different?

REPLAY

SAME DIFFERENT

Hearing Rhythms

Are these two rhythmic phrasesthe same or different?

REPLAY

SAME DIFFERENT

Hearing Rhythms

Listen to both rhythmic phrases and determine if they are the same or different rhythms.

Hearing Rhythm

NEXT

You

Score

You got 5 out of 7 correct.

Hearing Rhythm

72%

NEXT

You rank within the 72 percential of people tested.

In which rhythmical phrase is the beep noise on beat?

REPLAY

12

Hearing Tempo


REPLAY

12

Hearing Tempo


REPLAY

1 2

Hearing Tempo

Listen to both rhythmical phrases and determine which beep track is playing the correct tempo.

Playing RhythmPlaying Rhythm

Repeat the rhythm you hear by tapping in on the screen.

Playing Rhythm

Playing Tempo Playing TempoPlaying TempoPlaying Tempo

As the music plays, tap along with the tempo.

Measure | Wireframes42 43Design 2012 – 2013

How do you rank?

Rhythmic intelligence is one aspect of musical intelligence which is the capacity to distinguish the whole realm of sound and, in particular, to discern, appreciate and apply the various aspects of music.

Characteristics:Recognize patternsEasily memorize musical phrasesTap along with music

What is it?

What is it?


Test 1Back

OR

Same

Di�erent

Test 2You’ll hear two rhythmical phrases with beep tracks. Determine which beep track goes along with the rhythmical phrase.

Test 3

Try to repeat the rhythm you hear by tapping it on the screen.

Test 4Tap along with the speed of the rhythmical phrases.

Scores

You’ll hear two rhythmical phrases. Determine if they are the same or different.

Test 1

How do you rank?

Measure | Final44 45Design 2012 – 2013

Test 3Back

Listen.

Test 2Back

OR

One

Two

Which beep track is correct?

Test 4Back

Tap along to the speed of the rhythmical phrase.

Scores

Test 1

Test 2

Test 3

Test 4

83% correct

98% correct

76% correct

Above Average

93% correct


Measure | Final

A preview of this app can be

seen on the disc found in the

back of this book.

46 47Design 2012 – 2013

MODULAR WEBSITEDesign Systems | DES 340 | Spring 2013

Define a series of distinct modules and the interfaces

or connection through which they relate. Consider the

benefits of flexibility and variation in a system created

from multiple parts.

OBJECTIVE

SOLUTION I found that this project presented a unique opportunity

to not only learn HTML and CSS coding but to view

website design through the lens of modularity. My

goal was to create a portfolio website for myself that

would be responsive to a growing body of work. My

methodology for this specific project was centered on

learning a pre-established system of rules in coding while

simultaneously designing spaces to exhibit my work.

With each of these practices informing the other, the final

product is flexible framework in which any set of work

can easily be displayed.

Modular Website | Sketches50 51Design 2012 – 2013

Serintin About

Twitter Sustainable

Typology Blog Film

how tocontact

corner

Pritzker

Serintin

AboutTwitter

Sustainable

Typology Blog

Film

how tocontact

corner Pritzker

Serintin About

Twitter Sustainable

Typology Blog Film

how tocontact

corner

Pritzker

About

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita-tion ullamco laboris nisi ut aliquip ex ea commodo conse-quat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proi-dent, sunt in culpa qui o�cia deserunt mollit anim id est laborum."

Project


Katie Eldredge Design Work About Contact

About


Project


Katie Eldredge Design Work About Contact

Modular Website | Wireframes52 53Design 2012 – 2013

Modular Website | Iterations

The final website can be

seen on the disc found in the

back of this book.

54 55Design 2012 – 2013

Modules HTML Code

Project Title

Project Description

About Me Text

Email Address

Project Objective

Image of Yourself(Height: 450 px)

Project Images(Height: 450 px)

Project Thumbnails(250 x 215 px)

Phone Number

Logo(313 x 29 px)

<div id=”header”> <a id=”logo”><img src= “Logo image goes here...”></a> <ul id=”navigation”> <li> <a href=”#work”>work</a> </li> <li> <a href=”#about”>about</a></li> <li> <a href=”#contact”>contact</a> </li></ul></div> <div id=”center”> <div id= “work”> <div id=”middle”> <a href=”#about”><img src=”About thumbnail goes here...”></a> <a href=”#project1”><img src=”Project thumbnail goes here...”></a> <a href=”#project2”><img src=”Project thumbnail goes here...”></a> <a href=”#project3”><img src=”Project thumbnail goes here...”></a> </div>

<div id=”middle2”> <a href=”#project4”><img src=”Project thumbnail goes here...”></a> <a href=”#project5”><img src=”Project thumbnail goes here...”></a> <a href=”#project6”><img src=”Project thumbnail goes here...”></a> <a href=”#project7”><img src=”Project thumbnail goes here...”></a> </div></div>

work about contact

Modular Website | Final

Example

56 57Design 2012 – 2013

Project Title

Project Description

About Me Text

Email Address

Project Objective




Phone Number

Logo(313 x 29 px)

Modules HTML Code

work about contact

About MeI am a junior in the BFA Design program at the University of Texas at Austin. My interests lie within videography and photography as well as web and mobile design. In 2013 I bacame a front-end developer when I hand coded my first website. I have specific experience in live video production on a large scale. I've spent the last three summers touring with a production com-pany called Student Life.

As I continue my studies at the University of Texas, I intend to develop my skills in front-end website and mobile design and development as well as video production.


Example

<div id=”about”> <div class=”description”> <div class=”textbox”></div> <div class=”texts”> <h1>About Me</h1> <p>About me text goes here...</p> </div>

</div> <img src=”Image of yourself goes here...”> <a href=”#work”><img src=”image/back_button.png”></a> </div>

58 59Design 2012 – 2013

Project Title

Project Description

About Me Text

Email Address

Project Objective




Phone Number

Logo(313 x 29 px)

Modules HTML Code

work about contact

TypologyObjective: Create a photographic study of a collection of man made artifacts by developing a concrete method of documentation. The final form in which the images are presented should reflect the nature of the typology.

I decided to make my typology a study of hand-writing - exploring the idea of representing a person through the marks they make. After experimentation with documenting in a variety of ways, I concluded that the best way to represent someone through handwriting was to let them write their own name. I handed a sharpie and a nametag to the people I encounter on a daily basis and asked them to write their name and stick it to their shirt. With limited instructions each person uniquely represented themselves through the marks they made.


Example

<div id=”project1”> <div class=”description”> <div class=”textbox”></div> <div class=”texts”> <h1>Project title goes here...</h1> <p><span class= “objective”>Objective:</span> Project objectives text goes here...</p> <p>Project description text goes here...</p> </div> </div>

<img src=”Project image goes here...”>  <a href=”#work”><img src=”image/back_button.png”></a> </div>

60 61Design 2012 – 2013

Project Title

Project Description

About Me Text

Email Address

Project Objective




Phone Number

Logo(313 x 29 px)

Modules HTML Code

work about contact

[email protected]

409.291.9644


Example

<div id=”contact”> <div class=”description”> <div class=”textbox”></div> <div class=”texts”> <h1>Contact</h1> <p>Email address goes here...</p> <p>Phone number goes here...</p> </div> </div> <a href=”#work”><img src=”image/back_button.png”></a> </div>

62 63Design 2012 – 2013

katie eldredge portfolio

Documents