Hand Drawn Web Design Resources

Hand Drawn Web Design - Making a list of sites I have found regarding hand drawn web site templates.

Flickr: Hand Written Blogs - Not just the template but the whole blog.

Tutorials:

We are Not Freelancers has a video tutorial: Technique for creating a hand drawn website.

Talk Mania created a hand drawn template and has a guide to what they did to get there.

Web Designer Wall also shows their process in making the current hand drawn template.

Go Media Zine shows how to turn a hand drawn sketch into a vector illustration.

Resources: (Most are geared to using PhotoShop).

Webitect has links to resources and a few tips for designing.

1st Web Designer has resources for using PhotoShop as well as fonts anyone can use.

My Ink Blog has examples of templates and resources for making your own.

Design M.ag has template examples and resources.

Design Reviver has doodling and other resources for making hand drawn templates.

Snap 2 Objects has sketches, doodles and other hand drawn elements.

Hongkiat has 40 hand drawn fonts.

Examples:

Smashing Magazine writes about the trend to hand drawn websites and shows their top picks.

Hongkiat has 50 hand drawn template designs picked out as favourites.

Outlaw Design Blog showcases 30+ hand drawn websites.

Blog Spoon Graphics has 50 Inspiring Illustrations in Web Design.

Create Who You Are Blog has a few more designs reviewed.

I've Become Super Noob

I started writing as Super Noob on Lindsay's blog, Web Design for Idiots. Tonight I wrote the following as an introduction to who I am and why I'm someone who might have a reason to be writing there.

I'm posting this from my very messy desk with the TV on to my left and my nearly cold coffee at my right hand, in danger of wrecking my faithful little scanner. I'm a real woman. I'm a real, live, 40+, divorced Canadian woman, a writing legend in my own mind.

In June of 1996 I began on the Internet. I was an IRC diva for quite a long time. It was a lot of fun and most of it I really should not write about here. That's what personal blogs are all about. I wrote for a zine first, a small print publication called The Crying Clown. From there it was all online. At one point I was producing my own newsletter for writers, InkSplatters, sent out through what is now Yahoo Groups. I was a web writer for HerPlanet, BackWash, BellaOnline, Suite 101, WZ-ard.com and other sites, forums and newsletters some still living and some not. I still write for Creative Fat Grrl on LockerGnome, a babbly blog more than anything seriously functional. Writing for a network is a different educational experience than writing for yourself. Which is one reason I keep doing it.

I've had sites and then blogs of my own. I didn't begin online in the great time of blogging, I was here before that. So my first sites were put together with just HTML code as I learned and goofed it up. I've used software and I've cut and pasted code and I've hand coded my own pages. I'm not an expert, time alone isn't enough to make you an expert at web design or development. I have learned however and as I learn I see how much more there is to be explored and discovered. But, don't look to me expecting I'm a know-it-all. If I ever say that you can be sure I'm just laughing at myself.

I love creative things. I've done so many interesting forms of art, just to try them out. I made ASCII art for a few years. I continue to take digital photos of abandoned places here in Ontario, starting in 2006 when I bought my first digi camera. I'm also teaching myself to draw cartoons, some people even like them! This week I re-learned the art of cutting out paper doll chains so I could make them into a graphic for a blog. I really think it's important to keep the creativity and free writing in blogging. It would be a real shame if the personal journal and creative element of blogging were lost in the rush for SEO and money making.

Anyway, I'm here to help the less experienced blogger with my experiences. I've got a stack of great books about web design on my bookshelf and I will be using them (finally) for more than a place to hide my dust bunnies. I seem to collect books with great good intentions and then not get very far. You can also find me writing about web writing and posting writing ideas and prompts on my blog, Word Grrls.

ThatGrrl.ca

Completely off topic... did you know that a nail file works really well if you have an itchy spot on your back that you just can't reach? I've been rubbing my back on my chair tonight wishing for something to work. Then I had the great idea for the nail file (not one of those treacherous metal ones, just some cardboard type) and that worked great!

Serif Free Software

Free versions of Serif software, includes WebPlus and DrawPlus for creating sites and making your own graphics. I found this a few years ago and never did do much to try them out. Now they are updated and still have free versions, which was nice to find. Or, you can pay and get a few more features. Or, go to the main site and get the latest versions of the same software. Pretty reasonable, even for the newest versions, when compares to DreamWeaver which is up to $500 now versus the $100 it was when I first got ahold of what is now an older version, before Adobe added it's name to the whole thing.

Trying Pullquotes

Have you tried pullquotes?

I'm trying pullquotes from Blog U. This is my first try to see if it works.

If it works it could be a lot of fun. Not a great idea to go crazy with it or use it on short posts. But, a short quote does get read if you have a long blabby post.

Get the Blog Clutter Bug

I think the biggest upcoming things for blogs is going to be about clutter and making them look cleaner overall. So many blogs are stuffed full of ads, traffic and seo rank related things that it's hard to find anything in the sidebar that could actually be interesting.

I found a few links today about fixing blog clutter.

Lorelle on Word Press has written about Cleaning Up and Decluttering.

Skelliewag has 50 Tips to Unclutter your Blog and A Guide to Creating a Minimalist Website

ProBlogger writes about Minimalist Blogging too.

Supper Blogging Tips has written Unclutter your Sidebar.

Blogging Tips has Remove the Clutter from your Blog.

Wisdump has the Resurrection of the Sidebar.

Pro Blog Design has Sidebar Redesign.

There are so many endless, bottomless posts about how to add more to your blog, your sidebar and your search rank. Why is there so very little good information to be found about making a site reduce it's clutter and become readable again?

To take it to the barebones of the clutter situation it's about taking what you need and keeping it and then tossing everything else, no excuses and no saving stuff you only think would be nice to keep or might be good later on or gives you an ego boost but does nothing for your blog itself or those coming to read your blog.

Decluttering does not have to be heartless. If you really can't delete it all consider making a footer with three columns. Just like sweeping the dirt under the rug, keeping a junk drawer in the kitchen or a closet stuffed full of stuff you don't have time to deal with.

There are also ways to roll up the clutter so it is not visible in full but available at the touch of a mouse. There are two types of roll away clutter busters and I'm not really sure what they official standard names are for them. Lets call one the scrolling window and the other the scrolling title.

Another plan to move clutter off your front page is to give it a page of it's own and just link back to it. Or, categories set up like an index with the same link back plan.

Put a Mood or Smiley Face in your Title

Scarlet Words has this in her blog. Something I want to copy (with my own drawings) when I get time on my weekend, maybe. What a nice idea, it's like what they do on LiveJournal.

I don't think the added code would be too tricky. A little project to work on.

Addendum: I sent the idea to Annie at Blog U. She might like it enough to take it on for an upcoming post.

Fancy Tabbed Header

Look at my fancy new tabs, right at the top, hanging on my header/ banner. Thanks to Annie at Blog U.

I need to work on changing the colours, that blue doesn't go with my overall theme. Too tired to fiddle with anything else tonight. Back to work tomorrow after all. Another week of vacation time would be nice. I could get all the things on my list done, maybe. :D

I think the biggest blog development thing now is reducing, recycling or hiding clutter in the sidebar and blog in general. People are using three column layouts to try having more space for clutter. I think this is not the best plan. I really like the 3 column footer which is like sweeping your clutter under the rug. Still, it's hidden from the main blog view. It's not right at the entrance to be tripped over. Clutter is a big ongoing issue for bloggers to work on.

I'd write more but I'm too tired.

Cute Blogs

Cute Blogs Really nice site for adding a new look to your template. I picked damask yellow and may get it up tonight.

Changing Blog Template Tonight

I changed back to a two column template. I found a great resource for making the footer three columns and now I have all the clutter organized down there. I think it is looking a lot better. I can even post backgrounds again. Not finished revamping and tweaking but it's getting really late and I'm tired of sitting here trying to warm up my hands by sticking them up my sleeves or inside my shirt. Bed is calling me. How nice it would be to have someone already in the bed, having it all warmed up for me already, and reminding me that it's really late and I should be getting to bed. Those are the kind of things I miss from being a couple. Kind of ironic cause it didn't happen all that often except at the beginning. We did have a nice beginning.

My nephew is supposed to be coming out tomorrow so between seeing him in the day and working nights I will be busy for a few days. I am hugely looking forward to seeing him.

Blog... Blog... and Away... !

I've started looking at designers of blog layouts. There are some people who do wonderful work. I don't want to massively change things. I really want some better organization and a different look that I can keep going even as I change my blog header and backgrounds myself, just as I have always played around with them. I want it narrower, just a little, so I can have backgrounds again. Seems it is pretty wide now. Maybe better for reading this way but I miss having my dorky background ideas up. Once upon a time I even won a notice for my dorky header and background for the Christmas theme project at Blog Herald.

There was (is) an ASCII art WordPress theme which I really liked. I would like to have that incorporated into my blog layout, giving it the look of an old, retro style before HTML when things were text based. It is so far in the history now that it will be a new look to almost everyone on the Internet these days.

Funny to think I have been online more than 10 years now. It will be 12 years this summer. A lot of changes in that time. But I remember when I was new online I encountered people who had been online a few to several years back then even.

Seems like a good time to do something more with the layout here. Might move it to my domain- thatgrrl.ca About time I was really using that for something. I have had it for nearly 3 years now. I have yet to hear back from any of the designers I sent an email to, beyond the insta-email reply things which really don't count for much at all. Would be a bonus to find a Canadian so that I'd be shopping at home (kind of) and able to pay in Canadian funds.

Will see how it all turns out. Maybe wanting to have my own blog header is going to mean they won't want to do it. The header is a huge focus on the blog's presentation and likely the designer might not think my header will reflect well on their skills as the designer of the layout.

Hand Drawn Style in Web Design

Smashing Magazine: Hand-Drawn Style in Modern Web Design

The most valuable and innovative ideas had all been handwritten first. That’s no big news, since designers tend to produce first sketches as paper prototypes anyway; still it’s important, because web design is different from “usual” design. Of course, it also has a personal note and it is hand-made, however users can’t see that. As CSS is “boxy but good”, designs tend to have a rather limited appearance — they are too boxy and too right-angled.

If designers want to achieve a different design, they have to draw their sites by themselves — or at least some parts of it. And in fact, this is done quite often: whether a blog, a shop, an ad, a private page, or some collaborative project — doesn’t matter whether with Flash or (X)HTML. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when colorful, sharp and rounded Web 2.0 elements can be found almost everywhere.

Sometimes designers create whole pages with paper, pencil and/or a tablet PC. More often single layout elements are designed in a special way — curved links, hand-made icons, backgrounds, notes, stickers and fuzzy lines are supposed to give the site a “human touch”. These elements makes a web-page which might not look different from dozens of similar pages, stand out and arise users’ curiosity. Caution: a quickly installed hand-written font can harm more than help (hint: Comic Sans is definitely not the way to go).

Flickr: Handwritten Blogs

Flickr: Handwritten Blogs

There is a new thing to try. Maybe on Sunday. Too tired tonight. Might be meeting someone before I go into work. Have to get to the bank so I can pay my taxi fare to get home from work for the rest f the work week. It costs an extra dollar to use the debit machine in the cab and the fare each night is expensive enough.

I had another review tonight. One down and one still outstanding with the quality patrol thing. It is starting to get me down, well no, it did that already. Last week I was really annoyed and down and job weary. I think I am better today. Maybe I can just let go and be fake as they seem to want (in spite of what they say).

I hate being fake and lying though. Yet every job I have it ends up being the same story. People want you to lie to them.

Going to bed. Night night.

The Car Thing

Sounds like I will be driving next week or sooner maybe. I will be so glad not to be putting so much of my pay cheque into taxi fares.

I've been playing around with Dreamweaver today. I downloaded the new Adobe version, it's very nice though maybe too many bells and whistles to make it easy to find your way around. I do like it though. I also have an old copy I burned to a disk of a trial for the last Macromedia version. Then the third one is Dreamweaver 4 which I spotted at a GoodWill not so long ago. None of them are just what I would like. I do plan to play around with them more. I have all the guide books that came with Dreamweaver 4 so that might help me find the gadgets available in that software. It doesn't have much focus on using CSS and that was the important part to me. The Adobe version is nice for CSS templates but to buy it these days is $400, far more than it used to be when it was Macromedia software.

I went out today, took a taxi to and from the grocery store. Went out for a late breakfast, kind of a "Sunday" thing to do before my work week starts again tomorrow.

The workmen were out for the city of Barrie cutting down a tree on the neighbours yard. It must have gotten in the way of the power lines. Sad to see a tree get cut right down to the ground from it's lofty heights. It is all gone now. Took them most of the day. I wondered if they were going to cut the one on our front lawn too. It's also getting close to tangling with the power lines.

Resources for CSS Beginners

Found this post on Camera on the Road and wanted to keep track of it so I could go to all the sites they listed myself.

Superblogging?

I'm looking for something that will make it easier to upgrade my site from HTML with tables to CSS without tables. Maybe Superblogging will work. It's free to use.

Create accessible, CSS compliant websites fast
program demo.

Instantly create perfectly structured, accessible and CSS compliant websites.

As quick and easy as a Blog but with the power and flexibility of an online CMS. Another reason designers are no longer using WYSIWYG editors.

The same site offers CSS Wizard which includes Superblogging but only as a free trial. I prefer to go with freeware.

I Got DreamWeaver!!!

We were at the GoodWill in Barrie this past week and I found an old (full) version of Dreamweaver 4 there. It has the books and the CD, all perfect, never used. I wonder if they did anything beyond opening the box. It was a very nice find. The new version is 8 so I don't have the newest thing. But, I can learn all I need with version 4. It seems to be well thought of and not hugely different from the latest one. Just missing the latest features.

Digital Scrapbooking

It's like web desiging but more personal and maybe uses more creativity. You're designing a web page like a scrapbook online.

I'm working on creating Digital Scrapbooking as a new category at Dmoz. There are tons of sites. Lots of freebies to download and great ideas. I don't see why a lot of these couldn't be used for any site or blog, not just creating pages for scrapbooks. Some of the sites they have created are really amazing.

New Books!

You may remember I had $50 in gift cards to spend at the mega bookstore, Chapters. I have been looking forward to getting there and browsing around ever since the cards arrived in the mail a couple of weeks ago. But, each time I planned to go something else came up. Last time it was the car battery's death. Today I went into Barrie and had that replaced, all nice and tidy and free even! Turns out the waranttee covered it. that was really nice news.

So, since I was alone (the lone errand runner) I treated myself to a browse at Chapters. I found three books which I would have wanted to get even if I didn't have the bonus of the gift cards. I bought Digital Scrapbooking, 101 Digital Photo Tips and the new 6th Edition of Elizabeth Castro's HTML, XHTML and CSS. The last one is dated copyright 2007, not sure how I managed to buy a book from the future but at least it's really nice and new! It even has that nice and new book smell.

Where I'm From

I came across this in a blog this morning. But, I can’t do a linkback cause Firefox crashed and I don’t remember which blog it came from. I did find the originating site in my History sidebar. That gives the format used. Anyway, its kind of a nice exercise in nostalgia.

Now that I think about it, and try to come up with answers to where I am from, I don’t really know where I’m from.

I am from the land of the red maple leaf, from pine trees and silvery birch trees.

I am from the the house with gardens, the kiddie swing set overlooking the wild, deep ravine below.

I am from the sweet william, the violets, johnny jump ups freshly blooming in Spring.

I am from road trips and laughter with Mom, from The Scherles and the Earles and the Armbrusters too.

I am from the easy going and the endlessly critical.

From “no one will ever want you” and “you can do anything you try”.

I am from Irish Presbyterians and grew into Earth Witchery, with a joy for life and nature.

I’m from the Irish, the German, the Scots, cabbage rolls, homemade buns and Mom’s endless soup variations.

From the armbusters - not too proud to be too honest, the lawmakers - far too proud to be pleasant, but always correct and right and just in their minds.

I am from sisters, a brother, Woodstock green, coffee cups and craftmanship.

Who do you think I am?

Try out my Johari Window.

Play nice. I know where you blog.



Made With Notepad Webring

For people who can hand code. Not those who use an HTML editor. I’m working on it. I did my front page at thatgrrl.ca using Notepad. Then checked it in an editor and Firefox.

Scrapatorium

Found photos and clip art collages. This is along the lines of what I want to start doing.