welcome to ux cloud intranetres.cloudinary.com/general-assembly-profiles/image/... ·...
TRANSCRIPT
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)