Download - Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Transcript
Page 1: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio2nd semester

by Maria Engtrø

TABLE OF CONTENTS

Portfolio WebM

Portfolio

Portfolio Report

MA 05 - Product Website Part 1

MA 05 - Product Website Part 2

MA 06 - Photo Essay

MA 07 - Branding and Packaging

3-22

23-44

45-48

50-70

72-90

91-128

129-152

portfolio.optimal-design.no

Page 2: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio

3

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

Page 3: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

5 6

Page 4: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

7 8

Page 5: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

9 10

Page 6: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

11 12

Page 7: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

13 14

Page 8: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

15 16

Page 9: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

17 18

Page 10: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

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.

DESIGN CHOICE

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

Page 11: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

21 22

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

Page 12: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

23 24

Page 13: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

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.

Page 14: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

28

Portfolio

27

Photo Essay

In this assignment we were to create a photo essay that portraited a personA 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~

Page 15: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio

29

Page 16: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio

31

Page 17: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio

33

Page 18: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio

35

Page 19: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio

37

Page 20: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio

39

Page 21: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio

41Branding 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.

Page 22: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Portfolio

43

Page 23: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

45 46

PortfolioA Short Report

Introduction

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.

Moodboard

Page 24: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

47 48

Research and work process

SKETCHES

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.

CREATIVE METHODS

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.

Design

Sources

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.

TYPOGRAPHY

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

https://forums.adobe.com/thread/564081

HOMEPAGE : portfolio.optimal-design.no

Page 25: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

ReportMandatory Assignment - 05

Product Websitepart 1

Page 26: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

51 52

MA 05 part 1

Page 27: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

53 54

MA 05 part 1Home Page

About Contact History

Page 28: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

56

MA 05 part 1IntroductionThis assignment was divided into two parts. Part 1 we were to create the most basic within designing a website. Sketch-ing, making a wireframe and making a mockup for the home page, was requirements for this first part of MA 05. I chose to go with the local bakery “Baker Brun” and have gathered most of the information from their webpages. Including making part of their logo vector in Adobe Illustrator.This assignment we had to think about typog-raphy and colors for screen based media. Get knowledge about basic scripting and cod-ing of websites (part 2).And to gather practical skills and knowledge of tools used in working with screen based media (production and editing of web pages) (part 2)To represent the product we were also given the task of photographing product images to be used for the front-end design. These images were a small part of the evaluation; we had to focus mainly on the front-end design.

Interpretation of the taskFor 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.First of all I had to decide what kind of audience to target and to come up with a product that would fit into this target group. I decided that the target group would be teenagers between 13-18 years old. And my product would be muffin with a sprinkle on top giving sparkle in your mouth when eating it. After deciding target group and product, I had to start think-

ing about what theme I should use for the website. I came to me right away. With bright clean colors of the 50’s it would

give the website a youthful look and exiting to see and read. I also had to figure out what kind of typography that would fit the

website. And I wanted something to be easy to read, yet catching to the eye.Then I had to take pictures of the new product in an exciting and youthful way. At last I had to put together all these elements in to a website.

Page 29: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

58

MA 05 part 1Strategic designFor this task I chose to target teenagers. The product was a muffin with a sprinkle that gives sparkling in the mouth. Something I think every teenager between 13-18 would like to try out.I wanted the website to be catchy and colorful and I decided to go with that 50’s look with polka dots for back-ground. This theme would be perfect with my neon colored sprinkle on top of the muffins.

InspirationTo get inspiration for this assignment I searched through the internet to try to find colorful websites with the color theme I chose. I also tried to find inspiration through vari-ous lessons on how to build a website. I looked at quite a few examples of mockups done by previous designers.

AnalyzeMany other bakeries has muffins with different flavours and

different toppings. But I have never seen any muffin with sprinkle that sparkles in your mouth when you eat is. The idea was taken from a soft ice that I bought at the mall here where they had this type of sprinkle on top. It was soo funny to eat. I had to get some sprinkle in different flavours to get the variety. Not only one flavour. And it looks better with these strong colours as well.So this is what seperates our product from the rest of the industry.

Page 30: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

60

MA 05 part 1Sketches

I started out doing a mind map about the assignment.

And I wanted to find a name and slogan for thenew product.

Idea for backround:

Then it was time to draw the wireframe for the website.

HOME

Page 31: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

62

MA 05 part 1ABOUT

CONTACT

HISTORY

Page 32: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

64

MA 05 part 1MOODBOARDS

Page 33: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

66

MA 05 part 1STYLEI wanted to go for a 50’s look on the webpage. So I search the internet to find some elements that would fit nicely into the design. I found a picture of light pink polka dots and some web-buttons that had fresh colors. I wanted the site to be catching the eyes of the teenagers.

TYPOGRAPHYThe logo was a jpeg picture which I made vector in Adobe Illustrator.But the typography for the rest of the website was decided mainly out of being strong, easy to read and suited for this kind of website for teenagers. I chose to use the serif type: Niagara Solid Regular for the headings and name of the product. Designed by Tobias Frere-Jones.For the menubar I chose to use the sans serif type : Calibri Bold as it’s very easy to read and is very well suited for these kind of button menu bar. • Designer: Lucas de Groot

NIAGARA SOLID REGULAR: Calibri Bold:

COLORSI wanted to use colors that was fresh and could be related to the 50’s. So I found colors using Adobe Kuler.

Page 34: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

68

MA 05 part 1

PICT

URES

LAYOUTFor the layout and grid I chose to use a very easy webpage design with the heading and it’s background at the top of whole page, going ¼ down on the page. This leaving room for the menubar on the left side and the main articles in the right side. The menubar is about 1/5 of the page’s width. The rest is left for the pictures and text/articles.At the bottom I wanted a footer, having some contactinfo, regardless of we having to put up whole page for this This contactinfo, heading and menubar was to be displayed the same at every of the 4 webpages. The only thing that was going to change was the items in the right side of the website which I decided to call the body of the webpage.

The product

There isn’t much more to say about the product really other that it is exciting to try out.I would defenatly go and try it even though I’m not a teen-ager any more. But as one of the slogans for this site is “ It brings out the youth in you.”

This product was to attract teenagers to the bakery. The muffin has sprinkle in different flavours that sparkles in your mouth when you eat it.The flavours are ;

AppleStrawberryBlueberryLemon

Page 35: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

70

MA 05 part 1Front end design of the homepage

SOURCESTypography

https://www.azfonts.net/load_font/niagsol.htmlhttps://www.azfonts.net/load_font/calibri.html

Company:http://www.bakerbrun.no/om-oss/http://www.bakerbrun.no/storhusholdning/

Logo:http://www.bakerbrun.no/

Lynda.comHTML essential Training by James Williamson

Youtube:https://www.youtube.com/watch?v=ZJt0B_Kt8Eo&list=WL&index=4https://www.youtube.com/watch?v=_ZG9WALskYchttps://www.youtube.com/watch?v=hGHP_5uxiSQhttps://www.youtube.com/watch?v=Fqhf-W3TYO4https://www.youtube.com/watch?v=ad3ZO2lZRrohttps://www.youtube.com/watch?v=YXh02Tb-q9A

Other:https://www.sitepoint.com/best-size-website/https://www.google.no/search?q=baker+brun+logo+vector&client=firefox-b-ab&tbm=isch&t-bo=u&source=univ&sa=X&ved=0ahUKEwjcpYCZ6ILQAhVBlSwKHawRDb0QsAQIIA&bi-w=1920&bih=947#q=shapes+vector&tbm=isch&tbs=sur:fc&imgrc=-24KMLKeq-bpJM%3Ahttps://www.google.no/search?q=cupcakes&client=firefox-b&source=lnms&tbm=isch&sa=X-&ved=0ahUKEwiJxp20zYLQAhXsa5oKHRb2B8YQ_AUICCgB&biw=1920&bih=947#q=cup-cakes&tbm=isch&tbs=sur:fc&imgrc=_

Buttons: http://www.freepik.com/free-vector/colourful-web-buttons-set_832322.htm#term=but-tons&page=1&position=2

Page 36: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

ReportMandatory Assignment - 05

Product Websitepart 2

Page 37: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

74

MA 05 part 2IntroductionIn the second part of this mandatory assignment it was time to start developing the web site in HTML and styling it with CSS. We had to make the minimum of 3 webpages and 1 stylesheet that consisted of

1. Index page (index.html 2. About page (about.html) 3. Contact page (contact.html) 4. External stylesheet (style.css)

I decided do add a fourth webpage consiting the history of the bakery.

5. History page (history.html)

When done, we had to upload out site to out webhosting area through FTP. (File Transfer Protocol)

Interpretation of the taskBeing a complete rooky about html and css, this was going to be a major challenge. I knew I had to be very organized during this sec-ond part of the assignment.

To have a clear structure of the pages and what goes on which page.How to build each site with html and how to style it with css seemed to me an almost impossible task. But I thougt by seeing different tutorials and reading tips from different sites, I would managed to come to the end result, a fictive web site for “ Baker Brun”.

Strategic designI wanted the site to look as close to the front end design as possible. This was a challenge, but the sollution for me was to use the elements from the front end design in Adobe photoshop and styling them in css. I had to create div for each element to get to style them one by one. I didn’t want to style all together. That would create a mess, both in the html, css and in my head. So I started placing the different elements with html and then styling it with css.

Page 38: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

76

MA 05 part 2InspirationI found it very hard to find inspiration for the second part of the assignment, when I had almost no idea what I was doing. So it was back to the basic and watching tutorials and read-ing up on the internet about the different groups and styles. Bit by bit the pieces started to fall into place and I got more and more inspired as I went on with the task.

“With knowledge comes great power”

AnalyzeAnalyzing this assigment I had to dig deep into the world of tutorials. How to set up the structure of the pages and how to style them. I didn’t have a clue really, but after numerous of tutorials some of it started to sink in. How I was suppose to build the structure and how to style it in css.

Sketches

Page 39: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

78

MA 05 part 2

Layout and execution

I wanted the layout to look as the front end design as much as possible. So I started out the html codes for my basic structure; logo, logo background, the flower, the four buttons and the footer. These elements was going to be on each website. The only thing I would change was the container on the right siden beneath the header.

<!doctype html><html>

<head><meta charset=”utf-8”><title></title><link rel=”stylesheet” type=”text/css” href=”style.css”/></head>

<body> </body></html>

The code above is the basic of all basics in html.

All HTML documents must start with a document type declaration: <!doctype html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

<link rel=”stylesheet” type=”text/css” href=”style.css”/> This is the required rel attribute that speci-fies the relationship between the current document and the linked document/resource.

THE BASIC HTML PAGE

Page 40: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

80

MA 05 part 2With this in place, it was time to do some serious coding. For me to place different elements on to the web page, I decided to use <div></div> tags so that I could style the specific different div tag in css afterwards. But for the meny I had to first use the unor-dered list tag and within making a class to style the entire navbar. Then I had to make a <li> tag defines the list item. I now had enought for the basic of the web page. Now I had to start adding all the other different elements for each web page.

THE HOME PAGE/ INDEX.HTML

I added the div id for the elements I was going to place on the home/index page.

<div> <div id=”background”> <div id=”footer”> <div id=”nyhet”> <div id=”tingling”> <div id=”buzz”></div> </div>

Page 41: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

82

MA 05 part 2For the about page I adde new div id’s for the ele-ments I was going to use on the om.html

THE CONTACT PAGE/ KONTAKT.HTML

For the contact page/kontakt.html I put in the background and here I wanted a contact form that people could write and send in. This I did by copying codes for a form from an internet site. So within these tags we have both the html code and style code (css)

Page 42: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

84

MA 05 part 2THE HISTORY PAGE/ HISTORIEN.HTML

For the last page history page/historen.htmlI just added the last three div id’s of the elements that was going on that page.

<div> <div id=”background3”> <div id=”footer3”> <div id=”historientext”> </div>

STYLESHEET /STYLE.CSS

First I hade to relate to the class tag menyHere I wrote in the measurements and posi-tioning I wanted

Next I had to make a style for the ul.

For the rest of the div tags i put in the images throught urls and placed them where I want-ed them through top and left. The with and height I copied from adobe photoshop frond end design.

The z-index property specifies the stack or-der of an element.So I had to use different z-indexes for the different elements on the pages

Page 43: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

86

MA 05 part 2

Page 44: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

88

MA 05 part 2Changes made before the final result

In the feedback I got, the tutor ment that my overall design was quite busy so I removed the polkadot background from the homepage and replaced it with a picture of the muffins instead. I wanted to keep the ornament/flower behind the nav menu. The images I used for the website was too large so it took a long time to load the webpages. This is not a good thing at all. So this needed to be changed. I haven’t done any other changes but I know there will always be room for improvement. I will take this knowl-edge with me into future projects.

Page 45: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

90

MA 05 part 2The webpages was fairly ok to set up and style with css. But my final element, the nav-igation menu was a “pain in the butt”. I just couldn’t figure out how to make the differ-ent png-buttons to link to the different pages. And the navigation bar ended up at the top of the page. How could I get them in the exact place as the front end design.I struggled with this for four day until I finally sorted it out. Instead of adding action to the pgn-buttons, I just added more navigation bars. I was sooo frustrated. I tried a million different aproaches, with no luck. Until I finally got some help to understand that particular code.

<nav> <ul class=”meny”> <li><a href=”index.html”><img src=”hjem.png”/></a></li> <li><a href=”om.html”><img src=”Om.png”/></a></li> <li><a href=”kontakt.html”><img src=”kontakt.png”/></a></li> <li><a href=”historien.html”><img src=”historien.png”/></a> </li> </ul></nav>

And then by styling the class “meny” I managed to move the navigation bar down on the left side where it belonged.

Finally, after four days of struggle with the same code, I made it! Halleluja!

Then we had to upload our html,css and images onto our webhosting area with FTP.I logged in to my webhost one.com’s controlpanel and uploaded all the files through their FTP program. This was a very easy task compared to the navigation bar.

Here is a link to the webpage:

http://optimal-design.no/index.html

Sourceshttp://www.w3schools.com/http://www.w3schools.com/css/css_navbar.asphttp://www.w3schools.com/cssref/pr_dim_line-height.asphttp://www.w3schools.com/html/default.asphttp://www.w3schools.com/tags/att_link_rel.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/cssref/pr_pos_z-index.asphttps://www.w3.org/Style/Examples/007/center.en.html#blockhttp://www.w3schools.com/cssref/css3_pr_background-size.asp

https://www.lynda.com/Dreamweaver-tutorials/Document-view-options/124084/138685-4.htmlhttps://www.lynda.com/search?q=photoshop+csshttps://www.lynda.com/CSS-tutorials/CSS-Shorts/536428-2.html?srchtrk=index%3a0%0alinktypeid%3a2%0aq%3a-style+css%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2https://www.lynda.com/CSS-tutorials/Who-course/372539/409278-4.html?srchtrk=index%3a0%0alinkty-peid%3a2%0aq%3aimg+src%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2https://www.lynda.com/Responsive-Design-training-tutorials/1357-0.htmlhttps://www.lynda.com/Dreamweaver-tutorials/Dreamweaver-CC-Essential-Training/124084-2.htmlhttps://www.lynda.com/CSS-tutorials/Responsive-Images/372539-2.htmlhttps://www.lynda.com/CSS-tutorials/CSS-Fundamentals/417645-2.htmlhttps://www.lynda.com/CSS-tutorials/CSS-Frameworks-Grids-2016-Q3-REVISION/504266-2.htmlhttps://www.lynda.com/Web-Interactive-CSS-tutorials/CSS-Core-Concepts/80435-2.htmlhttps://www.lynda.com/HTML-tutorials/HTML-Essential-Training/170427-2.htmlhttps://www.lynda.com/CSS-tutorials/Design-Web-Styling-Form-Elements/424047-2.htmlhttps://www.lynda.com/Photoshop-tutorials/Photoshop-CC-Web-Design/145211-2.html

http://www.corelangs.com/css/box/hover.htmlhttps://www.youtube.com/watch?v=10SwsoYNkVchttp://stackoverflow.com/questions/11056901/how-to-add-an-a-href-link-to-a-divhttp://stackoverflow.com/questions/21328055/how-to-target-the-href-to-divhttps://www.youtube.com/watch?v=rb1F9_q0su0https://www.youtube.com/watch?v=iOWzFqrdOVkhttps://www.youtube.com/watch?v=QQQ5YYVDcvAhttp://stackoverflow.com/questions/544010/difference-between-div-id-and-div-classhttps://www.youtube.com/watch?v=BNXWQONM9PA&t=392shttps://www.youtube.com/watch?v=S7-DaHRsLG8http://stackoverflow.com/questions/11056901/how-to-add-an-a-href-link-to-a-divhttps://www.youtube.com/watch?v=rb1F9_q0su0

https://www.one.com/no/

Page 46: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

92

REPORT

Mandatory Assignment 06

Photo Essay ~ Out of the deep blue sea ~

Page 47: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

93 94

Page 48: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

95 96

Page 49: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

97 98

Page 50: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

99 100

Page 51: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

101 102

IntroductionIn 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 pic-tures in a specific order. We were free to choose our model, but we were not allowed to choose

husband/wife, children and babies. This was to give the photo essay more credibility.

Interpretation of the task

My interpretation of this task was that we were to tell the world a story through a series of pic-tures of a person. 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.

The concept of this assignment was to show what a crabfisher do during a day. To show how hard work it is and to show how blessed some of the days can be with the sun shining or how awful it could be with wind and rain. This depends of course how the weather is the day of the shooting.

Concept

Page 52: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

103 104

Inspiration

The inspiration for this task was to really show people how hard work catching crab really is. The crabcages are heavy and the work takes it turn on your back. Since I have a little bit experience

with catching crab and I had a good friend doing this for a living, my choice was very easy.

AnalysisAnalyzing this task was fairly easy. I was to shoot lots of picture of my crabfishing man and nar-row it down to 6 pictures showing a story about him and his work. I was to shoot all of the pic-

tures in natural light since it’s difficult to bring a lightstudio into a fishing boat (sjark).

Moodboard

Page 53: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

105 106

For the composition of this photo essay I wanted to put the pictures in the order that he was working to give the sense of that this what it was that he was doing during a day. I didn’t want to

jump back and foward in time because this would only confuse the reader.The layout of the pictures was to be done on a light blue colour reflecting the colour from the sea

to give it a dymanic look.

Work processSchedule

- Take picture of the boat, boatnumber, equipment and a portrait of the man before entering the boat or when entering boat.- Take picture of him preparing his fishing gear- Take picture of him steering the boat- Take picture of him relaxing with a cup of coffee before he has to get to work- Take some picture of the environment but make it blurry so I don’t expose where his working. These places is supersecret- Take pictures of him working, catching crab and lobsters. Take some action photographs.- Take picture of him putting in bait.- Take picture of him and his dog- Take pictures of him dropping his gear into the ocean- Take picture of his buiy with his worknumber on.

Prehistory to the actual shoot:Stage one of my work process was to make som re-search of what a photo essay was and to have a look at others work to see how they have solved the task. When this was done, I had to choose who I was going to take a photo essay of. And as mentioned earlier in this report my choice was easy. I wanted to make a photo essay of my good old friend who is a crab fisher. I wanted to show what a day in his life a crab fisher was. Now I searched the internet for some pictues of other crabfishers and their working equipment to see what they focused on in their pictures. I had a thought in my mind that I wanted to show the boat, the fisherman and his eqipment for catching these crabs and of course a picture of the crabs he caught. I called him up and asked him if I could spend a day with him on his boat taking pictures of him while he was working. He was very positive and engaged to this assignment and agreed to sign the contract as well which was a very important task within this assign-ment. So I startet to fill out the contract and had to make minor adjustments to make the contract more credible. We met and he signed the contract.We had scheduled to shoot wednesday 19th of October. So we met at the dock heading out at sea after some things he had to prepare before we could go out. We hadn’t gone far before we had to turn again and set

for the dock. We had trouble with the engine. So on very slow speed we managed to get to the dock at late afternoone. Cold and wet we had to go home and wait for the next day.The next day we went down to his boat trying to fix the engine as best as we could so that we could head out to sea again. After going for a couple of hours out to the field where he had his crab cages, we hit trou-bles again. This time it was the hose to the watertank for cooling the engine that was broken. We found a small island to enter and had to stay there until the boat engine cooled of. We collected some water and put on the watertank and tried to fix the hose as best as we could. Again we had to turn back and arrived the dock late at night. Now I was determined that all of this was going to be fixed properly. So he ordered some parts and we had to wait 2 days. Of course didn’t the parts match the water tank, so we were stuck again. But now it was only a day until deadline of my assignment so I said to him that we had to figure something out quick. He went to his car and got a small tube of superglue. This he put on the hose and then we waited for it to dry. And out to sea we went again in a very slow speed not to put too much pressure on the hose.

Page 54: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

107 108

FINALLY!

We got out to where he had his crabcages in the sea. It was time to do some real shooting. I startet off taking pictures of him getting the buyi that was attacted to the rope that held 4 crab-cages on a line. And then I moved place and shooting at a different angle when i had gotten the crabcage on to his boat. Then I moved again and shot pictures of the crabs in the collect cage. And I moved again to get pictures of him preparing the crabcages after he had emtied them.

After taking hundreds of pictures, I moved inside the boat to try to take a nice picture towards the rear end of the boat telling the viewer that this was the end of the journey/day.

I tried shooting with different dephts and various angles but as we all know it not that easy on a small fishing boat to find places to stand without the camera getting wet and broken.

But I think I managed to take very many good picture concidering where I was and what space I had to work on.

Page 55: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

109 110

Sources

GOOGLE:https://www.google.no/search?q=fishing+crab&client=firefox-b-ab&tbm=isch&tbo=u&source=uni-v&sa=X&ved=0ahUKEwiUtp2o-PfPAhUCP5oKHcYlB7UQsAQINA&biw=1920&bih=947#tbs=sur:fc-&tbm=isch&q=crab+fishing

https://en.wikipedia.org/wiki/Photo-essay

http://digital-photography-school.com/5-photo-essay-tips/

http://improvephotography.com/30816/10-ideas-creative-photo-essays/

LYNDA.COMhttps://www.lynda.com/Photography-Foundations-tutorials/Editing-sequencing-imag-es/461913/500721-4.html?autoplay=true

https://www.lynda.com/Photography-Lighting-tutorials/Shooting-Photo-Essay-60-Minutes/170283-2.html

If you want to see a slideshow of the best photos, go to my You Tube - link belowImportant! Watch with sound.

https://www.youtube.com/watch?v=vFPAvOQYpCc

Page 56: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

111 112

Final changes.Instead of having many pictures on one page, I decided to use just one photo for each page in order to pace the story better, to create a build-up. Otherwice too much was revealed and too quickly.In order to not be too repetitive of some of the photos in this essay I decided to zoom in on the hands of the model to show the work he is busy with. This ment that I had to replace some of the photos from the original photo essay.I decided to replace photo nr. five of the crabs with one showing what he does. The fourth photograph seemed to have been taken in the shade, so I had to adjust the lighting and contrast slightly to lighten it and make the contrast stronger.I wanted to replace the sixth picture with one with more depht of field.

Page 57: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

113 114

Page 58: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

115 116

Page 59: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

117 118

Page 60: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

119 120

Page 61: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

Additional photos taken during this assignment:

Page 62: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

123 124

Page 63: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

125 126

Page 64: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

127 128

If you want to see a slideshow of the best photos, go to my You Tube - link belowImportant! Watch with sound.

https://www.youtube.com/watch?v=vFPAvOQYpCc

Page 65: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

129 130

Page 66: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

131 132

Page 67: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

133 134

Page 68: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

135 136

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

During this assignment we had to focus on the creation and integration of a brand. We had to make the different components work together to express the brand as a whole. At the same time the different elements also had to be in their own right and able to stand alone. We had to create a consistency throughout all of the four assignments consid-ering use of color, the composition, the typography and the language of form to get a clear vision of the whole concept.

Organic is the first word that comes to my mind. I wanted to create a brand that promotes organic dogfood. It’s nontoxic, pure and certainly good for dogs. I wanted my brand to reach out to dogown-ers who cares for their dogs health in a deeper level sort of. I wanted to use an eartly colour that reflects to nature and the natural ingredients in our dogfood. I also wanted to keep it simple with very few colors and a simple design that yet de-lievered a strong message of good health.

The targeted group is people from 30 years old and above that are critical about what they feed their

dogs. I wanted it to be appealing for both genre and I therefor chose to go with the main color; Green.

The more natural ingredients at the top of the list, the healthier it is for your dog. Most dogs will eat just about an-

ything, but responsible owners know that what goes inside our pets serves as the foundation for their health. The most important

thing you can do for your dog is to know what you are feeding them.

Page 69: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

137 138

ANALYSIS AND INSPIRATION METHODS

Having no experience with dogfood or dogfood brand what so ever, I found that a lot of re-search was going to take place during this assignment. I started out searching for different brands and different kind of organic dogfood to se what was out there on the market and to get an idea about how the design should look like and what ingredients was good for dogs. I also had to learn how to read the labels on the back, what they ment and so on. It was a long and interesting process. During my search I found most of the designs very confusing with too much going on regarding the design of their pagaging. Me on the other hand, wanted a simple and clean design and wanted no confusion of what was what considering labels and stuff. But I found some great names for different dogfoods. I wanted to dig a little deeper and found out that “Canis” was the latin word for dog. So this was going to be the name of my brand. The slogan; “the organic choice”.From my very tiny small experience with dogs through my best friend, I had seen her using a bucket of dogfood. This was so she didn’t have to go to the store every week to buy dogfood. I thought this was a very clever idea and also wanted to use buckets for my dogfood. I had to make three labels for my pagaging bucket. One in front, one in back and one for the top.

Research andwork process

I continued my search for dif-ferent designs at shutterstock, different food companies and picture search on google. I found many different sugges-tions to my design. But the simplest and with the clear-est message was the pawprint which kept appearing in many design. I really liked the idea of a pawprint with my name “ Canis” and the slogan under-neath it. Great! I now had some ideas to work with.

Page 70: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

139 140

MOODBOARD

Page 71: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

141 142

Design OptionsLOGO

First I started out thinking about names for this dog food product and what relation the name had to this particular product. I tried to come up with different names, but after

doing some research on the internet, it became quite clear what the name of the dog food product should be.

I found out that the Latin name of dog was Canis. And this was catchy and cool name for a dog food product, I think.

So I decided to go with “ Canis”. The slogan was to be ; “ the organic choice”

Then it was time to put some of my sketching techniques at test. I’m not the best sketcher in the world, so I had to watch some videos of how to actually draw different “dog-things”. After a little bit of practice I started drawing a logo for the dog food product “Canis”. And here is the result of my sketchings:

Page 72: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

143 144

For the packaging I decided to use the elements from the brochure on the three labels. For the front I used the elements from the front page and on the left side, I added some of the elements from page 3 in the brochure. It con-tained information about Organic food and the minerals and vitamins. On the right side, I wanted to put the barcode and the QR Code divided by the ingredient procentage. I also added the grass in the background on both sides to keep the structure from the brochure on to the package.

On the back label I wanted to put the infographic used in the brochure to gain some con-stancy between the design el-ements in this task.

For the top label I just added what was on the front of the brochure minus the footer shape.

BROCHURE AND INFOGRAPHIC

For the brochure I wanted a simple and clean design and at the same time I wanted it to be straightforwardly.I wanted each element to stand out and show it’s special meanimg. To this brochure we had to add a infographic as well. I decided to use the leaf from the slogan, the dog silhuette from the logo assign-ment and some tiles with information about the product. Ingredients and such. I also used the sihuette of the dog in different colours to set the different weightgroups of dogs and what amount of food they should have. These were divided into three different categories and boxed togeth-er with info about amount of dogfood.I wanted the front page to be as clear and clean as possible, so I added just the logo and the picture of “ Fabian”, my friends dog. At the bottom of each of the pages I wanted something to sumilate movement, so I added the green rectangle and divided it into squares and a longer rectangle at the edge of the page. All of the pages has a green boarder. This was to have the same structure for each page. Then at the last page I added the contactinfo. Very tidy and straightforwardly.

PACKAGING

Page 73: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

145 146

POINT OF SALE“Point of Sale refers to the touchpoints that are present where the product is being sold or purchased. These touchpoints do not necessarily always have the same type of design, nor does it have a standard format or a set shape or look. It is what the design-er thinks it should be, while bearing in mind that the client may have a limited budget and/or limited space. Point of Sale is quite an exciting and versatile field.”

(Source: LA week 29 - Point of sale, Noroff)

In this assignment we were to create a stand to display our product and show our brand. This was a little tricky at first, but I downloaded a shelf from google pictures, marked as “ for reuse”, and started stacking my buckets into the shelves. At the top shelf I wanted the brochures to be, so it was easy for people to read and grab one on the way. At the top of the shelf I wanted to show the logo, so I created a kind of poster with white surrounding the logo with a green background color to match both the logo and the shelf. Then I had to place it into a picture of a store. This I also found in the same way as the shelf since I wasn’t capable to go out and take the picture myself at the time.

I think my stand stands out and invites people to have a look at this product.

Page 74: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

147 148

ColorsC: 100 M: 0 Y: 0 : 0

C: 75 M: 0 Y: 100 : 0

C:0 M: 100 Y: 100 : 0

C: 35 M: 60 Y: 80 : 25

FontStencil Regular

Minon Pro Regular

Myriad Pro Regular

Ab ium doluptA tessequAe. Aturiberum que eA nAm sAm ipsum reserum

Ab ium dolupta tessequae. Aturiberum que ea nam sam ipsum reserum

Ab ium dolupta tessequae. Aturiberum que ea nam sam ipsum reserum

Page 75: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

149 150

SELF EVALUATIONThis has been a very comprehensive assignment which demanded a lot of structure and planning.

I think I’ve managed the different assignments quite well. The first assignment, creating a logo, was maybe one of the hardest one. And I had a lot of trouble deciding which logo to use. But I finally got a finished result that I was happy with.

One of the challenges in this assignment was to get a consistensy throuhgout the whole prosess. But by keeping it simple and with very few colors and font types I think I managed to create a good brand. This assignment was a huge challenge for me considering a lot of sickness during this assignment. But I’m very pleased with the end result and what I have achieved. The one thing I can point out was that I used too much time on the logo assignment and created too many different logos to choose from. This got me very confused and I almost lost track of the whole assignment. But I managed to get through it....at the end.

I have not gotten any feedback on my assignment filing so no changes has been made to this assignment.

Page 76: Portfolio WebM Portfolio - WordPress.com...Portfolio WebM Portfolio Portfolio Report MA 05 - Product Website Part 1 MA 05 - Product Website Part 2 MA 06 - Photo Essay MA 07 - Branding

151 152

SOURCES AND REFERENCEShttps://www.google.no/search?q=dog&client=firefox-b&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiPoKqnxsbQA-hUIAcAKHZqfC6AQ_AUICCgB#tbs=sur:fc&tbm=isch&q=dog+food

https://www.google.no/search?q=dog&client=firefox-b&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiPoKqnxsbQA-hUIAcAKHZqfC6AQ_AUICCgB#q=dog&tbm=isch&tbs=sur:fc

https://www.google.no/search?q=dog&client=firefox-b&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiPoKqnxsbQA-hUIAcAKHZqfC6AQ_AUICCgB#tbs=sur:fc&tbm=isch&q=tincan

https://www.google.no/search?q=dog&client=firefox-b&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiPoKqnxsbQA-hUIAcAKHZqfC6AQ_AUICCgB#tbs=sur:fc&tbm=isch&q=canned+food&imgdii=n8DahHwwz_b3gM%3A%3Bn8DahH-wwz_b3gM%3A%3Btyp3G-Sq1Wjw8M%3A&imgrc=n8DahHwwz_b3gM%3A

https://www.google.no/search?q=hund&client=firefox-b-ab&source=lnms&tbm=isch&sa=X&ved=0ahUKEwii8Pyo28fQA-hUBAsAKHfo1A-IQ_AUICCgB#q=hund&tbs=sur:fc,isz:l&tbm=isch

https://www.wag.com/dog/p/newmans-own-organics-beef-liver-117305?clickid=13qRJJSK4RnEQfLQq21GYUN9UkkQR-jwZhWHG3o0&cvosrc=affiliate.65501.Organic+Pet+Digest&utm_term=Online+Tracking+Link&utm_content=Organic+-Pet+Digest&sharedid=&utm_medium=Affiliate_W&utm_source=IR&utm_campaign=IR_W&irgwc=1

https://www.google.no/search?q=wet+dog+food&client=firefox-b-ab&biw=1920&bih=947&source=lnms&tbm=is-ch&sa=X&ved=0ahUKEwjJptSzx8zQAhUMJMAKHeD_AvoQ_AUIBigB#tbs=sur:fc&tbm=isch&q=clipart+can&imgrc=_https://www.google.no/search?q=wet+dog+food&client=firefox-b-ab&biw=1920&bih=947&source=lnms&tbm=is-ch&sa=X&ved=0ahUKEwjJptSzx8zQAhUMJMAKHeD_AvoQ_AUIBigB#tbs=sur:fc&tbm=isch&q=clipart+carton&nf-pr=1&imgrc=_

https://www.wag.com/dog/p/newmans-own-organics-training-treats-4-oz-118095?sku=NEW-031&qid=905098353&sr=1-5

https://www.wag.com/about-us/contact-us

https://pixabay.com/no/

https://www.lynda.com/