Issuu on Google+

www.deathbycss.idesignandwrite.com

style manual ART220 : : NOVA Alexandria : : Spring 2011

A website brought to you by the morbid imagination of

LORI MILANI


To Lisa. Thank you for your tortures. In dying by CSS, we were born to a new life filled with endless design possibilities.


PHILOSOPHY Death by CSS is a humorous website that displays several examples of what is possible to achieve in web design by using CSS3. While the title may sound ominous or morbid, the message is everything but negative: in dying by CSS, the designer is born to a new life filled with endless possibilities. Life and death are two sides of the same coin. This concept is reinforced by the quotations in the sidebar as well as the logo, where “a” and “b” are connected to form a sort of infinity symbol that— rotated at -40º on a green (# 8CC63F ) background—is also used for the favicon. The look and feel of the site is clean and minimal without being boring. Bright colors and fun graphics catch the viewer’s eye and attention without being distracting and make for a happy user experience. The website intends to be entertaining and educational at the same time.

GRAPHICS & SIZES The typeface for the logo is Bauhaus but the default “y” is replaced with a flipped “h” to emphasize the specularity of life and death.

The size for the logo on the website is 260px x 70px. Always leave a margin of 15 px all around the logo. The logo can also be printed in B&W and in B&W documents. The header image has a semi-opaque pattern of curly brackets and semicolons, which are essential elements of the CSS syntax. The size of the header is 955px x 115px. In the wrapper, a horizontal curly bracket sits right below the header and complements it, thus breaking away from the linear, boxy look and feel of most websites’ headers. The size of the bracket graphic is 955px x 209px including the transparent background that pushes it down right at the bottom of the header image.

Death by CSS 1


COLOR SCHEME #8cc63f RGB: 140, 198, 63 CMYK: 50, 0, 99, 0 Pantone 376 PC #e7f6d2 RGB: 231, 246, 210 CMYK: 9, 0, 21, 0 Pantone 365 PC

Links Hover, Footer, Sidebar Content Border

Sidebar Background, Photo Caption Background, Gallery Caption Background

#668732 RGB: 102, 135, 50 CMYK: 64, 29,100, 11 Pantone 576 PC

Text for Sidebar and Gallery Caption

#9f1f63 RGB: 159, 31, 99 CMYK: 36,100, 36, 9 Pantone 228 PC

Headlines H1, Visited Links, Active Links

# 91278f RGB: 145, 39, 143 CMYK: 51, 99, 2, 0 Pantone 254 PC

Links, Footer Text

# 333333 RGB: 51, 51, 51 CMYK: 69, 63, 62, 58 Pantone Black 426 PC

Body Text

The color scheme is bright, energetic, fun and happy without being too vibrant or distracting. The color palette is limited to two main colors (#8cc63f and #9f1f63) and tints or shades thereof. The main content area of the website has a white background to keep it clean and uncluttered as well as easy to read. The body background is a subtle linear vertical gradient at a 90º angle consisting of the hex color #91278f at the top and the hex color #9f1f63 at the bottom. The gradients created with CSS on the gradients page are tints and shades of the hex colors #e7f6d2, #8cc63f and #668732­—the three values of green constantly used all throughout the site.

2 Death by CSS


TYPEFACES H1, H2: FF ENZO WEB MEDIUM Designed by Tobias Kvant in 2008 and published by Font Font.

H1: 30px #9f1f63 H2: 20px #333

BODY TEXT, NAVIGATION, SIDEBAR, FOOTER: MUSEO SLAB 500 Designed by Jos Buivenga in 2009 and published by exljbris Font Foundry.

Body: 14px #333; line-height: 30px Navigation: 14px #91278f Sidebar: 12px #668732; Line height: 15px Footer: 10px #91278f

The typography of the website is also clean, contemporary and minimalist. A sleek sans-serif font (FF Enzo Web) is used for the headlines, while the rest of the text is set in a quirky but clean contemporary take on a slab serif (Museo Slab). A line height of 30px allows the text to breathe. Both FF Enzo Web and Museo Slab are provided by Typekit. They can also be purchased for print purposes from Font Font and exljibris Font Fountry respectively. The whole Enzo Web package is also available from ITC. Both fonts come in several weights but for the site only two weights (Enzo Web Medium and Museo Slab 500) were chosen to minimize loading times.

Death by CSS 3


GRID, MARGINS & PADDING

115px 225px

245px 15px

25px

25px

660px 270px

85px 955px

The grid of the website is a classic CSS “box Model�. A wrapper that is 955px wide contains a header measuring 955px x115px, a main content area that is 660px wide and has a 225px margin from the top, a sidebar that is 270px wide and has a 245px margin from the top and a 15px margin from the right, and a footer that measures 955px x 85px. The margins for the text in the main content area are 25px left and right and 8 px from the bottom. The padding for the text in the sidebar is 10px. The margins are 0 5px 20px 5px. The padding for the footer text is 25px. A border radius of 18px is applied to the main structure of the site except for the bottom right corner. The radius for the sidebar is 8px (except for the bottom right corner). Drop shadows are also applied: RGB 0 0 0 with alpha .5 for the wrapper, and RGB 99 99 99 with alpha .5 for sidebar and illustrations or photographs.

4 Death by CSS


THE WORDPRESS “TWIN SITE” “Death by CSS” has also a “twin” WordPress site. The site was designed customizing the default Twenty Ten theme. The color scheme and typography are the same. The grid varies a little bit because of the Twenty Ten theme’s preset values. The header is taller and the navigation is different. On the site built from scratch, the navigation sits on top of the header and consists of only three buttons: “CSS3” that leads to a table of contents of all CSS3 pages, “Maps” that leads to the Google Map customizations and WordPress that links to the WordPress site. The navigation of the WordPress site is more extensive and also contains subpages. Visually, it cuts through the image formed by the header and the bracket. The sidebar of the WordPress site also contains a search widget and a calendar that keeps track of blog posts. Unlike the original site and because of WordPress being also a blogging platform and offering many plugins that allow interactivity, the WordPress site hosts a blog and a forum.

Death by CSS 5


Š Copyright 2011 Lori Milani



Death by CSS Style Manual