The goal of this project is to build a complete design program for a small web site. You will need to produce the following deliverables for our “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 Flow diagrams or one combined diagram 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
Please put this all together in one nice PDF and send me a link to the HTML example pages.
Design Presentation: 12.7.2012
Final Presentation and Grading: 19.7.2012
LATE PROJECTS LOSE 1,0 POINTS! VOTE EARLY! VOTE OFTEN!
A few weeks ago I was lucky enough to meet Ana Carvalho at the LGRU meeting in Bergen, Norway. Ana is a designer from Porto Portugal who, along with Ricardo Lafuente, runs the studio Manufactura Independente. Among other very cool projects, they have been hacking web fonts have come up with colorfont.js which enables a world of multicolored typographic possibilities. Give it a try!
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 notuse 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.
- One page should include a more complicated layout with an image gallery.
- You can just put lorem ipsum text and stock images into the contents of each page.
Due in class on 14.06.2012 – late projects will receive 1,0 points worse!
Web fonts provide revolutionary new possibilities for designers who are sick of the standard set of “Web-Safe” fonts. There are a number of open source as well as commercial sources of web type but this example shows how to use Google’s web font system. The technique should be nearly the same with other providers:
<html>
<head>
<title>web fonts for fun and profit</title>
<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<style type="text/css">
h1 {
font-family: 'Righteous', cursive;
}
</style>
</head>
<body>
<h1>Web Fonts is the best!</h1>
<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. 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>
Image from Digital Folklore
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”.
Here is the example from class today:
<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>
If you get stuck, take a look at the excellent documentation for jQuery and jQuery.UI.
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
Design Presentation: 5.1.2012
Wireframes and HTML: 19.1.2012
Final Presentation and Grading: 26.1.2012
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:
<html>
<head>
<title>layout for forms</title>
<style type="text/css">
span.label {
float: left;
text-align: right;
width: 100px;
padding-right: 5px;
}
div.row {
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1>please fill out this form</h1>
<form>
<div class="row">
<span class="label">name:</span>
<input type="text" size="15" />
</div>
<div class="row">
<span class="label">password: </span>
<input type="password" size="15" />
</div>
<div class="row">
<span class="label">comment:</span>
<textarea rows="5" cols="40"></textarea>
</div>
<div class="row">
<span class="label"> </span>
<input type="submit" value="Send the form" />
</div>
</form>
</body>
</html>
