Learning Art, Music, and Web Development Together as a Single Creator

Summary

Anyone who sets out to draw manga, compose music, and also build the website that presents them may assume that three people's worth of study is required. In practice, however, we have found that learning all three at the same time is faster, because the underlying framework needed for growth is nearly the same in each field. This article introduces a path for one person to take on art, music, and web development, a path that may look like a detour but is in fact the most direct. Learning them one at a time, in order, would likely never come to an end.

Background

Drawing, music, and code look like entirely different skills, but the framework of improvement is nearly the same. The first element is grasping structure: in drawing, anatomy and perspective; in music, chord progressions and rhythm; in code, design and data structures. The second is expressing through contrast: in drawing, the difference between light and shadow; in music, tension and resolution; in user interfaces, contrast and white space. The third is carrying the work through time: in manga, the flow of panels; in music, the development of a piece; in web pages, loading order and scrolling.

For this reason, developing a feel for resolution in music improves the pull of a two-page spread in manga. Tightening layout spacing in CSS trains spatial awareness for composition. The three fields serve as supplementary lessons for one another, and this is the reason to take them on together. Studying one field for three years before moving to the next takes nine years, but studying all three together for three years can sometimes reach the level of those nine years, because learning transfers between the fields.

Additional notes

As the first stage, rather than beginning with study, decide first on the format of the work to be completed. Beginning with study almost always leads to stopping partway. We recommend the smallest unit: a one-page web manga and one piece of background music. This format uses all three fields and can be completed in one to two days. Completion is itself the greatest practice; while still a beginner in all three fields, planning a 100-page epic will not lead to a finished work.

• Manga: four to eight panels, monochrome, one page only
• Music: 30 to 60 seconds; a loop is fine
• Web: a single HTML page on which the two appear side by side

The next stage is how to use the first 30 hours in each field. Many music theory textbooks begin with intervals and scales, and this is a common cause of giving up. We recommend learning the following topics in the order in which composition needs them. As practice, transcribing the chord progressions of ten favorite songs in a DAW (such as the free edition of Studio One, Cakewalk, or GarageBand) and adding only a melody of one's own will teach more than reading an entire theory book.

• Diatonic chords (the seven chords within a key). In C major: C, Dm, Em, F, G, Am, Bdim
• Three essential progressions: the Canon progression, the so-called royal road progression (4, 5, 3m, 6m), and the Komuro progression (6m, 4, 5, 1). With these three, hundreds of songs can be written
• Dominant and resolution: why C feels satisfying after G. This is the heart of the theory
• Modulation and borrowed chords: techniques for creating a change of scene within a piece, the same idea as panel layout in manga

Drawing requires volume, but simply piling up drawings without direction does little good. The following order helps improvement. As practice, do 30-second drawings for ten minutes each day, and after copying a reference, draw it once more without looking. This redrawing fixes the image in memory; merely copying only adds habits of the hand.

• Rough guides and structure: capture the human figure with boxes and cylinders, and do not start from the face
• Perspective and space: one-point perspective alone is enough, and being able to draw backgrounds raises a work to the next level
• Silhouette: whether a character can be recognized even when filled in solid black is the essence of character design
• Panel layout and guiding the eye: in manga this is the most important element, and readability comes before drawing skill

For web development, neither React nor Vue is needed simply to present one's work. Proceed in the following order. As practice, do not stop after copying a tutorial; always adapt it for your own work. Even just replacing the play button of a music player with an original illustration changes how well the learning takes hold.

• HTML/CSS: semantic tags, Flexbox, and Grid. First, complete a single page
• Plain JavaScript: DOM manipulation, events, and fetch. Add movement to the page
• Server side: PHP or Node, so that articles need not be written by hand each time
• Data storage: JSON or a database. At this point it becomes possible to build an original CMS

As for the weekly routine, working on all three equally every day leaves everything half-finished. Assign a main focus to each day of the week and proceed as follows. The key days are Wednesday and Saturday: by always placing the work on the site on these days, the three fields are joined into one. Drawings and songs are not left unfinished, and web development gains a real purpose.

• Monday and Thursday (drawing): ten minutes of drawing practice, followed by two hours of storyboarding or finished artwork
• Tuesday and Friday (music): transcribing chords, followed by completing one 30-second piece
• Wednesday and Saturday (web): placing the drawings and music completed that week onto the actual site
• Sunday: sharing what has been published, reading responses, and resting

The true meaning of keeping one's hands moving is not to stop thinking, but to complete a work while still inexperienced and share it, without waiting for preparation to be perfect. When working in three fields, one finds no end of areas still lacking. While thinking that the drawing is too immature to publish, that the music sounds too amateur to release, or that the site lacks the features to announce, several years can pass without anything being shared. A completed, imperfect work is worth far more than an unfinished masterpiece. The former brings back responses, and those responses are the only teacher in self-directed learning.

There are three common pitfalls. The first is over-preparing tools and environment: collecting a new pen display, DAW, or framework resembles study, but it is not study. The second is building only the foundation with no content inside, which is a particular risk for those skilled in web development; always build the container and the content in turn, and for each feature added, publish one work. The third is trying to keep all three fields at the same pace: strong fields will grow and weak fields will stall, and that is acceptable. Matching the scale of the work to the field that lags furthest behind, such as choosing a format that needs only one drawing if drawing is slow, is the shortest route to completion.

With this method, the following stages can be reached in 90 days. In three months, one will have a body of work and be able to bring it to the world independently. Had the three fields been learned one after another, three months would not have been enough even to finish the fundamentals of drawing.

• Days 1 to 30: in drawing, structure and silhouette; in music, diatonic chords and the three progressions; on the web, a single page in HTML/CSS. Outcome: a one-page manga and 30 seconds of background music
• Days 31 to 60: in drawing, perspective and backgrounds; in music, development and arrangement; on the web, adding movement with JavaScript. Outcome: a four-page short story and three pieces of music
• Days 61 to 90: in drawing, panel layout and staging; in music, mixing and volume; on the web, managing articles with PHP/JSON. Outcome: one serialized episode and the launch of the site

Doing everything alone is certainly demanding, and there are many situations in which dividing the work would be faster. The reason to choose this path nonetheless is that when all three come from the same hands, the work gains a sense of unity. The moment one realizes a scene needs a certain sound, that sound can be made; the moment one decides a certain effect needs a particular screen transition, it can be implemented, with no time spent explaining to someone else and waiting. That speed is a strength of a different kind from technical skill. Please begin today by placing a one-page manga and a 30-second piece of music on a single page; it need not be polished, but complete it and share it.