ARTM2210 Intro to Web Design

Just another Intro to… site

final review

When looking for a site to review that is related to my final project, the food truck site for Soups In The Loop (http://www.soupsintheloop.com/) stood out. Since my final project is also a site for a food truck, I thought it would be good to take a look at a real food truck site and compare it to what Trey and I have created.

Red and yellow is very heavily used on the Soups in the Loop site. Each page is filled with red with yellow and white accents. The colors of the site match the colors of their food truck, which would help unify it for people who are familiar with one or the other. These colors are very commonly found in fast food restaurants such as McDonald’s and Wendy’s, so while it does give off the connotation of food and hunger, it is not very unique. The yellow and white are used as the text on the red background of the site which makes it fairly easy to read the sans-serif text. Although my initial reaction to the color choice is not very positive simply due to preference, reading the Color chapter of The Principles of Beautiful Web Design helped me open my eyes a little bit to see the benefits of the color scheme. The reds and yellows are very warm colors, and as noted from the Color chapter, warm colors represent heat as well as motion. Heat makes sense in this case because it is a soup restaurant and in most cases soup is thought of as being a warm dish. The motion comes into play in the fact that the restaurant is a food truck, therefore moving is a big part of its success. It is also mentioned that warm colors dominate over cool colors and having a site that stands out is a good thing.

In the background of the site, texture comes into play with the company’s darker red logos and various words overlaid on the red. In the main content part of the site, the logo is repeated in different opacities of white to break up the plain red again and give some needed texture. The top of the page near the navigation is also broken up with some nice texture in the form of the yellow outline of the Chicago city skyline. The texture chapter of the aforementioned book brings up the point of using rounded corners to make the site feel more organic rather than geometric and that technique can be found in some places on the Soups in the Loop site. On the home page there are links to other pages outside of the main navigation that are displayed on images inside of their rounded speech bubble logo. The corners of their twitter feed box are also rounded off so they are not too sharp and geometric looking. This rounding is found again on their content containers as well as some images on the various pages. Overall, the color and texture is quite consistent from page to page which helps make it clear to the user that they are on the same site when they enter a new page, but might make it slightly confusing to exactly which page they are on.

As for navigation, this site does a good job at always having the main navigation at the top of the page in a consistent spot. The main navigation is slightly small, but the white, uppercase lettering on the red background still makes it easy to see. More navigation that remains consistent is also at the top of the page and links to their social media sites. I think it is convenient to have those options available to the user, but it does come off a little bit weird that the buttons for the social media are bigger and more noticeable than the website’s main navigation links. Some pages, such as the menu, have a little bit of their own navigation that is only found if you are on the specific page. Upon clicking any of those links you are taken to another page with the only new navigation being a “back to menu” button to take you back to the previous page. A good aspect about the navigation is that you get what you expect to get based on the link name that gets you there. In the Street Signs and Breadcrumbs chapter of Don’t Make Me Think, Krug makes the point that the name of the page should always be the same as the words that were clicked to get to it. When you click on “about” it takes you to a page titled “about.” When you are on the menu page and click the option for “meaty” it takes you to a page entitled “meaty” that lists all of their meaty soups. Another thing they could have added to the main navigation would be some sort of change to the link when you are on that specific page. Krug also talks about how important “you are here” indicators are and says how sometimes designers make them too subtle. While the page name is indicated near the top of each page, having the word “about” switch to yellow from white while you are on the about page would have added a little bit more to make it more obvious.

My final project, while also based on a food truck, is fairly different from Soups in the Loop’s site upon first glance. Our color palette, while still fairly bright in some aspects, will be a lot more toned down from theirs. We have a good bit of white space in ours to appear more clean and crisp and also help our more colorful graphics pop more. We are using brighter colors in our graphics to relate to the cultures that we plan to fuse together, being Moroccan and Creole. I feel that our color choice will be more unique than the typical red and yellow for restaurants and make ours stand out in the minds of our customers. We also want our site to be a little bit more simplified visually so that we can add texture with the background and graphic shapes and not be overwhelming. In a similar fashion to the way Soups in the Loop did it, our site will have a background behind the content box. This will add a little bit of depth and also make the content clear while also having a unique background design. While Soups in the Loop’s container does give it some depth, the colors are still very similar to the background, which is different than what we are aiming at accomplishing. Like them, our navigation will be consistent so it is easy for the user to go through our site without wondering how they got there. We plan to use stronger “you are here” indicators since it makes it easier for non-designer users to know what is going on as well as do what Soups did by keeping the page links and titles the same. We hope to learn from the mistakes of others as well as use some great features and ideas that we saw around the web to help make our site be one that stands out among the rest.