Great graphic designs do not just come out overnight; they take many iterations to polish the design. Designers create diferent versions of their work and compare the versions in iterations. However, the exploration of diferent design is time-consuming and tedious. This paper presents a design tool, CreativeSVG, that aims to facilitate the ideation and iteration of abstract background design by two features: 1) the variations of a specific graphic for the selected design features 2) the transition between two chosen graphics. Preliminary user feedback shows that our tool augments user creativity and increases design eficiency to a certain extend.
© 2020 Copyright for this paper by its authors. Use permitted under Creative Commons License Attribution 4.0 InterCPWrEooUrckReshdoinpgs IhStpN:/c1e6u1r3-w-0s.o7r3g (nCCatEiEoUnUaRlR(C-CWBYSW4..o0o)r.rgk)shop Proceedings techniques. tion that allows designers to simultaneously
Creating various design alternatives is a explore design alternatives based on four
decrucial part of the design iteration. This itera- sign features such as color, layout, and shape.
tive process enhances creativity by allowing The second part is a panel that presents
transidesigners to “exhaust the obvious and explore tionary designs between two selected designs.
new ideas” [
The design examples play a critical role in first step; 3) designers annotate good graphics
the process of creative design [
This tool employs Generative Adversarial
Networks (GANs) [
The existing approaches of using GANs to distribution when the variety of graphics is great. Therefore, instead of generating rasterized graphics, we propose a new approach using GAN to generate Scalable Vector Graphics (SVG) based on our predefined features crucial to graphic design, such as shape type, layout, color, scale, rotation, etc. Previous work have shown the potential of using GAN to generate simple SVGs, however, these generated SVG having relatively simple patterns such as fonts [21] and sketches [22].
Furthermore, we want to generate graphics that are similar to the graphics we feed, Figure 3: The configuration page of specifying but we also want to iterate the design as in conditions for graphic generation. real design scenarios. To this end, we use conditional GANs [19], which allows users to specify conditions to adjust the generation of graphics. These conditions can be indicated tion (high, low, both), and value (bright, dark, by the tags of graphics, for instance, “warm”, both). Users can also select up to three types “cold”, “sharp”,“soft”. of shape types (circular, square-like, triangu
After passing tags to conditional GANs to lar). Each time a user changes a preference, train the model, we can control the outputs. the system automatically presents 20 sample Here we use a vector with 39 numbers as an graphics according to the new chosen prefinput of the model. The first nine numbers erences. These samples are displayed on the are conditions controlling visual style, and right side of the screen. Once the user is satthe rest 30 numbers are random numbers to isfied with these samples, she can click “See keep a variety of outputs (Figure 2(6)). To More Designs.” enable design iteration, we can maintain the random numbers the same and change a spe- 2.3.2. Exploration Page cific condition value, which generates similar graphic designs but with smooth nuance in that condition.
tion page, the Exploration page (Figure 4) is meant to encourage creative exploration and ease of iteration. The left side of the screen 2.3. User Interface Design displays 100 graphics. These graphics have We next present a high-level view of the de- the design constraints specified from the first sign interface. The user interface aims to pro- page. Users can click “More” to load 100 more vide users with a tool to discover and select designs with the same constraints or any of various generated designs. the designs that interest them. Clicked designs will show up on the right side of the screen, surrounded by diferent iterations of 2.3.1. Configuration Page this design. These iterations are ordered in In Figure 3, users can see samples of generated diferent axes, from left to right, top to botdesigns based on their chosen preferences. tom, top-left to bottom-right, and top-right Users can toggle three variables. These vari- to bottom-left. The axes titles include “Bright ables include hue (cool, warm, both), satura- to Dark,” “Disorderly to Orderly,” “Sharper to Softer,” and “Simple to Complex,” according resenting the gradual transition from the first to the diferent types of iteration presented. clicked design to the second will show up on These iterations represent slightly changed the right side. Users can click any of these designs and mimic the various ways in which transitionary designs to enlarge it and click a designer would change an original design “Add to Favorites” to add the design to the during the iterative process. Users can click same “Favorites” section as in the Exploration on any of these iterated designs to enlarge Page. Users can click “Cancel” to deselect any them. They can then click “Add to Favorites” enlarged designs and select two new designs to add the design to the “Favorites” section to start the process over again. Users can click located at the bottom left of the screen. Each “Back” to be taken back to the Exploration graphic in the favorites section can be down- Page. loaded as an SVG, ready to be edited in any applicable editing software. Users can also click “Back” to be taken back to the first page to change graphic preferences.
2.3.3. Transition Mode Page We recruited 15 designers in our company to try this design tool and interview them with Clicking “Transition Mode” takes the user to two questions regarding creativity support another page for exploration. In this page, and the opinions on the presented features. users click on two designs from the left side Thirteen out of fifteen designers stated that of the screen (Figure 5). Several graphics repthey found the auto-generation of designs ef- most enjoyed the download function as it alfectively helped their design process. Eight lowed them to edit the design in their softof them noted the convenience of having de- ware.” One liked the transition tool because signs generated for them as it “saved time, es- of “I can see even more backgrounds, on top of pecially given the limited time considerations” the ones that I already like” (P9). One enjoyed (P4). Many of them felt that in addition to the agency of choosing colors and shapes: helping saving time, CreativeSVG helped in- “I liked choosing the shape preferences, and I spired new ideas: “It improved my design qual- would like to see more shapes” (P11). Although ity and stimulated ideation” (P5). Users also many participants were pleased with the final saw the value in having time to focus their generated posters, many felt that the quality eforts on creating rather than ideating: “It of generated designs could be improved. One saved me time, and so I had more time to try was happily surprised by the random arrangemore ideas” (P6). However, one person noted ments, but another noted that the designs that it was a complicated process to “choose seemed random, without meaning. Many felt through thousands of pictures” (P14). that the toggling of preferences did not fully
Five enjoyed the Exploration Page because generate diferent designs: “There is no clear it allowed them to see many diferent designs diference in graphics when I choose diferent at once: “I like the explore function which can color preference and shape preferences.” (P11). explore diferent types of patterns” (P1). Three Some of them expressed a desire for greater control over generated designs.
In this paper, we first present a novel system that aims to help designers create creative graphics with less efort. Compared with the traditional approach of applying GANs on pixel-based data, we proposed a new way to leverage GANs to generate graphics based on graphics’ low dimension feature data. We then evaluated our system CreativeSVG with 15 professional designers. The results indicate that our tool can increase design eficiency and augment creativity to some extends. However, the current system can only generate graphics using our predefined shapes, which may influence the variety of designs. We will improve our algorithm to increase the variety of shapes.
cial Fund of Beijing Industrial Design Center. We thank our colleagues from Lenovo Research (Xu Zhao, Jie Yin, Xi Wan, Zhi Yang, etc.) who provided insight and expertise that greatly assisted the research.