design root website process book

Design Root is an Online Colalboration Sitewww.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 up-load their edited images into the correct place in the Design Root.

An Online Collaboration Site 5

How Design Root DifferentiatesWe 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 pic-tures 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 collabo-rate 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.

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.


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.

8

Target Audience

The target audience is any type of creative person. The open platform en-courages 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 manipu-lating other peoples images.

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 mo-biles, roots and family trees sprouted from the functionality of the site, the main goal of th site. The functional necessities handed themselves to aes-thetics 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.


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.


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 eventu-ally got eliminated, along with the root illustrations, to simplify the mark to the letters and a singular line.

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 back-ground. 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.

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 re-quires 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.

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.

22

Main Logo Blue R:12 G:72 B:89Hex#:0c4859 Uses: main logo color of the front of the letters, icon full color

Main Logo Shadow Blue R:0 G:60 B:74Hex#: 003c4a Uses: main logo shadow color for the letters, icon full color

BlackR:0 G:0 B:0Hex#: 000000 Uses: any lines on the site, text of all sizes,

Color Palette

24

Fonts

Headlines: ITC Lubilin Graph BoldSize:18pt/20pt

ABCDEFGHIJKLMNOPQRSTUVWZYZ abcdefghijklmnopqrstuvwzyz .,?:;’{}~`[]!@#$%^&*()-=+\0123456789The quick brown fox jumped over the lazy dog.


Subheads: ITC Lubilin Graph Regular Size: 16pt/18pt ABCDEFGHIJKLMNOPQRSTUVWZYZ abcdefghijklmnopqrstuvwzyz .,?:;’{}~`[]!@#$%^&*()-=+\0123456789 The quick brown fox jumped over the lazy dog.

Body Text: Gill Sans LightSize: 14pt/17pt ABCDEFGHIJKLMNOPQRSTUVWZYZ abcdefghijklmnopqrstuvwzyz .,?:;’{}~`[]!@#$%^&*()-=+\0123456789The 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.

26

Type Reasoning

ITC Lubilin Graph was used for its angular slab serifs. The geometric letter-forms 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 sub-heads 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.

Landing Page-Intro/description-Start a new design root-Search-Popular /Featured design root-Recent designs

Start a new Design Root-import file-add keywords, tags, artist info, and categeto-ry to make design easier to search.

Search Design RootsSearch based on keywords, tags, artist, or categories

Search results of many design roots-each design root is an icon that is clickable that brings you to a new page

Recent Designs-shows all the designs you recently downloaded, uploaded or viewed.

Popular/featured Design Roots-gallery of popular and featured design roots-design roots shown as icons

Design Root page (shows entire Design Root)-shows original image, then all the subse-quent 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.

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 catege-tory to make design easier to search.

2.1 2.2 2.3

1.1

2.4

3.23.1

4.1



3.1

4.1



3.1

4.1



3.1

4.1

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 pop-up 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 face-book, 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.

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).

Start NEW Design RootThe start of something awesome!

Search Design RootsSearch for:KeywordUsersSubjectTags

YOUR Recent Design RootsUploadDownloadFavorites

An Online Collaboration Site

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.

Random Design RootBored? Find something surprising.

Featured Design RootLook at this cool Design Root!

Recently uploaded to Design Roots:

First design version of the homepage. This design features multiple widgets within the page.(1.1)

Homepage (1.1)

An Online CollaborationSite brought toby Brian Culmo


Recently uploaded to Design Roots:

Start NEW

Search

Recent

Random

About

Featured Design Root

What is Design Root?Design Root is an online Collaboration Site.


version 2

Search page (2.2)

An Online CollaborationSite brought toby Brian Culmo


Start NEW

Search

Recent

Random

About

Advanced SearchSearch for:KeywordUsersSubjectTags

Search

version 2

Homepage (1.1)



Search Design RootsSearch for:KeywordUsersSubjectTags

YOUR Recent Design RootsUploadDownloadFavorites

Random Design RootBored? Find something surprising.

Start NEW Search Recent Random About

What is Design Root?Design Root is an onlineCollaboration Site.


version 3

Search page (2.2)



Search


version 3

Homepage (1.1)


RECENT

RANDOM

SEARCH

Start NEW

What is Design Root?Design Root is an onlineCollaboration Site.

This is a site where you can post pictures, and have anyone collaborate and alter the images. The entire pro-gression 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.

version 4

Search page (2.2)



SEARCH


version 4

design root website process book

Documents