Resources for Students
I was not aware that this type of revolution in X/HTML was taking place, but it’s VERY exciting. The top image is your basic site as it stands now with web standards. The second image is what they’re proposing - actual semantic tags to describe your content. Then your CSS would just have to define the header, the nav, etc.
Beautiful work, I can’t wait for it to implement!
It’s been far too long since I visited iLoveTypography.com, and I was in for a feast when I checked it out this morning. Their first post in 2008 has fifteen amazing examples of typography on the web - not necessarily great web design, but the type itself. Great design does usually does follow great typography, so visit and learn!
I found this through a commenter on 37signals’ weblog: it’s a page where the team at 37signals doesn’t just whine about a design or usability problem, they create a solution. At 37Better, you’ll find their idea of a better PayPal experience (see above), a better bank experience, a better Google experience, and more.
As a student, you should be looking at these as examples of how improving a site’s usability will almost always improve its design as well. The 37BetterPayPal site above is not only much clearer - you can read how much you’re sending even in the tiny thumbnail of the better page - but it is actually more visually pleasing.
Always think about usability, and your design will follow.
I caught this while browsing NotCot this morning. I’m still working out how it was done (I haven’t looked at the source, but I’m guessing transparent images plus z-order CSS), but scroll down to the bottom, and enjoy the ride. I could scroll this thing all day! It’s also fun to press the “Play” button.
Also, guys, this is a portfolio site. Take note!
Oh happy day! The fabulous Photoshop work at worth1000.com has always seemed overshadowed by poor site design and far too many advertisements and content areas. Somebody, I’m not sure who, has created a sleek, usable new interface that lets the artwork shine. Special touches include the gold/silver/bronze awards framing their photos and being mimicked in the new logo itself.
Kudos to the Worth1000 Team!
I haven’t visited Baekdal in a while for some reason, but he usually has some really great content. I came across this through some other site today, but I forget where because I realized it was a site I *should* be keeping up with, and I started to look through it, and then closed the window and lost the “back” history and… well, it’s a real referrer’s mess.
But! Don’t let my rambling stop you, click the link already! I had a student ask me in this evening’s online chat what size to design for, and Baekdal has the answer.
I think everybody’s a fan of Veerle, one of the web’s most honoured illustrators and designers. Her blog is simply gorgeous, and her design aesthetic is matched by her technical skills. But what makes this worth keeping in your favourites list is the wealth of tutorials buried in the archives. Browse by category or date to find a lot of great tips and tricks for design, Illustrator, Photoshop, and so much more.
I’ve found an excellent 8-part tutorial that shows, step-by-step, how to create a website based on CSS and the very content/sidebar/footer/header ID tags I’ve been teaching y’all. Go through and practice by following along, and then try to create your own design using the same techniques.
This interactive site will help when you’re just not sure what font will look right with your text. Type in custom text and 500 preview images will automatically update showing “the web’s top 500 free fonts.” Clearly, once you get into the industry, buying a few staple fonts is the way to go - but as a student in a hurry, this really can’t be beat.
Fonts 500 –> [via tutorialblog.org]
This is one of the best colour pickers I’ve seen in a while. It allows you to choose the type of colour scheme you want - monochromatic, triadic, split complementary, etc - and then play with all sorts of nifty buttons and dials until you have the scheme that suits you perfectly. You can then export the scheme to Photoshop or Illustrator, which is super nifty.
Beautiful art, design, typography, illustration and photo manipulation by Nik Ainley. There are far more pieces than I could possibly show you here, so make sure to click the link and ogle!