katie eldredge portfolio
DESCRIPTION
ÂTRANSCRIPT
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 | 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,
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.
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,
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.
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
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.
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.
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
Average Consumption Current Consumption
-14.07%5,000 4,847-2%Carothers1st
@Says_Diana:
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
4th
3rd
2nd
Average Consumption Current Consumption
+14.07%1,000 1,847-2%Floor 31st
Carothers
@Says_Diana:
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
Energy Conservation | Website Wireframes28 29Design 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.
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
In which rhythmical phrase is the beep noise on beat?
REPLAY
12
Hearing Tempo
In which rhythmical phrase is the beep noise on beat?
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?
Rhythmic Intelligence
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
Rhythmic Intelligence
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.
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
"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."
Katie Eldredge Design Work About Contact
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
"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."
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
Image of Yourself(Height: 450 px)
Project Images(Height: 450 px)
Project Thumbnails(250 x 215 px)
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.
Modular Website | Final
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
Image of Yourself(Height: 450 px)
Project Images(Height: 450 px)
Project Thumbnails(250 x 215 px)
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.
Modular Website | Final
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...”> <!-- Copy and paste the line above to add images--> <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
Image of Yourself(Height: 450 px)
Project Images(Height: 450 px)
Project Thumbnails(250 x 215 px)
Phone Number
Logo(313 x 29 px)
Modules HTML Code
work about contact
409.291.9644
Modular Website | Final
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