by Maria Engtrø
TABLE OF CONTENTS
MA 05 - Product Website Part 1
MA 05 - Product Website Part 2
MA 06 - Photo Essay
MA 07 - Branding and Packaging
This is the portfolio,
a journey through the
work I have done during
the second semester as a
Grapic Designer student
One of the final assigments for our first year, was the first of two parts of the exam, the Interactive Webm Portfolio. I
had to product a website that represented me as a designer. The website had to have a link to my reflective jounal on
wordpress and to Mandatory assignments
* Assignment 05 - Product Website
* Assignment 06 - Photo Essay
* Assignment 07 - Branding and packaging
First we had to make our own database in Dreamweaver, install wordpress to our machine from wordpress.org, setting
up the local and remote server in Dreamweaver, the remote server was my hosting service at one.com, and connected it
to the webadress; portfolio.optimal-design.no.
I started out by making a child theme of the template Twentysixteen in wordpress. The reason why I did that was be-
cause if the original theme was changes my child theme wouldn’t change. Then we had to style this theme using css to
create our own layout/template. I used the css-styler in wordpress and in Dreamweaver.
I wanted to create a clean website that was easy to navigate. So I started out by removing all the sidebar widgets. I
didn’t need them and I felt they cluttered the website. I also wanted consistency thoughout the layout on every page so
I placed a background picture from one our photoassignments. Then I created a header image and styled it with css
so it would be a little bit transparent to get a nice effect. The menubar I placed at the top right with a dropdown menu
for the mandatory assignments. Then I placed my logo on the top right. This was to get a dymanic and symetrical feel
of the page layout. Then I removed the borders on the menubar so the lines between dissapeared. I also changed the
backgound color of the menubar to black and made it with the same opacity as the header image. The font color was
changed to white.
I chose to have four pages attached to the menubar and 3 subpages attached to the mandatory page as a drop-
down menu. I also changed the color of the font to white.
For the body layout, I changed the backgound color of the box to black and set the same opacity as the header
image and the menubar. By menubar I mean the navigation bar.
For the about me page I wrote a little something about myself and added a picture of myself taken by my friend,
Ingrid Sagdahl Forr back in 1992. I thought this picture went very well with the rest of the layout.
For the mandatory pages, I placed pictures of the finished product and added a link to the full reports.
This was to give the readers an opportunity to have like a sneekpeak of what I have created by making phot-
sliders of each assignment. And if they wanted to know more, they could just press the link beneath to the full
reports. I wanted to do it like this instead of having the readers had to go through tons of stuff on the actual web-
site. It can be discouraging and the reader can easily get bored and just don’t want to see the rest of the website.
For the last page, photo gallery, I created a photoslider with many of the pictures I’d been taken during my time
at Noroff. Also here with same opacity to get the nice effect of the background picture slightly shining through.
To get all these sliders I had to download a plugin which I placed in to the different pages where they where
Alle the styling done in this webpage like font color, background color, placing, opacity and so on was done by
me through css and the pictures was set to rgb saved for web. The logo I saved as png to loose the white back-
link to my website: portfolio.optimal-design.no
The original theme ““TWENTYSIXTEEN” compared to my child theme “TWENTYSIXTEEN-CHILD”
25 Product Website
For this assignment we were hired by a local bakery, as they were launching their latest
bakery product. They were in need for a stand-alone campaign website.
We had to take charge of their conceptual development, and the web marketing for this
product. We also had to take pictures of the new products.
In this assignment we were to create a photo essay that portraited a person
A photo essay is a series of photographs communication a story. We didn’t have to put the pictures in a specif-
ic order. The challenge in this assignment was to narrow all the picture taken down to 6 photographs and one
black and white photograph in addition to use as the cover.
~ Out of the deep blue sea~
Branding and Packaging
During this project we were given the assignments one by one through different learning activities to complete our
Week 1: We had to develop a name for a dog food product and design a logo for a dog food product.
Week 2: We had to create an illustrated infographic and a brochure for our product.
Week 3: We had to design a package for our product, make a life size mock up and photograph it.
Week 4: We had to design a point-of-sale, photograph all elements together, make a professional presentation
and write the report.
A Short Report
We had to write a short report on
how we made our portfolio, design
choices and colour choices. I wanted
to keep things clean and easy with
the layout and keep a constancy
throughout the portfolio.
Interpretation of the task
My interpretation of this task was to make a
nice layout to make the portfolio interessting
to read. I wanted it to be straightforwardly
and eay to read. We also had to include all the
finished products and report for each manda-
tory assignment. This I chose to put after the
The strategic design for this layout
was to divide each Mandatory as-
signment. I did’nt want to do it as
the portfolio in the first semester
by dividing it with different colors.
I wanted just to divide the assign-
ments using pagenumbering. I
wanted to make a clear front page on
the portfolio followed by the table of
content. Then I wanted the portfo-
lio to have some air before I started
with the main content.
Research and work process
I had a clear vision about how I wanted
this to look like so there are no sketches.
I made a facing A4 pages in In Design
and set up guidelines. And then I insert-
ed the different reports for the portfolio.
I started out by looking for some dif-
ferent portfolio designs at pinterest.
And a found several that I thought
had a great design. I chose to go with
the colors black and white, but use
the main colors of each assignment.
Like turquoise, green and blue.
COLORS, COMPOSITION AND LAYOUT
In this portfolio/report I wanted to experiment a little bit. I didn’t want this constant page layout. I wanted each chapter to be different
from one another to catch the readers eyes. Make the portfolio more insteresting to read. By using page numbers it should be fairly easy
to find each chapter.
I decided to use colours that match each report.
I used Minion Pro and Calluna Sans throughout the portfolio. These fonts goes very well together.
They are very easy to read.
HOMEPAGE : portfolio.optimal-design.no