Mama Mia’s Pizzeria Stage 4 – Branding Part 2

In preparation for the menu page design for the website I decided to tackle redesigning the pdf version of Mama Mia’s menu. The current menu is dated and hard to read and I really wanted the new version to match the branding that I’ve already created for the website redesign. This is my first time designing a menu, and the first time doing any real graphic design work in years, but I think I was able to achieve my goals.

My goals for this redesign:

• Modernize the menu
• Improve readability
• Match the design to the branding I’ve created

Here are some side by sides of the original design and my redesign.

Original Cover

My Cover

For the cover, I decided to keep things very simple and I stuck very close with the design that I used on the website. This cover is essentially the header that I used across the website.

For reference, here is a screenshot of the website beside the menu cover.

My Cover

Original

The next page was very crowded, so I ended up breaking it up into two pages to improve the readability. The last section, with the Stromboli and Calzones is from page 4 in the original menu, but I thought it fit better here.

Original

The pizza page contained a lot of information, and I felt like the toppings list was not user friendly. I decided to break the toppings down by category and give them more space on the page.

Original

I am really pleased with how the last page came out. Because I moved the Stromboli and Calzones Section I was able to have plenty of space on the last page for a large image. The sections on this page were all small a easy to manage compared to some of the other pages of the menu.

I also decided to make a final page for the menu, I guess it would be the back cover for a print menu, although I did not create spreads, just individual pages since I knew I was intending this for web use only. I thought that this would be a more appropriate place to list the locations/hours/phone/etc. Originally this information was on the front cover.

You can view the full PDF [HERE].

Mama Mia’s Pizzeria Stage 5 – Coding Part 5

I’m trying to wrap up this project, so rolling full steam ahead I designed and coded the about page. This was a very simple page so I knew I would be able to put it together quickly. The existing site does not have an about page, so I used some information that is included at the bottom of their existing menu. Of course if I was actually creating this page to be used by the business I would find out more information about the history of the company itself and a company statement.

I skipped straight to the coding with this one since I knew I was planning to keep things very simple.

Here is a screenshot of the completed page.

I’m sure I will still tweak the design a little, I did throw this together fairly quickly, but it’s not an area of the site that I’m planning to concentrate much time on. The next big design challenge will be the menu page. I haven’t completely decided how I want to approach it yet, but I do know that I want to have a web version of the menu available, unlike the current site which only provides a PDF. I’m sure you will hear from me again before the weekend is over.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

Mama Mia’s Pizzeria Stage 5 – Coding Part 4

Over the past couple of days I worked on designing and coding the locations page. This was my first time working with the google maps API, but I have worked with other google APIs in the past, so it was pretty simple to figure out the basics.

I started out by doing some thumbnail sketches of possible layouts.

I toyed with the idea of having one map with both locations, but the two locations were far enough away that you couldn’t see much detail about the cross streets or nearby businesses on one map. Because of this I decided to go with one map for each location.

I decided to keep things pretty simple, but I could always go back and add more features. I kind of the like the idea of the last sketch where a map with both locations is displayed and then a div with more specific information would be displayed once you selected a location.

I skipped the prototyping stage for this page and went straight into coding, so it came together pretty quickly.

Here is a screenshot of the completed page.

I am happy with how the page turned out, although I have not done much testing different screen sizes, so there are some more tweaks that will need to be made.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

 

 

 

Mama Mia’s Pizzeria Stage 5 – Coding Part 3

To finish up the main functions of the contact page I decided to go with a jQuery plug-in to perform the validation functions for my contact form, and I’ve used a php file to process the posted data.

Here is a screenshot of the contact form, it hasn’t changed since my last post.

 

The validation rules for the form are fairly simple. The first name and last name fields just need a minimum length of 1 character.

The email field should contain a valid email address.

And the comment box should have a minimum of 100 characters.

All fields in the form are also required before the form can be submitted.

Once the form is successfully submitted an email containing the data will be received.

There are still some stylistic changes that I would like to make, especially for the email that is sent. I also plan to use Ajax when processing the form so that I can display a success message directly on the page rather than using a pop up window. Another thing I would like to add is a confirmation email for the user. These changes will probably not take place until I’ve finished some more functionalities/pages for the site.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

 

 

 

Mama Mia’s Pizzeria Stage 5 – Coding Part 2

Moving right along with this project, I have completed the basic coding for the contact page. Of course the main component for this page is the contact form. I have laid out all of the form elements, now the next step will be to set up the input validation.

I created a quick layout in Adobe XD:

I stuck pretty closely with this layout when coding, though I did change the submit button. I may still add some more elements to the page as it seems a little bit plain at the moment, but we’ll see.

Here is a screenshot of the current look of the page:

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

I have made many forms before, both for personal projects and school, but one thing I did come across while making this page was a CSS property I have never seen before, which is the box-sizing property. The box-sizing property allows you to set elements to calculate their size including padding and borders. So if you set an element to be 250 px wide, and have 5px of padding and a 1 px border, the overall width of the element will still be 250, rather than 262px.

Here is an illustrated example:

Without box-sizing:

With the box-sizing property set to border-box the total width for the element will be the size you set it to, so if you set a width of 250 px the total width will be 250 px.

With Box-sizing:

For more information you can read the W3 Schools article on the box-sizing property [HERE].

 

Mama Mia’s Pizzeria Stage 5 – Coding Part 1

Over the past couple of days I began coding the homepage for my Mama Mia’s Pizzeria site. I started out coding traditionally, the way I normally do, using pure HTML and CSS. Having created a mock-up of the different sections of the site and figuring out how I would layout the divs, it was fairly simple to create the code for the page.

Overview of AI file

Header Layer

Navigation Bar Layer

Body Layer

Footer Layer

I initially just worried about the structure of the page, making everything look just right, getting the design right. Then I moved on to some of the bells and whistles so to speak. The big task for this page was the photo gallery. This was my first time coding a photo gallery from scratch. I wanted to see what I could come up with, without looking at anybody else’s existing gallery plug-ins. I did look at the W3C article on automatic slideshows to figure out the automation part. They executed their slideshow by creating multiple divs and then only displaying the active div, which is something I have done in the past, most recently for a data mashup visualization[GitHub] I created. For my slideshow I created one div, and set the background image based on the class assigned to the div, so essentially the buttons just change the background image for the div, and the carousel loops through the different backgrounds.

The next major step I took in the project was to look into templating frameworks. From the articles I found, nunjucks sounded like the best choice, so I followed a couple tutorials to get an idea of how it worked, and then I converted my existing code into a nunjucks project. There was a bit of a learning curve because I have never used gulp before, but I can already see that it will save me a lot of time as I begin coding the rest of the site. In the past I have handled “templates” by converting all of my pages to php and using includes for reoccurring sections of code.

Nunjucks is much better for this though for several reasons. One big reason is the ability to create a layout template which includes everything from the HTML tags and metadata to the navigation bar and footer. With php includes I would not be able to include the basic layout because you can only include uninterrupted chunks of code. I would also have to include the navigation and footer separately for the same reason. With nunjucks the code I write for each new page has been reduced down to just the body content.

nunjucks code for the index page

snippet from the nunjucks layout code

Another advantage to nunjucks is that I can preview my website without having to run a server, php of course is a server side language so in order to view the site you need to run it on a server. The workflow is much easier for me with nunjucks. I have just barely scratched the surface with can be done I know, but I look forward to learning more as I move forward.

The tutorials that I looked through were:

Nunjucks: A JavaScript Template Engine – Medium.com

How to Modularize HTML Using Template Engines and Gulp – Zellwk.com

I have started a github repository for this project located [HERE].

A live version of the site can be found [HERE].

Here are some screenshots of the site so far:

Mama Mia’s Pizzeria Stage 4 – Branding Part 1

 

Existing Logo

Updated Logo

Example of updated logo as it would appear on the homepage

As I continue to work on the design for the homepage, I decided to take a break and create a very simple, updated version of the existing logo for Mama Mia’s. This is not a final version by any means, hence the title of this post, but it does help to see a more clear vision of the what the site will look like. The existing logo is low-res and has a lot going on, so I just scaled back some of the features in the logo and focused on what I felt were the more important aspects.

This is just the first design that came to my mind when I thought about how to update this logo, so I’m sure I will go back and sketch some more ideas and of course play with the typography and smooth out the line work.

Update:

Reworked the logo a tad, here is the updated look at it.

Mama Mia’s Pizzeria Stage 3 – Design

This is just a quick update on the Mama Mia’s Pizzeria project. I quickly started throwing a homepage design together using Adobe XD. I tried to stay with the same feel that the site already had, but a little more modern and clean. I still plan to work on updating the logo a bit.

Version 1

Version 2

I used the colors from the logo as inspiration for the header and I replaced the mostly empty body of the page with a gallery, which will rotate through photos and specials/information. This allows more information to be placed on the page without overwhelming the user. I also removed a lot of the extraneous links in the body of the page as they seemed unnecessary with the top and bottom navigation.

I’ve added more information to the footer, as well as a box to subscribe to the newsletter that I’m planning to add. You can also see the added social media links in the top right corner. New to the navigation is the about and contact pages, and the coupons and photos pages have been removed.

I will continue to tweak this design, and begin laying out the designs for the other pages as well. They will all have the same basic layout with the same header and footer for consistency.

Mama Mia’s Pizzeria Stage 2 – Research

To begin the second stage of my website redesign for Mama Mia’s Pizzeria I pulled up the websites for several other pizzerias around me. I picked other small family restaurants, like Mama Mia’s, as well as some small and medium pizza chains. My goal is to find what information other pizza restaurants are including in their sites, how they layout their pages/navigation, and the general design style that they tend to follow.

Using an excel spreadsheet I made a chart showing the different pages each of the sites have. Obviously every site has a homepage, and they all had menus in one form or another. The majority of the sites also had a locations page, even one that only had one location. One feature that a lot of the sites have that Mama Mia’s does not is links to their social media pages. Seven out of the nine pages I looked at had social media links. Of course many of the sites had pages about their restaurants, and the option to order pizza online. Almost all of the sites used a third party service to offer online ordering.

The bigger chains generally had information about jobs, gift cards, and catering, while the smaller restaurants did not. About half of the websites I looked at had a newsletter that customers could sign up for receive news and special offers. I only saw one other site with coupons directly on their webpage like Mama Mia’s.  Another page that most sites didn’t have is a photo gallery. Most sites incorporated photos throughout the other pages on their site, or included a photo gallery on the homepage. I think that this would be a better option for Mama Mia’s. This would add more content to the sparse homepage and remove the current dysfunctional photo gallery.

Looking at this information I think it would be beneficial for Mama Mia’s site to add a contact page, social media links, an about page, and a newsletter. I think the addition of a newsletter should remove the need for coupons directly on the website. Instead they should have rotating specials that are sent directly to consumers who sign up for the newsletter.

One thing all of the sites have in common, of course, is the menu page. Mama Mia’s is the only site I looked at that only offers a PDF of their menu. The other sites offer either a web-based menu, or a web-based menu and the option to download a PDF. Offering a web-based menu is especially helpful for those on mobile or slow internet connections, because it takes a lot longer to load a PDF file than a webpage. A web-based menu can be navigated more simply by adding links to specific sections of the menu. I think a web-based menu would be a good addition to the Mama Mia’s Website.

Another thing I looked at across all of the sites is the colors that were used. Mama Mia’s is primarily black, white, red with accents of green, and gold. As you can see in the following pie chart many of the sites I went to also used black, white, and red as their primary colors. Many of the sites also use green and/or gold as accent colors.

Seeing this information I that sticking with the same basic color palette should be fine moving forward.

Given this information I feel confident in moving forward with the site redesign for Mama Mia’s pizzeria. To recap my findings:

I would like to add:

• Contact page
• Social Media Links
• Newsletter
• Web-based menu
• Photo gallery to homepage

And I would like to remove:

• Coupons
• Photos page

I would like to keep the same color palette, though I do plan to modernize the design and branding.

Mama Mia’s Pizzeria Stage 1 – Assessment

For my first portfolio project I am going to be redesigning the website for a local restaurant. Mama Mia’s Pizzeria in Anna, TX is your typical pizza place, with offerings of pasta, subs, salads, and of course pizza. I love their food, but their website leaves something to be desired.

The first step in this process is to take a look at the original website.

 

The website currently consists of three pages and a link to a pdf file of their menu.

Pages:

• Home
• Photos
• Locations

The home page has the phone numbers for the two locations, a link to a pdf file with some coupons, and multiple ways to get to the other two pages. I created a webflow diagram to get a sense of the current flow of the website.

In this diagram I broke down the different content on each page, as well as how the navigation flows from each page. Navigation to a new page is indicated in the orange/red color, and the dashed lines indicate pages that are the same location.

The current site does not contain very much information and is fairly simple, but looks very dated and does not function as well as it could.

Some improvements that could be made:

• Modernize website appearance
• Improve the branding
• Either reduce the number of pages, or add more content
• Improve the current photo gallery implementation (currently displays thumbnails of images, but they cannot be enlarged)

At first look these are some things that I think could improve the website. The next step in my process will be to look at some other pizza restaurant websites and see how they have approached their design.