Welcome to UX Cloud IntranetDesigning and Building a UX Library IntranetCreated by Marcela CabreraGeneral Assembly San FranciscoFEWD Section 31 - June 30, 2015

Welcome to UX Cloud (Intranet)Designing and Building a UX Library Intranet for All

My goal is to build a ux intranet that serves as a center for information and graphic assets access for design, engineering and marketing staff.

The following is an intial proposal for the website look and feel, using html, css, and basic javascript and jquery.

I want to build a site that is easy to implement and maintain, and which allows tools for browsing and accessing assets.

Search

Welcome to Aspera UX DesignLorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiuUt enim ad minim veniam, quis nostrud exercitation.

iconographycolorprojects typographylogos ui elementsthe studio

Design directionSplash Screen exploration - Defining entryway to ux cloud site

iconographycolorprojects typographylogos ui elementsthe studio

IconographyLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada ornare tortor, id dignissim nibh tristique nec. Integer posuere orci ac blandit dapibus.Etiam vel efficitur libero. Fusce dictum vulputate magna, pretium accumsan ex rutrum eget. Etiam efficitur ullamcorper neque non tristique.

view all icons

Icon Name

B

C

A |B

| C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Icon Name Icon Name Icon Name Icon Name Icon Name Icon Name Icon Name

Icon Name Icon Name Icon Name Icon Name Icon Name Icon Name Icon Name Icon Name

AiPngSvg

Icon Name Icon Name Icon Name Icon Name Icon Name Icon Name Icon Name Icon Name

Template page definitionDefining navigation and overall content of site - Iconography gallery

ColorLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada ornare tortor, id dignissim nibh tristique nec. Integer posuere orci ac blandit dapibus.Etiam vel efficitur libero. Fusce dictum vulputate magna, pretium accumsan ex rutrum eget. Etiam efficitur ullamcorper neque non tristique.

view all colors

color-b1 color-b3 color-b4 color-b5 color-b6color-b2

UI BLUES

UI GRAY

C O L O R | C O L O R 2 | C O L O R 3 | C O L O R 5 | P RO D U C T S

color-g1 color-g3 color-g4 color-g5 color-g6 color-g7color-g2

Page content and layout explorationDefining how elements of sytleguide can be accessed

1

1

Hex #82D1F5Rgb (130, 209, 245, 1)Cmyk (44, 2, 0, 0)

Swatch library CSS

Swatch library CSS

UI CUSTOM Swatch library CSS

color-g1 color-m3 color-m4 color-m5 color-m6 color-m7 color-m8color-m2

1

COMPLETE LIBRARY

iconography iconography

Menu systems visualization

iconography iconography iconography

iconography

Defining look and feel

12 px set

24 px set

32 px set

64 px set

128 px set

12 px set

24 px set

32 px set

64 px set

128 px set

12 px set

24 px set

32 px set

64 px set

128 px set

12 px set

24 px set

32 px set

64 px set

128 px set

12 px set

24 px set

32 px set

64 px set

128 px set

12 px set

24 px set

32 px set

64 px set

128 px set

Website code implementationScreens created using html, css, javascript, bootstrap library (Carousel)