VIEWS: 0 PAGES: 2 POSTED ON: 7/26/2012 Public Domain
Web Design - An Introduction.
web design filetype pdf html pdf free ebook download.
system:filetype:pdf � Portland Web Design, Web Development
Web Design Forum
Data-driven Web Design Ranjitha Kumar firstname.lastname@example.org Stanford University, Stanford, CA Jerry O. Talton email@example.com Intel Corporation, Hillsboro, OR Salman Ahmad firstname.lastname@example.org Massachusetts Institute of Technology, Cambridge, MA Scott R. Klemmer email@example.com Stanford University, Stanford, CA Abstract This short paper summarizes challenges and opportunities of applying machine learn- ing methods to Web design problems, and describes how structured prediction, deep learning, and probabilistic program induction can enable useful interactions for designers. We intend for these techniques to foster new work in data-driven Web design. Figure 1. Our example-based retargeting algorithm, Brico- 1. Machine Learning for Web Design lage, automatically renders pages in new layouts and styles. The Web provides an enormous repository of design knowledge: every page represents a concrete example of human creativity and aesthetics. Given the ready To apply machine learning techniques to Web design, availability of Web data, how can we leverage it to help we need to collect a corpus of training examples. Al- designers? This note outlines three machine learning though traditional Web crawlers make it easy to scrape applications which enable new interaction mechanisms content from pages, acquiring and managing all the for Web design: structured prediction for rapid re- resources necessary to preserve a page’s render-time targeting, deep learning for design-based search, and appearance is much more diﬃcult. Furthermore, with probabilistic program induction for operationalizing the advent of client- and server-side scripting and dy- design patterns. namic HTML, many modern Web pages are mutable and may change between accesses, frustrating algo- All of these techniques leverage structure that is intrin- rithms that expect consistent training data. sic to Web designs. In machine learning applications, working with structured representations aﬀords signif- To overcome these challenges, we have constructed a icant advantages over unstructured data sets, such as new kind of Web repository. The repository is popu- images or text (Socher et al., 2011). On the Web, ev- lated via a bespoke Web crawler, which requests pages ery page is associated with a Document Object Model through a caching proxy backed by an SQL database. (DOM) tree, which can be used along with render-time As a page is crawled, all requested resources are ver- information to bootstrap a visual information hierar- sioned and stored, its DOM tree is processed to pro- chy for designs. duce a static visual hierarchy of the page’s structure, and a set of semantic and vision-based features are cal- Appearing in Proceedings of the 29 th International Confer- culated on each constituent page component. These ence on Machine Learning, Edinburgh, Scotland, UK, 2012. structures are then exposed through a RESTful API, Copyright 2012 by the author(s)/owner(s). allowing fast component-wise queries on features. We Data-driven Web Design have found that this design repository enables the bels across the corpus, allowing users to perform key- rapid development of a diverse set of machine learning word searches on stylistic (e.g. minimal, fun) or struc- applications that support creative work. tural (e.g. header, logo) semantics. 2. Structured Prediction 4. Probabilistic Program Induction People frequently rely on templates when designing When building sites, skilled designers often rely on for- Web sites. While templates provide a simple mecha- malized knowledge about design patterns, typically en- nism for rendering content in diﬀerent layouts, their capsulated in books or style guides (van Duyne et al., rigidity often limits customization and yields cookie- 2002). Such rules for good design, however, are diﬃ- cutter designs. Bricolage is a structured prediction cult to enumerate and operationalize. A more attrac- algorithm that allows any page on the Web to serve tive proposition is to learn these rules from data by as a design template (Kumar et al., 2011a). The al- inducing a generative probabilistic model of pages. Re- gorithm works by matching visually and semantically cent work on concept learning and Bayesian program similar elements in pages to create coherent mappings induction provides a promising avenue for learning de- between them. Once constructed, these mappings are sign patterns from structured representations (Hwang used to automatically transfer the content from one et al., 2011). page into the style and layout of another (Figure 1). Inducing a formal language of page designs from a Bricolage learns correspondences between pages by corpus of exemplars would allow many complex de- training on a set of human mappings gathered via sign tasks to be formulated as probabilistic inference crowdsourcing. It learns how to ﬂexibly optimize vi- problems and solved using standard Monte Carlo tech- sual, semantic, and structural considerations using niques. For instance, a designer could construct a par- the generalized perceptron algorithm (Kumar et al., tial speciﬁcation of a Web page, and a design tool could 2011b). Our experiments show that ﬂexibly preserving “autocomplete” the page by conditioning the model on structure is essential for predicting human-like map- the speciﬁcation and performing MAP estimation. pings. The method enables a diverse set of design interactions, including rapid prototyping, retargeting 5. Find Out More between form factors, and measuring the similarity of Web designs. We believe that data-driven Web design is an area ripe for future research. We thank our collaborators; 3. Deep Learning ﬁnd out more about our work at http://bricolage. stanford.edu. Designers leverage examples during ideation to under- stand the space of possible designs and learn imple- References mentation techniques (Buxton, 2007). However, mod- ern search engines oﬀer little support for design-based Buxton, Bill. Sketching User Experiences. Morgan Kauf- mann, 2007. search, making it diﬃcult to ﬁnd relevant examples. Text-based search engines process queries eﬃciently by u Hwang, Irvin, Stuhlm¨ller, Andreas, and Goodman, computing bag-of-words representations of documents; Noah D. Inducing probabilistic programs by Bayesian no such natural vector space describes page designs. program merging. CoRR, abs/1110.5667, 2011. Instead, we can construct a meaningful search space Kumar, Ranjitha, Talton, Jerry O., Ahmad, Salman, and via deep learning, using recent work on recursive neu- Klemmer, Scott R. Bricolage: Example-based retarget- ral networks (RNNs) to induce a ﬁxed-dimensional, ing for web design. In Proc. CHI. ACM, 2011a. structurally-sensitive embedding for each element in Kumar, Ranjitha, Talton, Jerry O., Ahmad, Salman, a page’s visual hierarchy (Socher et al., 2011). The Roughgarden, Tim, and Klemmer, Scott R. Flexible RNN framework leverages a set of canonical features tree matching. In Proc. IJCAI, 2011b. to bootstrap a continuous vector space representation Socher, Richard, Lin, Cliﬀ C., Ng, Andrew Y., and Man- for each variable-sized region in a page. ning, Christopher D. Parsing natural scenes and natural By using this representation in a standard cosine language with recursive neural networks. In Proc. ICML, 2011. similarity framework, users could “query-by-part” to search for pages containing similar design elements. van Duyne, Douglas K., Landay, James A., and Hong, Ja- Moreover, by augmenting each node in the RNN with son I. The Design of Sites. Addison-Wesley, 2002. softmax layers, the system could train text-based la-
Pages to are hidden for
"bricolageICML12"Please download to view full document