Website Application: Sketches

One of the applications I've chosen to do for my company is a website. 

When doing wireframes and thinking through the process behind what needed to go on the website, I started to consider a few things; primarily, why and if this company needs a website. In this day and age, every company has a website because it's expected of them. During my research, I realized that a lot of restaurants had websites but they didn't have a specific reason for their existence. That was when I realized my website needed a unique purpose and goal that would drive clients to visit it. When I thought about what that goal could be, I realized majority of restaurants in Rome do not have an option to order food online as takeout. That was when I realized I was going to use the website as a means to drive revenue through online ordering.

My first step was to start wireframes of the homepage to determine what this would look like. This was the first time I had heavily considered a simplified grid that would break down into mobile applications well. After a little research and a little help from more web-saavy friends, I decided that I would do a basic 12-grid bootstrap framework as my grid.

Here are my sketches of my homepage, which would determine a main grid for the rest of my pages on my website:

And here is the final sketch I decided to develop further:


From there I went into developing wireframes on an actual grid with placeholders for images and text. I decided to look into using Google Webfonts so, when taken into development, the website would translate accurately. Currently for webfonts I am using Libre Baskerville as my body copy and subheads. I am using Alegreya Sans SC as my sans serif headlines. I chose these because of their similarities in personality in comparison to the print type I have chosen. 

Here is my wireframe for my homepage:

My next step is to continue developing my wireframes for my two other pages and then placing in my photos and text. Then I will develop the look of the mobile sides of the websites for an iPhone and iPad.