Archived entries for Design

jQuery – A Beginners Guide

Long time, no post! Freelancing, tight deadlines, christmas, etc.

What is it?

jQuery is a javascript framework, it all happens on the client side, and allows developers to enhance the user experience of a website. Scrolling, sliding, fading, etc. it has a lot of cool features that can really add to the overall feel of a website. I've just done my first tuorial tonight and it seems all pretty straight forward.

Here's a short, interesting interview with Karl Swedberg (he runs learningjquery.com):

Tutorials

I've used MooTools (another javascript framework) before and found it nice and pleasant to use. Since then, everyone has been raving about jQuery (actually, I'm about 6 months late here), so I looked up a beginners guide to it. The tutorial I did is located here:

Here's the result of the tutorial (I changed it a little)

Here's a tutorial on how to buildĀ  an image/content slider:

Or you could try searhing twitter for a list of up to date tutorials

jQuery Plugins

Tripwiremagazine has a list of some plugins for jQuery that are useful (although some can be achieved with css). Here is the link:

Noupe also has a larger list of plugins:

Or you can learn how to create your own:

Overuse

I've come across a lot of sites that use jQuery just for the sake of it, it does make a site look a little slicker but only when used right. When its overused, it can get really tiresome and completely removes it's impact. I've seen a few sites with only one UI element utilising jQuery that really impressed me.

Conclusion

This is the first time I've used jQuery, and I'm really impressed. The huge interest and large amount tutorials make it look like it's hear to stay. It has easily overtaken MooTools and Scriptalicious and it's developer base is growing rapidly.

Web Design – Wireframing (A Beginners Guide)

Smashing magazine had a lengthy post about wireframing (which I mentioned previously), BuildInternet have a crash course on wireframing.

http://buildinternet.com/2009/09/why-your-next-website-should-be-designed-with-wireframes/

In the article, a great online wireframing application is recommended called HotGloo. Signup is required, but it is free and you get your own subdomain name which allows you to share your projects with clients.

Inspiration – 12 Tips for Creating a Great Portfolio

Noupe has a good article covering some essential tips for portfolios. THere's also a showcase section of good portfolios with the pros and cons of each.

http://www.noupe.com/design/12-tips-for-creating-a-great-portfolio-site.html

Web Design – Inspiration

Six Revisions have a good article covering the design of various great looking portfolios online.

http://sixrevisions.com/web_design/five-popular-design-portfolio-website-styles/

Web Design – Wireframing

Smashing Magazine has a great article about wireframing, tools to create wireframes and why it's better to design wireframes first.

http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

Web Design – Creating A Portfolio Site

Elliot Jay Stocks made an interesting 2 part video on how to make a portfolio site. Very good informationĀ  and things to think about in them:

http://carsonified.com/blog/design/how-to-design-a-portfolio-site/

http://carsonified.com/blog/design/how-to-design-a-portfolio-site-part-2/

Web Design – Inspiration

Seen a few of these before, but still worth a mention

http://carsonified.com/blog/design/how-to-make-your-web-design-stand-out-from-the-crowd/

Web Development – Site Sketch101

Just don't have the time at the moment to go through a vast array of good articles on:

http://www.sitesketch101.com/

I will soon though

Design – Choosing Web Fonts

This article covers the basics of using fonts on web sites, basic but important stuff:

http://www.admixweb.com/2009/08/02/things-to-consider-when-choosing-font-for-your-website/

Design – Web Page Headers

I'm begining to redesign my portfolio. I'm basing it on the 960 grid system. I've placed an notice on my site which has the basic color scheme of things at the moment. The typography needs further work, but I'll leave it for the moment.

I'll be pixel obsessing for a while. First thing's first, I found a good article on the size of headers in web pages:

http://desizntech.info/2009/03/how-improtant-the-header-is/



Copyright © 2004–2009. All rights reserved.

Computers & Internet Directory