Modern Web Design
Back in the day web designs were crude things. All it took was a bit of HTML, which I understood slightly. Then along came CSS, which I understood even less well. Today I explored the way that web designers create slick, clean, modern web sites. It’s a whole new world.
Both of these tutorials come from a really nice web site for web site design (featuring Ruby design) called NetTuts+http://net.tutsplus.com/
Here's Part 1 of 5 part series describing how Adi Purdilia designs a clean magazine and blog theme. A time-lapse video shows how he worked out the design, mistakes and all. It runs at about 3.5x speed, so in an hour you see what took him four to do.
In the first part of the video Adi creates a wireframe for the design: a rough “wireframe” sketch using tools that are designed to ignore details. In the second part he uses Photoshop Designer to transform the ideas in the wireframe to something that looks nice. In later episodes, which I have not watched, he transforms this, stepwise into a complete implementation.
Wireframes for web design? What are those? Here's a list of ten such tools. And here’s another set of wireframe resources:
There are a lot of wireframing tools including some that plug into Firefox, and even a template set that works with Google Drawings. here is an article that I found that pointed me to the Google Drawing template, and here is the template itself. Here’s a big list of element kits and templates.
Zen-Coding is another really cool tools. It’s the ultimate in compact HTML markup generation. HTML is unnecessarily verbose. HAML simplifies HTML. Zen-Coding takes things to another lavel.
Here's a video tutorial that shows just how cool Zen Coding can be.
Zen-Coding is an open source project hosted on Google Code. The documentation, such as it is, is on the project's Wiki. And the syntax is summarized using a cheat sheet. You can get the cheat sheet here.
Here are 50 useful (and free) templating tools.
All for now. Whew!
Comments
Post a Comment