BTK-FH Logo

Projects

Semester Projekt

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!

Tools and Libraries

ColorFont.js

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!

Projects

Project 2: Layouts and Letterheads

Corunna Coal Company Letterhead - 1894

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!

Theorie

Web Fonts

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>

Projects

Project 1: Dirt Style Design

Unicorns!

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”.

Theorie

Fundamentals of CSS Typography

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>

Theorie

jQuery Basics

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.

Theorie

Make Anything a Link

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>

Projects

Semester Project: Design for Social Media

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

Theorie

Please Fill Out This Form

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">&nbsp;</span>
        <input type="submit" value="Send the form" />
      </div>
    </form>

  </body>
</html>