Mama Mia’s Pizzeria Stage 4 – Branding Part 1

 

MAMAMIASLOGO1

Existing Logo

MamaMiaLogoSideBySide

Updated Logo

mamamiav7

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.

MamaMiaLogoSideBySide2

mamamiav8

Advertisements

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.

Web 1920 – 2

Version 1

Web 1920 – 2

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.

pizzaresearch_27475_image002

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.

pizzaresearch_27475_image004

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.

image012

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.

Website Flowchart - New Page (1)

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.

 

Reflection

As graduation draws close I would like to take a moment to reflect on what I have learned throughout my graduate education. When I finished my bachelor’s I felt ill-prepared to enter the work force. How much of that was just impostor syndrome I’ll never know. After taking some time for myself and continuing my education I feel like I’ve come out a stronger programmer. I did not choose a traditional computer science path for my masters. Most people chose to study big data or security, the big money fields, but my interest have always been torn between programming and design. I understand that manipulating large databases and creating secure programs are important for every area of computer science, but they’re not the areas I personally enjoy working in. I’ve always been a visual person and I like being able to see what I program come to life on the screen. I think good web design is an art.

In the courses I took over the last two years I was introduced to many different technologies and ways for users to interact with programs, from the very traditional windows form applications to Virtual Reality mobile apps on the gear vr. I created my first Android apps using both Java in Android studio and C# in unity. In my creative automata class I didn’t even code at all, but we explored the ways that users interact with the world and how technology can be used to enhance those experiences. As a class we made our own small internet of things project that allowed interaction with static art displays.

This past semester I took a class in semantic web, something I had no previous knowledge in and I learned about all the ways that we can make it possible for not only users to interact with the web, but also computers. Enabling computers to be able to form connections between data and understand web pages from a semantic point of view can allow users to more easily find data on the web. There are billions of websites filled with unimaginable amounts of data and no possible way for humans to parse through all of the information to find what they’re looking for. Search engines are very powerful tools that help us to make the best use of our resources, and with the aid of the semantic web they are becoming more and more powerful.

Another field related to semantic web, in fact perhaps even the necessary predecessor, is artificial intelligence. Many of the tools used for semantic web came from the AI community; semantic networks, description logic, knowledge bases, etc. I took both classes the same semester, not realizing how intertwined they were and it was interesting to hear about these ideas from both perspectives. One particularly interesting field of AI is machine learning. When I signed up for machine learning last spring I didn’t think it was something I would ever have the opportunity to work with in the real world; I imagined robots and self driving cars, which all use machine learning, but it is much more than that. I learned about collaborative filtering, which we see on the web every day, any time you go amazon and you see suggested products to buy or Netflix suggests what movie you should watch next that is an example of collaborative filtering. When you start typing a search into Google and it begins suggesting search topics or even predictive text on your phone, these are all ways that we interact with machine learning every day. The more I learned about it, the more I realized that machine learning will soon be part of everything we do.

I think the most important thing I learned during my masters degree was how connected all areas of computer science are. Sure we all want to specialize in one small area, but you need every part to make a complete system. I think being able to see the big picture and how all of the parts work together is an invaluable skill as a computer scientist.

Research Topics

One thing that I would like to do with this blog is take the time to research some areas of web development that I do not have experience with, or would like to explore deeper. I often see blog posts on certain topics and think to myself that I should look into it further, or try out a certain technology, but later never comes. Staying up with new technologies and continuing to learn new skills is important in an ever-changing industry like web development.

Some topics that I have come up with off the top of my head that I would like to research are:

vTEAjgrid-vs-flexbox

Web Layout: DIVs vs Flexbox vs Grids

I’ve only used DIVs (and tables in my much younger days :p), but I would like to try out flexboxes and the new CSS grids that I have been reading about. From what I understand there are different uses for each and one doesn’t necessarily replace the other, but when should you use each layout technology, and can they be used together?

convert-css-to-sass-twitter

SAAS

I don’t know much about SAAS, but I do not that it is supposed to make your life a lot easier when it comes to CSS.

how-to-improve-your-online-security-and-privacy-in-10-easy-steps

Security

Security online is more important now than ever. It seems like we hear about new data breaches every day, and no company is safe. Of course the most well known security breach to date was equifax. I’ve learned some basics of security in school, but I would like to delve in deeper and find out more about best practice in the real world.

open-source-ecommerce-platforms

Payment/Checkout Services

Of course everyone knows about paypal and amazon pay, but there are many other online services that can be used for eCommerce sites. Many security breaches that websites face involve the payment process. Customers need to enter sensitive data and they out their trust in the website their using to protect their information, process the order correctly, and get their item delivered to them in a timely manner. I do not have any experience setting up a payment system on an eCommerce site, so this is an area that I would like to learn more about.

image004

User Interface Design Principles

I have taken courses on design and user interfaces, but I would like to brush up on some of the core design principles.

41gFDJ5s1vL._SX399_BO1,204,203,200_

Evil By Design – Chris Nodder

User Experience

I would like to learn more about user experience design. The way users navigate through your website is very important. You want users to be able to find what they’re looking for without being frustrated and having the right design can increase sales, newsletter signups, etc. In one of the classes I took we went through many of the concepts in the book Evil By Design, which talked a lot about how to guide users through your site and encourage the desired behavior through the design of your site. This book focused on user experience design from the point of view of a business owner, but I would like to look into user experience from the view of the user and helping the user make the most of their experience.

Mobile-Web-Design-Strategy

Mobile Web Development

Mobile web development is one of those topics that I know a lot about from a users perspective, but not from a developer’s perspective. I know that I personally do about 75% or more of my web browsing from my phone, and I’m sure I’m not alone in that. Having a mobile friendly site can make or break a company in today’s business model. I try to design responsive sites, which are somewhat mobile friendly in most cases, but I have never truly designed a mobile website. Having developed some mobile apps and learning about material design does give me some insight into mobile web development, but I would like to get my feet wet and actually make a mobile web site.

I hope to look into many of these topics in the coming weeks, and I plan to write up what I learn on this blog. I hope that this exercise will be as informative to others as it will hopefully be to me.

Welcome

20170910_111315_ResizeHello, my name is Melissa and I just graduated with my masters in Computer Science. I have always dreamed of being a web developer and now I am so close I can taste it. As I begin applying for web development jobs I will also be working on some personal projects to beef up my portfolio as well as work on some of my skills. I’m creating this blog to document my journey from student to professional web developer (fingers crossed). I will be uploading different projects I’m working on, any interesting things that I learn, and different online courses and resources that I find. I hope that this blog will be helpful to others that are looking to improve their web development skills, as well as a good way for me to document my own journey.

Thank you for visiting my site. I hope that you take a chance to look around and see what I’ve done so far.

Project Ideas

The first step in trying to fill in my portfolio was to research some different kinds of projects that I should include. My portfolio only consist of a few school projects that I’m too embarrassed by at the moment. I began my list with a simple google search.

ProjectIdeasGoogleSearch

Of course this brought up millions of results, but I just looked at the first few pages that came up. There were several ideas that were included on multiple lists, such as creating a page for a local business or recreating an existing site, and there were some more interesting ideas that only appeared once or twice, like developing snippets of a page, such as UI elements or creating an HTML 5 game. From these ideas I compiled one list with the projects that either interested me, or seemed like they would be an essential component of a good portfolio.

Project Ideas

  • Redesign a real website
  • Design a page for a local business
  • Redesign the mobile site for a real website
  • Design a WordPress theme
  • Code a design from dribble.com
  • Create an HTML 5 game
  • Code User Interface Elements
    • Contact Us Form
    • Sign Up Flow
    • A set of buttons
    • A JavaScript gallery
  • Create a blog
  • Create an online quiz
  • Create an informative site

I’m sure there are many other things that I could make for my portfolio, but I think this list is a good jumping off point. I have already started on one idea (creating a blog) as you can see. I hope to get through many of the items on this list in the coming months and come out the other end as a stronger developer. I am challenging myself to work on web development every day, even if just for a few moments, until I find my dream job.