Effective Web Design

luigi-mockup-computer

***I am not affiliated with Luigi’s Pizza in any way, the following is for educational purposes only.***

I am taking two classes this semester, one in Photoshop and one in Web Design, and this week my Photoshop class collided with web designing. I had fun with this because I got to put both skills to work and create a mockup of what I thought would be an effective website. I decided to redesign our favorite local pizza delivery place in Clarksville, TN called Luigi’s Pizza. Their food is great…and delivery is F-R-E-E! So I’m all about it! However, their current website is cheesy-looking (pun not intended) and kind of ugly…so I took a stab at it.

What you may or may not know, is there are several steps in the process of creating a website (especially one worth visiting). One of the first steps in the design process is creating a wireframe; which is kind of like a skeleton layout of the webpage. The following is my wireframe for Luigi’s:luigis-wireframe

Starting from top to bottom, I have a Facebook icon to link to their [only] social media page, and a search bar beside that. I put them there because that is the most common place to find that info, so I think it will be easily found should the user be looking for it. Beneath that is the navigation bar and logo; strategically placed as well, because that is also where users will go to look for that information. Below that is a space marked out for an image and arrows that will rotate the image to show various menu items that the user can then click on to navigate them to another page to customize their order. Finally, the footer bar across the bottom of the page, which will contain copyright and contact info.

The next step, is called a mock-up. It takes the wireframe and steps up its game, so to speak. You add in your images and content, which brings the wireframe to life, and also presents any layout issues to the designer. The following is my mock-up:luigis-mockup.jpg

Looks more like a site now, huh? I wanted to give the website a fresher design, so I choose a chalkboard background, a chalk typeface, added some fresh ingredient images around the main focus on the home page, and stuck with a warm color palette consistent with the colors found in their food. If I actually built this website, the center image would change to different menu items, and have some kind of animation (for example, for the pizza, the closest slice slides out towards you) when you click on an arrow. Then, once you found the menu item you wanted, you would click and it would take you to another screen to customize your order. Navigation and contact info is not hidden and easy to find, in hopes that the user finds the page effective and easy to use.

That’s all y’all! XO

One thought on “Effective Web Design

  1. Nancy Philman says:

    Looks like a very user friendly design.one of my pet peeves is spending what I consider to be
    An inordinate amount of time perusing the website for the salient features of the business. These sorts of websites are cluttered with unnecessary sections, or more to the point the extensive search time for items I may be interested in, such as menu items and contact information or links that don’t work..It is helpful for the first images to be inviting such as this site. It is enticing at first glance.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s