The Social Background Purpose Problems and Solutions Target Audience Content References

2016年3月17日星期四

Sitemap and Aesthetics

Sitemap:


Layouts:
Main page

Colours:
Blood is a topic that make people feel scared. We hope people can feel comfortable and relax when they are reading the website. After referencing the website of Pantone, we got the "Color of the Year", and these colors can make people feel soothing and peace. Therefore, we will use:

Typefaces:
On the bar
Title
Content


Images:
Bloodions 
Type B
Type A
 
Type AB
Type O
Blood inventories at low level
Type B
Type A
Type AB
Type O
Blood inventories at acceptable level
Type B
Type A
Type AB
Type O
Blood inventories at satisfactory level
Type B
Type A
Type AB
Type O
Blood inventories at adequate level
Type B
Type A
Type AB
Type O
Other

Mobile/ responsive design:



2016年3月7日星期一

Textual Analysis of References

Project Fumbaro Eastern Japan


1. What is the overall theme of the project In what ways can this project facilitate the furthering of social development


In the project, the overall theme is to provide a platform to connect the supporters and survivors and support and help the victims in the earthquake of Japan.


Since the earthquake, there are many people lost their lives and waited for the supports and materials. However, the wrong distribution appeared because people did not really know what the victims need. Therefore, some of the victims could not receive supplies or get the needs that they really need. The problem of oversupply and lack appeared.


This project provided a platform for people to get the information in the real time about the earthquake and victims. People could understand what the victims really need. Then, to match the supply and demand. Therefore, the victims could get their necessary supply.


Because of this project, gradually East Japan could been revived and the emergency support could been improved.


2. What are the contents (written, visual?? , audio, video etc.) presented in this project?
未命名.png
There are some videos for giving information of the project.


5.png
Writing for giving the details and mission, financial statements in the project.


6.png
Words and photos to present the gratitude from the victims to the supporters.


3. How are the contents organized or structured?


For the movie, the video had been structured by some excerpts. There are the excerpt of the interview of the person in charge to introduce the project, the excerpt of the situation after the earthquake and the excerpt of the state of help.


For the part of “About Project Fumbaro Eastern Japan”, there are the information of the earthquake and what is Project Fumbaro Eastern Japan each as collect and send support items.
8.png


For the mission part, there are the reason why the project emerged and the aim of the project.
3.png


For the statement of the income and expenditure, the income and expenditure had been presented clear.
4.png


The information appear clear in table from which distribute in two part, items and amount. For the amount part, there are income and expenditure part.


For the part of thank you letters, there are the letters and photos of the thank you letter from the victims to the supporters.
7.png
Some of the photos appear with the words of the English version of the letters which translate from the Japanese version.

4. How do visitors engage with the project? What is the intended navigation mechanism? Are there any interactive / user-generated components?



They use Facebook and Twitter for tools to introduce their movie to viewer. The viewers can express their opinions and leave comments.
10.png

In their website , they make a “Contact Us” page to make sure when the viewers have any question, can contact them.


9.png
5 . What kinds of web development tools, applications and technologies are employed?
Uses the HTML
11.png
<li>

12.png
<iframe> the Youtube videos

13.png
Connect Facebook and Twitter to let people click like of Facebook and share the contents on the Twitter.

14.png
Button of Page Top for people to go back to the top.

6. How would you describe the aesthetics of its design?

The best part on this website is the website introduce the details and information clear and deep. I think the website is simple for viewers to get the information. Therefore, the viewers can easy to get the information through the less click. However, the website not really can attract people to check again. If there could be more pictures or more color, it will be better.

Seed Studio- Grow Different


1. What is the overall theme of the project In what ways can this project facilitate the furthering of social development ?
In this project, they are giving a chance to let different background group together to make hardware, share their creative hardware, and hold activities or events to expand the community.


In this website, we can see that they are keeping update their news of hardware, they can share their works. Also, they create a page that let other donate money encourage them continue to create more creative hardware to speed up the teachnology development.


2. What are the contents (written, visual , audio, video etc.) presented in this project?


This is the whole website of seed studio, it is a blog showing the latest work of their hardware project. It is clean and usually just a picture and big title on the homepage.




This is the writting contents of seed studio. On the webpage they just put the picture and title try to give you a first impression.




This is the peice of blog when you click the title. It show that their writting contents just use point form and one paragrpah conclude what they try to promote. Also, picture is the main focus on them.


This is a webpage that they are holding a flash deals and hope people buy it.
This web page show the visual content because of they cute background, it may eye-catching.




This is the video that they paste on the blog showing their solid Pop-up Factory in China. The link is from Youtube that is from a magazine youtube channel.

3. How are the contents organized or structured?
The contents organized as a blog. As they are a website that producing many creative hardware project, they keep updating the latest to the products process.
They have divide into 4 category to let others clearing to see what they are doing.


For the News column, they show a big slide share on top to put the most important news let others can read first. Then scroll down is other pieces of latest news.




Each pieces of news there also a picture on top, and some picture is fun and make it as a gif.


For the Lab column, they will show the hardware picture they make, it may let the reader first have a impression that what hardware they are going to write.


For the Maker column, they will put the maker’s face and a title to descirble the maker.
For the pebblepowerup column, they present what they are working in a project and invite others to join them.


4. How do visitors engage with the project? What is the intended navigation mechanism? Are there any interactive / user-generated components?


In the web page, there is a menu bar on the top of the page (inside the red box) to navigate the users to different section. In addition, in most of the content page of the web sites, there is a division to show the twitter of seeed (inside the blue box), users may click into it to go to the respective news.


In the other hand, in the bottom of every news, users may leave a comments or ask for more information. Users may interact with other users, the news and the web, they are engaged through this.

5. What kinds of web development tools, applications and technologies are employed?



The web used the following common web library:


  1. bootstrap  - getbootstrap.com
It can make the web filled with a beautiful style.


  1. jQuery - jquery.com
    It is a common javascript library, which allows the developers do many animation easily.


  1. genericons - http://genericons.com/ It provides a lot of icon for a icon-based web site, which may make the web become more user-friendly.


6. How would you describe the aesthetics of its design?
I think the menu bar of the web is good becasue it leads me to different section effectively. But i think that there are some problem,

  1. the news in the first page are so many and became so untidy.
  2. the height of the page is too long, but the menu will not move with the windows, so after i watch the news, i need to scroll for a long long time for going to the other sections.