Week 4

1) Analysis of examples

dc42b328652855.55cb351c095c2

This poster uses a sharp and contrasting color, which is quite strong. The visual focus is on the chair in the center of the picture. The visual arrangement is separated from the left and right, clearly showing the meaning of “comparative” and the theme. It gives me an idea to show how to present the alternative way to express travel experience and sharing.

e2cd5a30358177.5910c5d92b7bc

https://www.behance.net/gallery/30358177/PORCOLIPSIS-infographic

This poster shows how the grid system works. It also uses contrasting colors and combines it with a hand-painted style in a very holistic visual form. The sense of rhythm in the layout is quite important.

74838f56458085.59af923fb9cb3

https://www.behance.net/gallery/56458085/1708-Cake-Infographic-Poster

This poster uses the three-dimensional model to highlight the main object in the most visual center, the overall visual form is also very unified, the icon is detailed and clearly expressed. Style and content exactly match. It is absolutely worth learning

25b35575467735.5c4de108d1c7b

https://www.behance.net/gallery/75467735/GROW-FACEBOOK-Trains-Drones-Autonomous-Cars

This infographic has a lot of different kinds of information, a lot of colors and many different icons, but the authors use powerful visual navigation to make them relatively harmony. It shows me how to unify the poster.

62f26414968905.5c19281b78c5e

https://www.behance.net/gallery/14968905/Infographic-pack

This is a very typical infographic. The combination of color blocks and data is relatively simple but clear and effective, with a clear visual flow. I think this is another important part of the infographic, that is, it is more stable to convey information clearly.

2386d174532347.5c333dbf878eb

https://www.behance.net/gallery/74532347/Metro-in-Warsaw

This infographic is also relatively clear and simple, but it uses the circular/square and the point/line/plane to form a good relationship. It uses a mature red and black color scheme to combine well with the theme.

76fe5b29260121.55e9cd8e3ce49

https://www.behance.net/gallery/29260121/Infographic-on-gender-representation

This infographic uses a lot of repetitive visual forms to enumerate the data. The combination of font and typesetting is very comfortable. I think the cake on the top left may be too heavy, It, however, would be boring if you remove the whole poster. Balance is also a key part of all posters.

 

2) More exploration of data and other references

Feng, J., Dijst, M., Wissink, B., & Prillwitz, J. (2017). Changing travel behaviour in urban China: Evidence from Nanjing 2008–2011. Transport Policy, 53, 1–10. https://doi.org/10.1016/j.tranpol.2016.08.011

Tilley, S., & Houston, D. (2016). The gender turnaround: Young women now travelling more than young men. Journal of Transport Geography, 54, 349–358. https://doi.org/10.1016/j.jtrangeo.2016.06.022

Thompson, C. P. (1982). Diary-keeping as a sex-role behavior. Bulletin of the Psychonomic Society, 20(1), 11–13. https://doi.org/10.3758/BF03334787

 

After the researching of millennials in week 3 and the feedback, I reduced the target audience. The age group will be Chinese citizens between 18-35.

 

v2-a43725ad04cd42a931c597c50130a541_hd

The mobile users still on the rise

 

some other inspirations

number-26

 

some other inspiration of colours

http://www.flatuicolorpicker.com/red-rgba-color-code

3) Critical thinking of the infographic

The infographic does not mean purely conveying information and neglecting the visual form. It needs to be displayed to the target audience and made them understand. I used the combination of white, blue and yellow, and simulated the shape of the book and dairy because I tried to echo the “record” theme of the diary in a simple way.

dc42b328652855.55cb351c095c2

I made a reference to the chair one to show a comparison of old mode and the new mode. It will focus on providing travelers an alternative mode for documenting and sharing their travel experiences.

06

 

icons

The use of icons is a continuation of the content, and the icons need to convey the information of the text clearly and intuitively. When an ambiguous icon appears, people tend to be misled. So I rethought the accuracy of the information passed by the icons used in my project.
First about where, when and how to use. Is there a more intuitive or more general form of expression? Like the icon used in week 3(first step of “the new process”). Simply listing vehicles is ambiguous and easily misleading. Or if using a coffee cup to express free coffee time, there is also ambiguity and does not match the theme. A 24-hour clock will be redundant because the phone can be used at any time. I think it should be better to use the suitcase to refer to the travel so that the mobile phone icon covers the project. In addition, in the using step, the icon needs to express the text content, such as the sharing and collection in the last column, which needs to be expressed in different forms. It doesn’t mean “the more the better” or “the more complicated the better”.

 

inxh7b6xv6a97e72gaazubc40r

some new icons and some abandoned icons

cq}nr]t~33dosl~vll]3_u9

24nn627d28me6wqnbg9ia7bo7eqh

The process of creating the symbol of sound

The most important thing is to convey the information most effectively through all means.

 

Meanwhile, I did the other two attempts.

The colours I used are very conspicuous because it is mainly aimed at younger groups. With reference to modern electronics and the combination of pop art, it expresses the purpose of combining the travel experience which everyone has and the individualized artistic creation. I also made a pink version for a relatively large number of female users.

 

 

I tried some other matchups with grey and brown. Another problem is CMYK colour can’t show the green I chose on the light background.

 

The final version are two infographics that introduce the project travel impression. Travel impression is a travel diary app that lets users record their travel experiences in new ways. The audience targets are Chinese citizens between 18-35 years with some travel experience. I used two color schemes, the first one is blue and yellow, simple, white is close to the paper which is light, safe and reliable because it is another form of the diary, it is very important to give people a sense of safety. The second set of colors is more conspicuous because it is mainly aimed at younger groups. It refers to the color scheme of Pop Art, expressing the purpose of combining the travel experience which everyone has and the individualized artistic creation. Brown is also very similar to the cover color of the old leather diary that was popular in China. The overall poster structure is steady and easy to read. I used the typeface combination because they are clean, suitable to the style and readers can scan and identify what they want to read. In the most central position of the visual, I added an app’s mockup to show how it works.

128129

128229

 

4) More possibility of colours

 

 

https://www.canva.com/learn/contrasting-colors/

The different types of contrasting

Contrast with Dark and Light Colors

Contrast with Color Hue

Contrast with Color Temperature

Contrast with Color Intensity

 

 

Colour definitely plays an important role in an infographic poster.

First of all, from the perspective of monochrome grayscale, colour is an important part of the composition. In addition to the hue, the brightness of the colour needs to match the layout of the poster.
Secondly, from the point of the hue, the different colour out of hue will be highlighted, such as some warm colour used for balance in the cool hue. It will be visually more prominent, and the proportion will be greater when the composition is balanced. High-purity or dark colors (or light in dark background) are also more likely to attract attention. The layout of the posters needs to be more balanced and these colours should be put on the right place where it needs to be highlighted. At the same time, colour, theme, and typesetting are part of a unified whole, which needs to be matched and harmonious.
Thirdly, the same kind of colours can also be used for classifying, unifying different types of elements, and making the overall layout harmonious.

If there is repetition in a poster, it must have a contrast. If the repetition is the keynote, contrast is the focus. Contrast color is an important form of attraction, and often makes the overall style more avant-garde, enlightened, and young. The most important part should be in a contrast to other elements. The whole poster will be more eye-catching if the contrast is used appropriately.
.

2 (1)

2

 

 

 

 

Week 3

1) Research about the different style of icon

1-1 the 3-D icons

IconDrawer – Classic Stock Icons

pmamy6kb5z`fbt@%pn}k8b7

Adrien Olczak

https://dribbble.com/aolczak

)%jqv~vp@]4kgde0[3ni@lu

Peng Xiao

https://dribbble.com/pacoxiao

f_qk%bm3]$d~c8@gc9%i%~2

Jonas Rask – Pry

http://www.iconarchive.com/show/pry-system-icons-by-jonas-rask.html

After viewing different styles of 3-D based icons, I have some understanding of them. 3-d icons have more details and different textures, but I think that my project will not be an app that needs users to think of actual products, so it is not suitable for 3-d style icons.

 

1-2 hand-drawn style icons

David Lanham – Ollie

http://dlanham.com/

preview

Simon Oxley

https://dribbble.com/simonox

v2-5f2350f143a6950f87a1d840b235539f_hdv2-0eec4216aaf1c065673f406d554aa3ec_hdordinary-daze_2xa-team_2x

Jon Hicks

v2-49865fee0f8480f6f3cdc268dfd54fbd_hd

Hand-drawn style icons are usually very interesting, lively, eye-catching and tensioned. The project will contain the hand-drawing part, but meanwhile, it’s a documentation app so it needs to get a balance between the very cute style(MBE etc.) and traditional travel apps. Because the target audiences of my project are young people with some travel experience, the relatively flat hand-drawn style may worth a try.

other examples:

 

1-3 glyph icon and linear icon

iconwerk

https://iconwerk.com/

iconwerk-kayak-101

hlvticons

http://hlvticons.ch/

This slideshow requires JavaScript.

 

I think the most important thing is that object symbol must be designed by some artistic or even exaggerated processing, so that it can fit on the screen(phone or ipad or web etc.) and express the meaning. Whatever the style of them, the icon is not only need good-looking but also need more things. Details need to be appropriate, the small size should be seen clearly, and the whole set needs to be in harmony with the user environment.

 

2) Another version of the icons

Another edition of symbols after the research

[fn5dv4%7_6qgjre~a@@{bc

3) research of the colour

A worldwide survey reveals that blue is the most popular colour in 10 countries across four continents – including China

https://today.yougov.com/topics/international/articles-reports/2015/05/13/why-blue-worlds-favorite-color

v2-867082aa37abb6e09eacdcc3538e076a_bv2-ebced1dc311b5665be6ce4407d5f43a8_b

There are many advantages to use it.

Blue is relatively neutral.

It makes people feel safe. Blue is the traditional colour of travel industry website.

It makes the product look trustworthy.

It is accessible. The most common color blindness (red and green blind) can identify blue. But it is difficult for them to identify green and red.

 

The colour of the app icons

https://stories.appbot.co/the-colors-of-an-app-icon-b5e8805958d7

The pictures show the most popular colours in IOS app icons, which is relative to the theme as well. The blue and red are significantly most used colours. So the disadvantage is that it’s hard for people to distinguish them from the numerous apps.

https://visual.ly/community/infographic/business/color-emotion-guide

color-emotion-guide_512d42458efc1_w1500

 

some inspiration of colour

Some trying of colour combination

dge$q6`d%o[}q]ef}]9ru3k

Some duotone examples, eye-catching but might not suitable for an infographic poster to express information.

 

 

 

4) more research of typeface and layout

I used to use the combination of Helvetica Neue and Garamond because they are steady, elegant and traditional. It would not wrong for anyone who wants to try. But on the opposite, it’s too boring as well.

helvetica-font-combinations  font-pairing-montserrat

https://www.canva.com/learn/the-ultimate-guide-to-font-pairing/

more combination and inspiration

c)wq0{])goz(w5aq9an25@ch5{yt8uixs6uzr13]@njr00  n]${b)i`hza95sy3qmw)ho5w}d3$r4)tntkke$76{%hwqk  z91xg0f89xq9~m56t~7j%6r

The combination I chose to use is Source Sans Pro and Open Sans. Sans serif typeface is more modern, tidy and clear.

Source Sans Pro is inspired by typefaces such as Franklin Gothic, but with a larger x-height. Although a sans serif typeface, it also has a subtle curve which has been influenced by humanist and serif typefaces.

Both Source Sans Pro and Open Sans are typefaces intended to work well in user interfaces. Online newsletters and reports need clean, easy-to-read combinations that clearly define heading, subheading and body copy so readers can scan and identify what they want to read.”

 

 

The more exploration of layout

https://www.edrawsoft.com/infographics/infographic-layout-templates.php

The different layouts

I used timeline style to show the app’s basic work.

 

More inspirations

 

5) new symbols

$]t@s%o1i)k2a~6%ijde94c

 

6) Research on how to present information through the visual infographic poster

Scott, H., Fawkner, S., Oliver, C. W., & Murray, A. (2017). How to make an engaging infographic? Br J Sports Med, 51(16), 1183–1184. https://doi.org/10.1136/bjsports-2016-097023

Attractive: Let the reader understand the content of the information in the most intuitive way.

Clear: Defining what you want to convey, what you want the reader to understand.

Simple: Making it easy to understand, boldly abandon the useless elements.

Flow: Using the rules of people’s reading habits to indicate the reading order.

Wordless: Using as much graphics as possible to convey information.

 

7) The new version with more data research

rearrange the content of infographic poster

introduction of the project

target audiences

the dominant (background)

using process

 

research about more data

http://www.tmtpost.com/3427827.html

The data shows that as of 2018, 788 million Chinese use smartphones (98.3% of all 802 million Internet users), while the proportion of using desktop computers and laptops are 48.9% and 34.5%, which means the market is bigger as well.

 

https://my.yougov.com/zh-my/news/2017/05/22/millennial-travelers/

“Millennials are one of the largest generations ever.”

“Millennials as a group are looking for more esoteric, unique experiences when compared to other groups. While many destinations can boast the types of cultural or
adventurous experiences this group is seeking, many have not taken appropriate steps to fully develop their offerings or highlight them in marketing.”

d54]w4pzw~k`zscbh@]q@r9

 

 

Week 2

)bfsgj(r`{s6fk{yic7bt4n

initial trying of layout

hng_7a@]9qpqb~mf1gp0y64

literature research about the colour of infographic poster

k8@uo7hz6rcf4xvupebe%3p

initial draft of structure and layout

3jonp(~k]b{[ruqj}ky$s`w

drafts of icon using

some reference of infographic poster and other colour matchups

black, red and light linen make the poster steady with a good visual impact

searching balance between present information and visual

need to research more about data and make uniform visual form

the second edition of the poster

“Font combinations of a neo-grotesque sans-serif and an old serif is a safe bet and works exceptionally well in corporate contexts. It is clear, crisp and traditional.”

10 Beautiful Font Combinations For All Your Design Needs. (2019). Retrieved from https://inkbotdesign.com/font-combinations/

i4~mh7zx~t14v[iaboapx(n

more creation of icons

The 3rd and 4th edition of the poster

I made a change of background colour to make it lighter. Some revises of layout changed as well.

333