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/