1

Michael ConnorBA (Hons) Digital Design and Development

Hull School of Art and DesignThe Open University

14/05/2018

Self-Initiated Project

2

ContentsCompetitors Report...............................................................................................................................3

Conclusion Report...............................................................................................................................12

Target Audience Profiling....................................................................................................................14

Research – Japanese Street Food........................................................................................................16

Mood boards.......................................................................................................................................18

Sketches..............................................................................................................................................19

Wire Frame..........................................................................................................................................22

Fonts and Colour pallet.......................................................................................................................23

Colour Pallet 1.................................................................................................................................24

Colour Pallet 2.................................................................................................................................25

Final Design.........................................................................................................................................26

IM Creator XPRS Website....................................................................................................................27

Mind Map............................................................................................................................................28

Evaluation/appraisal............................................................................................................................29

3

Competitors Report

Gurunavi

4

5

For:

Big website with lots of links ranging from areas in Japan to Categories Share buttons Nice illustrations to present the information Simple design so that the information is being dawn to More suited share buttons at the bottom of the page Back to top button Links to recommended areas of the website

Against:

Simple design because it could also look dull in ways Cluttered space to the right side The share buttons don’t fit the style of the website I don’t like the way the breaks in the page are with the red rectangle thing The use of green font in only one area of the site.

From researching this website I have understood that it is more interesting to add pictures with the thing that you are describing as it gives the audience an idea of what to look out for when they are looking around Japan.

6

Japan Talk

7

8

9

For:

No wasted space A navigation bar that follows as you scroll Links to other pages advertised to the left Google custom search bar Share buttons

Against:

Pictures aren’t directly at the food Sitemap seems cluttered

From researching this website I have understood that too much information from one page can make the audience become side tracked and less interested.

10

The Culture Trip

11

For:

Pictures to go with the information Share Buttons Navigation bar that follows as you scroll Search bar

Against:

Advertisements that have nothing to do with the web page Some of the information has no pictures.

From researching this website I have understood that if you want users to click on advertisements then try to use something that is related to the page because they are more likely to click onto it.

12

Conclusion Report

Step 1.)

Before creating and designing anything it is important that you do your research first so that is what I did. The website I wanted to create was a informative one that would inform people about popular street food in Japan. The reason I chose to do this is because I have an interest in Japanese foods and culture.

Step 2.)

After doing the research I began the planning stages and pre-production. First I created a mind map and then created some mood boards relating to the food and stalls that are relating to Japanese street food. I also researched for some fonts and a colour pallet that are both relating to Japan to use for the website. After doing those I began sketching some Ideas of how I wanted the website to look. When the sketches were done I decided to put the ideas from all of them into one design that wireframe to be used for the design I would do later on Photoshop.

Step 3.)

Finally I began designing the website in Photoshop using the wireframe as a reference I began to flesh it out. The website I am designing is a one page website so I began starting at the top and created a section where it was a picture of a Japanese festival. In the area between that picture and the whiteness of the rest of the webpage I added a red circle to represent the rising sun on the Japanese flag. Below that I added a short introduction to the website and then below that I added the Japanese foods, titles, and information in a grid system that would easily present the information the user would need. The way it is designed should also make it compatible to be viewed on mobile devices such as phones or tablets. I added a red section near the bottom for the honourable mentions foods. This is because the information for those foods were very basic and would not suit being put with the rest of the food. Below that I put a dark gray section that has a map of the areas where you could find where to buy that food in Japan. When I was finished with that I then started on attempting to build it in IM Creator. I finished building it in IM creator eventually but there were a lot of complications on trying to replicate my Photoshop design such as the title at the top of the website, I couldn’t put my text into the red circle that represents the rising sun. I also couldn’t use my fonts that I researched as well as the map that I created for my Photoshop design, that couldn’t be used either.

Evaluation/appraisal

For this self-initiated project we were asked to create I decided that I would like to create a one page website to inform people about Japanese street food.

To begin this project I started by researching different kinds of Japanese street foods. This was pretty easy to do and I was comfortable with it because I already have an interest in Japanese foods and culture and know about their foods quite a bit

13

I also created a competitors report to see what kind of websites that I would be competing with. This is important because you would obviously want to have the more page views. More page views, more money depending on what website you’re running. I found this part easy because google search finds the websites all I have to do is see who my website would be competing with.

After doing all the research that was needed I began looking for Fonts and colour pallets that I could use relating to Japan. The fonts that I found were Genkai Mincho (which I used for the title), Shirokuma (which I used for the subtitles), and GenEi LateMin (which I used for the common text). The colour pallets I found, one used different shades of black and red and the other used different shades of blues and reds. I found this part also easy because I know what kind of colours and fonts I was looking for although it was a little difficult to find Japanese styled fonts at first because western versions were a little too extreme so I decided to search for Japanese fonts for Japanese keyboards and found the fonts that I have now. Finding the colour pallets were easy too because they were automatically generated, all I had to do was pick one I liked.

Then I went onto creating mood boards and mind maps for my work to give me a basic idea of what I should have in it. When I finished that I began creating some sketches to branch out my ideas of how I wanted my one page website to look. This was fairly easy as I have some basic knowledge of how to design a one page website in a previous project.

After that I began creating a wireframe using the ideas from the sketches I created previously. When that was done I began designing the one page website on Photoshop using the research, font’s and colour pallets that I prepared earlier. When creating the actual website on Photoshop I found it not easy but not hard and overall enjoyed creating it although I think I could have improved the top and bottom of the site a little more as it looks a little underdeveloped.

I then started trying to build this website in IM Creator, trying to replicate the website that I created on Photoshop. I finished building this but there were quite a few complications with using it such as moving text around and not having the ability to create shapes. It was a lot more constricting than Photoshop as Photoshop has a lot more freedom to it. Because of these complications my website on IM Creator looked a little different than originally planned. Therefore it was pretty difficult in creating this and almost frustrating not being able to create the website how you would want to.

After creating the website and doing the research I finished the project off by writing up a Conclusion Report which I found not easy and not hard because all I had to do is backtrack through my work of what I’ve done and why I’ve done it.

Overall I have found this project my favourite so far because we were allowed to choose what to create and I think because of this it has made the project more comfortable to do.

14

Target Audience Profiling

The target audience I am aiming for, for my website is going to be for men and women aged 16 and above. The reason for this is because it is an informative website that is created to inform you and hopefully help you gain some interest in Japan and its country’s food. It would be also for people that would like to travel to Japan and would like to know what food that they have there.

Name: Tom Carter

Age: 42

Occupation: Interior Designer

Hobbies: Traveling, cooking

Tom is the type of person that would like to visit my website because it fits into his hobbies. Because with the website being about Japan it would make him interested because he likes different places and because he liked cooking he would like to know about what type of foods there are in Japan.

Name: Samantha Burgess

Age: 25

Occupation: University Student

Hobbies: stamp collecting, tennis

Samantha is the type of person that might not be very interested in my website because it does not meet her interests. Samantha’s hobbies are stamp collecting and tennis but my website is about Japanese street food so she might not be interested. If she wanted to go on a Holiday to Japan though, she may become interested.

Name: Callum Kingston

Age: 30

Occupation: Travel Agent

Hobbies: traveling, video games

15

Callum is the type of person that would be interested in this website because he works as a travel agent and it is his job to sell holiday and the more knowledge he has about the country the better. It also fits into his hobbies with his love for traveling.

16

Research – Japanese Street FoodTakoyaki (たこ焼き) –

This is a popular Japanese snack that is in the shape of small round golden balls containing pieces of octopus (usually the tentacles). The name of this snack literally translates to “octopus fried/grilled”. Many westerners would simply call them “octopus dumplings” or “octopus balls”.

Yakisoba (焼きそば) –

Yakisoba is a Japanese stir fry dish that is common throughout Japan. This dish is usually served with meat and vegetables, seasoned with a savoury but sweet sauce similar to Worcestershire sauce but with a little less kick. The name of this dish translates to “fried/grilled noodles”.

Yakitori (焼き鳥) –

Yakitori is Japanese styled skewered grilled chicken. The meat is skewered with Japanese skewers called kushi which are usually made from bamboo, steel or other similar materials. When the meat is skewered it is grilled over a charcoal fire and seasoned with dipping sauces called tare and/or with salt.

Imagawayaki (今川焼き) –

This is another popular Japanese snack and has been for over 300 years. This snack is a dessert with a sweet red bean paste filling (made from sugar and aduki beans) with a pancake like base. There are also other fillings that are used for this snack but the most popular one is the sweet red bean paste ones.

Ikayaki (いか焼き) –

Ikayaki is a type of fast food in Japan which translates to “fried/grilled squid”. It can be served in many ways, from sliced rings to be served whole and even put onto sticks. This dish is usually served topped with soy sauce and is popular during Japanese festivals.

Yaki-Imo (石焼き芋) –

Yaki-Imo is basically just baked Japanese sweet potatoes. These usually have a purple skin with white insides but when baked the insides turn yellow and is so sweet that it is usually just eaten on its own as it is sweet enough. But it is also served in ice cream and with pancakes. This snack is popular in the winter as it is warm, tasty and also serves as a hand warmer when it gets a little too chilly.

Yaki Tomorokoshi (焼きとうもろこし) –

This snack is pretty much as basic as the baked sweet potato as mentioned earlier. This is usually prepared over a charcoal grill and coated in Shichimi Togarashi (Japanese 7 spice) this is basically a chili pepper spice blend that is mostly common in Japan but may be found in some Asian supermarkets.

Crepes –

17

This snack is a French desert that it known around the world and have been adopted into Japanese cuisine. These crepes are made from batter that is cooked on a griddle and filled with sweet ingredients such as chocolate, whipped cream and fruit and is served into a cone shape that is usually wrapped in a paper case so that it can be easily eaten while walking around the streets of Japan.

Honourable mentions –

Wataame

This is basically cotton candy that can be found all over in Japan in street food stalls and at festivals.

Candied Fruit

This is a snack that many western countries have already tried. It is sugar coated fruit called ringo ame (candied apples), ichigo ame (candied strawberries and anzu ame (candied apricot).

Choco Banana

These chocolate coated bananas covered in colourful sprinkles. The chocolate may be other flavours and colours besides milk chocolate such as strawberry and white chocolate.

Kakigori

This is a desert that is mostly eaten in summer as it is a very cold snack. This desert is basically just shaved ice topped with flavoured syrups and can additionally be topped with whipped cream, sweet rice cakes (mochi) or sweet red beans.

18

Mood boards

19

Sketches

20

21

22

Wire Frame

23

Fonts and Colour palletThis is the font that I have used for the title of the website I am designing.

This is the font I have used for the subtitles of the website I am designing.

24

This is the font I have used for simple text throughout the website.

Colour Pallet 1

25

I really like the colour range of this colour pallet as they all seem to compliment each other.

Colour Pallet 2

I prefer this colour pallet because even though it looks dull it will make other things in the website stand out more.

26

Final Design

27

IM Creator XPRS Website

28

Mind Map

29

Evaluation/appraisal

For this self-initiated project we were asked to create I decided that I would like to create a one page website to inform people about Japanese street food.

To begin this project I started by researching different kinds of Japanese street foods. This was pretty easy to do and I was comfortable with it because I already have an interest in Japanese foods and culture and know about their foods quite a bit

I also created a competitors report to see what kind of websites that I would be competing with. This is important because you would obviously want to have the more page views. More page views, more money depending on what website you’re running. I found this part easy because google search finds the websites all I have to do is see who my website would be competing with.

After doing all the research that was needed I began looking for Fonts and colour pallets that I could use relating to Japan. The fonts that I found were Genkai Mincho (which I used for the title), Shirokuma (which I used for the subtitles), and GenEi LateMin (which I used for the common text). The colour pallets I found, one used different shades of black and red and the other used different shades of blues and reds. I found this part also easy because I know what kind of colours and fonts I was looking for although it was a little difficult to find Japanese styled fonts at first because western versions were a little too extreme so I decided to search for Japanese fonts for Japanese keyboards and found the fonts that I have now. Finding the colour pallets were easy too because they were automatically generated, all I had to do was pick one I liked.

Then I went onto creating mood boards and mind maps for my work to give me a basic idea of what I should have in it. When I finished that I began creating some sketches to branch out my ideas of how I wanted my one page website to look. This was fairly easy as I have some basic knowledge of how to design a one page website in a previous project.

After that I began creating a wireframe using the ideas from the sketches I created previously. When that was done I began designing the one page website on Photoshop using the research, font’s and colour pallets that I prepared earlier. When creating the actual website on Photoshop I found it not easy but not hard and overall enjoyed creating it although I think I could have improved the top and bottom of the site a little more as it looks a little underdeveloped.

I then started trying to build this website in IM Creator, trying to replicate the website that I created on Photoshop. I finished building this but there were quite a few complications with using it such as moving text around and not having the ability to create shapes. It was a lot more constricting than Photoshop as Photoshop has a lot more freedom to it. Because of these complications my website on IM Creator looked a little different than originally planned. Therefore it was pretty difficult in creating this and almost frustrating not being able to create the website how you would want to.

After creating the website and doing the research I finished the project off by writing up a Conclusion Report which I found not easy and not hard because all I had to do is backtrack through my work of what I’ve done and why I’ve done it.

30

Overall I have found this project my favourite so far because we were allowed to choose what to create and I think because of this it has made the project more comfortable to do.