Katie Eldredge Portfolio by katieeldredge

KATIE ELDREDGE Design 2012 – 2013

TABLE OF CONTENTS

Cultural Calendar

Authority

Energy Conservation

Measure

Modular Website

CULTURAL CALENDAR Design and Persuasion | DES 342 | Spring 2013

OBJECTIVE

SOLUTION

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.

Design 2012 – 2013

Cultural Calendar | Sketches

Front Front

Back Back

Mr. Mr.Cook, Cook,

Front

Sed Sedututperspiciatis perspiciatisunde undeomnis omnisiste istenatus natuserror error sitsitvoluptatem voluptatemaccusantium accusantiumdoloremque doloremquelaulaudantium, dantium,totam totamrem remaperiam, aperiam,eaque eaqueipsa ipsaquae quae ababillo illoinventore inventoreveritatis veritatisetetquasi quasiarchitecto architecto beatae beataevitae vitaedicta dictasunt suntexplicabo. explicabo.Nemo Nemoenim enim ipsam ipsamvoluptatem voluptatemquia quiavoluptas voluptassitsitaspernatur aspernatur aut autodit oditaut autfugitvoluptatem fugitvoluptatemsequi sequinesciunt. nesciunt. Neque Nequeporro porroquisquam quisquamest, est,qui quidolorem doloremipipsum sumquia quiadolor dolorsitsitamet, amet,consectetur, consectetur,adipiadipisciscivelit, velit,sed sedquia quianon nonnumquam numquameius eiusmodi modi tempora temporaincidunt inciduntututlabore laboreetetdolore doloremagnam magnam aliquam aliquamquaerat quaeratvoluptatem. voluptatem.

Back

Timothy TimothyD.D.Cook Cook 1 1Infinite InfiniteLoop Loop Cupertino, Cupertino,California California95014 95014 United UnitedStates StatesofofAmerica America

To Apple CEO,

January

January: January: 4.25 in

6.25 in

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 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 quaerat voluptatem.

SS MM TT ww tt ff ss 11 66 77 88 1313 1414 1515 20 20 2121 22 22 27 27 28 28 29 29

22 33 44 55 99 1010 1111 1212 1616 1717 1818 1919 23 23 24 24 25 25 26 26 30 30 3131

Facts: Facts:

Facts: 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 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

6 in

Design 2012 – 2013

Cultural Calendar | Iterations

Jan

JUL 12

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Design 2012 – 2013

FEB

Aug

9 10 11 12 13 14

15 16 17 18 19 20 21 22 23 24 25 26 27 28

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

MAR

sep

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 3 4 5 6 7 8 9 10 11 12 13 14 15

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

APR

oct

2 3 4 5 6 7 8 9 10 11 12 13 14 15

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

May

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

nov

2 3 4 5 6 7 8 9 10 11 12 13 14 15

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Jun

dec

2 3 4 5 6 7 8 9 10 11 12 13 14 15

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Cultural Calendar | Final

Design 2012 – 2013

Cultural Calendar | Final

AUTHORITY Images in Communication | DES 321 | Fall 2012

OBJECTIVE

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.

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.

Design 2012 – 2013

Authority | Sketches

Design 2012 – 2013

Authority | Image and Text Studies

Design 2012 – 2013

Authority | Final

ENERGY CONSERVATION Design and Social Environment | DES 322 | Fall 2012

OBJECTIVE

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.

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.

Design 2012 – 2013

Energy Conservation | Sketches

About:

Helen says tips:

@Helen_says:

Unplug devices when you aren’t using them. #QEC 13 min ago via Twitter

1st Blanton

+12%

Current Consumption

43,200

2nd Littlefield

Average Consumption

45,100

3rd Carothers

Average Consumption

5,000

4th Andrews

Blanton

-12%

* power consumption in watts

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 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.

About:

@Says_Diana:

Unplug devices when you aren’t using them. #QEC 13 min ago via Twitter

Carothers

-2%

Average Consumption

5,000

Current Consumption

4,847

-14.07%

Current Consumption

4,847

th Unplug devices when you

About:

@Says_Diana:

aren’t using them. #QEC

13 min ago via Twitter

Carothers

Floor 3

-2%

Average Consumption

1,000

Current Consumption

1,847

+14.07%

Design 2012 – 2013

rd Energy Conservation | Website Wireframes

Design 2012 – 2013

Energy Conservation | Website Final

Design 2012 – 2013

Launch Page

Quad Energy Challenge Home Page

A countdown to the beginning of the competition

Giving live feedback on dormitory energy use

Energy Conservation | Website Final

Design 2012 – 2013

Facebook Page

Twitter Page

Creating a community that shares ideas

Direct communication with participants

Energy Conservation | Social Media

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.

Design 2012 – 2013

Energy Conservation | Video

MEASURE Advanced Issues in Visual Syntax | DES 341 | Spring 2013

OBJECTIVE

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.

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.

Design 2012 – 2013

Measure | Sketches

About

Hearing Tempo

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.

Rhythmic Intelligence

ABOUT

In which rhythmical phrase is the beep noise on beat? Listen to both rhythmical phrases and determine which beep track is playing the correct 12 1 tempo. 2

Characteristics: Recognize patterns Easily memorize musical phrases Tap along with music

TEST BACK

Hearing Rhythms

Hearing Tempo

Playing Rhythm

In which rhythmical phrase is the beep noise on beat? Repeat the rhythm you hear by tapping in on the screen.

REPLAY

Playing Tempo

TEST

Hearing Rhythms

Hearing Rhythm

Playing Tempo

You You got 5 out of 7 correct. Are these two rhythmic phrases the same or different? Listen to both rhythmic phrases and determine if they are the same or different rhythms. SAME DIFFERENT

Are these two rhythmic phrases the same or different?

72% SAME

As the music plays, tap along with the tempo.

DIFFERENT You rank within the 72 percential of people tested.

REPLAY

Design 2012 – 2013

Score

REPLAY NEXT

Measure | Wireframes

What is it? 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.

Rhythmic Intelligence

Characteristics: Recognize patterns Easily memorize musical phrases Tap along with music

How do you rank?

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

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

Design 2012 – 2013

Same

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

Tap along with the speed of the rhythmical phrases.

How do you rank?

Test 1

Test 4

What is it?

Back

OR Different

Scores

Measure | Final

A preview of this app can be seen on the disc found in the back of this book.

Back

Test 2

Back

Test 3

Listen. Which beep track is correct?

One OR Two

Back

Test 4

Scores

Test 1

83% correct

Test 2

98% correct

Test 3

76% correct

Test 4

93% correct

Tap along to the speed of the rhythmical phrase.

Rhythmic Intelligence Above Average

Design 2012 – 2013

Measure | Final

MODULAR WEBSITE Design Systems | DES 340 | Spring 2013

OBJECTIVE

SOLUTION

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.

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.

Design 2012 – 2013

Modular Website | Sketches

Katie Eldredge Design Typology

Blog

Typology

Film

Blog

Work

About

Contact

Film About

Twitter

Sustainable

how to

contact

Twitter

Sustainable

how to

Pritzker

corner

About

Serintin

Katie Eldredge Design Typology

Sustainable

Blog

corner

Design 2012 – 2013

Twitter

Pritzker

contact

Film

"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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

contact

how to

Serintin

About

corner

Work

About

Contact

About

Project

Modular Website | Wireframes

The final website can be seen on the disc found in the back of this book.

Design 2012 – 2013

Modular Website | Iterations

Modules

HTML Code

Example work

Logo

about

contact

(313 x 29 px)

Project Thumbnails (250 x 215 px)

About Me Text

Image of Yourself (Height: 450 px)

Project Title Project Objective Project Description

Project Images (Height: 450 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 <a href=”#project5”><img <a href=”#project6”><img <a href=”#project7”><img </div></div>

src=”Project src=”Project src=”Project src=”Project

thumbnail thumbnail thumbnail thumbnail

goes goes goes goes

here...”></a> here...”></a> here...”></a> here...”></a>

Email Address Phone Number 56

Design 2012 – 2013

Modular Website | Final

Modules

HTML Code

Example work

Logo

about

contact

(313 x 29 px)

About Me

Project Thumbnails (250 x 215 px)

About Me Text

Image of Yourself (Height: 450 px)

Project Title Project Objective Project Description

<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>

I 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 company 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.

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

Project Images (Height: 450 px)

Email Address Phone Number 58

Design 2012 – 2013

Modular Website | Final

Modules

HTML Code

Example work

Logo

about

contact

(313 x 29 px)

Typology

Project Thumbnails (250 x 215 px)

About Me Text

Image of Yourself (Height: 450 px)

Project Title Project Objective Project Description

<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>

Objective: 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 handwriting - 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.

Project Images (Height: 450 px)

Email Address Phone Number 60

Design 2012 – 2013

Modular Website | Final

Modules

HTML Code

Example work

Logo

about

contact

(313 x 29 px)

Contact

Project Thumbnails

katieeldredge@gmail.com

(250 x 215 px)

409.291.9644

About Me Text

Image of Yourself (Height: 450 px)

Project Title Project Objective

<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>

Project Description

Project Images (Height: 450 px)

Email Address Phone Number 62

Design 2012 – 2013

Modular Website | Final