portfolio webm portfolio - ... portfolio webm portfolio portfolio report ma 05 - product website...

Click here to load reader

Download Portfolio WebM Portfolio - ... Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part

Post on 28-May-2020




0 download

Embed Size (px)


  • Portfolio2nd semester by Maria Engtrø


    Portfolio WebM


    Portfolio Report

    MA 05 - Product Website Part 1

    MA 05 - Product Website Part 2

    MA 06 - Photo Essay

    MA 07 - Branding and Packaging










  • Portfolio


    This is the portfolio, a journey through the work I have done during the second semester as a Grapic Designer student at Noroff.

  • 5 6

  • 7 8

  • 9 10

  • 11 12

  • 13 14

  • 15 16

  • 17 18

  • 19 20

    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 needed.

    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- ground. link to my website: portfolio.optimal-design.no


  • 21 22

    The original theme ““TWENTYSIXTEEN” compared to my child theme “TWENTYSIXTEEN-CHILD”

  • 23 24

  • Portfolio

    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.

  • 28



    Photo Essay

    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~

  • Portfolio


  • Portfolio


  • Portfolio


  • Portfolio


  • Portfolio


  • Portfolio


  • Portfolio

    41 Branding and Packaging

    During this project we were given the assignments one by one through different learning activities to complete our mandatory assignment.

    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.

  • Portfolio


  • 45 46

    Portfolio 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

    portfolio pictures.

    Strategic Design

    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.


  • 47 48

    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.




    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.

    https://no.pinterest.com/ https://www.google.no/search?q=portfolio&client=firefox-b&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjMwfyig87RAhUmMJoKHRPaAPMQ_ AUICCgB&biw=1920&bih=947

    https://www.google.no/search?q=moving+master+pages+in+indesign&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&ei=_Pp9WN35Ksn- HZOvuqfAP


    HOMEPAGE : portfolio.optimal-design.no

    https://no.pinterest.com/search/pins/?q=portfolios&rs=typed&term_meta https://www.google.no/search?q=portfolio&client=firefox-b&source=lnms&tbm=isch&sa=X&ved=0ahUK