1. d.tour:
Stylebased Exploration of
Design Example Galleries
Baskar Rethina-saba-pathi

2. Problem at hand
 Beginning a design work
 Design conceptualization is usually abstract
 Need example designs to adapt / refer / copy
 Existing methods
 Keyword-only web search
 Difficult to articulate exact keywords
 Results based on content, not style
 Search through template designs
 Difficult to measure the usability

3. Prior work
Rough layout Sketch
 Designers don’t have concrete ideas to start with
 Cannot explore non-layout dimensions
Comprehensive design gallery
 Limited only to browsing
? search, recommendation, filtering, exploration

4. Answer is d-tour
https://www.youtube.com/watch?v=g4ggoccLOyI

5. d-tour
What is it ?
 an exploration tool for web designs
 search by example design or keyword + various parameters
 from a curated database of webpages
Key aspect
 Matches the stylistic similarity

6. Feature Selection
 Which feature
 Based on discussions with designers and from design literature
 How
 Global features directly
from DOM tree
 Bento page Segmentation
for local features

7. Feature mapping
 Bricolage Algorithm ( other paper)
 Map DOM trees of source and target pages
 Define ‘Stylistic Distance’ as cost
 Build a ‘Design Vector’ of costs

8. Alternative approach?
 Why not treat entire webpage as one image?
Vision based approach?
Example: Google Image Search
CBIR techniques

9. Arguments
 CBIR techniques more suited for natural images
 Scene recognition
 Object recognition
 Difficult to capture style and structure
 Needs manual annotation again

10. Critique on Query Processing
 Traditional Vector space model
 Assumes equal weights for all features (?)
 If I query “blue + boxed”, who gets more importance – color or structure?
 Features treated orthogonal
 No check for interdependence
 “Clumsy” can mean scattered text as well as non- agreeable colors
 Use of space + Use of color
 Text/Keyword Search
 TF-IDF model - Uses Document’s text content
 Assumes query and document content to be same
 I say “grey”, but what I really mean is “neutral”

12. Activity
 Describe the design aspects of the website
In terms of style tags . E.g – large font, colorful etc.
 Exchange your style tags (not the website)
 Find the site matching the style tags (or a similar looking site)

13. Style Tags used in d-tour

14. Evaluation of d-tour
 40 Participants – 20 Univ Studs + 20 Mturk Workers
 Task
 Give example websites for a ‘School Science Education Program’
 Randomly assigned either to use Web search or d tour
 Write Why you chose this?

15. Critique on Evaluation method
 d tour users
 Feedback was generally positive with a few suggestions
 Shown a tutorial of how to use d-tour
 Probably used the same style tags to search
 Results are from a collection of best examples
(ilovetypography.com, sixrevisions.com, and the Alexa Top100 )
 Style biasing relevance ?
 Web search users
 restricted to topic based search
 Can attach an image + keyword in Google Image Search
 Do thumbnails better describe the webpage?
 No School Students reviewed the results

16. Discussion
1. Building effective database
Crowd inputs help, but need decent database to attract crowd
2. Taste for designs – User specific?
A good design to me is not even a design to you
Trusting Ranking methods
3. Machine based approach
Need some image processing/machine learning to refine the process?
4. Extensive DOM dependency