The goal of this project is to get your hands dirty with HTML and CSS without struggling to emulate fancy corporate web sites. You should try out a variety of technical and design possibilities from the tags and styling parameters that we have learned so far.
Requirements:
the site should be multiple pages (5+ would be nice)
the site should be a fake or parody publicity site for a small record label or band
it can (and should) be trashy, punk, dirty, prollig, spiesig or designerly incorrect.
upload your project to a public web site and post the URL as a comment here
Be creative and try to appreciate an aesthetic of failure, mistakes and naive approaches to design. If you are not having fun, take a break and try to return with a less serious attitude.
Due in class on May 10, 2012.
We will have a contest and vote in class to decide which site is the “Dirt-styliest”.
<html>
<head>
<title>Div and Span</title>
<style type="text/css">
div {
font-weight: bold;
}
span {
color: rgb(24,240,2);
}
#fred {
font-size: 2.1em;
}
.subheader {
font-variant: small-caps;
font-family: Helvetica, Arial, sans-serif;
word-spacing: 1.5em;
}
.kitsch {
text-decoration: blink;
font-family: "Comic Sans MS";
color: pink;
letter-spacing: 1em;
}
.spacy {
line-height: 1.5em;
text-indent: 100px;
text-align: right;
}
</style>
</head>
<body>
<div>hello world</div>
<!-- this is a comment -->
<div id="fred">This is another div</div>
<div>This is yet another div</div>
<div>this is another div</div>
<span>span one</span>
<span style="font-style: italic;">span after span</span>
<span>spanning time... for all eternity</span>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</body>
</html>
jQuery is one of the most popular javascript libraries at the moment. It takes some getting used to but it’s quite powerful and quite a few fancy interactions are possible with just a little bit of code. Here’s a quick demo to get you started. Clicking the button will slide the DIV in and out of visibility.
<!DOCTYPE html>
<html>
<head>
<title>magic with jQuery</title>
<style>
#stuff {
background-color: #0000FF;
color: #FFFFFF;
border: 1px solid #FF8800;
width: 400px;
margin-top: 10px;
padding: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$("#button").click(function () {
$("#stuff").slideToggle("slow");
});
});
</script>
</head>
<body>
<button id="button">Bang!</button>
<div id="stuff">Your sweet voice is like the snap of a bra strap upon a sun burnt back. Your sweet voice is like the snap of a bra strap upon a sun burnt back.
Your sweet voice is like the snap of a bra strap upon a sun burnt back.
Your sweet voice is like the snap of a bra strap upon a sun burnt back.
Your sweet voice is like the snap of a bra strap upon a sun burnt back.
</div>
</body>
</html>
In HTML any block or inline element can be a link. Just stick in inside a pair if ‘A’ tags. This is particularly useful for making menus and other UI elements. You can then use the various :hover, :focus and other pseudo-classes to apply styles that make plain vanilla text based HTML work like a fancy image based GUI. Here’s a quick little example:
<html>
<head>
<title>images!</title>
<style type="text/css">
body {
background-color: #888888;
}
div {
background-color: red;
width: 200px;
height: 200px;
float: left;
border: 1px solid black;
margin-left: 10px;
}
</style>
</head>
<body>
<a href="http://btk-fh.de">
<div>Hello background! This div is a link.</div>
</a>
<div>this div is not a link</div>
</body>
</html>
The goal of this project is to build a complete design program for a Social Media start-up company. You will need to produce the following deliverables for our fictional customer:
A basic corporate design standard: logo, color scheme and typographic standard
3 User Stories that describe the specific users who achieve specific goals or experiences on the site
3 Swim-Lane diagrams for the same 3 users showing the specific interactive steps they take above
5 Wireframe diagrams of critical pages that occur in the User Stories
Style Guide (not CSS) that explains using an example layout, colors, fonts and layout
Example HTML structure based on the structure defined in the Wireframes
CSS stylesheet based on the Style Guide
5 Example pages that use the HTML and CSS you’ve defined
Forms are not sexy but they don’t have to be ugly. Here’s the example we worked out in class on Thursday, where a little effort can make a form a lot more readable:
It’s surprisingly easy to create an image (or video, flash, etc.) gallery by using an existing free plugin. There are a huge number of copycats but the classic plugin is Lightbox. If you need something different, here’s a matrix where you can compare the size and features of various different gallery plugins.
And as a bonus today, here’s a few tips on how to style links so you aren’t stuck with the boring default blue underlined text. Important to note that “:hover” and other special selectors can be applied to lots of different elements, not just <A> tags but you will need to test browser support.
The goal of this project is to dig deeper into HTML and CSS to make layouts that serve a more serious design purpose. While web design takes much inspiration from various applications of print like magazines, newspapers, books, and pamphlets, one area often overlooked is old-fashioned company letterhead. In their heyday, these design objects served the important role of communicating the personality of the company while providing users with critical information needed to “navigate” the services provided.
Pick a company letterhead: I suggest looking through the book Letters from the Avant–Garde by Ellen Lupton & Elaine Lustig Cohen.
Make a standard HTML structure that can easily be adapted as a standard template for the company web site.
Use CSS to create a style-sheet that renders the HTML as closely as possible to the sample letterhead you’ve selected.
You can use any images, html tags and css properties you like but please do not use HTML tables! Use a proper CSS float based layout.
Make sure to incorporate a menu and a few sub-pages to see the layout in different contexts.
You can just put lorem ipsum text and stock images into the contents of each page.
