Design Root is an Online Colalboration Site www.designrootUSA.com How it works: Design root allows designs to grow in a collaborative setting. An original design is posted by a user then people can go in and alter and change the design however they want. The edited design can then be posted on the site, showing the connection to the origninal. A lineage of changes can be mapped out like a family tree. Multiple edits could be made to any image and the iterations all stem from the source image on the site. People can view the entire design root from a singular page. Creative possibilties are endless and users are free to create whatever they want, however they want.
4
Primary Action The primary action of Design Root is to have a visual tree of creative works, which show the collaborative process. The site must also allow people to download work from the site, edit the work however they wish, then upload their edited images into the correct place in the Design Root.
An Online Collaboration Site
How Design Root Differentiates We let everyone see the full “Root� or history of every design. The unique interface allows users to navigate each Design Root, zoom in on specific pictures and to see where each design came from. Unlike meme sites or other collaborative art projects, Design Root will illustrate and show the entire progression of the design. It will also make it simple for anyone to collaborate on a project. You can see how a design came to be and how the design was altered by multiple artists. Design Root is taking a hidden process which happens all the time on the internet and with friends and visually organizes the creative information.
5
6
Competition Some competitors include Deviant Art, Reddit, and 4chan. All these sites have different goals, but they all allow for and encourage collaborations amongst creative people, and they promote the free expression of ideas. Design Root has the same vision of creating a platform for free expression of creative ideas, but Design Root is taking a different approach in displaying media than any other site with its unique interface and navigation.
An Online Collaboration Site
Main Objectives of Design Root The primary goal is to have an open platform for people to collaborate and explore visually. The site must show the progression of collaborative efforts in a complete visual representation.The creative collaborations can be open to anybody, or set as private between certain users.
7
8
Target Audience The target audience is any type of creative person. The open platform encourages all types of artists and also people who don’t have the best art skills to participate. Anybody who wants to create things and develop new art is welcome to use and explore the site.The site is constantly evolving, so people will be constantly coming back to check and see how their designs have evolved. Often times a sense of humor is appreciated when manipulating other peoples images.
An Online Collaboration Site
9
10
Design Aesthetic and Inspiration To the right is a collage of imagery which was pulled together in the early stages of Desing Roots creative exploration and process. The idea of mobiles, roots and family trees sprouted from the functionality of the site, the main goal of th site. The functional necessities handed themselves to aesthetics relating to tree roots, or a fimaily trree. Design Root will function like a family tree of imagery, so the connection can be easily deen. The tree and root look has been boiled down and simplified to clean up the look of the site, and make the imagery be the loudest voice. The Design Root website is a tool to highlight cool images and the design should take a back seat to the art.
An Online Collaboration Site
11
12
An Online Collaboration Site
Origial Logo Sketches Here are some scans of original sketeches for the logo. The logo started out as a more literal representation of roots and trees. The letterforms for “Design” originally came from when the name of the site was going to be “Root of all Design.” There was intention for the word, “Design” to look like Evil, as “Design” replaced “Evil” in the familiar expression. I wanted the word “Design” to look more evil and hellish. I created a strong and heavy serif at the bottom of the letters. The bottom serifs can also function as something that grounds or roots the logo, which again plays off the name.The spurs on the letters and the triangular serifs on the tops of letters were intended to show a more evil and robust sense. The name “Root of all Design” has since been scratched, but the letterforms in “Design” really seemed to look good and work as a stand alone unit, so I went forward with that design aesthetic, to make things more simple and communicable.
13
14
An Online Collaboration Site
Logo Refinement Here are some refinements, iterations and explorations of the logo. The root illustration was in a few versions, and the overlaying of the logo and pictures was explored. The dense brown bar was an option, which eventually got eliminated, along with the root illustrations, to simplify the mark to the letters and a singular line.
15
16
Logos and Brand Usage - Main Brand These are the main logos and branding for Design Root. The main brand, and the one in major use in the site, is the top option with a white background. The logo has a defined white space around it in which no outside material or text can be placed. The only acceptable mark to appear within the white space shown is a solid black line underlining the logo, as seen at the top of the pages in this book.The horizntal line must be black and drawn with the brush tool in illustrator or by hand. A perfectly straight line is not acceptable to use in conjunction with the logo, or anywhere else on the site.
An Online Collaboration Site
17
18
Logos and Brand Usage- B&W and Knock Out Knock-out and all black versions of the logo can be used if an application requires it.These versions will not be used within the Design Root site, but can be distributed or used for external communications or print applications. The main brand is still the full color option with a white background, but these options would be acceptable in situations in which the color version would not work.
An Online Collaboration Site
19
20
Logos and Brand Usage-Icons Icons are used in web aplicatiopns all of the time. For Design Root the “D� character that is part of the logo will become the icon treatment. The icon can be in full color, knock-out and just black.The icon on the top right would be the main use icon, while the others will be used in situations where the top right is not a viable option to use.
An Online Collaboration Site
21
22
Color Palette Main Logo Blue R:12 G:72 B:89 Hex#:0c4859 Uses: main logo color of the front of the letters, icon full color
Main Logo Shadow Blue R:0 G:60 B:74 Hex#: 003c4a Uses: main logo shadow color for the letters, icon full color
Black R:0 G:0 B:0 Hex#: 000000 Uses: any lines on the site, text of all sizes,
An Online Collaboration Site
23
24
Fonts Headlines: ITC Lubilin Graph Bold Size:18pt/20pt ABCDEFGHIJKLMNOPQRSTUVWZYZ abcdefghijklmnopqrstuvwzyz .,?:;’{}~`[]!@#$%^&*()-=+\0123456789 The quick brown fox jumped over the lazy dog.
An Online Collaboration Site
Subheads: ITC Lubilin Graph Regular Size: 16pt/18pt ABCDEFGHIJKLMNOPQRSTUVWZYZ abcdefghijklmnopqrstuvwzyz .,?:;’{}~`[]!@#$%^&*()-=+\0123456789 The quick brown fox jumped over the lazy dog. Body Text: Gill Sans Light Size: 14pt/17pt ABCDEFGHIJKLMNOPQRSTUVWZYZ abcdefghijklmnopqrstuvwzyz .,?:;’{}~`[]!@#$%^&*()-=+\0123456789 The quick brown fox jumped over the lazy dog. Body text will be set as 14/17. Paragraphs will be justified, last line flush left rag right.
25
26
Type Reasoning ITC Lubilin Graph was used for its angular slab serifs. The geometric letterforms work well in conjunction with the hand rendered logotpye. There are three levels of type communication for most type treatments within Design Root. The main heading is treated in ITC Lubilin Graph Bold, then the subheads are in ITC Lubilin Graph Regular. The subhead eases the transition from the heading to the body text. Body text is treated in Gill Sans Light. A clean, easy to read, and simple typeface works best for the legibiltiy of the words. The simple font in the body isn’t meant to have a ton of character, which would draw attention away from the art on the site. All typographic treatment is meant to create a hierarchy in design which compliments the imagery and gently lead the eye from the logo, down to the body text.
28
Site Map for Design Root This is the stucture for the website. The navigation will be simple and the landing page will have all the necesary links and redirects to bring a user to any part of the page they wish.The Design Root pages (3.1) will be the main focus of the site. All other pages on the site exist to facilitate the content and growth of the Design Roots.
1.1 Landing Page -Intro/description -Start a new design root -Search -Popular /Featured design root -Recent designs
2.1 Start a new Design Root -import file -add keywords, tags, artist info, and categetory to make design easier to search. 3.1 Design Root page (shows entire Design Root) -shows original image, then all the subsequent iteration on one page. -each image when hovered over expands to show at a larger size (1/2 screen size). -you can click on an image that is part of the root. 4.1 Download/upload image page (individual design) - download image option -upload image (based on this image). -when image is uploaded: -add keywords, tags, artist info, and categetory to make design easier to search.
2.2 Search Design Roots Search based on keywords, tags, artist, or categories 3.2 Search results of many design roots -each design root is an icon that is clickable that brings you to a new page 3.1 Design Root page (shows entire Design Root) -shows original image, then all the subsequent iteration on one page. -each image when hovered over expands to show at a larger size (1/2 screen size). -you can click on an image that is part of the root. 4.1 Download/upload image page (individual design) - download image option -upload image (based on this image). -when image is uploaded: -add keywords, tags, artist info, and categetory to make design easier to search.
2.3 Recent Designs -shows all the designs you recently downloaded, uploaded or viewed.
3.1 Design Root page (shows entire Design Root) -shows original image, then all the subsequent iteration on one page. -each image when hovered over expands to show at a larger size (1/2 screen size). -you can click on an image that is part of the root. 4.1 Download/upload image page (individual design) - download image option -upload image (based on this image). -when image is uploaded: -add keywords, tags, artist info, and categetory to make design easier to search.
2.4 Popular/featured Design Roots -gallery of popular and featured design roots -design roots shown as icons 3.1 Design Root page (shows entire Design Root) -shows original image, then all the subsequent iteration on one page. -each image when hovered over expands to show at a larger size (1/2 screen size). -you can click on an image that is part of the root. 4.1 Download/upload image page (individual design) - download image option -upload image (based on this image). -when image is uploaded: -add keywords, tags, artist info, and categetory to make design easier to search.
30
Design Root Layout & Navigation When a Design Root is selected, from the homepage, search, or any other source it will bring the user to a page similar to the one shown here. A user can then scroll around and navigate the Design Root much like a maps website like Google Maps. Users can navigate by clicking and holding and pulling around the page, or use the arrows in the top left. Users can also use the zoom scroll bar on the side of the page to zoom in on particular parts of the design.
Example of a Design Root page (3.1)
Some examples of Design Roots and how you can zoom in and navigate the space within the webpage. (3.1)
34
Design Root Layout & Navigation (Continued) While navigating any design root, a user can double click on an image and it will come to a screen like the one to the right (4.1). The image selected will be a large size for better viewing. The image view screen will be a popup out of the Design Root page and will not redirect to a seperate page. The pop-up will show the user that created it (if the uploader chooses to upload anonymously there will be no creator info). The screen will have a button to click to download the image, so you can edit the picture yourself with whatever software or technique you choose. The pop-up will feature a complete history of its design in the form of a horizontal scroll on the bottom, which will show all the designs in which the image shown has been rooted to in horizontal order from left to right. The pop-up will also feature a button to upload an image that you created which builds upon the design selected. If you click the upload button it will bring you to the new upload page. Once the upload is complete the site will place the image in its proper place in the Design Root.
Pop up window example (4.1)
36
Design Root Social Connections Anything created and uploaded to Design Root can be shared in all social media outlets.The pop-up screen (4.1) will feature buttons to share on facebook, tumblr, stumbleupon, and reddit. An individual image can be shared. Users can comment on individual images in the pop-up screen, or the Root as a whole. All comments in Design Roots will be enabled and connected through facebook. Users will be able to flag any post as inapropriate, as spam or as a post which does not reference, or use any imagery from the image it is connected to. Such flags will alert site administrators to review the image, and remove it if necessary.
Pop up window example (4.1)
38
Creative Ownership Creative ownership and intellectual property is really hard to regulate in the Design Root setting. Becuase so many people manipulate and creatively alter other peoples artwork it is very difficult to allow any user creative ownership of any piece on the site. The sale or any other profit made from images on Design Root will also be forbidden.The site holds full right to take down any image at any time if someone is making money from the usage of that image.
(3.1)
40
Website Design Versions The next 6 pages show different versions of the Design Root website. All the versions incorporate the same branding, and many of the same elements, but there is variation in treatment, placement, and organization in the three versions. Each version has a homepage (1.1) and a search page shown (2.2).
An Online Collaboration Site Start NEW Design Root
Featured Design Root
The start of something awesome!
Look at this cool Design Root!
Search Design Roots Search for: Keyword Users Subject Tags
YOUR Recent Design Roots Upload Download Favorites
What is Design Root? Design Root is an online Collaboration Site.
Random Design Root Bored? Find something surprising.
This is a site where you can post pictures, and have anyone collaborate and alter the images. The entire progression will always be navigicable, so anyone can see how any design came to be. Take a look at the Design Roots in progress, and start creating for youself.
Recently uploaded to Design Roots:
First design version of the homepage. This design features multiple widgets within the page.(1.1)
About Start NEW Search
What is Design Root? Design Root is an online Collaboration Site. This is a site where you can post pictures, and have anyone collaborate and alter the images. The entire progression will always be navigicable, so anyone can see how any design came to be. Take a look at the Design Roots in progress, and start creating for youself.
Recent Random
gn Root
awesome!
An Online Collaboration Site brought to by Brian Culmo
Featured Design Root
Recently uploaded to Design Roots:
Homepage (1.1)
version 2
About Start NEW Search
Search
Recent Random An Online Collaboration Site brought to by Brian Culmo
n Root
wesome!
version 2
Advanced Search Search for: Keyword Users Subject Tags
Search page (2.2)
An Online Collaboration Site
About
Start NEW
Search
Recent
Random
Start NEW Design Root
What is Design Root?
YOUR Recent Design Roots
The start of something awesome!
Design Root is an online Collaboration Site.
Upload Download Favorites
This is a site where you can post pictures, and have anyone collaborate and alter the images. The entire progression will always be navigicable, so anyone can see how any design came to be. Take a look at the Design Roots in progress, and start creating for youself.
Random Design Root
Search Design Roots Search for: Keyword Users Subject Tags
Homepage (1.1)
Bored? Find something surprising.
version 3
An Online Collaboration Site
About
Start NEW
Search
Recent
Random
Search
Advanced Search Search for: Keyword Users Subject Tags
version 3
Search page (2.2)
An Online Collaboration Site
SEARCH Start NEW
Homepage (1.1)
What is Design Root? Design Root is an online Collaboration Site. This is a site where you can post pictures, and have anyone collaborate and alter the images. The entire progression will always be navigicable, so anyone can see how any design came to be. Take a look at the Design Roots in progress, and start creating for youself.
RECENT RANDOM
version 4
An Online Collaboration Site
About
Start NEW
Search
Recent
Random
SEARCH
Advanced Search Search for: Keyword Users Subject Tags
version 4
Search page (2.2)
Š Brian Culmo 2013