DESIGNIDEAS
DESIGNIDEAS
I am using colors to show how much visual power they have, which can be emphasized with CSS styling.
The circles above are basic HTML div containers transformed by using a blend of HTML and CSS. The roundness is achieved by CSS property radius: 50%;. Additional visual impact is acheived with a blend of "SKEUMORPHISM' and "GLASSMORHISM", a design icon philosophy used to give a webpage click on object the appearance of a button. Or give an element a 3-dimensional effect, and provides a great UX by pulling the viewer in. Additional CSS styles add subtle shading, shadows and roundness, to give the circles a 'marble' appearance, and really pop off the page.
There are 'NAMED COLORS', equivalents in 'HEXIDECIMAL", & 'RGB/RGBA', smaller 'marbles' showing how those colors render. The three large 'marble' circles are 'Tomato'. And the 5 smaller marbles comprise the other 5 named colors, CornFlowerBlue, LightSeaGreen, MediumSlateBlue, CornSilk and DarkOrange.
This Website Design System, called DESIGN IDEAS, utilized several additional HTML elements and CSS properties to enhance the structural and visual appearance of this webpage project and provide a better UX and visual harmony. A deliberate balance is achieved between the two sections: the Typography resides in a clean, text-like environment on white paper, while the Color container provides a powerful, active rendering. This entire composition is framed by a main viewport of bold black.
The page was split up to emphasize the different topics, and give the color/design and Typography center stage. Specific features include 'secondary navigation', 'radial-gradients', 'filter contrast', 'mask-blend', 'box-shadow', 'border-radius', "Google Fonts", 'box-sizing', nth-child(), 'header', 'logo container', 'logo image' 'breadcrumbs', 'skeuomorphism', 'a tab favicon', and more. Text tags used included h1, h3, p, br, different font weights (bold, italic, light).
