Resources for Students
This Dutch artist has been all over the web lately, and I couldn’t help but share two of my favourite pieces of his.
First, there’s an amazing video of Job and his nephew writing the alphabet side by side.
[via Shape + Colour]
And then a wonderful visual of a group of Job’s handdrawn posters.
These are only 80 of 500 he did! More pics of the rest on his website.
Creative Curio is fast becoming one of my favourite design resources. Recently Lauren posted a wonderful article answering questions that design students ask when they’ve graduated. Questions like:
And many more. Make sure to check them all out!
Answers to the Top Design Student Questions –>
Typography is more than being legible and looking good. Among other things, effective typography manages to achieve two important objectives: a) to create an appropriate atmosphere and enable users to develop trust toward the site and b) to make sure visitors get the main message of the site and (if possible) become interested in the services offered on the site. Since written text is the most efficient instrument to communicate with visitors precisely and directly, the power of typography shouldn’t be underestimated.
The Digital Arts Technology Training Institute has registered on the Autodesk Student Engineering & Design Community networking site. This website community will allow our students to connect with students and faculty in dozens of countries in order to share interests and get inspired.
Students will be able to:
Registered users will also have access to question and answer forums, job postings, tips and tricks, a magazine archive, an extensive article database and a resource link repository.
Currently, the community has a Student Design Challenge running with several prize packs including:
Students are invited to check their email for an invitation link from their instructor that will allow them to join our school in this community.
Very pretty website by Rob Walsh. Right-click the background and choose View Background Image to get a better idea of how he constructed it. The structure of the site itself is super simple, but the imagery makes it sing.
This is the first of a new format of posts here at the DArTT student blog - I’ll be posting some DArTT-generated helpful articles, tips and commentary periodically. Please let me know if you like it!
Working with CSS and abandoning Tables for layout can be daunting. It took me a while to sort it out in my own head, but a good understanding of the concept really helped.
I’m going to go over the definitions and the reasoning for web standards coding and markup, and then give you some basic steps for doing it yourself.
(Note: I might say HTML but I mean XHTML. It’s just habit!)
The basic idea is that you want to separate the presentation from the content so that any change – from a slight adjustment to a full redesign – is as simple as possible.
Ideally, to change the layout of a site, all you would need to do is change the style sheets; you would not need to edit the pages themselves at all.
Using Web standards also reduces the file sizes of your pages. This saves bandwidth, which costs money for you as well as time for the user.
Using Web standards ALSO makes it ridiculously easy to maintain visual consistency throughout a site. Since pages use the same CSS document for their layout, they are all formatted the same. This strengthens your brand and makes your site more usable. VERY important!
PRESENTATION refers to every last bit of CSS, as well as any HTML tags or properties that only exist for style purposes. Gone are the days of <font color=”#FF000”></font>, or <body background=”blah.jpg”> - ALL DESIGN should be controlled by CSS in an external style sheet.
With the CSS in its own external document, this leaves nothing but plain, semantic (more on that in a second) XHTML, and the content itself. That allows ease of editing for the content without affecting what the site looks like.
Semantics, for those who haven’t heard that term before, is the study of meaning in language. Every element in HTML carries an inherent meaning and purpose, which it passes along to the content within it. The semantic value of your markup should align with the semantic value of your content.
Content is all of your actual text, plus tags like h1-h6, paragraphs, list, em, strong, code, cite, etc. These are tags that explicitly *describe* the content - they don’t affect how it displays.
Using CSS to do your layouts requires a slightly different way of thinking than you’re used to. Rather than thinking about things like “this goes here and this goes here”, we need to think about the KINDS of information in our page and the STRUCTURE of that information.
We give the most important headline an <h1> tag; subheads get marked up with <h2> tags, etc.; and paragraphs are paragraphs. This is what is known as “structural” or “semantic” markup, and it’s what I mean when I say “informational hierarchy”.
That means, among other things, that if you have a first-level headline, it should always be surrounded by <h1></h1> tags. Don’t skip from h1 to h3; if you have a first-level headline and a third-level headline, there must, semantically, be a second-level headline as well. Semantics are very important for SEO (Search Engine Optimization) as well.
Finally, and this is a big one for layout purposes, instead of putting your content inside of tables and table cells, wrap it in DIV elements. Give your div elements an id or a class that is descriptive of their content and/or function, rather than their appearance. For instance, “sidebar” or “maincolumn”.
When you’re deciding what tags to put on your content, think about why you want something to appear a certain way; what does it mean?
When you italize something, is that because you want to emphasize it, <em>, or because it’s the title of a book, <cite>? Make sure you know which one to use, and never use <i>!
If something is bold, it should probably be marked up as <strong>. <b> has fallen out of web standards use.
If you want a line break after something, chances are it should be marked up as a header element. If it’s not a header, is it part of a class that occurs throughout your site? If that’s the case then use CSS instead of <br>.
Your markup can and should convey meaning, even to someone who cannot see your page. Semantic markup makes our pages more accessible to everyone, including search engines.
So let’s do an example. Let’s say we’re working on a website for which we have all the content. We need to analyze it and mark it up semantically – put the headers at the top of the content, use paragraph and headline tags where necessary.
Most websites have the following categories of content:
You want to put the most important type of content at the top of the page, and the next most important next, and so on. Then wrap each of these types of content inside of a semantically-named div tag.
Put your main navigation into a div with an id of mainnav; put your sub-navigation inside a div with an id or class of subnav, put your footer in a <div id="footer">, and wrap your content inside a <div id="content">.
Your site can and should be completed in this ugly, text-only format, before you attempt any presentation design.
A basic site could look like this:
<html>
<head></head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="navigation"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</body>
</html>
…of course, with the properly encoded content included.
A full-XHTML example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>TITLE GOES HERE</title> </head>
<body>
<div id=”header”>
LOGO AND HEADER INFO GOES HERE
</div>
<div id=”navigation”>
LINKS GO HERE (put in the actual links though!) </div>
<div id=”content”>
Put in content
</div>
<div id=”sidebar”>
Extra stuff
</div>
<div id=”footer”>
etc
</div>
</body>
</html>
With that under control, it’s time to start writing your CSS.
At the beginning, give each div a border. For example, div {border: 1px solid gray; } This will help you see where they begin and end, and also whether or not you have any nesting or overlapping. When the elements are working correctly, remove the border code.
Write the CSS for all your element selectors first (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.). The body tag should include any background image for the page, the main font selection for the site, and probably you should set all margins and padding to zero.
When you put the font face and size in the body tag, you won’t have to declare it again in any other CSS tag, unless you want it different (such as in headlines).
By setting all margins and padding to zero, you are able to control the margins and padding of each of your elements separately. This is good because the browsers handle margins and padding slightly differently.
As you work, test in as many browsers as you can and get your friends to test it in their browsers.
You have to decide here between absolute and relative positioning, or floats, or what, but that’s way too much for this article.
To reiterate: Separate the presentation from the content. Organize your information semantically. Build your XHTML page first. Write your CSS after your content is under control.
OK, I admit it, this post was inspired by the utterly hilarious Toys ‘R’ Us homage to James Cameron’s Titanic movie (above). But the rest of the ads are definitely worth a look (and a second look!) as examples of how expressive imagery can be.
This is a theme that’s very close to my heart - close as in, it’s in my shoulder. And neck. And elbow. And wrist. And fingers. I’ve got a repetitive strain injury (RSI) from using the computer improperly many years ago, and unless I’m careful it can flare up quite easily and ruin an otherwise lovely day (or week, or month..).
It’s a bit of a pet project of mine to make sure everyone in the office has their workstation set up properly and isn’t creating a problem for themselves. So I was very glad to come across these workstation setup graphics on an Illustrator website that I’m able to share with you.
Do yourself a favour and make sure your setup is correct!
I know I’m a little late to the party on this one, but I just came across a great behind-the-scenes post on Autodesk’s website about how their 3dstudio Max software was used to create the game art, and I couldn’t help but post it. It’s an extremely beautiful game, and this post details visually how a combination of simple geometry, displacement maps, normal maps, specular maps and diffuse maps create the look.
This is just the niftiest thing! You can click and drag on the simulated cloth and it will bounce back with elasticity, and turn on an external force in the form of a fan. Fascinating and a little addictive.