Resources for Students
This is a really beautiful set of illustrative website designs. Each one has its own unique flavour. Keep an eye out for creative solutions to old problems, such as the off-balance interactive search box above.
I recommend reviewing the three links at the end of the list for more website design inspiration.
25 Incredibly Artistic Websites –> [via Just Creative Designs]
This is simply one of the most entertaining, visually appealing, useful applications of Flash on a website that I’ve ever seen.
Unscrew America –> [via NotCot]
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.
Awarding cash, electronics, software and scholarships, students are given multiple opportunities to win monthly with a grand prize at the end of the competition. Studica Skills is a set of international design contests in 3d animation, character modeling, graphic design, page layout, web design, digital sketching, photography, and dozens more digital media categories.
Created to challenge students both technically and creatively, Studica Skills is designed as an addendum to classroom learning. Awarding cash, electronics, software and scholarships, students are given multiple opportunities to win monthly with a grand prize at the end of the competition.
The competitions can get pretty heated and are a great way to stretch your creative muscles. There are competitions in design categories as well as competitions to test your knowledge of specific software such as Adobe Photoshop, Autodesk 3ds Max, Adobe Illustrator or InDesign.
CD-ED’s Digital Arts Technology Training Institute is working to incorporate the Studica Skills competition into its curriculum to allow students a chance to compare their skill levels and creativity with that of students across North America, as well as with their own local classmates.
It is open to all students, and even if you don’t win you can post your work and have it seen on the largest social networking site on the Internet.
We encourage our best & brightest to submit (that means you!)
* All Competitions are Free to Enter
* Enter as many Competitions as you wish
Studica Skills Competitions at Facebook –>
Studica Skills Competitions online –>
Very pretty place to find top-quality web fonts. Remember, never use decorative fonts for body copy (”copy” being a fancy word for “words” or “text”) - these should be used only to create images with text on them, for headlines, etc.
Fawnt.com –> [via hello.bauldoff]
I don’t often recommend books here, but this one has such an appropriate website I couldn’t help myself. I actually don’t even have this book, but the website makes me wish I did. When you rollover each of the principles where the navigation usually is, instead red notes appear showing actual examples of each principle used on the site itself. Genius, pretty, usable, and totally web-standards friendly.
If you don’t buy the book, at least check out the site!
Here’s a description of Semantics, CSS, and web standards that should help the newbies get a grasp on it. It’s geared towards helping people who are used to designing with tables let go of the old and embrace the ‘new’ (this is of course a year or two old, but I’m thinking of my students!).
This is absolutely perfect for my graphic design, 3d and gaming students. It’s an online portfolio site specifically for artists without web skills. It’s sleek and clean, and I’ve had one or two students submit their portfolios by sending me the URL (which is how I found it). I’ll be suggesting it as part of your final portfolio project!
(Plus, it’s pretty and a good example of webdesign.)
