Portfolio

Stephanie Ogden

Contact:

Stephanie Ogden

1358 E. 6400 S.
Salt Lake City, Utah 84121
801.518.2763
stephogden4@gmail.com

Table of Contents:
Logos
Letterhead
Web Page
Graduation Flier
Business Card
Shapes
Shapes 2
Event Ad
Montage
Brochure
Imaging

Logos
Target Audience Anyone looking for a User Interface/User Experience Designer. Hopefully a big
business at first to gain experience and momentum.
Process I began this week studying symbols, that represent something having to do with my business. The Lotus Flower is actually the last symbol that I found, and I liked this shape of it. The
lotus flower apparently represents creation and/or creativity, and I feel like that is a perfect fit for my
business, and the message I want to share. I added colors with a gradient, thinking that would look
best without all the lines of the flower filled in. This was all done in Adobe Illustrator.
Color Scheme I ultimately chose the complimentary color scheme with shaded purples, shaded
greens and shaded browns. I think that will look the best because my website background is going to
be a dark navy blue, so the lighter pastel colors will make a great contrast and provide some visual interest. On the file above though you can see I chose the complimentary color scheme I talked about,
as well as an analogous color scheme, with the greens, blues, and oranges, as well as a grey scale color
scheme. Which one is your favorite?
I chose to do the I in UI over the X because I like to be a little different. I think most people looking for a UI/UX Designer will get it.
At the end I added, Creativity at work for you. to really help reinforce and repeat the message, so
hopefully it comes through loud and clear.

Steph Ogden
UX Design

Steph Ogden

Cr
ea

Steph Ogden

Cr
ea

ti v

fo
r

UX Design

it y a t w o r k

u...
yo

ti v

fo
r

UX Design

it y a t w o r k

u...
yo

Letterhead
At the end I added, Creativity at work for you. to really help reinforce and repeat the message, so
hopefully it comes through loud and clear. I created the logo using simple shapes in Adobe Illustrator.
Once the logo was created, I opened a new two page InDesign document and placed my logo .AI file
into this document.
I decided to make my first page a business card. I positioned the placed logo in the bottom left corner
of my letterhead. I made sure to keep it at least .5 away from the edges. I made the logo transparent
because I wanted people to be able to write over the design if necessary and still see the writing. That
is the most important aspect of stationary, is what is written on it. I then typed in my contact information into a text box and positioned it on the right hand side of the business card. I made my title
in italic font to contrast with the rest of the contact information. I added in border to tie it all together
and create some repetition.
On my second page I used the rectangle tool to create the border again of my stationary. I then placed
the logo and contact information onto this page in the left hand bottom corner. I increased the scale
of the logo and contact information. I made sure that no important information came any closer than
1/8 from the edges. nted people to be able to write over the design if necessary and still see the writing. That is the most important aspect of stationary, is what is written on it. I then placed in my contact information into a on the right hand side of the letterhead. I made my title in italic font to contrast
with the rest of the contact information. I added in border to tie it all together and create some repetition. Programs/Tools Used: Adobe Illustrator & InDesign

gden

hO

Step
UX

Stephanie Ogden UI/UX Designs

ign

Des

801.518.2763

stephogden4@gmail.com

We b Pa g e
For this project we wrote HTML and CSS code for a web page that explained our logo
design, and the process we used in creating the design. Much the same process as stated in the Logo design explanation. We then made a screenshot of the webpage.

Flier
Here is the flier I made for the Graduation Leadership Conference. I tried to use the rule
of thirds, show good contrast and grey scale, and I chose the picture because to me, it says
Mark the date! I think it was appropriate.
Target audience, graduating Seniors. The things I struggled with is how to use white space,
and keep the flow. I also struggled a little with typography. The things I learned the most, is
that design is fun and something I can be passionate about. Aside from that I also learned
about grey scale, typography, and alignment.

Business Card

I made the logo transparent because I wanted people to be able to write over the design if
necessary and still see the writing. That is the most important aspect of stationary, is what
is written on it. I then placed in my contact information into a on the right hand side of
the letterhead. I made my title in italic font to contrast with the rest of the contact information. I added in border to tie it all together and create some repetition. Programs/Tools
Used: Adobe Illustrator & InDesign e border again of my stationary. I then placed the logo
and contact information onto this page in the left hand bottom corner. I increased the scale
of the logo and contact information. I made sure that no important information came any
closer than 1/8 from the edges. I made sure to keep it at least .5 away from the edges. I
made the logo transparent because I wanted people to be able to write over the design if
necessary and still see the writing. That is the most important aspect of stationary, is what
is written on it. I then placed in my contact information into a on the right hand side of
the letterhead. I made my title in italic font to contrast with the rest of the contact information. I added in border to tie it all together and create some repetition. Programs/Tools
Used: Adobe Illustrator & InDesign

Shapes
These projects were done in Adobe Illustrator, using limited - specific shapes of varying
sizes. I began by using the shapes tool and playing with the different angles and sizes.
We could only use black and white for these assignments.

Shapes

These projects were done in Adobe Illustrator, using limited - specific shapes of varying
sizes. I began by using the shapes tool and playing with the different angles and sizes.
We could only use black and white for these assignments.

Eve nt Ad
Description: A color full bleed ad event, promoting a Thanksgiving Day Dinner for the homeless, using
only Microsoft Word with the images scanned in, and uploaded.
Process: I scanned in both images and cropped them in Word. I designed the typography in boxes and
arranged them for balance and visual interest. I chose a yellow background, with the scanned image behind some of the typography, for visual hierarchy. I left aligned the time and place information and right
aligned the bottom footer, for asymmetry. I chose one front for simplicity, and created repetition with the
borders, green font and lines. I am glad we had this assignment so that I know and understand how to
use Microsoft Word in a pinch. It also helped increase my over all design skills in using the principles of
design.
Message: I wanted this flier to be warm and INVITING, something that people would be encouraged to
spend time and money on, not only for the good cause, but for the fun and memories, as well.
Target Audience: Everyone in the local area interested in a warm hot meal in supporting a good cause,
and having fun in the process.
I learned.. how to scan and upload images for design and print. I also learned more about each design
principle, and how to organize designs and layouts in Word.

Montage

I used a contrasting color scheme, very.. natures way - so to speak. Oranges greens, blues and yellows. The quote Used is I have sky above me, earth below me and FIRE within me. My target audience is to outdoor adventurist and possibly anyone with a work hard, play hard drive to succeed.
People who appreciate the outdoors and have nature surrounding them. The top thing I learned
was the cool features in Adobe, especially using opacity and blending. I was always playing with the
filter tools on this and I really liked the Glowing filter under filter style in Adobe. That was perfect
for the flames of the fire. I also enjoyed playing around with the cloning stamp, some of the different
typography typefaces and sizes as well as how I can change them and make them speak my message
clearer to my target audience. I really appreciated some of the blending features that allowed the
flames of my fire to cover the word fire, which makes it appear that the word is actually catching on
fire. That is pretty cool, and I think really drives my message home.

Brochure

Description: This is a brochure I made for Project 8. The company name is http://www.sumertimeblues.
com and they provide summertime ideas for moms who want to keep their kiddos busy during the hot
summer months. I also created a logo for the company in Illustrator, which is a sun, using different
shapes, and summertime blues around the top written on a path.
Process (Programs, Tools, Skills):I downloaded some files from morguefiles.com and took some inspiration off istock photos for the waves I created. The waves were made in Adobe Illustrator using the pen,
and smoothing tools. When I added the background photo of cherries, I could no longer see the written
text very well so I decided to add orange behind the words to create more of an energetic feeling and
help the text stand out a little more.
Message: The message I want the brochure to convey is summertime activities and gear moms can refer to
in need of some of those Im bored days and times. It is mostly a reference website but you can download activities (coloring pages, and games, etc.) if you need to.
Audience: Moms with kids who are home during the summer.
Top Thing Learned: Brochures are tricky to get all the folds and everything lined up in exactly the right
spot.
Color scheme and color names: I want to add a sense of energy and heat to the brochure for summertime
blues, so I used a complimentary color scheme using blues, oranges, yellows and reds.

What can
we do
with these
SUMMERTIME BLUES

ets make
s*L
so
lue

emories
em
m

Be C ND
A
N!!
U
F
e
Hav

Color Scheme: Split Complimentary

Orange - C=0M=57Y=69K=0
Blue - C=73M=58Y=0K=0
Red - C=15M=100Y=100K=0
Pictures taken from Morguefile.com and
some inspiration taken from istock

iv
reat

Summertime

Mos

ly..

ant

ort
imp

Imaging
Here are some pictures I took for an assignment were we learned about some of the tools
in Photoshop. I used the hues tool to brighten the sky and the colors. I also used the color block too to take out some of the grey color on the railroad. I used some soft and hard
light tools as well as inner glow too.