Digital Toolz

4 stages of web site design

2009-11-05T22:04:00.001+08:00

Typically, web site designs evolve. In the beginning, many web site owners become enamored with "bells and whistles" that, on the surface, might appeal to their target audience. Flash movies, Java applets, animation and other rich media has become increasingly popular over the years.

However, in the rush to have the "coolest" site design, web site owners forget whom they are designing their site for: their target audience. Your audience might find that Flash movie irritating after viewing it multiple times. Your audience might not be able to find your site in the search engines. "Bells and whistles" are attributes of a web site that need to be measured and tested to see if they increase or drive away sales.

Below are the various stages of evolution web sites typically undergo:

* Stage 1 - Style Over Substance
* Stage 2 - Designing for Online Visibility
* Stage 3 - Designing for Your Audience
* Stage 4 - Site Redesign
* Conclusion

Read more...

Huge List of Photoshop Tutorials for Graphic Designers

2009-09-17T00:28:00.006+08:00

Adobe Photoshop is every designer's ultimate tool in terms graphic designing with that in mind, I compiled a very huge list of photoshop tutorials from various online resources sites for every graphic designers to have.

How to use Flash Effectively

2009-09-16T16:36:00.003+08:00

Flash can be an exciting, interactive element to a web site, or it can be a viewer’s worst nightmare. Using flash effectively depends on how you utilize the content and how obtrusive to the rest of the site it is. Here’s how to make the most of flash if you must use it, and why not to use flash in some cases.

10 Nice Solutions to Create Your Online Portfolio

2009-09-16T16:05:00.003+08:00

Want to create your portfolio but you don't have enough skills or the time to make one then you might wanna check out these 10 Solutions to create your online portfolio.

Krop
Carbonmade
Coroflot
Shown'd
Behance
DeviantArt
Flickr
WooThemes

Now is you DO HAVE THE SKILLS, then check out this How to Make Your Own Online Portfolio Site tutorial by Chris Spooner

Creative Boost: 18 Search Engines for Designers

2009-08-14T09:02:00.004+08:00

It's been a long while since my last post because of my busy schedule at work. But I am not gonna leave you guys without an update. I got this tweet from a friend on twitter entitled "18 Search Engines for Designers".

I thank Minervity for sharing this one.

10 Things Every Web Designer Beginner Should Know

2009-07-02T14:00:00.002+08:00

There are many aspects in term of doing web designs and each web designer
has its own style of workflow and coding and designing. Most of us learn from
experience some thru online tutorials. However, there are certain things in web
designing which is essential and can greatly help get the best output from their project.

You can read more about the 10 Essential Tips that Every Web Designer Should Know.

10 Useful Firefox Extensions to Supercharge Firebug

2009-06-22T11:57:00.003+08:00

I have blog about Firebug on previously post and for those who have haven't use Firebug, it is a revolutionary Firefox extension that helps web developers and designers test and inspect front-end code. It provides us with many useful features such as a console panel for logging information, a DOM inspector, detailed information about page elements, and much more.

and now I will share to you the 10 Useful Firefox Extensions to Supercharge Firebug.

Free Tools for Monitoring Your Site’s Uptime

2009-06-13T10:54:00.005+08:00

Creating a website is on is a bit hard task, maintaining a website on the other hand is more tedious in some ways. But thanks to Jacob Gube, he share 12 Excellent Free Tools for Monitoring Your Site's Uptime. Now this can help us maintain our websites very efficiently.

8 Layout Solutions To Improve Your Designs

2009-05-28T10:08:00.006+08:00

From Flickr.com

As Web Designers, we are in constant search of methods to improve our web design workflow and these article from Smashing Magazine entitled "8 Layout Solutions To Improve Your Designs" are just a few of those worthy solutions to our projects.

New Tools for Web Designers

2009-05-05T09:29:00.002+08:00

Hidden Pixels.com has share to us another set of tools for web designers can use. Check them out at HiddenPixel.com

Paint.NET Plugin Lets You Open Photoshop Files

2009-04-28T13:05:00.003+08:00

If Paint.NET is your editor of choice and you find yourself needing to open .PSD Photoshop files, this plugin will help you introduce .PSD images into your Paint.NET workflow.

The plugin doesn't replicate all of the numerous functions of the .PSD file, just the ones that relate to functionality within Paint.NET. You can work with layers, load masks, and open a variety of color modes and profiles. Because of the limited integration with the .PSD file, the plugin is best suited for pulling a .PSD file into Paint.Net and converting it to be used in your Paint.NET workflow. Working with it in Paint.NET and then trying to bring it back into Photoshop is a bit dicier as far as compatibility goes and can have unexpected results.

PSDPlugin is free and required Paint.NET 3.0+.

Download Paint.NET PSDPlugin

from Lifehacker by Jason Fitzpatrick

More and More CSS Resources for Web Designers

2009-04-20T14:10:00.003+08:00

Still looking for CSS resources then here's another set of 84 Useful CSS Tips & Resources that you might wanna check out. The more the merrier. Have fun!

Linux for Graphic Designers?

2009-03-16T13:29:00.003+08:00

When you talk about graphic designing it usually associated with operating systems like Mac OS X or Windows because those are the "the best" platforms that your use because of Adobe Photoshop and other top commercial design softwares and applications. Any mention of Linux? well it's hardly every heard that a designer would use a platform which is basically not really good for designers

But one blogger has change that perception. His name is Eckhard M. Jäger and he has a blog called Linux for Designers. the blog is all about designing using open source graphic deisign softwares like GIMP, Inkscape , Blender etc.

A collection of CSS Code Snippets for Web Designers & Developers

2009-03-11T09:19:00.001+08:00

Who can resist anything free? There are plenty of CSS resource sites out on the net that offer free CSS Code Snippets. Why would you want to recreate code that has already been created. The time that you could save by using these already developed CSS codes could be better used surfing the net or going on a date. Check these sites offering free CSS codes.

Get it all here

Building HTML/CSS Sites: Use a Template

2009-03-06T16:17:00.003+08:00

If you are developing HTML/CSS websites with occasionally a little bit of JavaScript, it can be very un-productive to write your basic codes over and over again.

You better read this article for some time-solving solutions.

5 Steps of How to Optimize Your CSS Codes

2009-03-06T16:06:00.004+08:00

Having too much codes on your CSS that you didn't notice that your repeating some of the lines on other areas? Is your stylesheet having some bloated codes? Then your "un-optimized"CSS problems are now over, here are 5 Steps of How to Optimize Your CSS Codes

How To Use Icons To Support Content In Web Design

2009-03-05T10:14:00.001+08:00

Why use icons? Design is all about communication: it doesn’t matter how important or exciting the information that you’re sharing is if you fail to hook your visitors. When initially viewing a website, most users will first scan the page for visually interesting content, and only after something grabs their attention will they actually begin reading. Icons are a simple, effective way to draw users into the content of your website.

Icons serve the same psychological purpose as paragraph breaks: they visually break up the content, making it less intimidating. A well-formatted page, with text broken into easily accessible paragraphs and accented by icons, is easy to read and visually interesting enough to sustain the user’s attention. So, stop wasting time writing so much content that no one will read, and start using icons!

Read more about the beautiful examples and best practices of using icons to support content in web design. Please feel free to take a look at the showcases of navigation menus, search boxes, blockquotes and web forms.

10 Reasons Why Your Code Won’t Validate (and How to Fix it)

2009-03-04T11:21:00.005+08:00

W3C validation isn't very forgiving at times, but it allows you to see errors that are generated by your markup. Lots of errors and warnings thrown by the validator are a good indicator that your XHTML isn't in very good shape, and might not look consistent across different browsers.

Here are 10 sneaky validation problems that trip developers up, and how to avoid them.

Authored by:Glen Stansberry

Free Design Resouces for Graphic Designers

2009-03-03T15:13:00.003+08:00

With a lot of graphic design resources scattered all over the internet, I manage to collect these resources and use it on most of my design works. Now I'm gonna share to you these websites that share those usefull graphic design resources.

45+ Free Design Template And PSD Files

50 Free High-Quality Icon Sets

50 Free Rusted Metal Texture Backgrounds

30 Amazingly Creative Social Bookmarks Icon Sets

50+ textures for Your Design Appetite and lot more Resources

The Ultimate Collection Of Free Photoshop Patterns

45 Sites, Free Icons And PSD Resources For Web-Design

12 Free Online Background Pattern Generators

21 Typography and Font Web Apps You Can’t Live Without

More of these resources will be posted in the near future but these will do for now.
Enjoy!

10 Excellent Tools For Working with HTML & CSS

2009-02-12T16:34:00.005+08:00

Working with HTML and CSS can be quite time-consuming sometimes, there is of course but also all kind of tools that help you to save time with specific functions.

Grid designer

Online tool to quickly design grids for your templates. It makes it easy to quickly define the layout width, number of columns, margins and gutters, set the typography and export the whole thing.

Kotatsu
Simple HTML table generator. Very helpful as tables are probably one of the most boring things to handcode. In a few clicks you will be able to get the code for your table with the number of rows and columns you want.

CSS Redundancy Checker
Find CSS selectors that aren’t used by any of your HTML files and may be redundant. Comes handy when your CSS file gets complicated and you’re afraid to remove any selector from it.

CSS Menu Maker
Create and customize your CSS menus, horizontal or vertical, online for free.

CSS Color Editor
Easily replace the colors from your CSS file. All you need to do is to upload you file, replace the colours and generate the new file that you download.

CSS Super Scrub
Reduce the size of your CSS files in a few clics.

PX to EM
Convert font sizes in pixels to their equivalent in em and the other way around.

Deploy
Quickly deploy a web project framework with valid XHTML and CSS in only a matter of seconds.

CSS Text Wrapper
Easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

PSDtoCSS online
Convert your PSD files to XHTML-CSS layouts. Just one quick upload is needed, then you can download your layout in a zip file.

HiddenPixels.com : Basic SEO Tips Web Designer should Follow

2009-02-10T22:51:00.006+08:00

Here are some basic Search Engine Optimization (SEO) tips which every web designer should follow; it is good practice to design websites using this basic SEO Standards. (reposted from: HiddenPixels.com)

Use Correct Doctype: Document type defination(DTD) is also know as Doctype, doctype informs the browser how to interpret the content of the page. If the the doctype is not declared, the browser assumes you don’t know how to code, and goes into quirks mode. If you know what you are doing and include a correct HTML doctype, your page will be rendered in standards mode.
Make the code prettier than the design: When building the front end of your site, make sure to use semantic code. By using descriptive tags to structure your pages, search engines will be able to read and have a better understanding of your content. This will also make the process of styling your site much easier and cleaner.
Use Meta Content and Meta Keywords: Use proper keywords and content relate to your web site,
that helps search engine to crawl your web site.
Use Unique Page Titles: Each page on your web site should have a title attribute, and each title should be unique. If you use the same title for every page, search engines will think that every page on your site is about the same subject.
Use SEO Friendly Page name or URL: The page name or URL must consist of the relevant keywords as it gives an idea of what the page is all about, Try to maintain a suitable length for the page name, The words in the URL must not be joined. Try to use hyphen between words in the page. The robots can easily index the URL’s with hyphens. Try to avoid using underscores.
Use Alt tags for Images: Specify alt tag for image and that alt tag should be a keyword related to web site, because images you have placed on site can be seen by visitors but not by search engines, so alt tag help search engines to read, with the help of alt tags search engines display the image results.
Use Heading Tags: Use your main targeted keywords in H1 or H2 tags. These robots give a lot of importance to H1 tags.
Use Valid HTML and CSS code: Validate your html and css code and make your code w3c standard.

validate your html code here: http://validator.w3.org

validate your css code here: http://jigsaw.w3.org/css-validator
Make your web site load fast: Don’t mess up your site with heavy images that makes your site heavy and slow, try to optimize images that reduces weight and helps to load fast.
Make a Detailed Sitemap: Make a detailed sitemap of a website. The search robots can easily go to any web page from this web page.
Use Footer links: Footer link must be designed properly so that search engine robots can easily navigate through the web pages.
Use DIVs instead of Tables: Try to avoid using tables. There are too many codes in tables and takes times to load page. Hence, try to use DIVs structure, which has less coding and takes less loading time. It has become highly search engine friendly because the robots can easily index it.
Use External JavaScript and CSS files: Maintain an External JavaScript files for scripting and Use External CSS rather than coding it in the main source file.

Tnomeralc Web Design Toys

2009-02-05T22:38:00.000+08:00

Pick the best toys for your children sitting in front of desktop.

Tnomeralc web design toys have indeed revamped one’s view on traditional toys. In fact children are the most creative people, whose creativity is seldom brought to foray by their parents. In today’s era of Tnomeralc Web Design toys, traditional toys exist just because for formality.

Tnomeralc Web design toys are the toys which users can choose from online, it can be customized, depending on look a child wants; in fact it gives child a much needed work to brain, sight and other senses etc

In fact in today’s online era, it has grown in stature steadily in children’s heart. It can offer children array of varieties right from their desktop. It offers edge from a traditional shopping because products get shipped from the toy store towards their respective houses. One can indeed make a effective Tnomeralc web design toys purchase, utilising oceanic review boards and consumer forums, to search and find the appropriate manufacturer. In today world it’s very difficult for a child to get gratified with traditional toys and engines. Don’t be out dated and give your child Tnomeralc web design boost to gratify their creative thirst and also analytical acumen.

Over 40 tutorials on Webpage Layouting

2009-02-04T15:24:00.003+08:00

Designing a good webpage matter during the initial layout of the webpage. SixRevisions.com has compiled 40 Useful Web Layout Tutorials using Adobe Photoshop which Web Designers and Front-end Developers can check out

Web Design Trends for 2009

2009-01-28T14:36:00.003+08:00

Every year Web Designing trends, this year another set of design trends are being set by various designers and I commend Smashing Magazine for sharing these nice articles on the latest Web Design Trends.

Update: Here's another post to another set of Web Design Trends

5 Easy Ways to Tackle IE6’s Transparency Issues

2009-01-08T15:04:00.002+08:00

You create the perfect site in Photoshop using the latest trends. Half of your backgrounds contain a nice 50% opacity to simulate depth. The only problem comes from that darn old IE6, and how it decides to display a nasty gray background. You try to search the web for a solution, but there are dozens of choices. How do you know which methods are the best?

This tutorial will show you five easy ways to deal with this issue.