Final Project — Cappeletti's Restaurant

Our ad campaign was for Cappeletti's Restaurant, an authentic Italian restaurant in St. George, Utah. My web redesign focused on cleaning up the lines, simplifying, and search engine optimization. I coded the site from scratch and used the photos that Katherine supplied. There were some hurdles to jump, but I am happy with the outcome.

The original site is found at http://www.cappelettisrestaurant.com/. My redesign is found at http://ckroff.php.cs.dixie.edu/cappelettis/. Enjoy browsing! And then go get some food, because you're probably going to want to after looking at all the yumminess. :)

Quiet Structure

I love a website with clean lines and a great grid. Actually, I enjoy seeing that in most design. This website for Big Cartel is a great example of that, as it ought to be, since their job is helping artists create websites and shopping carts to sell their product. The design is clean and everything flows together well. It fits the bill for quiet structure.

I was a bit surprised, when I checked it out on my phone, that they don't have a mobile version. They have, however, designed their original site in a way that it works out well on a mobile device. They've kept the content in a fairly narrow space so that it is still very visible when viewing on a mobile device. I wouldn't be surprised if a mobile version weren't far down the road.

Create a Font

I created this font based on the handwriting of a girl named Sara, hence the name Sarasoda. To begin, Sara wrote all the letters, numbers, and symbols. I then took her handwriting and scanned it into my computer. I used Illustrator to trace all of the characters before placing them on the yourfonts.com template. It was time consuming, but I felt it was the best way to have complete control over exact placement of the characters. 


This font is now installed, on my laptop! It's fun to have a totally unique font. I do plan, in the next while, to create the font in FontLab; but yourfonts.com was a quick way to do it, for now. I am hoping to work with the kearning and leading a bit more in FontLab because I had to tweak it, quite a bit, the way it was created.


I chose this particular handwriting because of the unique, yet appealing style of Sara's writing. It is more of a decorative font and wouldn't be appropriate for large blocks of type. It also isn't a traditional "professional" type, so use of it would be for specific purposes and target markets. It provides a lot of fun, light-hearted personality and I believe would appeal more to women and girls than men and boys. 


Because this is a handwritten font, it is definitely sans serif and is quite asymmetrical. From my typography class, we would have classified this type of font as decorative, and it wouldn't fit into the humanist, transitional, or modernist classifications. Decorative fonts are becoming far more common, today. 

Design Evaluation

I spent a lot of time thinking about which domain I should pick, for this assignment. I wanted to pick one that I could intelligently evaluate, but also one that would challenge me, somewhat. I finally decided to focus on websites. 

I wanted to find a truly remarkable web design, and I think I found it in mariecatribs.com. This site is beautiful, in my book. The initial response was visceral. I was excited about what I saw. I wanted to investigate further. I wanted to eat the food from the pictures. :)

Getting to the technical design elements of the page... 

Contrast is used well throughout this website. The size of the photos, in comparison to the rest of the content, draws the eye. The quality of the photos matches the size, so it is a pleasant place to look. They also use great contrast in the size of the text. Those items of greater importance are large, creating a great visual hierarchy. And, the contrast in the two main colors highlights certain elements and leaves others in the background.

The physical context of this design is, of course, the web. Perhaps it is more of a virtual context. Being a website, one of the key elements has to be user interface. Users need to be able to quickly see what they want and how to get it. There needs to be a call to action. This website offers all of that. Because it is clean and simple, the users' choices are clear.

Culturally, this bakery and restaurant is very socially conscious. They offer a lot of gluten-free and vegan foods. Their web design is very organic, which fits perfectly with the cultural context. The design is high-quality, just like the foods they offer. 

Gestalt Principles: Figure/Ground Relationships—There is a definite figure, on each page. The ground adds to the design without drawing attention away from the figure. Proximity—Items that belong together are grouped together (menu–at the top, menu–along the bottom, header items). Continuity—As I mentioned within the contrast discussion, the contrast in size creates a visual hierarchy. The visual hierarchy draws the eye around the site. The large header items draws my eye, I take a glance at the logo, then my eye is drawn down to the content of the page.

One final note on user interface, the site gives the option to hide the header. This may not fit any of the specific principles we discussed in class, but it gives the user the option to choose to just see the content of the page. For those with smaller browsers, this gives them the option to have less page to scroll through. A definitely plus on usability.

In choosing a site to compare, I struggled to decide if it should be a restaurant and bakery, a restaurant with store, or focus on the natural/vegan/gluten-free aspect. I chose to focus on the natural aspect. My second website is mygoodiesbakery.com. My first response to this site was not one of complete disgust, but I certainly didn't get excited about it. It was just kind of...there. It just existed. Had I not been looking at it for this assignment, I would not have moved past the home page.

In design aspect, it is somewhat lacking in contrast. The colors conflict more than they contrast. The rest of the site is just black and white. Nothing too contrasting. There is a bit of size contrast, with the header being quite large. But there isn't much beyond that.

In the context of the web, it is still a simple website. There isn't much to distract from the menu bar—it's easy to find. The items on it are fairly simple. What is definitely lacking, is a call to action. There is little to motivate a user to act. And users need to be motivated.

In the cultural context of vegan/natural eaters, the site is not very organic looking. The design is very generic and could be switched out for any number of products. There is nothing about it that feels like healthy eating.

 Gestalt Principles: The only page on the site that uses Figure/Ground Relationships is the "see the goodies" page. The photo of the goody does take a very mild figure status. It is not done very well, but it is done. There is little use of Proximity, as well. Items are fairly evenly spaced around the pages. There is a bit of proximity in the header and the menu, but it's not strong. There is also no use of Continuity. The design lacks visual hierarchy to draw the eye around the site. I'm not really drawn to look at anything on the page.

Contrast, Balance, & Harmony

This ad was designed to fit the style of Whitewall Magazine, a magazine dedicated entirely to luxury watches. I designed it for my Publication Design class, in a series of nine ads. I chose this one, specifically, because of the great contrast of the red watch against the stark white background. It makes the watch just pop! The elements are placed somewhat asymmetrically, which gives it a dynamic feel. But each side of the ad is equally weight, leaving it balanced. The clean use of white space, along with the alignment of the elements, gives it a harmonious feel.

One thing that adds to the harmony of this add, that can't be seen, is the style of the magazine in which it would run. Because the magazine caters to those seeking high-end, luxury watches, the content is very clean, smooth, and striking. There is nothing crowded into the pages; nothing gaudy to find. To fit the culture of the rest of the magazine, the ad had to follow the same format.

Readers of Whitewall magazine love watches and have money to spend. Ads need to appeal to this demographic. The ads need to have class and style. Readers need to feel like the watch would fit their style, lifestyle, and culture. This creates harmony on an entirely different level.

All of the above elements give it harmony and balance; within the ad, within the magazine, and within the culture of the readers.

Something Beautiful

This picture, taken by Ansel Adams, of the Half Dome in Yosemite National Park, is strikingly beautiful. Nature always catches my attention and is more striking than anything man can design, but it's not always easily captured on film. Adams has done a brilliant job of capturing the beauty through the contrast between lights and darks, while still keeping the texture through the lightest lights and darkest darks. No part is washed out or underexposed. 

Another couple of great techniques, exhibited in this photo, are the use of lines and an interesting use of positive and negative space. The echo of the line of the half dome is somewhat mirrored in the line of the river. The lines drawn by the branches of the tree, brought out by the contrast of the snow, draw the eye into the center of the photo. The interest of the negative space helps draw the eye to the focus of the  photo, Half Dome. 

It takes a special talent to truly capture the beauty of nature. Using good principles of photography and design, Ansel Adams is very successful in doing just that.