Web Page Design: Project 2 Get Local Research

**Disclaimer: Photography and designs used for this post belong to their rightful owners.**

On this post, I will share some of the research I conducted for my second web design project. For this project I was required to choose a local business a few miles away from my home, and design a responsive website for it.

Our preliminary designs were due yesterday, and we had a critique in class. I am not very happy with what I have right now, so I am thinking about starting from scratch again, by going back to research and sketching out some ideas again. This research is my second time around looking for ideas and inspiration for this project, hopefully this will be a nice way for me to FOCUS. I feel like I have not had a lot of time to sit down and sketch out a lot of concepts and designs for this semesters’ projects, and am feeling very stuck. Hopefully making a research post will help me get back on track.

I live in a very diverse area, so there are many small businesses I can choose from. I decided to choose my sister’s part-time workplace as my local business for the project. The local business is Batten Ramen. It is a Japanese restaurant that is well known for it ramen noodles, but also offers a variety of other Japanese and Korean/Chinese fusion cuisines. The restaurant’s hearty curry dishes are very popular among customers. Recently, a lot of Japanese ramen restaurant chains have been opening near my area, and are possible threats to Batten Ramen’s small business, so in order to help their business I thought it would be nice for me to design them a website.

Batten Ramen (Direct):

I searched Batten Ramen on google and found a few images of the manager, Mr. Nakajima, and a few photos of Batten’s old part-time workers at an NYC ramen festival. I also read a few reviews about Batten by their customers on Yelp and Urbanspoon. I think one thing a lot of customers might not know, is that Batten Ramen makes Kyushu style noodles, while other ramen restaurants make noodles in a style of a different region of Japan, for example, I know Mitsuwa’s Santouka, a famous ramen restaurant, makes Hokkaido stye noodles. I think it might be important for customers to know that Batten Ramen makes specifically Kyushu style noodles. The noodles are thinner, and the broth is lighter in color.

Batten-Ramen-team    IMG_9085

Batten Ramen’s interior decorations:

higo2    o     348s    tumblr_n8cl4hr1nv1td7yowo1_1280

Other Ramen Restaurant website designs (Direct):

I also researched the navigations and looks of other popular ramen restaurants. I was surprised to find that many of the websites were responsive, but the most popular of the restaurants, Santouka, did not have a responsive website. All of the restaurants are chains and had similar primary navigations.

Santouka Ramen Website (Not Responsive)

Screen Shot 2015-04-03 at 12.21.20 AM

Menya Sandaime Website (Responsive)

Screen Shot 2015-04-03 at 12.22.09 AM    Screen Shot 2015-04-03 at 12.22.17 AM

Ramen Setagaya Website (Responsive)

Screen Shot 2015-04-03 at 12.20.41 AM    Screen Shot 2015-04-03 at 12.20.57 AM

Resposive Web Design (Related):

HiRes    5

Articles on Responsive web design (Written):

An article that discusses important the principles of effective web design: http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

A page that provides helpful tips on responsive web design: http://www.seesparkbox.com/foundry/responsive_web_design_tips

Japanese restaurant website (Related):

I searched Japanese restaurant websites but do not think the mood of the designs match well with Batten’s. The designs I saw all seemed very high class and expensive. Batten’s atmosphere is more casual and fun. I hear a lot of stories from my sisters about the customers that go there, and many of them are young, families, couples, or office workers on their lunch break who go alone, or in groups with friends. It’s a very casual and laid-back restaurant.

Taste-of-Japan-Restaurant-Food-Wordpress-Theme     11b1fe_dcd72efbbe45ee808da4470607577d74.png_srz_810_462_85_22_0.50_1.20_0.00_png_srz

Restaurant Website (Related):

I also searched American restaurant websites for inspiration. I specifically searched TGI Fridays, because I feel like Batten Ramen has a similar atmosphere, it’s not as busy and popular, but it’s casual, and fun, and a nice place for a family with children to go.

BEL 50 - Chicago Restaurant    geogeske

Screen Shot 2015-04-03 at 12.56.10 AM    Screen Shot 2015-04-03 at 12.56.22 AMScreen Shot 2015-04-03 at 12.56.40 AM

Japanese Art (Inspirational):

I looked up Japanese woodcut and art for color inspiration. Batten Ramen also had a lot of Japanese posters and woodcut prints on their walls to give the restaurant a nice “Japanese” atmosphere. Batten’s interior has a lot of red, brown, and off white. But my professor mentioned that the colors seemed too, obvious(?) which I understand. Batten’s workers used to wear navy blue uniforms, but recently changed to maroon. Hmm, yes choosing a color scheme will be difficult.

Toshidama Gallery    Torii_Kiyomasu_-_Ichikawa_Danjuro_I_in_role_of_Takenuki_Goro

Kyushu (Inspirational):

Because there are so many ramen restaurants in the area, I think one thing that may be good for the small business, would be to emphasize is that it’s business and food are both managed and cooked by a Japanese man, and that the food is made in the Kyushu, Kumamoto prefecture style.

I watched some short videos and readings on Kyushu. It is a region of Japan that is not well-known to many foreigners. It is an area of Japan that is most like the old Japan, with not many tall buildings and noisy traffic, but a lot of nature and country side. My mother grew up in Kyushu, Oita Prefecture! 🙂

Short video on Kyushu: https://www.youtube.com/watch?v=3yxNpECtEnA

Kimono and Obi Colors (Inspirational):

I have a hard time with colors. My professor mentioned that Red and white is too obvious for Japan, so I looked up some other color schemes that may often be used in the culture for inspiration.
my_blue_houmongi_kimono_and_obi_taiko_style_by_seawaterwitch-d6gked4 1281338849153_us-myalibaba-web6_499

Kimono_backshot_by_sth_der

Advertisements

Infographic Design Project Research

**Disclaimer: Image content used in this post belong to their rightful owners.**

This post consists of research that I conducted for a project in my graphic design history course, Design in Visual Culture. The objective of the assignment was to create an infographic on a stylistic art period in history. Some topic choices were: Art Nouveau, Postmodernism, Bauhaus, WWII Propaganda, Russian Constructivism, etc. I chose The style, New Typography.

New Typography Movement (Direct):

I did not have much prior knowledge about the movement before the project, so I started off by searching general terms and people related to the movement. From what I could see, New Typography seemed like a simple and clean style. Many of the images of pieces completed in the style were by Jan Tschichold.

10    jantschichold-filmposter    image4

Jan Tschichold (Direct):

The images below are designs be other people inspired by Jan Tschichold’s New Typography Designs. There are many Red geometric shapes, lines, angles, and diagonals.

5ae877b26c232e87292059dc51baec91    tschichold1_1_640   jan_tschichold_by_cakaaa-d47wpfr

Unknown     3567791949_12e4324f93

Reading on New Typography Principles (Direct): A text outlining the principles of New Typography design.

http://t-y-p-o-g-r-a-p-h-y.org/MEDIA/PDF/ThePrinciplesoftheNewTypography.pdf

Infographic Design (Related):
Many of these inforgraphic designs are flat, and use limited colors.

Annual-Report-Timeline facebook-timeline-design16 peter_orntoft2_02212011 peter_orntoft1_02212011 WhereIsTheNextGenerationofInnovators_4f51539bcc3a2 Haiti transparency rel_ur_2009 quadradao2

infographic_img10

Article on Infographics (Related): I thought this was an interesting reading on infographic designs
http://insights.qunb.com/why-we-hate-infographics-and-why-you-should/

Typography Design (Related):
I really did not want to use Jan Tschichold’s red diagonal graphic in my infographic layout, so I researched some posters and designs that used typography in interesting ways, although very interesting, some of the type and information in the designs are not easy to read.

chess_typography_posters   40148_415   poster_1 typography_breakdown_infographic_by_dubgee-d64jcha

Web Page Design (Inspirational):
Infographics nowadays are very flat, and the information is organized into different categories, similar to website designs. I looked at websites to find some inspiration for interesting compositions, but many of these designs with geometric shapes were symmetrical, but New Typography favors Asymmetrical design.

20-Inspirational-Examples-of-Diagonal-Website-Design-1    minimalism_0034_jan_reichle     Witcode-diagonal-website-design13

Color Blocking (Inspirational):
The use of geometric shapes in New Typography designs reminded me a color blocking, a popular trend in fashion. I looked at some color blocking designs for inspiration for the composition.

 fashion-influence-color-blocking-trend     images

Poster Design (Related):
I also looked at poster designs for compositional arrangement inspiration.

                   

Books on Graphic Design:
I borrowed to design books from the library that had some information on New Typography. The book, “Graphic Icons” did not have information on the movement, but did have information on Jan Tschichold.

      

Graphic Design II: Project VIII Research

**Disclaimer: Image content used in this post belong to their rightful owners.**

For this project I have to choose an architect and create a poster, brochure, and admission ticket for an exhibition at the Cooper-Hewitt Design Museum that is dedicated to his/her works. I decided showcase the architect: Frank Lloyd Wright. His works are very beautiful, so much so that my Professor said I might have difficulty working around them in my designs. About a week has passed and I am having some difficulty designing the exhibition poster.

Perhaps posting some of my research and thoughts will help.

Frank Lloyd Wright – The Architect (Direct):

flwfall
Falling Water
robietours
Robbie House

Prairie Style of Architecture, Organic Architecture. Influenced by his mentor, Loius Sullivan, shapes, and nature.

He also designed furniture and is famous for his stain glass designs are well.

Wright believed in form and function becoming one; architecture that becoming one with its surroundings. Perhaps this can translate into typography and form, or form and content, for graphic designers.

Frank Lloyd Wright Exhibition (Direct)

Wright     4c9b38ad5183e9f0f2eeae02667a292e     original_150371__Zl5QgU_cYlkx9ZuxqUIW8yAD     imgres

         

       

Cooper Hewitt Museum (Related):

I thought it might not be a bad idea to research the brand and identity of the Museum itself, perhaps all their brochures and exhibitions have a certain look to them, and if not, perhaps I can design it to.

Museum Website: http://www.cooperhewitt.org/

Museum Exterior
New Branding
Bold. Clean. Modern.

Poster Design (Related):

I really liked how these designs integrated type and image in one composition.

Article on Architecture Design (Related):

Deborah Sussman: http://www.metropolismag.com/March-2014/She-Loves-LA/

Websites on Brochure Design:

http://www.hongkiat.com/blog/handpicked-printed-brochures/

http://www.creativebloq.com/graphic-design-tips/how-to-design-a-brochure-123267

http://www.designer-daily.com/the-elements-of-a-good-brochure-design-24048

How to organize information in a Brochure:

http://www.rainforest-alliance.org/curriculum/eighth/lesson2/brochure-format

Graphic Design Project 4: Logo Design/Branding Research

**Disclaimer: Image content used in this post belong to their rightful owners.**

This post consists of research I gathered for a graphic design project.

For this project I was required to create a logo and brand for a fictional company that I created. My company’s name is Wave.The company I created is an open source for world music. The company utilizes a website, television, radio, and a weekly magazine to reach out to consumers. The company also hosts the Wave World Music Awards, an international music awards ceremony that takes place in a different country once every year, and the Wave World Concert for Peace, a yearly concert event that promotes world peace through the support and help of international musical artists and performers.

World/World Peace (Related):

There are many music entertainment companies. To distinguish my company from others I wanted to focus on my company’s efforts to promote world peace. I wanted my logo to display the message of “peace” and “world” through it’s logo.

photo2      world-peace-090420j

Music/Entertainment Company Logos (Direct Research):

MTV Logo and Logo Application:

MTV is a music entertainment company that could be one of my company’s competitor. I researched the MTV logo, the changes it went through, and some of the logo’s applications. I noticed the old logo had a short description: “Music Television” under the image.

MTV-Logo-MTV ema_2013_logo

Television Channel Logos:

abc_logo    Unknown-1 usa-network-logo

Typography Logos (Related):

In addition to logos, I looked up typography logos. Even though these logos do not utilize an image, the bold forms of the letters create strong and interesting marks.

images-1

the-maine-logo-1

Muji

Music (Related):

I researched imagery related to music.

natural-energy-boosters

Music Download Company Logos (Related):

c2a1442a-ed75-46fc-9c04-eb0d8518b83c        itunes_image2

Logo Design Process Reading:

During the Thumbnail process I found an interesting reading about logo design and its process:

http://99designs.com/designer-blog/2012/11/14/logo-design-process-how-professionals-do-it/

Waves (Related):

Sound waves:

Some patterns and designs I thought I could use for an image icon.

images   are-sound-waves-the-future-of-mobile-marketing--68005190f2

Waves:

imgres    olas,curl,illustrations,stock,surf-a64c19b6d8c1fc7ade00220328fc1469_h

url

Images from Music Events (Related):

billboardawardsibrawlator-600x450   mc-hammer-psy

2012 MTV Video Music Awards - Red Carpet   MTV Europe Music Awards 2010 - Arrivals

Billboard Magazine Logo and Magazine Applications (Related):

Billboard is a good example of a company that provides music news, downloads, information, and charts to people. If my company was real, Billboard would most likely be it’s main and toughest competitor. Billboard’s design, look, and feel influenced me during the design process.

new-billboard-logo

Billboard-Cover-11-3-2001    Pink for Billboard Magazine December 2013

Music Charts Video:

A video of Billboard’s Top 50 Music Chart. I watched this video to get an understanding of how the company keeps a consistent look and design among so many different applications and media.

Company Branding Reading:

Towards the end of the design process I started thinking of ways to apply the logo to different products while maintaining the company’s identity. Here is an interesting reading about branding I read for some tips:

http://www.creativebloq.com/branding/rules-11121200

iTunes Logo Applications:

iTunes is very popular among young people, I researched some of their logo applications and designs.

itunes-giftcard

6a00d8341bf7f753ef00e54f73ed688833-800wi

itunes-radio-banner

Beatles iTunes billboard advertisement at the Apple store in the Meatpacking District.

Playlist (Inspirational):

I listened to this radio station during the design process to get an understanding of the target audience’s tastes in music.

https://itunes.apple.com/us/station/idra.686227433

Graphic Design Project 3: Adage Booklet Research

This post consists of research I conducted for a project in my graphic design class.

The assignment was to create a booklet from the a classic idiom or adage. I chose the adage, “Time flies when you are having fun.

When I first started the research for this assignment I searched the idiom online and found that most images that came up from the search were very generic and literal.

Idiom (Direct):

imgres-4     imgres

I decided to think of some stories using images. I automatically thought of Children’s picture books.

Children’s Illustrations (Related):

illustration_art_of_children_E01-PSD-027       ce5ab3bf181bde7efa97de574177a573763ad92f_m

winnie       full-1

350px-PeterRabbit13 PeterRabbit_000

Articles (Related):

This article provides 18 tips on how to tell a story through illustrations.

http://www.digitalartsonline.co.uk/features/illustration/18-tips-for-telling-story-through-artwork/

This article contains writing on how illustrations affect picture books.

http://scholarworks.wmich.edu/cgi/viewcontent.cgi?article=1280&context=reading_horizons

Japanese Graphic Novels (Related):

At first I did not want to do a comic book/comic strip type of booklet, but using the grid for the illustrations alone was a challenge, so I ended up separating the pages into panels. By creating panels, I was also able to tell a longer story.

I reminded myself of the Japanese comic books I used to read. A lot of the pages play with large and smaller sized panels. Here are some examples of the panel usage in graphic novels that influenced my story telling.

Akira (1982-1990): Katsuhiro Otomo

Akira2 akira_4_p385_p386

One Piece (1997-present): Eiichiro Oda

One Piece Manga Chapter 579 Page 12

In order to think of stories for my adage, I looked back at some of my favorite books, films, and short stories.

Books/Stories (Related):

The Little Prince (1943): It is a quiet and sweet story, yet has a very deep meaning.

the-little-prince

Movies and Films:

I looked back and reminded myself of some of the short films and movies that I have enjoyed. The sequencing, moods and overall feel from these movies influenced my story telling.

Paper man (Trailer) (2012): A Quiet short film from Disney. No dialogue story-telling.

How to Train Your Dragon (2010): The theme of a new friendship. I honestly did not mean for my adage idea to be so similar to this clip… I apologize!

Only Yesterday (Omohide Poro Poro) (1991): Children, Sweet, Nostalgia, and Memories.

OmohidePoroPoro5 omohide

street   vlcsnap-100479

Ponyo, on the Cliff by the Sea (2008): Children, Friendship, The Sea.

imgres-1   ponyo_02

Images that inspired my story:

imgres-2  images-3

Music (Inspirational):

This is some of the music I listened to while illustrating my adage booklet.

John Powell: Forbidden Friendship

Only Yesterday (Omohide Poro Poro) Official Soundtrack: Ohanahan

Joe Hisaishi: Friends

Graphic Design Project 2: Book Cover Research

This post consists of research I conducted for a project in my graphic design class.

The assignment is to design a book cover with the title “Primordial Chicken Live.” The story is the student’s original plot.

My story is about two classical music students in their third year in University, one male and one female. The story will be told in the male student’s point of view, but will primarily be about the girl, because she will be the catalyst for a great change in his life.

Classical music (Related):

E7FC646B-9107-43B7-9378-E53FED1E6AF9_mw1024_n_s        music-notes

jingle-jangle-jingle     Avalon_sheet_music_cover_(Australia)

Art Nouveau:

images-1 14-16-54     images-2 02-25-54     images-4 02-25-54

Music Poster (Related):

I think this photo expresses music well, because it expresses it in flowing and dynamic forms.

803561219747958     imgres-3     images-2     bassoon-poster-385x500      np-print-piano     b4669b6645420dec484e4a015356e8d2     Final - development 03 - keys higher to be able to cut.ai

I was really inspired by the black and white patterns of the keyboard and the lines on the music sheets. I find the straight lines and organized design very attractive.

Musical Typography (Related):

There is a lot of movement, a lot of intricate details, and is very delicate. There is a balance between straight bold lines and delicate curves.

tumblr_l7rt5a8at91qclfe5     calendar 2012     the-gift-of-love-b-w     images-3

Music Book Covers (Direct):

51VBJSTYQJL._SY344_PJlook-inside-v2,TopRight,1,0_SH20_BO1,204,203,200_     51qkD3tKpLL

After the preliminary compositions, I decided to continue refining the cover that had an image of the main character’s face on it, since the class seemed to like it.

I researched more about the power of eye contact, and book/CD covers that utilized eye contact.

Articles about book covers (Related):

http://www.printmag.com/article/four-of-jon-gray-and-jamie-keenans-20-immutable-theories-of-cover-design/

http://www.theguardian.com/books/booksblog/2012/aug/16/book-cover-theories-edinburgh-festival

CD/Book Covers that use eyes/face (Related):

images-1     images-6     images-7     1q84     never_let_me_go.large     eyes     an_experiment_in_love.largeimgres-4     imgres-10   imgres-5

An interesting article on faces (Related):

http://www.presentationzen.com/presentationzen/2011/08/eye-gaze-and-the-power-of-faces.html

Book Cover Archives:

http://bookcoverarchive.com/John_Gall (Related)

http://bookcoverarchive.com/typeface/gill_sans (Related)

Inspirational Research:

Posters, movement design, album cover

 imgres-9     Kazumasa-Nagai-Poster-Design-34583485     images-4     images-5

imgres-6     katsuiwakisaka