Author
The Archives
-
05.07.12Semester ProjektThe 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 ...
-
02.07.12ColorFont.jsA 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!
-
04.06.12Project 2: Layouts and LetterheadsThe 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 ...
-
31.05.12Web FontsWeb 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 ...
-
04.05.12Project 1: Dirt Style Design[caption id="attachment_110" align="aligncenter" width="560" caption="Image from Digital Folklore"][/caption] 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 ...
-
26.04.12Fundamentals of CSS TypographyHere 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 ...
-
05.01.12jQuery BasicsjQuery 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 ...
-
08.12.11Make Anything a LinkIn 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; ...
-
08.12.11Semester Project: Design for Social MediaThe 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 ...
-
02.12.11Please Fill Out This FormForms 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 { ...