H T M LC S S

1 REPORT - MA 0 5 HTML AND C SS

SOFTWARE/EQUIPMENTSI have used the following softwares and equipments during the assignment:• Paper, pen and pencil• Omnigraffle• Adobe Illustrator• Adobe Photoshop• Adobe Dreamweaver

INTERPRETATION OF TASK

The main task was to create an online menu for a pizza or sushi restaurant that should be present-

ed as a web page by using HTML and CSS, and it should also function on various screen platforms

(from desktops to mobile phones). The look of the menu should be well-designed and appealing.

The emphasize should be on idea, typography, aesthetics and style. I chose to do an online menu

for a pizza restaurant. To solve this task I firstly had to create a fictitous pizza restaurant and give

it a name.

I could tell by looking at the content of the menu (text) that was given in the assignment, that the

restaurant do not have classical Italian pizza’s on the menu. The restaurant is serving pizza’s that

have been further developed in the US with thicker crust and more toppings. I started to do re-

search on the pizza market in Norway to find similar restaurants that offers similar kinds of pizza’s

to find the main competitors. I furthermore had to find the main target group for this pizza restau-

rant so the design of the website would be appealing and approach the right audience. I later on

used a client brief to make it easier to start planning the website.

I did several sketches on paper of the webpage to bring down ideas on placements of texts, images

and graphics. I created digital static wireframes of some of the sketches to give me a greater over-

view of the structure and layout before starting the coding process.

STRATEGIC DESIGN

In the planning on how to design the web page, I had to come up with a name to reflect the con-

cept of the pizza restaurant in the best possible way. I named the restaurant “At The Pizza Plaze”,

because the restaurant is the place where the food is served and where the customers come to

meet and eat. At the pizza place is where it all happens, even when the restaurant decide to invest

in catering/take-away.

Furthermore I needed to do research on competitors that have established restaurants/outlets and

are focusing on take-away in the norwegian market. The following three competitors are well-

known brands, and have high popularity and customer group:

M A N D A T O R YA S S I G N M E N T 0 5

R E P O R T

INTRODUCTION

The following report contains my work process and design options for creating an online pizza

menu as part of MA05 - HTML and CSS. This report starts of with a description of the assignment,

followed by the software and equipments I have used to solve assignment. Further on in the report

is my interpretation of the task (how I chose to solve the task), followed by a brief of the con-

cept, target group and competitors, a customer brief, methods I have used to create the webpage,

sketches, wireframes, and the design choices I have done. The report ends with a self-evaluation

and sources/references I have used.

BRIEF

This assignment was about screen-based design, where I was going to create an online menu for

either a pizza restaurant or a sushi restaurant. I decided on making an online pizza menu.

The pizza restaurant had noticed that their customers frequently visit their website and use the

website for the purpose to find contact information, book a table, and also to see what is being

served. The restaurant has started considering if they should be investing more in catering and

take-away. Because of this they want to design an online menu to add to their website.

Online menuLINK TO WEBPAGE: http://thereseha.com/pizzaplaze/menu.html

2 REPORT - MA 0 5 HTML AND C SS

1. dolly.no (Dolly Dimples)

One of the largest restaurant chain in Norway.

Dolly Dimples have restaurants across the country.

Offers online pizza ordering in the menu (delivery at home or pick-up at restaurant).

The web page is modern and fresh.

The web page is user-friendly and easy to navigate.

The web page has a neat and clean appearance, and emphasizes pizza images in menu.

2. pizzabakeren.no (Pizzabakeren)

One of the fastest growing pizza chain in Norway.

Pizzabakeren have outles across the country.

Focus on takeaways and offers online pizza ordering in the menu.

The webpage consists of graphic elements.

The webpage has different coloured backgrounds.

Each menu item is placed inside a text container with drop-down function to choose pizza size.

3. dominos.no (Domino’s Pizza)

Domino’s Pizza is the largest pizza seller chain worldwide.

Their ambition is to be the largest pizza chain in Norway.

Their aim is to deliver faster than it takes to cook a frozen pizza.

The web page uses pizza pattern as background.

The web page use tools to help the visitor interact with the website, ex. checkbox to only show

relevant pizza’s (vegetarian/hot/new).

The web page use images of the food.

The three competitors mentioned above have all developed functional online menus and are well

established in the norwegian pizza market. They reach out to many different customer groups, by

being available for restaurant/take-away across the country.

“At The Pizza Plaze” has a great and varied customer group, but the main target audience are stu-

dents and families. Students often come and share pizza’s together and this customer group would

also be interested in ordering take-away. Families come to eat at the restaurants everyday of the

week, as pizza is a great alternative when they are empty for dinner ideas at home.

The brief is containing 10 question to make it easier to start planning and developing the web page.

1. Please describe your business and the products/ser vices you provide.

“At The Pizza Plaze” is a restaurant serving pizza with thick crust and a great selection of toppings.

Currently, there is only one restaurant with good customer numbers. Many of the customers are

looking at the website to find out what is being served, so the restaurant is considering if it should

be investing more in catering or take-away.

2. What kind of visitors are you expecting on your website?

The visitors that are using the website are the customers eating at the restaurants, which is a wide

customer group. Still, the main visitors of the online menu would be students and families.

3. How do you want to be perceived in the market?

“At The Pizza Plaze” wants to be perceived as a professional pizza restaurant, with quality, good

service and friendliness.

4. Who are your competitors and how do you differ from them?

The most well-known pizza brands which have the largest pizza sales in Norway are the main com-

pettiors: “Dolly Dimples”, “Pizzabakeren”, and “Dominos”. “At The Pizza Plaze” differ from these com-

petitors by being local, having an own special pizza sauce and handmade pizza dough made in the

kitchen everyday.

5. Do you already have a website? If so, what do you like and don’t l ike about it?

The restaurant already have a website where visitors can book table and find contact information,

but wants to add an online menu to the website, because the restaurant is considering investing in

catering/take-away.

6. What actions do you want visitors to take on the site?

The visitors should easily see what is being served at the restaurant and be able to access the online

menu on their tablets and mobile phones as well.

7. Do you have any content for the website (logo, images etc.)?

The content of the menu is available in the attachment of this assignment, but images and graphics

are optional.

8. Do you have any brand guidelines?

The typography should be in sans-serif to give a slightly more modern appeal, but dont have any spe-

cific colour palette to use.

9. What is your deadline for completing the website?

12. October 2018

Customer brief

3 REPORT - MA 0 5 HTML AND C SS

10. Who will be resp onsible for maintaining the website? Will the person have

time and skilled to do so?

“At The Pizza Plaze” maintain the website, but only needs help to design and add the online menu

to the website.

CREATIVE METHODS

I put down my ideas and sketches on a piece of paper, trying to see how the ideas I had in my mind

would look like and to give me a fundamental to continue the work process of the web page.I used my

sketches and made som digital static wireframes, giving place to put the 24 pizza’s from the menu in

the layout. This made it easier to start coding the online menu.

For the visual part of the online menu, I searched the internet on the lookout for suitable pizza imag-

es, such as images of pizza kitchen, pizza chef, pizza dough, people eating at the restaurant, people

sharing pizza or simply just pizza images. The image had to look professional and representative to

restaurant and visitors. When starting to code the website in Adobe Dreamweaver, I tried out different

images I had picked out to use as part of the online menu, but it didn’t give the right appearance of

the web page. Instead I used illustrations of pizza and pizza ingredients, to give a neat and delicate

outlook.

INSPIRATION METHOD

To find inspiration on how to design the web page, I mostly used “Tripadvisor” and “Pinterest” to

find ideas. I used “Tripadvisor” to search and find popular pizza restaurants in the US and as well

in Europe. Then I visited the website of the pizza restaurants to look at the menus. On “Pinterest” I

searched on pizza menus (not online menus) and looked at the design to find elements I could use in

an online menu.

Moodboard

Sketches and wireframesBelow are the sketches showing ideas I had for the webpage. After the sketches some of the digital

static wireframes are attached.

4 REPORT - MA 0 5 HTML AND C SS

Wireframe 1 Wireframe 2 Wireframe 3 Wireframe 4 Wireframe 5

5 REPORT - MA 0 5 HTML AND C SS

STYLE/GENRE

This assignment focused on the aesthetic and the style, idea, and typography. “At The Pizza Plaze”

wants to be perceived as a professional restaurant with qualtiy, so I have designed an online menu

that gives a slight appeal of elegance, together with a neat and modern appearance. The header were

I orginally wanted to have a header image, got replaced with a gradient grey background were I added

pizza/pizza ingredients illustrations blending together with the background colour. I decided to keep

the colour variation to a minimum, but to get the web page to be more alive and appealing to the target

audience I worked on Adobe’s colour palette to find a “pop” colour that would be used on headings

and links. Also the purpose on using the “pop” is to achieve a better interaction with the visitor by

catching the eye’s attention on the right places.

TYPOGRAHY

The web page uses monospace typeface on headings and links to give sense of a more original look.

The body text uses sans-serif typeface to keep the design neat and clean. The CSS consists of several

fonts in case the first font option might not work when visitors is viewing the web page on different

kinds of browsers or platforms. Monospaced typefaces are usually used for typewriting, but can be a

good choice to use in minimalistic design and contribute to keep the web design to look clean.

COLOUR

I wanted to keep the colour variations on the web page minimal. The heading is in a grey gradient

colour that is fading to white into the menu content. To give the web page a boost, I used Adobe Color

CC as a tool to find a bright solid colour that could be used on headings and links to highlight these

sections of the web page and make the web page come alive.

SELF-EVALUATION

The work process through the assignment went very well. I have got insight on how important the

planning part of webdesign is to create a more efficient website, and it also helps to acheive a better

end result. I have as well increased my practice skills on how to use Dreamweaver and how to upload

the website to my webhost by using FTP.

REFERENCES/SOURCES

LESSON

Noroff Lessons - Introduction to Web Design

Design for Screen: Planning and Designing for Web

VIDEO

Lynda.com: Creating a first website in Dreamweaver by Paul Trani

Lynda.com: Dreamweaver CC essential training by David Powers

Lynda.com: Introduction to web design and development by James Williamson

BOOK

The Smashing Book 1, published 2011 by Smashing Media GmbH, Freiburg, Germany

INTERNET

https://en.wikipedia.org/wiki/Domino%27s_Pizza

dolly.no

pizzabakeren.no

dominos.no

https://www.dn.no/handel/norgesgruppen/dolly-dimples/domino-s-pizza/vi-skal-bli-storst-i-

norge/2-1-260019

https://www.typewolf.com/top-10-monospaced-fonts

IMAGES/ILLUSTRATIONS (WEB PAGE)

Designed by Freepik.com -

https://www.freepik.com/free-vector/italian-restaurant-brochure-with-pizza-sketches_1026013.ht-

m#term=pizza&page=2&position=25

MOODBOARD

https://www.behance.net/gallery/33301363/Cafe-menu-template

https://bpando.org/2013/01/21/branding-pizza-luxe/

https://designshack.net/articles/inspiration/monospaced-fonts-for-designers/