Design With Crackers

Wednesday, 3 June 2009

For beginners: next steps

Now, assuming you've already read “Designing Web Usability: The Practice of Simplicity” and studied all of HTML Dog tutorials and examples. Assuming that you've read at least 30% of what is available at Web Design From Scratch (by the way, it's been beautifully redesigned since the last time I linked to it), these are the next things you ought to do:

Read “Prioritizing Web Usability” (by Jakob Nielsen and Hoa Loranger) and “Don't Make Me Think - A Common Sense Approach to Web Usability” (by Steve Krug).

Learn to touch-type, it will pay off before you notice! There are plenty of tools around that will help you to learn it in no time, some are even web based!

Study these resources that will help you to master CSS layout techniques and other key web concepts and technologies:

  • Dev.Opera lovely Introduction to The Web Standards Curriculum - It's a comprehensive course on the basics and a definitive can't miss for beginners.
  • CSS TRICKS All about Floats - Read it and you'll "get it".
  • Matthew James Taylor wonderful Website layouts - Those are pure gold, study them with care, take them apart, build them again.
  • BlueRobot's Layout Reservoir - Those are a bit old, but they are great nonetheless, study them and feel free to ignore the references to browsers no-longer used.
  • Alessandro's Layout Gala - Old too, study them, don't forget to test them with care in newer browsers before using one of them.
  • Blueprint.CSS and 960.gs CSS Frameworks - Take your time to study those two very carefully, even if you don't plan to use them at all, since you can learn a lot by figuring out how they work. I'll be posting a list of the best available CSS Frameworks along with some commentary about each one of them, I just don't know yet when I'll do it, so keep an eye out!
  • Dave Shea famous CSS Zen Garden - There's a lot to learn here!

Don't simply copy & paste from the layout galleries and tutorials! Study them thoroughly and then try to redo them without looking at their code! Be careful with the temptation to keep using pre-made CSS Frameworks indefinitely, you'll never be a pro if you don't bite the bullet and go all the way through CSS layout techniques learning curve!

Study these resources about design principles and start learning to use a Vector Imaging tool, I recommend Inkscape and it's on-line tutorials are an excellent place to start! Inkscape is available for Mac OS X, Linux and Windows!

Have fun with what you're doing! If you should become bored then probably this area is not for you, since you'll be competing against lots of people which are very enthusiastic about what they are doing.

And don't forget to come back here (preferably subscribe to my feed) to discover what to do once you have completed these steps!

Labels: , , , , ,

Friday, 17 April 2009

Cheat Sheets!

Back when I was in school, teachers told me that they were bad and I would be in serious trouble if I were to be caught using one of them. Then I went to college and the professors there told me to use them, they even printed and stapled them with some of my exams! But I never thought of them as something I would be using while working with the Web.

Then, on April 2005, while I was visiting IloveJackDaniels.com (now it's called “Added Bytes”), I saw that Dave had made an PHP Cheat Sheet! At first, I didn't knew what to think about it, but I downloaded and printed it and, not knowing where else to put it, I had it glued on the wall behind my monitor. Soon after, I noticed I was typing PHP code much faster than before, my visits to php.net had diminished a lot and, thus, I was remembering much more about it than I've ever did before!

A week or so later, Dave posted another one! This time it was an CSS one! Quickly I became addicted to it, to the point that I would turn on the lights (so that I could see them) whenever I was going to code.

As time went by, I downloaded the new ones he posted and scrapped the old ones. Still, I have a set of them on the wall in front of me even today, though I don't look at them not nearly as much as I did before.

Whether you are still learning HTML, CSS, etc. or if you're already a pro, take my advice: download them and have them glued to the wall behind your monitor, they'll be invaluable.

Labels: , ,

Saturday, 28 February 2009

Flags and alternative versions

Ever since I came up with the idea for this blog, I've decided to make it bilingual. I'm fluent in both Brazilian Portuguese and English so this was clearly a good way to broaden my audience.

After much consideration, I've chosen to place the alternative version link as the first one in my link list. To make it look more prominent, I thought it should have one of those little flags right beside it. Since I had already seen some nice flags in my BitTorrent client of choice, KTorrent, I went after it's docs to see where the developers grabbed them. Here's the link, the ones I'm using are from the world 25x15 pixels set. These are licensed under Creative Commons. They should come in handy whenever you need to have multiple language versions of a site.

Labels: ,