Final Project

For the final project I had the privilege of working with Kevin and Asaf on Text Safe. Its a concept for a mobile app that will help users save text files from their phones. Currently there is no app that can do this leaving a user who relies on the the history within their texts to be lost if a restore is the only recourse for fixing their phone. Here is the writeup/proposal for the project in detail explaining what we would create and why. It includes research and usability features/functions.

For the design, we decided to use the iphone (specifically the new iphone 5 with retina display). We chose colors of the text messaging system (blues, gray's and neutral off whites). We also created the design in actual iphone size of 320 X 568px as well as the retina display of 640 X 1136px. Here are the designs:

TextSafe

This week we were assigned to groups for the final project. The project is to come up with a potential mobil application that will be proposed and flushed out in wireframes and design before the end of the semester.

We chose to make an app called TextSafe. This app will be able to download and save text message history. Here is the beginnings of a brief we put together to further explain our concept:

Design layout

This week our goal was to design layouts for different types of users using FAO Schwarz as a guideline. The first challenge was to design the path through the store that an 8 year old girl would travel with her mother who is a waitress. In my layout I tried to incorporate all of the sections that a mother and daughter would frequent. This would include the candy bar, the doll section and dippin dots.














The next challenge was to layout a plan for a retired wealthy woman. Thinking this woman might like to meet friends for coffee, I added a trip to the cafe. I also added a trip to the personal shopper section downstairs as I believe she would utilize this service when buying gifts for her family.

Lastly, the final challenge was to map a visit by an adult married couple who were middle income and from middle America. That was easy as I guessed they would need a tour of the entire store. However, laying out the trip became complicated. The trick was trying to layout the entire store without making the design look complicated or be hard to follow. This is my final outcome.







In the end, I realized how we layout items for menus in web design is much the same process. You have to think about the journey of the user and their experience in using the site. You need it to be easy to navigate and fun to use while not being to cumbersome or complicated. This project gave me further clarity in why wireframes and site maps are important when thinking of web design and layout options.

Theories of Design: FAO Schwarz

When you walk up to FAO Schwarz, It seems like a rather unassuming building.  The only thing that even gives you a hint of what is inside are the costumed live ‘toy soldiers’ stationed at the doorway. This is part of the charm of the store and something they do very well. It’s the idea of being led into a new, almost ‘fantasy’ world. Walking thru the doorway you leave NYC and enter a new world filled with toys and wonder.







As you walk through the store, there are many nooks and turns, each revealing a totally new space (much like Willy Wonka’s factory). Each space is individual with no bleeding between them, but they work in unison to take the customer through the space. There is constant wonder
and surprises as with each corner you turn you find a whole new aspect of the store. Most sections can not be seen from other sections, giving a surprise each time the corner is turned.

It is the creation of this unique world that makes FAO Schwarz the wonderland it is. Children enter and are quickly enraptured by the overall world that is created. No where do you see the boring structural design of say a Toys R Us. It is not the typical institutionalized isles by isles of items categorized by type. Instead everywhere the eye can see is filled with unique, fun and childlike notions. They have stairs and balconies to see the room from different angles.

Even the escalators are different in that they provide a platform for a few feet to allow children time to get on and off the escalators without them being frightening or moving too fast for their smaller bodies and feet. Most apartments in NYC do not have the room for one of the almost life sized stuffed animals, but when you see it in relation to the space built, you almost feel like you can make it fit. The children believe they have to have it. They need their rooms to be a part of this world of FAO Schwarz.













Another design feature of the store is the separation of ages and sexes. The floors and sections of the store are separated by ages. The babies and toddlers are downstairs, the older children upstairs. Upstairs there is a clear divided ‘main street’ between the girls section (all pink and full of dolls and cooking); and that of the boys (cars, science and building).  You find the ‘family’ bathroom on the same side as the woman’s room.  The men’s bathroom side has no such option. In the boys section you find lego land and the famous ‘Big’ piano. You also find the books, science options and model trains. I have always believed this to be a big design flaw. It is dated in its theory of stereotypes for boys and girls. Given the class of people who frequent a store like FAO Schwarz however, these dated stereotypes may still be pertinent. In the upper class of society, boys still make the money and have careers. Girls are the ones to have children and keep the home in working order.

Especially in today’s society where these barriers between girls and boys are falling, I don’t believe there needs to be such a clear divide. If a girl wants to learn science and have that type of inclination, she shouldn’t have to go into a clearly designated ‘boys’ section to do so. Girls should be given more options than having children (as is depicted by the doll nursery) and cooking (cooking classes and parties are available in-store). They should be encouraged to have a science section of their own.

Getting back to the design aspect of the store, one of the things the store does well is to have all smaller toys and candies at eye level of the child. They are all reachable and able to be grabbed and used by the child visiting the store. When you first enter the store, the child is able to clearly see the huge stuffed animals to know they want one, and then are able to grab one right off the shelf. When you walk into the candy section, all of a sudden the bins and choices are all at the height of a child. The parents and adults have to bend down to get candy. When walking around the stores upper floor, all the toys for younger children are at a lower height to make them reachable and easier for the child to interact.

Part of the wonder of the store is the ability for children to be able to interact with the items for sale. At no point is the product unreachable or off limits. As a matter of fact the design lends itself to be played with. The Muppet station for instance, lets you pick and choose exactly how you want your Muppet built. The kids are able to play with different designs and options before finally picking a muppet to be built. The model train track has a button at child height and eye level so that there is immediate interaction. The life sized lego and mega block forms are interactive and can be closely analyzed by the child to see how it is done.

This interactive design feature is not relegated to children alone. In the baby/toddler section, there are mock ups of nurseries. These come complete with rockers and chairs to better envision how it would look in your home. The reading corners have smaller tables and chairs for the children, but adults also have a space to read and sit.

Lastly, there is an adult gallery of unique Disney and cartoon art. While it is set up like its own separate section on the upper floor, it is characteristically made for the child in each grown up.

That is the beauty of the design behind FAO Schwarz. It is the ability to make every individual who walks through the door feel like there is someplace in this world for them. You know you are in a store, and you know said store is in NYC, but you lose yourself in the world that is created. Somewhere, behind some turn and some section, you will find something that makes you feel like you were a part of the world that was created.

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.