P o r t f o l i oStephanie Ogden

Contact:Stephanie Ogden1358 E. 6400 S.Salt Lake City, Utah 84121801.518.2763stephogden4@gmail.com

Logos Letterhead Web Page Graduation Flier Business Card Shapes Shapes 2 Event Ad Montage Brochure Imaging

Table of Contents:

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 busi-ness. 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 in-terest. 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 look-ing 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.

L o g o s

Steph Ogden

UX Design

I

Steph Ogden

UX Design Creativity at wor

k for

you...

Steph Ogden

UX Design Creativity at wor

k for

you...

L e t t e r h e a dAt 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 infor-mation 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 writ-ing. That is the most important aspect of stationary, is what is written on it. I then placed in my con-tact 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 repeti-tion. Programs/Tools Used: Adobe Illustrator & InDesign

Steph Og

den

UX Des

ignI

Stephanie Ogden UI/UX Designs 801.518.2763 stephogden4@gmail.com

We b Pa g eFor 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 stat-ed in the Logo design explanation. We then made a screenshot of the webpage.

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.

F l i e r

B u s i n e s s C a r dI 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 infor-mation. 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 infor-mation. I added in border to tie it all together and create some repetition. Programs/Tools Used: Adobe Illustrator & InDesign

S h a p e sThese 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.

S h a p e sThese 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.

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

E v e n t A d

M o n t a g e I used a contrasting color scheme, very.. natures way - so to speak. Oranges greens, blues and yel-lows. The quote Used is I have sky above me, earth below me and FIRE within me. My target au-dience 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.

B r o c h u r eDescription: 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 inspira-tion 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 down-load 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.

Sum

mer

time

blues

*

Lets

make

some

mem

ories

What can we do with theseSUMMERTIME BLUES

Most impo

rtantly...

Be Creativ

e

Have FUN

!!

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

AND

I m a g i n gHere 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 col-or 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.