'mitosis & meiosis' weblog
marek kultys bachelor project
design supervision:
prof. roman duszek
scholarly consultation:
dr włodzimierz wójcik
warsaw academy of fine arts
faculty of product design
2008
__________________________
weblog contents:
______________
APPLICATION
application_4 = biologia.html
application_3 = visualising rings
application_2 = iconic icons
application_1 = sudden changes
______________
FEEDBACK
feedback_2 = ihar
feedback_1 = approved!
______________
ANIMATIONS
animations_6 = ready at last!
animations_5 = life cycle presentation
animations_4 = teacher's version
animations_3 = ...so does meiosis!
animations_2 = mitosis is moving!
animations_1 = width / height
______________
ILLUSTRATIONS
illustrations_13 = last corrections
illustrations_12 = orange + blue
illustrations_11 = life cycle_04
illustrations_10 = meiosis_03
illustrations_9 = mitosis_04
illustrations_8 = life cycle_03
illustrations_7 = meiosis_02
illustrations_6 = mitosis_03
illustrations_5 = life cycle_02
illustrations_4 = mitosis_02
illustrations_3 = life cycle_01
illustrations_2 = meiosis_01
illustrations_1 = mitosis_01
______________
STANDARDS
standards_3 = colour blindness
standards_2 = software
standards_1 = software
______________
SKETCHING
sketch_12 = icons
sketch_11 = architecture final
sketch_10 = style final
sketch_9 = style_02
sketch_8 = style_01
sketch_7 = architecture_03
sketch_6 = architecture_02
sketch_5 = mito + meio cycle
sketch_4 = architecture_01
sketch_3 = graphic storyboard
sketch_2 = reinventing condensation
sketch_1 = typographic storyboard
______________
RESEARCH
research_7 = research summary
research_6 = educational context
research_5 = visual style
research_4 = the late interphase
research_3 = scholaris.pl
research_2 = ville's 'biology'
research_1 = youtube.com
______________
TIMELINE
this is how I organise my work?
______________
MOTIVATION
why doing exactly this?
______________
THESIS
what to do? problem of mitosis & meiosis
__________________________
home
information
__________________________
APPLICATION
application_4 = biologia.html
01.07.2008 _ 00:10
__________________________
after four months of intense work I finally finish my bachelor project: 'graphic handbook - biology'.
I do not finish the work however. encouraged by both my promotor, prof. roman duszek, and my scholar
consultant, dr włodzimierz wójcik, I want to continue developing this design and push it to another
level - maybe a publishing house, maybe the ministry of education, maybe a research centre.
I do not have a direction yet, but I do have a vector!
here is the link to biologia.html, which is the homepage of my aplication.
__________________________
APPLICATION
application_3 = visualising rings
30.06.2008 _ 23:55
I would need a 3d model
to show the complete net of links between each lesson and chapter.
therefore I made a map for single
input variable only which is 7.02 chapter and Meiosis term.
following these examples you can know the pattern that links all html documents in my application.
__________________________
(click here to enlarge the image)
__________________________
FEEDBACK
feedback_2 = ihar
30.06.2008 _ 23:30
unexpected review made by the renown biologist, prof. andrzej anioł, who was asked
by my promotor, prof. roman duszek. big thank you to both of them!
you can see it below, but it is again only in polish.
to all interested: mail me at: marek.kultys@gmail.com and I shall translate it to you!
review_page_1
__________________________
APPLICATION
application_2 = iconic icons
30.06.2008 _ 23:20
to show the user that he has various animations, illustrations or test sheets to use in the application,
I decided to create meaninful icons that would be... selbstverständlich - as germans use to say,
which means - obvious - in english. I also wanted to add some fun into the educational application
that is, to be frank, quite dull considering the function it has.
therefore I looked for inspiration in computer games and comic characters. I also decided to make it
a but anthropomorphic as this always makes anything it is applied to a bit more familiar and cute.
I found some good associations in the iconic sculptures from the past:
- static and dignified figures from the antic greece are the metaphore for still illustrations;
- animations are represented by the dynamic statue of a factory worker and a peasant girl by vera mukhina;
- tests makes you think as the rodin's thinker;
eventually I created the collection of three icons in 8 colour versions.
__________________________
ANIMATIONS
animations_6 = ready at last!
30.06.2008 _ 22:40
__________________________
all three animations are finished. they have sound (comments read by the
__________________________
APPLICATION
application_1 = sudden changes
30.06.2008 _ 22:15
practice corrects theory. it has been the same in this case as well.
I found some functional errors while programming the application.
below you can see the draft structure of the upgraded design.
__________________________
FEEDBACK
feedback_1 = approved!
24.06.2008 _ 2:30
mitosis and meiosis animations have been successfully tested by the high school biology teacher,
dr Włodzimierz Wójcik, and he wrote a formal review stating that my animations fulfill all indispensable
requirements imposed by the polish ministry of education. quite impressing... isn't it?
you can read it below, but you also need to know polish :-)
feedback_page_1
feedback_page_2
feedback_page_3
__________________________
ANIMATIONS
animations_5 = life cycle presentation
24.06.2008 _ 2:00
__________________________
to complete the set of three animations I made the last one which is rather a presentation
of the life cycle than a regular animation. nevertheless it might be useful for learning and teaching.
__________________________
ILLUSTRATIONS
illustrations_13 = last corrections
20.06.2008 _ 18:20
__________________________
now really the last improvements and corrections...
(click here to enlarge the illustration of mitosis)
(click here to enlarge the illustration of meiosis)
(click here to enlarge the illustration of the life cycle)
__________________________
ILLUSTRATIONS
illustrations_12 = orange + blue
18.06.2008 _ 23:30
__________________________
it turned out that last illustrations post shouldn't the last.
yesterday I raised the problem of people who have problems with colour vision deficiencies.
it results in new versions of illustrations.
(click here to enlarge the illustration of mitosis)
(click here to enlarge the illustration of meiosis)
(click here to enlarge the illustration of the life cycle)
__________________________
STANDARDS
standards_3 = colour blindness
18.06.2008 _ 23:10
about 8% of male population (and ca. 0,5% of female) is suffering from colour vision deficiencies.
the most common vision defect is deuteranomalywhich afflicts 5% of men and of 0,4% women -
- it mildly affects red-green hue discrimination. less popular but severe defects are protanopia
(in which red appears dark-brown) and deuteranopia (red and green appear very similar which
is dark yellow).
due to colour-blindness it seems reasonable not to base graphic colour-coding on red and green
as it may be difficult or even impossible for a handicapped person to read the illustration. therefore
colours that contrast not only in hue but also in lightness should be used (green and red have
similar lightness), e.g. orange and dark blue/violet.
below you can see the difference in lightness between red + green and orange + dark blue.
below you can see how four main colour vision deficiencies affect colour perception for:
______ RED ______________ GREEN ___________ ORANGE __________ DARK BLUE_____
upper left corner - normal vision (cca 85,5 % of population);
upper right corner - protanopy (1 % of men);
lower left corner - deuteranopy (1 % of men);
lower right corner - deuteranomaly (5 % of men, 0,4 % of women).
after analysing these pictures I decided to change chromosome colours in my mitosis and meiosis
application from red and green to orange and dark blue, as these two colours vision is less affected
by colour vision deficiencies and moreover they contrast not only in hue but also in lightness.
credits: i used printscreens of www.wellstyled.com
__________________________
ANIMATIONS
animations_4 = teacher's version
18.06.2008 _ 02:00
during the last consultation with dr Włodzimierz Wójcik it turned out that there is a need for a teacher's
version of all materials to be made. while multimedia equipment in polish schools is on the whole
not adequate to what we should wish, it is still possible to display computer presentations on a tv
screen (which is more common) or using a digital projector. this way the whole class can benefit
from the multimedia presentation with schools provision of only one computer.
therefore I decided to design the teacher's version of my application which can be programmed
according to one's needs. you can set up the duration of each animation sequence by recording
your timing when the animation is played in the recordingmode. then the teacher can save the timing
and display the whole animation without using any remote control.
this patters should be applied to all animations.
__________________________
ANIMATIONS
animations_3 = ...so does meiosis!
15.06.2008 _ 20:30
up to now meiosis animation without sound as well.
it does takes a while to clean all soundtracks...
__________________________
ANIMATIONS
animations_2 = mitosis is moving!
14.06.2008 _ 14:10
mitosis animation unveiling. it is now moving and has couple of 'click' sounds.
my objective is to provide it also with readers comments for people who learn by hearing.
__________________________
ANIMATIONS
animations_1 = width / height
11.06.2008 _ 23:15
__________________________
900 x 650px size for an animation window is ideal for a panoramic 15,4'' display (1280 x 800px).
while standard school displays are usually 4:3 in proportion with an approximate minimum of 1280px
of their maximal resolution width, there should be no problem to display the 900 x 650px animation window
without any clipping.
__________________________
ILLUSTRATIONS
illustrations_11 = life cycle_04
4.06.2008 _ 20:45
__________________________
life cycle final illustration
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_10 = meiosis_03
4.06.2008 _ 20:45
__________________________
meiosis final illustration
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_9 = mitosis_04
4.06.2008 _ 20:45
__________________________
mitosis final illustration
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_8 = life cycle_03
3.06.2008 _ 06:45
__________________________
unlike in most mitosis, meiosis and life cycle graphic visualisations I decided to put some emphasis
on the genetic variability which is represented by the nucleus colour. i used a metaphore of colour mixing
to picture how maternal and paternal genetic materials mix into the unique ancestor's genotype:
yellow + cyan = green, green + orange = brown
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_7 = mitosis_02
3.06.2008 _ 06:40
__________________________
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_6 = mitosis_03
3.06.2008 _ 06:30
__________________________
2- or 4-wire path represents the c-number in a clearer way.
the chromosome number comment tells now the c-number and the n-number of the dividing cell.
I abandoned the idea of the interphase S-phase with an asterisk.
now it is shown in the form of a magnifying glass.
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_5 = life cycle_02
10.05.2008 _ 14:10
__________________________
the life cycle of one generation - clear concept, but is the design clear as well?...
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_4 = mitosis_02
10.05.2008 _ 14:10
__________________________
mitosis as a non-cyclic process.
in all visualisations the cyan/orange/grey stroke weight will symbolise the 'n' chromosme number.
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_3 = life cycle_01
09.05.2008 _ 00:50
__________________________
the life cycle of one generation - still a lot to improve...
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_2 = meiosis_01
09.05.2008 _ 00:40
__________________________
meiosis as a non-cyclic process. in progress.
(click here to enlarge the image)
__________________________
ILLUSTRATIONS
illustrations_1 = mitosis_01
09.05.2008 _ 00:30
__________________________
mitosis as a cyclic process. almost done.
(click here to enlarge the image)
__________________________
STANDARDS
standards_2 = hardware
05.05.2008 _ 02:30
hardware requirements for the application are:
- cd/dvd drive / usb socket,
- hardware required to install adobe flash player - click here for reference.
__________________________
STANDARDS
standards_1 = software
05.05.2008 _ 01:15
yet most of polish high schools have computer rooms.
it is not a mystery that most of them use microsoft windows operational system.
thus it is rather clear that the most commonly used web browser is microsoft internet explorer.
to support the majority of css2 properties ie 4.0 is required. ie 4.0 was included with windows 98.
thus if I choose to use css2 to define html elements in my application, there should be no problem
to run it even on 10-year-old computers. newer software installed on windows 98 will do it as well.
the application needs also adobe flash player to play animations. there is a wide range of web
browsers to choose from depending on platform type. yet windows 98 enables to run a flash animation.
therefore windows 98 or later might be a reference for application system requirements.
.jpg and .gif image formats shall be used in the application as various .png display problems occur
with ie and there will be no file-size rigour while the application is ment to be cd-rom/hard drive-based.
software requirements for the application are:
- web browser (ie, firefox, safari, opera etc.),
- adobe flash player.
__________________________
SKETCHING
sketch_12 = icons
03.05.2008 _ 19:00
__________________________
visualisation icons: 1. mitosis, 2. meiosis, 3. one generation's of organisms lifecycle
__________________________
SKETCHING
sketch_11 = architecture final
30.04.2008 _ 00:10
__________________________
final sketch for application macro-scale architecture
(click here to enlarge the image)
__________________________
SKETCHING
sketch_10 = style final
28.04.2008 _ 09:30
__________________________
final sketch for mitosis visualisation
(click here to enlarge the image)
__________________________
final sketch for meiosis visualisation
(click here to enlarge the image)
__________________________
SKETCHING
sketch_9 = style_02
22.04.2008 _ 02:15
__________________________
3 stages of dna condensation distinguished;
3 stages of nuclear envelope brake down/reproduction;
maternal/paternal chromosome color distinction;
(click here to enlarge the image)
__________________________
(click here to enlarge the image)
__________________________
SKETCHING
sketch_8 = style_01
17.04.2008 _ 02:10
__________________________
I am thinking of choosing quite a distant metaphore from what is normaly used.
how much can I simplify chromosome's look? can you point a single chromatyde up there?
the form has to correspond with flash technology if I want to animate it smoothly.
it needs also to be flexible enough to show crossing-over without any misunderstandings.
I like the idea of equilateral chromosomes - this is somehow new...
...and it fits my requirements quite well.
__________________________
SKETCHING
sketch_7 = architecture_03
16.04.2008 _ 17:00
recently I have been working on designing program's and visualisation's architecture.
until I have a precise sketch of the structure, there is rather little sense drawing the visualisation.
__________________________
model no 1
- it lacks a complete look on the outside-visualisation parts
__________________________
model no 2 - this is much better as it integrates both program and visualisation
__________________________
SKETCHING
sketch_6 = architecture_02
15.04.2008 _ 03:30
__________________________
the program will contain table of content and index in alphabetical order.
__________________________
each visualisation will be attached to:
1) table of content (mitosis and meiosis together with the Red section - genetics),
2) index (mitosis and meiosis respectively
with letter M),
3) introductory keywords, which lead to adequate visualisations (replication and recombination),
4) consequent keywords, which lead to matching visualisations (Mendel's law, evolution).
__________________________
SKETCHING
sketch_5 = mito + meio cycle
14.04.2008 _ 22:50
it is clear that the closer any two different things are one the other, the better we can observe differences
between them. as in the case of mitosis and meiosis comparison - the differences are easier to spot
when we put both processes one against the other. this method can however deceive us when it comes
to grasping both mitosis and meiosis in their natural context of constant co-occuring in
an organism.
mitosis and meiosis do not exclude eachother - they are correlated and co-dependent.
this relationship can be sketched this way:
it is only a draft on an idea. more detailed version should be build this way:
__________________________
(click here to enlarge the image)
__________________________
SKETCHING
sketch_4 = architecture_01
10.04.2008 _ 02:20
during the next two weeks I will be searching for an optimal architecture model for the whole educational set.
it will be based on the high school program published in the 'educational context' post.
my first idea is based on a 8-colour model WMBCGYRK (white-magenta-blue-cyan-green-yellow-red-black),
which represents each of 8 main blocks in the school program. each of the blocks consists of some
subjects (not lessons!). each subject is supported by a special visualisation.
__________________________
the 8-colour model (White - Magenta - Blue - Cyan - Green - Yellow - Red - blacK)
__________________________
octagon model with links which represent keywords associated with single visualisations: links leading
to the visualisations are what you need to understand the visualisation, links leading from the visualisation
stand for what you can understand elsewhere thanks to the visualisation you have just seen.
hence you can follow a programmed educational path.
__________________________
other architecture model - everything stays roughly the same appart from the linear approach to index all
subjects. there is also no visual representation of the linkage, which makes the model and a book index alike.
__________________________
SKETCHING
sketch_3 = graphic storyboard
9.04.2008 _ 23:05
it is nothing new, but nevertheless still necessary to visualise oneself what is the proper order of events.
mitosis is much simpler than meiosis and is not dependent to any
other process. meiosis cycle has to start
with a zygote
(23c + 23c) in order to replicate a diploid set (46c) of both maternal and paternal dna.
only a diploid cell can perform a meiotic division.
__________________________
mitosis cycle
__________________________
meiosis cycle
__________________________
SKETCHING
sketch_2 = reinventing condensation
9.04.2008 _ 22:40
'in the prophase chromosomes are being created' - sometimes one can read. it is false as the chromosomes
are nothing else than condensed chromatin. chromosome is not a thing - it is rather a state. it is not only
writen in numerous descriptions, but also not clearly shown in mitosis / meiosis visualisations. therefore
I decided to litelarly show the condensation of chromatin into chromosomes. this is possible thanks to the
animating technologies and wouldn't have greater sense using traditional frame-by-frame visualisations.
however I am obliged to produce both kinds of visual explenation - thus I exercised some possibilities
of graphic interpretation of condensation...
__________________________
SKETCHING
sketch_1 = typographic storyboard
8.04.2008 _ 11:45
picking human as an example, I built a typographic storyboard of my application (c - chromatid number):
above the upper horizontal line is what a student needs to know from previous lesson in order to understand
the mitosis + meiosis lesson. in between two horizontal lines is the mitosis + meiosis visualisation.
under
the lower
line there is what a student should know from the mitosis + meiosis lesson in order to understand
upcomming material.
__________________________
RESEARCH
research_7 = research summary
1.04.2008 _ 23:00
this is the last part of the research phase. during the last month I:
1. refreshed my knowledge of the mitosis and meiosis process
2. explored what are the advantades and disadvantages of various existing mitosis / meiosis visualisations,
3. found out what should be improved in most of them,
4. mounted my presentation in context of the high school educational program.
__________________________
educational path:
- what is needed to understand mitosis + meiosis?
- what do we learn from this lesson?
__________________________
RESEARCH
research_6 = educational context
25.03.2008 _ 15:00
should the application have any potential to be used as an educational support in high schools,
it needs to meet all educational standards. therefore it has to be placed in a broader context
of the educational program.
__________________________
RESEARCH
research_5 = visual style
19.03.2008 _ 19:20
choosing a style is a fundamental part of the visualisation. it should be clear and readable.
nevetheless I would hate to simplify any part of the sophisticated mitosis or meiosis process
by picking the style that is inefficient or visual not enough communicative.
therefore I have conducted a research to find styles that are most popular and comprehensive:
__________________________
abstract visualisation without cell environment - this is just a very brief comparison of mitosis and meiosis.
it could be helpful as an illustration of text.
(from the internet)
__________________________
there is still no cell environment, but things happen in reference to the nucleus now.
visualisation has became more detailed and chromosomes more organic in form.
chromosome number and chromosome homologs notification!
__________________________
new visual style - the one most common for schoolbooks - it is clear, easy and universal.
putting the mitosis process in the whole cell life cycle makes the visualisation really valuable.
(from the internet)
__________________________
this vivid visalisation is both attractive and genuine, but neither simplified nor metaphoric.
it is a good illustration of the problem, nevertheless it does not explain anything...
(from the internet)
__________________________
...attractive and true, but illegible...
(from the internet)
__________________________
this is a short comparison of mitosis and meiosis - it explains a lot, but needs text to name things.
in fact, this is not a visualisation, but demonstrates the process very clearly.
(from the internet)
more visualisations found in my research >>> here <<<
__________________________
RESEARCH
research_4 = the late interphase
15.03.2008 _ 15:15
one of some complicated things about mitosis and meiosis is counting 'n's. it means that the majority
of visualisationslacks any mention about the late interphase when something very important happenes:
the dna meterial doubbles and thus the cell becomes ready to copy. this is also the key moment
to
understand the meiosis product: 4 haploid cells.
therefore I decided to start the mitosis/meiosis visualisation from the dna material replication stage.
thus the visualisation will be set in a broader context of the whole cell life cycle.
__________________________
A - most visualisations start just from the prophase when the dna material is allready doubble;
B - my visualisation will include the G2-subphase of the interphase in which the dna replicates;
(ville's biology)
__________________________
RESEARCH
research_3 = scholaris.pl
8.03.2008 _ 21:00
I have found an interactive lesson about mitosis at www.scholaris.pl/csm - a multimedia database
owned by the polish ministry of national education. it is quite good: it has nice drawings, it is interactive
(students can use a dictionary, solve a quiz, check their answers...) and explains the complicated
process of mitosis. what I found poor is the technical and informational quality of visualisations
(the advantage of using animations is almost unused - it is rather a slideshow), narration which is
difficult to follow and nothing that links the presentation to other (also external) educational materials.
__________________________
RESEARCH
research_2 = ville's 'biology'
6.03.2008 _ 13:00
__________________________
mitosis...
__________________________
meiosis...
__________________________
...mitosis vs meiosis
__________________________
RESEARCH
research_1 = youtube.com
6.03.2008 _ 12:20
__________________________
mitosis 3d visualisation and explanation
__________________________
meiosis 3d visualisation and explanation - good boring design
__________________________
discovery education produced such a meiosis process visualisation - brutal, but simple and catchy
__________________________
'what's the difference between mitosis and meiosis' - rap explanation
__________________________
imagination-teasing mitosis visualization (featuring: the beastie boys)
__________________________
mitosis visualized by a sychronized swimming group in a cell-like swimmingpool
__________________________
TIMELINE
this is how I organise my work?
4.03.2008 _ 22:15
bachelor project schedule:
4.03.2008 - publication of thesis subject, the weblog starts at: www.marekkultys.com/kultys_i9_bachelor.html
1.04.2008 - end of the research phase - the design idea is ready, research summary will be published;
24.04.2008 - end of the sketching phase - visual form of the design is defined, sketches are published;
22.05.2008 - start of the presentation phase - planning and rehearsing of the thesis presentation;
12.06.2008 - end of the programming phase - 1st testing round will be performed, publication of the results;
26.06.2008 - end of the patching phase - 2nd testing round and results publication; presentation printing;
30.06.2008 - end of the design process - complete thesis publication;
1-2.07.2008 - thesis presentation;
__________________________
MOTIVATION
why doing exactly this?
12.03.2008 _ 15:30
my motivation is:
1. to try something completely new in the field of visualisation,
2. to develop a project that will prove my value and competence for the education industry,
3. to gain new experience and extend my portfolio scope,
4. to introduce a bachelor project of a very new kind at my home faculty of design (warsaw academy of arts),
5. to improve my html/css and flash skills,
__________________________
THESIS
what to do? problem of mitosis & meiosis
4.03.2008 _ 11:45
the main goal is to visualise a complex process in an explanatory and clear way.
because of the character of biology as one of the nature sciences and my personal interests
in biology and medicine I deciced to choose biology as the subject of my bachelor thesis.
having discussed this matter with my former high school biology teacher, dr włodzimierz wójcik,
(who has also been a consultant at the polish ministry of science and education for 15 years)
I decided to focus on 'the most difficult thing for a biology teacher to explain' - as dr wójcik stated -
- that is comparison of mitosis and meiosis.
here you can find explanation of both mitosis and meiosis in english wikipedia:
http://en.wikipedia.org/wiki/Mitosis
http://en.wikipedia.org/wiki/Meiosis
© copyright 2005 - 2008 by marek kultys, all rights reserved. all material published remains the exclusive copyright of marek kultys
(apart from the quoted content from named sources). no contents may be reproduced in whole or in part without the written consent of marek kultys.