기본 콘텐츠로 건너뛰기

Data for Change [ Process : Design & Coding ]


Since I was a bit lost when doing data for change, I focused on visualising data and design after the second crits and getting feedback. 


<First Page>


I forgot to put a legend on the panel when I showed them last crits, so I wrote the meaning of each colour. The most difficult in design was the first page because of layering the map. I wanted to show how many learning methods each country are using. For example, while some countries implement both Online and TV, some countries provide 4 learning methods (online, tv, radio, paper). My intention from the first page is that it is not unconditionally good even though they provide whole learning methods. Because we can find there are many countries that use 4 learning methods, but when users scroll down, they will find they all just implement online/tv/radio class even they do not have enough equipment. And users can find there is a huge gap between the rural and the urban on the last page. It means mostly they all just superficial action to seem they solve the problem. 








The difficult design I mentioned above was to give a blend mode on each layer. It did not seem what I expected every time I tried. I think this is why I did not understand the concept of blending mode.


[Experiment 1: original colour layering] : most blending modes made the map dark. And there were over 5 colours when I gave soft light and hard light. 






[Experiment 2: change the colours to each different colour, layer them and give blending mode]
: I tried every mode but it did not work.



[Experiment 3: change the colours to the same colour, layer them and give blending mode]
: The first one is multiply and the second one is hard light but still did not work.





[Experiment 4: delete the no data section except for one, layer them and give blending mode]
:  still not working





[Solution]
Aside from these experimentation, I did a lot but it did not work. But I solved it with five layers which were whole white colour of map, 4 layers with each coloured section without grey colour.


I gave all layers multiply except for white. At first, I gave all layers border but it did not seem smooth so I deleted the border on coloured layers.




<Second Page>

As you enlarge the photos, one of images is not clear. I changed png file to svg file for the background image.





I changed the green colour scheme from monotone gradient colour to multi hue gradient colour to increase the contrast. Because shades of green were too similar. I have tried to use green to purple as Tiz mentioned but I liked the yellow to green more. And I added the green bar showing the data when hovering instead of scrolling to next page to show and compare both data.






[Coding]

It was not really difficult to do coding than the borders &boundaries project. 

Originally, I wanted to use the SVG file by using <id element> and changing the colour on the map. However, I already used in borders & boundaries project and I wanted to try to use other code. And I wanted to use parallax scrolling effect on the background to change the map colour smoothly. I have not tried it by coding SVG because it ran well with only using a png background. But I just wanted to change the background file png to SVG file with no definite idea. And I realised that I can use the SVG file in the background as well through this experiment (maybe). I thought png is the highest quality format when I save or use the image but I got to know that I need to use if I want the more clear image when I design it in Illustrator. I actually had no idea about the reason why we use SVG file when we did IHR showcase and I thought it was just for the easy way to code.

I was trying to not use javascript on data for change project because I feel like I am using the javascript without understanding entirely. So I used HTML and CSS only. Instead of not focusing on javascript, I focused on various code in HTML and CSS. In HTML, I have never used <span>, <h>,<p> tag for the last projects, but I used this time and tried to use <Id> element as well, not only used <class> element.  In CSS, I tried to understand vh,vw again because I had a problem when I did borders project, which looks different and shows huge space(margin) when I open the link on the desktop. So I kept trying to use and fixed it when I faced the trouble with vh and vw. I used padding for the first time as well during the projects. I totally understood {display} and {visibility} when I use the hover. I tried to use the code based on what I have learned in the course like h tag, using parallel, vh&vw and giving animation.

The one I felt disappointed was menu bar 





댓글

댓글 쓰기

이 블로그의 인기 게시물

Borders&Bounderies [Process-coding]

<  <Coding before changing the design>> I tried to change the background colours when I hover the text. Result: This is the coding I tried to give blend mode effect before realising that I can use the blend mode in CSS Result: After I knew that I can use blend mode CSS as well, I applied it and the images/texts were more clear than before .overlay { position : absolute ; bottom : 110px ; background : rgb ( 255 , 0 , 0 ); mix-blend-mode : multiply ; width : 300px ; transition : .5s ease ; opacity : 0 ; padding : 300px ; text-align : center ; } .container:hover .overlay { opacity : 1 ; } --------------------------------------------------------------------------- ----------------------------------------------- ---- << Coding After changing the topic/ design>> I had difficulty when I had done coding, especially in the third page which has hover effect a lot. In order to check precisely the division of the pag...
댓글 쓰기
자세한 내용 보기

Weeks in Review [1]

23RD SEPTEMBER 2019  I learned how drawing can be related to systems. At first, I was quite confused since I have not thought that I can do a drawing about systems without computer and machine. Because the word 'system' I thought was directly related to computer. I learned the exact meaning of system, which is a set of things working together as parts of a mechanism or an interconnecting network.  We especially drew 'complex system' a lot, meaning one in which the individual elements interact to create something that is greater than the sum of its parts. First of all, we drew some straight line but it looked like chaos and disorderly. When we drew something that is constant and orderly, they looked complex system.  After that, the tutor organized 5 teams and instructed teams to make the rule to draw system. Ours were to draw triangles connecting each three points but do not touch the sides of triangle and fill the colour. I learned 'emergence' from this ac...
댓글 쓰기
자세한 내용 보기

Data for change [Theme&Target Audience&Research]

[Why and how I chose the theme] When we get the list of topic, our PBL group chose "inequality" and did research. While I researched, I found the interesting news that children in the poorest countries have lost four months of schooling since the start of the pandemic. So I examined the relationship between education and inequality and focused on more school closure in education. Because school closure is one of the reasons that cause inequality during Covid19.  [Target Audience] While I had decided on my topic, I was  in   a   bit   of   a   bind . Because I did not set the target audience before the second presentation. So I needed to choose a specific target audience. Some people living or studying in high-income and middle-income countries might have no experience when they attend the class. I want to let those people know that many people even cannot afford to attend class via media, including online, tv or radio in low-income countries. Moreover,...
댓글 쓰기
자세한 내용 보기