Midterm Assignment

Our midterm assignment was to pick up the redesign idea from last class. We were to choose one of the two redesigns and continue the process with four full pages of the website. If you recall, I chose to use the website Seamless. Here is there original page I found on their site:

 

They have since fixed the glitch of the photo that is the background. Now their site can be seen to look like the following with food in the background as an afterthought. I still disagree with this but here is the newer version for you to compare:







I started out my redesign of the site using our color theory as a base. I then used the Telugu font. It is a sans-serif font that is clean, slim and elegant to help with the image one would hope to have with food. The original site used the triadic or split color base and so I thought to do the same. The idea being that the colors would represent a younger and more hip neutral palette. For the home page, I decided to minimize the clutter and bring the food aspect of the site to the forefront. I also made the social networking and blog concepts more central to the design and easier to see. Lastly I moved the start your order to the sidebar but gave it prominent placement. I feel the new design cleaned up the clutter and made the design easier to take in overall.





Next came the “How it works” page. Firstly I noticed when navigating their site and using the menu in the top banner, that there is no color change to show what page you are actually on. I changed that and now added the coloring to delineate which page you are on. I removed the sidebar as I thought it to be distracting to what the page is intended to do (explain the business). I loved the visual icons from the original site depicting the explanation, so i used the same but changed the colors to match the redesign and cleaned up the copy a bit. I kept many aspects of the home page however (like the info box and footer) to keep with continuity of the overall design.


Then came the blog. As this is supposed to be a younger demo site, their blog is critical to the word of mouth and success of the business overall. As such their blog must be clean, simple, de-cluttered and easy to navigate. Again, placing the food front and center is important. Then I made the font easy to read. I placed the ‘order now’ box in the sidebar so that if they read something they wanted to try right away, they could order on the spot. I also added search options in the sidebar as those would be necessary on this page. Overall I find this page much more useful, easier to read and to navigate.




Lastly is the log in page. On the original site this page is simply a pop-up or shadow box. I don’t agree with that as I find it obscures the brand and the site overall. I think it needs a full page of its own along with more photos of food front and center. Keeping the order box and footer, makes it easy for users to log in and order straight away without having to navigate further into the site. I also made sure to keep the social networking and blog options present as those are central to the business.

Redesign

This week the object was to redesign a webpage we thought was done badly. I chose Seemless.com. This website was created to quickly order food as delivery or take out from your mobile devices or at work. Here is the original site:

I thought the original site was dark and cluttered looking. A lot of text that was hard to read and in the wrong spots in that it doesn't lead your eye around the page. There is also no sign of food. Considering its a food site, the lack of actual food is a big negative for me.

Now on to my redesign. The first is the more conservative design. I kept the colors and logo of the original site to try and not stray too far from the concept. Then I added pictures of more gourmet options for delivery. I kept the social networking to a minimum and increased the size of the font to make it easy to read and find what the user was looking for. Here is what I came up with:

Then I had to redesign a more contemporary design. I changed the pictures to those of 'younger' more 'hip' foods. I also decreased the size of the fonts and chose younger verbage. I cleaned up the design a bit and moved to social networking section to a more prominent place. I also added more quick picks in the side bar top make it easier to quickly order what you wanted if you didn't want to browse at all. Here is the outcome:

Einstein Design

A second element of this weeks assignment was to take grid theory, along with the lesson on typography, and create a real ad. We would need to do both an 8.5" X 11" flyer for print, and a 300px X 250px web ad. The trick is to remember that the specs for both are very different. For instance, a printed flyer needs to use CMYK and a 300dpi resolution. A web ad will need to use RGB and be only 72dpi.

However, the two must be uniform. There must be continuity between the designs so that the marketing direction can be clear. There also needs to be cohesiveness with the website that currently exists. I tried to take all this into account. My design not only remains constant between the flyer and the web ad, but it uses the colors and feel of the clients current website. I hope you like it. Comments are always welcome.

This is the web ad. It uses the colors of the current site to bring consistency to the page.  It also uses a simple to read font as the ad itself will be small. I also used a simple grid so that the user would be able to know exactly what we wanted them to do within moments of looking at the ad.

This is the flyer. Again the consistency and grid remain. However, with more room on the page, I was able to integrate the entire quote. Again the idea is a simple flyer that translates to the user exactly what we want them to know in moments of reading. (FYI, the colors and fonts used are the same and legible; however blogger seems to be translating differently and even added borders/dimensions to the finished product. Anyone wishing to see the finished product correctly, can inbox me and I can send a direct link. Thanks!)

Swiss grids

This week we learned about Swiss grids and their use in layouts and specifically web design. When you surf the internet, without noticing you realize some sites are so much cleaner and better designed than others. When you look at them and then picture a grid over them, you realize the clean lines are because a pattern is followed. That pattern may not be obvious at first but its use is what makes the design pleasant to the eye.

Especially when taking into account a busy website, grids become almost a necessity. Without them, the site would become messy and hard to read/understand. As an example, I have chosen the SYFY channel. Below you will find a screenshot and then the same shot with the grid overlay.

Next time your surfing the net, think about what type of grid you can see on the page.

Typography

Typography, both good and bad can be seen all around us in our every day lives. Below are some examples I have found of each:

First let's start with the bad.....

Illume is a storefront here in New York City that sells lamps and lamp shades of all kinds. It can be found downtown in a district known for lighting options when it comes to home decorating. Needing to differentiate itself from other stores in the neighborhood, I believe the owners decided to go with more of artistic type of font. However, their choice is not easily read. As you pass the storefront, the typeface does not cause you to stop and want to learn more. The colors used do not stand out. In fact, the gold almost makes it harder to read the font they have chosen. Even worse is the smaller font used underneath the main header which further describes the stores contents. While this font is clear and easier to read, it is too small to catch the eye of anyone passing by. I think it should also be noted that (i'm guessing here) because of a design issue, the font was made to fit within the arch of the header, which again has faults. It's almost too little, too late in the design aspect of the storefront.





Another storefront that I believes fails in their use of typography is Mackenzie-Childs. This store can be found in various locations throughout NYC. Positioned as an exclusive, designer knick knack, home design, locally made type of store (think Martha Stewart); I understand the need to both stand out yet remain exclusive to their current customers. However I find the use of both lower and upper case letters in their storefront almost confusing. I also find that the typeface/ font used is too structurally similar to the lines and design of the storefront. This causes the font to blend into the storefront and not stand out. The fact that the color choice is monotone throughout the entire front does nothing to help the typeface become more readable. I would have expected a store of this caliber to have had a more clean and simple use of typeface for its customers to follow.

Module R art studio is another storefront I placed in the 'bad' category. This storefront located in downtown brooklyn, is surrounded by local and community based art studios. The culture surrounding the store is that of artist and young upwardly mobile community forward residents. The neighborhood thrives on new and unique one of a kind places and things. The use of typography in this particular storefront however, does not bring those ideas forward. While the typeface used is clean and unobtrusive, I believe the size and surrounding art/color takes away from the clean lines of the font itself. It is an art studio but no where does the average passerby get that from the smaller 'A.R.T.' used below the images and colors. While I will admit to this not being as bad as other storefronts listed in this category, I believe the use of the typeface here could be put to better use. Instead it comes off as encumbered and crowded, taking away from the sans-serif font they decided to use.


Quattro Gatti is this amazing italian restaurant that sits amongst many other eateries in the neighborhood. The typeface used in its storefront, (a serif font) is too busy and hard to read when walking buy. Coupled with the random design logo, it makes the image overall one to easily pass by. My guess is the design idea was to make the eatery stand out as an upscale option amongst the other quick eateries in the neighborhood. However, instead of standing out, they have caused customers to ignore them and move on to other local fare. If they had chosen a cleaner font, or even if they had not chosen a typeface that was both serif and italicized, they may have ended up with a better product that would actually have served their needs. When you see this storefront you do not think they may have good pizza or amazing gelato (which they do). Instead you think its not what your looking for and keep looking for something else.

If you live in New York City it's almost impossible to not know about Papaya King. A hotdog and 'powdered' drink are almost a New York City right of passage. However, when looking at the storefront and analyzing it strictly for the typeface used, I find it lacking. The reason it made my 'bad' list? Because there are multiple sizes of variations of the same font. This causes it to become cluttered and confusing to the customer. Looking at this photo you can easily point out at least a handful of various fonts. Papaya King is popular because of word of mouth and New Yorkers insatiable need to claim hotdogs as a staple, but on face value, this typeface does not help the business it supports. In fact, I would go so far as to say that if it were not for the word of mouth popularity of the store, they would not get many customers. I think scaling back on the variations and sizes of the font used would greatly impact this business for the better (food quality not withstanding).

Now on to the good........

Alex McQueen has been a name synonymous with upper echelon fashion for decades. His clientele know his work and go looking for him. His storefront could be much like Apple with no typeface at all and it would still be frequented. However, he has chosen to stick with what he is popular for. His classic lines, simplicity and attention to detail are his calling cards. We can see that in his choice of font for his storefront. Who can be a simple Times Roman font? Not too bold, no need for variations or alterations. The font stands by itself with clean lines and can be read anywhere. It is interesting to note that he has chosen a serif font to give an additional look of refined value, but, that that font is so classic and well known that it carries an almost everyday feel about it. It drips class but approachable at the same time.

We mentioned in class how New York City has become famous in design circles for its clean and simple use of typography in all of its signage. This classic caution sign is a good example of that. Clear and concise in its design, this sign does exactly what it is meant to do within seconds. If the floor was in fact wet, we would be able to read the sign and plan accordingly. The font is a sans-serif and contains no embellishments to take away from the message being conveyed. Even those who to not speak the language can easily see the image and understand because said image is cleverly placed within the text used. If they had decided to go with a serif font then the message, I believe, would have been lost to the person walking by. By the time the message was read and understood, there may have in fact been an accident.






When thinking of Typography in your day to day life, I wanted to make sure to include an image of food packaging. We see packaging so many times throughout the day that its important to note how its use of typography affects our daily lives. In the case of this Celestial Seasonings tea box, cleaver use of fonts helps to not only enforce the item and its potential benefits, but it also gives you a feeling of trust in the brand itself. Sans-serif fonts used throughout the entire packaging helps it to remain clear and readable. The fact that one font is used throughout with only one variation helps with consistency and facilitation of the message conveyed. The font used for the brand itself is a bit harder to read but because of the overall design, the brand name comes off like a clean and easily read logo more than separate typeface.


Another storefront on my 'good' list is Sugarush in NJ. While they are currently looking for a new design, I think this one works for them. The store is a local shop known in the neighborhood for its various sweets, cakes and pies. The font is clean but fun, which is perfect for the feel of the business. Their cakes, pies and desserts are all fun and whimsical. They have a cupcake bar with fixings to make your own on the spot. I think the font used, while different, stands out in a good way. It is clean and easy to read while still conveying the perfect feel of the bakery. The fact that it is the only 'busy' thing in the entire storefronts design helps to make the font stand out on the block.

Motto is the last storefront on this list. The store itself caters to design and artistic customers. Its a bookstore by trade. Found in SoHo where the neighborhood is built around clean, quaint boutiques, this storefront fits right in. The typography is a serif font that is used as a stand out element in the design of the storefront overall. As such, it works as a unique design element that is both easy to read and pleasurable to look at. I stopped to look because the typeface causes you to do just that. While many storefronts may use the building or what they are selling as items to draw the customer in, this storefront uses the typeface and does a great job with it. The color and offset placement of the font only enhances the ability to be easily read. This storefront is a winner as it was one of the few that left me wanting more.