Kate Locke has created various design projects for her portfolio including a webpage mockup, brochure, magazine cover, and business identity. She outlines the process for each project, which generally involves initial research, sketching layout ideas, creating designs in software like Photoshop and Illustrator, and sometimes gathering feedback to refine her work. The portfolio showcases Kate's skills in graphic design, photography, and digital media creation.
2. KateLocke
Table of contents
Web Page Mockup
Brochure
Montage
Magazine Cover
Photodesign
HTML & CSS Coding
Prezi Presentation
Business Identity
Infographic
3. Web Page mockup
DESCRIPTION: A webpage designed for a photography business using a
wire-frame in Photoshop.
PROCESS:
1. I chose to create a photography webpage since the logo I designed looks
like a shutter on a camera.
2. I made some sketches of layout possibilities for the webpage I wanted to
make. I knew that I wanted to create a header that is easy to navigate and
I wanted to show the different photo galleries up near the top so it would
catch viewers’ attention.
3. After I made the sketches, I opened up Photoshop and began creating
a wire frame using the 12-column grid. I followed sketch #3 as closely as I
could when I was designing the wire frame (layout).
4. Once my wire frame was finished, I began adding the photos I wanted to
use and used the rectangle tool to create the shapes that I wanted for my
webpage. I made text boxes to create the tabs in the navigation bar as well
as writing any more necessary information for the webpage.
5. I made a few minor changes as I was designing this webpage, taking into
account some of the feedback and advice I received from classmates and
friends. I also realized that through designing the page, that certain things
needed to be changed or moved around in order for the webpage to be more
visually pleasing.
4. BROCHURE
DESCRIPTION: A webpage designed for a photography business using a
wire-frame in Photoshop.
PROCESS:
1. I chose to create a photography webpage since the logo I designed looks
like a shutter on a camera.
2. I made some sketches of layout possibilities for the webpage I wanted to
make. I knew that I wanted to create a header that is easy to navigate and I
wanted to show the different photo galleries up near the top so it would catch
viewers’ attention.
3. After I made the sketches, I opened up Photoshop and began creating
a wire frame using the 12-column grid. I followed sketch #3 as closely as I
could when I was designing the wire frame (layout).
4. Once my wire frame was finished, I began adding the photos I wanted to
use and used the rectangle tool to create the shapes that I wanted for my
webpage. I made text boxes to create the tabs in the navigation bar as well
as writing any more necessary information for the webpage.
5. I made a few minor changes as I was designing this webpage, taking into
account some of the feedback and advice I received from classmates and
friends. I also realized that through designing the page, that certain things
needed to be changed or moved around in order for the webpage to be more
visually pleasing.
5. Montage
DESCRIPTION: A poster montage of two blended images with a spiritual
message.
PROCESS: I had a faint idea about what I wanted my montage to look like
in the beginning, so I chose the image of a guy on top of a mountain be-
cause mountains are spiritual to me. I then looked for an image of a man
kneeling because I wanted to show that through prayer and humbling your-
self before God, that He gives us strength. This was my process for this
design:
I opened my two images in Photoshop and put them into layers. I made a
layer mask for the kneeling man picture and used the brush tool to erase
the parts of the image I didn’t want to see. I then lowered the opacity and
used the brush tool again (reduced hardness) to blend him in with the back-
ground image.
Then I found a quote that I thought was very fitting for my theme and I
added it to my montage. I put emphasis on “weakness” and “strength” by
changing the font styles and the sizes.
I made sure that I had proper font alignment and I made sure that my font
colour was easy to read against the background. I also checked the space
6. Magazine cover
DESCRIPTION: A magazine cover designed to showcase a
self portrait, as well as interesting “article headlines”.
PROCESS: I opened up a self portrait that I liked into InDe-
sign. I brainstormed some possible faux article headlines that
would tell people a little bit more about me. I thought about
what an actual article about me might look like. This helped a
lot with finding interesting “headlines”.
I experimented a lot with the text by using different fonts and
colours to see what worked and what didn’t. I made sure that
everything was aligned properly for my magazine cover be-
cause alignement makes a huge difference in any project.
I googled a bar code image and added that to my magazine
cover to make it look more realistic.
7. Photodesign
Description: I created a design that demonstrates an
analogous colour scheme and a photograph with good
composition.
Process: I took a photograph at the Oregon Coast which
displayed analogous colours. I decided on the colour
scheme after I took some pictures during my trip. I made
some minor edits to my image in Lightroom (such as ex-
posure, contrast and vibrancy) and then I exported it into
Photoshop where I followed the video tutorial on I-Learn
and figured out how to resize my image and create co-
lour swatches for the colour scheme of my image. I de-
cided on a quote that I love and also one that would go
well with my image.
8. html & css coding
DESCRIPTION: I created a webpage with custom coding with HTML and CSS.
PROCESS: 1. I designed the logo in Adobe Illustrator with the idea of making some-
thing that resembles a shutter from a camera while still being logo.
2. I then used the logo on my letterhead and business cards which I designed in InDe-
sign.
3. I used a monochromatic colour scheme of different shades of red.
4. I created my HTML file and started adding my content and tags.
5. Then I created my CSS file and made sure to link it in the HTML code.
6. I made customizations in my CSS to try and match the colors in my logo and
changed the fonts to what I preferred.
7. I chose a picture of poppies as my background to go along with my monochromatic
colour scheme.
8. I then validated my HTML and CSS
9. Prezi
presentation
DESCRIPTION: Presentation about how to be happier de-
signed in Prezi.
PROCESS: I found an image on Pixabay that I felt conveyed
my message. I designed a layout that is easy to follow, as well
as the slide transitions. I felt that this would be best for my
topic.
I created this presentation by thinking of 10 things that can in-
stantly make people happy. Not only did I mention things that
personally make me happy, but I also asked my roommates
and other people if they could agree with the 10 ways I list in
my presentation. I only used one image in my presentation
which I downloaded from PixaBay. I kept the transitions from
each slide simple to go along with the straightforward theme
and mellow feel.
10. business identity
DESCRIPTION: A creative logo I designed to put on a
letterhead and business cards for photography business to
establish a presence and visual representation for my busi-
ness.
PROCESS: I designed the logo in Adobe Illustrator with the
idea of making something that resembles a shutter from a
camera while still being logo. I then used the logo on my
letterhead and business cards which I designed in InDesign.
I used a monochromatic colour scheme of different shades
of red.
I came up with three different logos and chose the one that I
thought would be best for my business while conveying what
I wanted to say without being too cliche.
11.
12. infographic
DESCRIPTION: An info-graphic which contains
interesting facts about Halloween in a visually
pleasing way.
PROCESS: I did some research on facts about Hal-
loween and used the ones I found most interesting
in my infographic. I then opened up InDesign and
created a purple background and used white boxes
and circles to put my facts into. I also Googled and
downloaded a few Halloween themed images to
include so that my infographic wouldn’t be boring for
the viewer.