In the past weeks I received some requests from my readers which asked to me to suggest a simple way to skin HTML form elements. There are a lot of ways to do that and a lot of posts with interesting resources about this topic. But if you want to save time and obtain a nice result I suggest you to use jqTransform or NiceForms.Both scripts are very useful and simple to use. If you want to use a "native" script which doesn't use an external JS framework (such as jQuery or MooTools) I think a good choice is NiceForms otwerwise, if you use jQuery, a good alternative is jqTransform. Take a look how they work.1. jqTransformjqTransform is a jQuery styling plugin wich allows you to skin quickly form elements in a very easy way. The only thing you have to do is to add a javascript inclusion to this plugin in the header section of your web page, create your form and add two lines of JS code to apply the transformation to your form.Use this code to add a javascript inclusion to jqTransform:<script type="text/javascript\" src="jquery.jqtransform.min.js"></script>...now create a form with class property equal to jqTransform:<form class="jqTransform"><!-- Add form elements here... --><form>...then add this JS code to apply the transformation:<script type="text/javascript\">$(function() {$("form.jqtransform").jqTransform();});</script>2. NiceFormsNiceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.To implement form style transformation you have to add a javascript inclusion to NiceForms in your web page using this code:<script type="text/javascript\" src="niceforms.js"></script>...then create a form with class property equal to niceform:<form class="niceform"><!-- Add form elements here... --><form>It's all. Really simple and fast!Any suggestion? Please leave a comment.

There are a range of simple techniques that can be employed by web designers to add the finishing touches to a website design, giving an extra level of detail that makes the design jump from the screen. Jacob Cass takes a look at five of these polishing techniques that can be easily implemented in your next design project to give dramatic results.

First and foremost, this article is not for advanced web designers, as you will more than likely know these tips but you may be surprised by one or two tips, who knows? These tips are focused on making your website more ‘polished’ which I will explain by outlining some techniques I have used to create this chocolate gift basket website. 1. Use Anti Aliased Text

Something that is often over looked when designing for the web is the use of Anti-Aliasing in your image based text. For those who don’t know, anti-aliasing is the technique of minimizing distortion artifacts. There are a few ways to minimize this distortion in your text but the best way is to make use of your ‘Character’ panel. You can choose between None, Sharp, Crisp, Strong and Smooth. The best way to see what works best is to experiment as different fonts and sizes will yield different results however the sharp setting usually prevails in most cases. 2. Use Subtle Contrasting Stroked Borders

Something that really makes a difference in making a website pop is the use of 1 pixel stroked borders and lines. These stroked borders really add that extra crispness to the design as it gives extra contrast to the surrounding elements and gives the design more depth. Notice the zoomed-in screenshot above; see the inner purple lines that run alongside the inside of the boxes? You can add these 1 pixel borders by using your stroke option found in the ‘Blending Options’ or ‘Layer Styles’ panel. This technique also works great for large text. 3. Use Subtle Gradients

Gradients are popping up everywhere in web design and for a reason - they add depth and real aesthetic to the design. Unlike print design where gradients seem flat, on the screen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot above? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen so to speak. Use the ‘Blending Options’ or ‘Layer Styles’ in Photoshop to create these nice subtle (emphasis on subtle) effects. 4. Use A Grid

Although it may sound like basic knowledge, I know for a fact that not all designers use grids however they are extremely useful and in my opinion, vital. Alignment and spacing in web site design creates order, organizes the page and groups parts of the website for easy navigation. In the screenshot above you can see the guidelines in place ensuring everything is aligned (the grid template is from http://www.960.gs). Notice how the logo and all of the text is left aligned? Also, take note of the even spacing around the boxes and text. Use the guidelines in Photoshop to ensure all of your elements are aligned which can be done by dragging ‘rulers’ from your rulers tab. Press Ctrl+R to turn rulers on. 5. Use Levels, Curves & Unsharp Masking

In web design, photos, icons and images are usually quite prominent so you should ensure that they are of the utmost highest quality. Check the color balance, sharpness and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Photoshop’s ‘Levels & Curves‘ & ‘Unsharp Masking‘ tools. Click on the links provided to show how to do this - these functions go beyond the scope of this article. Anyway, hope these tips help in polishing off your next website. Do you have any other not so well known web design polishing tips? Similar Posts

Line25 Sites of the Week for April 3rd 2009 How to Create a Lifestream of Your Online Activities Line25 Sites of the Week for March 27th 2009 Line25 Sites of the Week for March 20th 2009 The Harsh Truth About Life as a Designer

We'll review PHP and Javascript's way of matching regular expressions against strings.

In the first entry of this new series, we'll review the abilities of each symbol.

At the request of one of our readers, we'll take a look at how to upload files with PHP.

Retro and vintage web designs have become increasingly popular. Ironically, the more and more the web progresses, the more designers start to revert back to old retro styles. For your design inspiration, here are 40 beautifully-designed websites that revert back in time to retro and vintage styles. If you liked this collection, please consider also reading 20 Beautiful Vintage Photoshop Brush Sets. 1. Level 2 Design

1. Custom Design

2. Klassiker in Acryl

3. Kritevia

4. Target Scope

5. DeVotchKa

6. Big Rig Design

7. Thunder Fuel

8. Small Stone Recordings

9. The Lippincott

10. Thrush

11. FortySeven Media

12. Cottonseed Oil Comeback Tour

13. Jeffery Sarmiento

14. mediaBOOM

15. Carrozzeria Verga

16. Slabovia

17. The New York Mooon

18. Five Cent Stand

19. Tennesse Vacation

20. Lataka

21. Blue Moon

22. Rocket Club

23. The Blizzards

24. AdaptD

25. Gary Nock

26. Drink ZZZ

27. Ali Felski

28. TangleDecals

29. Jared Cambell

30. Von Dutch

31. Dollar Dreadful

32. Phizz

33. The First Twenty

34. Jamie’s Italian

35. MacTarnahan’s Brewing Company

36. Style 4 You

37. CSS Tinderbox

38. MISTER-AERO

39. Team Mongolmania

Related content

20 Beautiful Vintage Photoshop Brush Sets Beautiful and Creative Examples of Vibrant Web Designs 20 Websites with Beautiful Typography

About the Author Matt Cronin is a freelance web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials, and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon. Follow Matt Cronin on Twitter.

In this week's screencast, I'll demonstrate how I utilize text expanding programs to drammatically increase my efficiency.

Twitter’s popularity has skyrocketed in the recent months. Usage statistics states that most people who use Twitter interact with the application via the web rather than a third-party client such as TweetDeck or twitterfeed. Twitter’s web interface is simple and intuitive but lacks a few features that can make it much better. In this article, you’ll read about 10 excellent user interface features that can enhance the Twitter web experience. 1. Enable grouping of friends and followers Figure 1 shows tabs that you can use to quickly see tweets in a particular group.

Twitter’s increasing popularity has gotten many people on board and using the web application. With the growing number of active users comes the need for following more people. The ability to create groups (or categories) of Twitter users that you follow can reduce the noise in your Twitter feed and can help you immediately see updates from particular groups of users. For example, having a group for "co-workers" or "local tweeters" can help you quickly see what your co-workers are saying or find up-to-the-minute information on local events such as traffic accidents. 2. Auto Complete in Tweets Figure 2 shows an auto complete dialog box appears when you type the @ symbol. Auto complete is an interaction design pattern that involves displaying a list of suggestions as the user types in text. Auto complete can speed up the process of sending a tweet directed to a particular user using the @username format. It will also help in times where you’re having trouble spelling someone’s username. Another application of the auto complete feature is for suggesting #hashtags (keywords associated with a tweet) to make keyword-tagging of tweets easier. 3. Text links in tweets

With a 140 character limit, it’s often difficult to have links in a tweet without robbing yourself out of precious characters. By allowing users to tweet hyperlinked text, not only will it give them a little bit more room for including additional characters, but will also make Twitter feeds look cleaner. 4. Tweets-threading Twitter is a great source of information and is a wonderful forum for discussing various topics. Unfortunately, the current user interface doesn’t allow you to easily view a conversation between two or more people. Figure 3 show how threaded comments could look. Coupled with the "reply to" feature in the current user interface, threaded tweets can give users the chance to participate in (or follow along with) conversations taking place in several Twitter feeds. Threaded tweets can also serve as a means for people to find other Twitter users that are interested in similar subjects of conversation. 5. Allow Tweets directed to a group of people ("group tweet") Figure 4 shows a possible syntax for tweets directed to a group of users using a double @ synax. With companies and communities joining in on the fun, the ability to tweet to a group of Twitter users offers a convenient way of specifically targeting a set of people. For example, if you wanted to tweet to your co-workers, the syntax could be:

@@friends I'll be a little late for our lunch date, start ordering without me.

The double @ serves to differentiate a tweet directed to a single user from one that’s directed to a group of users. 6. Display meta data through hover tooltips

A tooltip is an effective graphical user interface element that allows users to view more information when they hover or click on a text or object of interest without having to leave the current web page. They enable information-gathering with fewer clicks and fewer pages to visit. One way tooltips can be helpful is in seeing the bio information of a Twitter user when you hover over their username on your Twitter feed. If you see a username mentioned in an interesting Twitter update, simply hover over the name to see more information about the user that was mentioned. 7. Use the sidebar more effectively to display information Figure 5 shows a "Recent @Replies" and "Popular #hashtags" section on the side bar. Twitter can utilize the right sidebar more effectively by showing relevant information and statistics. For example, a "Most Recent Replies" section or a "Most Used #hashtags" section can be very helpful in showcasing the latest activities and the hottest topics. 8. Add a page that displays tweets mentioning your username

Twitter users (me included) like seeing their names mentioned. Currently, only @replies (tweets that begin with @username) can be seen in the @Replies page. A nice optional feature would be to have a page that lists tweets where your username is mentioned or where a particular tweet of yours is re-tweeted (example: "RT @username"). A less self-centered benefit for this feature is the opportunity to find people who are interested in what you have to say, enough that they update their own Twitter feed with a tweet of yours, or to see what types of your tweets are popular amongst people who follow you. 9. Highlight specific users, deemphasize others in feed Figure 6 shows the first tweet as being highlighted, and the second tweet being deemphasized. The third tweet is how tweets normally look like in the current interface. Users who follow many people run into the trouble of Twitter feed overload where there’s just too much going on and too many tweets to read. The ability to mark favorite Twitter users, as well as deemphasize users that you don’t care much about (but still want to follow for some reason), can give users better visual queues on what to pay attention to first when perusing one’s Twitter feed. 10. Add a Built-in URL shortener

With Twitter’s current user interface, hyperlinks are counted towards your 140 character count limit even if it gets reduced in length by a URL-shortening service like TinyURL.com after you hit the "Update" button. One way to allow users to enter more text - without having to go to another website just to shorten URL’s - is to have a built-in URL-shortening feature. This would not only save user’s some time, but also eliminates the need to rely on other websites to perform an action that should really be handled within the system. Got more ideas? If you have more ideas on how Twitter’s user interface can be improved, please contribute to the discussion in the comments. Related content

20 Websites to Help You Master User Interface Design 10 Tools for Evaluating Web Design Accessibility 7 Incredibly Useful Tools for Evaluating a Web Design

It’s well known that Apple is one of the most creative and innovative companies in the world, so it’s no wonder that many software companies and web designers would choose to follow Apple’s style of branding. The Apple website is one of the best websites out there due to its ease of use, functionality and the beautiful environment that it creates. I looked at websites that use one or more design elements inspired by Apple.com. Some of these sites sell Mac software and apps, so it makes sense for them to keep the same Apple look and feel. Consider this though: How many software companies that develop for Windows, choose to brand their websites to look like Vista? I have included a few screenshots of the Apple website, just in case you haven’t never seen it before. Apple.com

1. Icon Designer

2. iSlayer

3. Versions

4. Checkout

5. Small Transport

6. MacRabbit

7. 280 Slides

8. Disco

9. Warehouse

10. Cha-Ching

11. RapidWeaver

12. DeskLickr

13. Tangerine!

14. 1Password

15. Jumsoft

16. Roxio Toast

17. CandyBar

18. Cultured Code

19. Anxiety

20. Tao Effect

21. TaskMate

22. The Invoice Machine

Chad Mueller owns and runs the design inspiration blog; Inspiredology. He is also a freelance designer who enjoys working on websites, blogs, logos and anything to get his creative juices flowing. Do you know of any other good examples? Please share with us…

February is all about romance and love and one special day: Valentine’s Day! The day when candy, flowers and cards are exchanged between loved ones. In that manner, DryIcons are presenting their brand new free icons set, called “Valentines”. Because this holiday is so special to all of us . ” Valentines” free icons set comes in 32-bit transparency PNG and 32×32px, 48×48px, 64×64, 128×128 and 256×256px size.

Today, we'll be fleshing out our sidebar with some of WordPress' custom functions.

Today, James Padolsey will demonstrate how to build an advanced jQuery plugin.

TextureKing is a project created and maintained by REH3design. Throughout the site you will find a growing repository of high quality texture photos that are free for personal and professional use.

For Day 2, Andres will be teaching us how to use CSS sprites to improve load times and decrease the number of HTTP requests. As always, feel free to ask any questions in the comments area.

After my previous post about Best Image Croppers ready to use for web developers I want to suggest you some interesting resources where you can find useful and free file uploaders ready to use in your web projects.If you know other interesting resources about this topic please leave a comment!1. Yahoo! UI Library UploaderYUI Uploader provides file upload functionality that goes beyond the basic browser-based methods. Specifically, the YUI Uploader allows for multiple file selection in a single "Open File" dialog, file extension filters to facilitate the user's selection, progress tracking for file uploads, faster file upload on broadband connections due to the modified SEND buffer size, same-page server response upon completion of the file upload.2. jQuery.MultiFileThe Multiple File Upload Plugin (jQuery.MultiFile) is a fantastic non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form.3. FancyUploadFancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.4. Steve Sanderson’s jQuery Ajax uploaderSteve Sanderson release this simple and useful jQuery plugin to upload files to your website. It shows a nice progress bar during the upload and is really simple to customize how you prefer.5. Mega Upload Progress BarMega Upload is a progress indicator for web based file uploads with PHP, perl and JSP. Originally the project was a solution to the lack of a progress monitor for PHP file upload. Since then it has expanded to include upload monitors for perl and JSP.6. Free ASP UploadFree ASP Upload is a free script which lets you create upload forms on your web site. You will be able to do it easily, without having to buy a binary component. This ASP does not require an ASP.NET server.7. ColdFusion file upload progressThis Coldfusion file uploader is a very simple and useful script to upload files to your websites Coldfusion-based.8. MooMultiple file uploadMooMultiple FU is another MooTools-based multiple file uplader really simple to implement and reuse on your web projects ().Related Content- Best Image Croppers ready to use for web developers- 20 Great PHP frameworks for developers- 10 Beautiful Web UI libraries- 10 Free powerful Content Management Systems- 10 Useful tutorials to learn Scriptaculous- 7 Stunning tutorials to design modern interfaces for websites

Coquette part 2, the better, improved version of one of DryIcons’ most downloaded and most popular free icons sets. they powered this free icons set with 50 brand new icons, mostly demanded by users. This playful free icon set contains curvy and colorful free icons made with one goal, to get all the affection to your projects. These free icons flirt with style! “Coquette” free icon set contains 50 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format.

If you are looking for an image cropper user interface ready to use in your web projects and simple to customize, take a look at this list with the best and free image croppers UI currently in circulation.If you know other interesting resources about this topic please leave a comment!1. Yahoo! UI Library ImageCropperYahoo! UI ImageCropper control provides an API and skin for making an image croppable. Simple to use and customize in your web projects, this cropper is actually one of the best free cropper interface you can find. The ImageCropper comes with a default skin, but you can extend or override this as needed using CSS.2. KropprKroppr is intended to help webmasters allow their users to manipulate the images available on the site. With this script you can rotate, resize, crop and save images to your hard drive. Kroppr is using the graphic tools found on a common hosting server so an expensive server is not required for this script to run. In the same time, if there are more choices on the server, Kroppr is choosing the one with the best results in quality and server load.3. JcropJcrop is a quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.4. Javascript Image Cropper UIThe JavaScript image cropper UI is a very popular image cropper which allows the user to crop an image using an interface with the same features and styling as found in commercial image editing software, and is is based on the Prototype JavaScript framework and script.aculo.us.5. MooCropMooCrop is an Image Cropping utility using the amazingly powerful mootools javascript framework. The script is completely customizable with CSS, detects and handles multiple CSS box models, allows for masking to be toggled and set minimium size limit and it's really fast.6. UvumiTools CropUvumiTools Crop is an advanced image cropper which gives your users the ability to create a selection area that can be used to crop an image live on your web site. You can customize a lot of parameters such as minimum sizes, keep aspect ratio (or not), Real time preview and reuse it quickly on your web project.7. PHP & JQuery Photo Upload and CropPHP & JQuery Photo Upload and Crop is another nice image cropper which use jQuery and PHP to upload, resize, crop and save images. It's simple to customize and reuse in your web projects. You can find full documentation about this script here.

BG Patterns is a web based tiled backgrounds designer. You can create any pattern your site needs just in few minutes. You will have adjustable size, pictures, colors, texture and transparency in any pattern. As you create any pattern, you can also share them as well. Recently created patterns by others are also available there. You can save your created patterns there for future use as well. Preview is also available for any patterns.

After my previous article about a structured process to develop a web application I received some requests from my readers which asked to me to dedicate a post about how to estimate times and costs of a web project.In this articles I want to illustrate a simplified top-down process to estimate times and costs of a web process using a simple spreadsheet (in this example I used Google Spreadsheets but if you prefer you can use Microsoft Excel, OpenOffice Spreadsheet or a free online service such as Zoho or EditGrid).Process main phasesIn this simple top-down estimate process you can identify five main phases:1. Define Activities2. Define Task3. Define Human Resources4. Assign Human Resources to Tasks5. Estimate times and costsThe process start with a general definition of macro-activities and with a detailed definition of tasks, human resources used, times and costs related to each task.1. Define ActivitiesIn this first phase you have to define the main activities which compose your project:For example, in a generic web project you can identify the following main activities:1. Requirements definition2. Design3. Implementation4. Test5. ReleaseIn my spreadsheet I created a new sheet called Activityes and I added the following two columns:A: WBS (work breakdown structure), the ID of each activity/task;B: Activity name.Next step is to detail each activity with a certain number of specific tasks.2. Define TasksEach activity is composed from some tasks. Each task is a smaller piece of work which composes a main activity:In the spreadsheet you can add new tasks adding new rows below related main activity. I suggest you to use a different format to highlight tasks from activities how I used in the following example:1. Requirements definition1.1 Define application scope1.2 Define technical requirements2. Design2.1 Application Map2.2 Database Entity relationship model...3. Implementation3.1 SQL code3.2 HTML code3.3 CSS code...3. Define Human ResourcesNext step is defining human resources in terms of category, seniority and hourly cost:Each category has a specific hourly cost related to specific seniority. You can organize these information using a simple category/seniority matrix. For example if you have to estimate a big/medium size project you can identify the following categories:- Analyst- Programmer- Project manager- ...and the following seniorities:- Junior- Senior- ...Now, define hourly cost for each category/seniority combination (in a more complex project you can also define a standard rate and an overtime rate for each combination). In the spreadsheet you can create the table above in a new sheet called Resources in the same spreadsheet. At this point you have two sheets:A first sheet with activities and a second sheet with resources. In this way when you assign resources to tasks you can link the cost of a specific resource with a reference formula (=). This is a good practice because if you have to change the cost related to a specific combination category/seniority, you can do it only once in the sheet "Resources" and automatically all changes will be reported in all instances (task) which use that combination in the sheet "Activities"4. Assign Human Resources to TasksNext step: assigning one or more resources to each task estimating the effort which a task requires. This is a very delicate activity because you have to calibrate the right combination between category and seniority of resources you want to use in your project in order to estimate correctly project times and costs.In the spreadsheet, in the sheet "Activities" create the following three columns:1. Num (number of resources assigned to a task)2. Category3. SeniorityThis is the result:You can add different resources to each task (different category or different seniority) simply adding a row below the task name (for example take a look at "Define application scope" where I added 1 analyst junior in the first row and 1 analyst senior in a new row below the task name).5. Estimate Times and CostsNow, for each resource, estimate the daily effort (Hours/day column), number of days (Days colum), get cost related to category/seniority combination from the sheet "Resources" using a reference formula (Hourly Cost column), and calculate Total costs:For each task (row) Total Cost is equal to:Total Cost = Hours/day * Hourly Cost * DaysTake a mind some task could have specific costs which are indipendent from the number of resources you assign to that task. You can add this costs adding a new column to the left of the column Total Cost called "Additional Costs".In this case Total Cost will be equal to:Total Cost = (Hours/day * Hourly Cost * Days) + Additional CostThat's all. Take a look at the spreadsheet or copy it in your Google Documents account to reuse it.Take also a look at these posts:- Structured process to develop a web application- Google Spreadsheets Gantt Chart (Microsoft Project-like)- Google Spreadsheets: formulas tutorial- Google Spreadsheets Tips: Add custom charts- Project Management: Excel Gantt Chart TemplateI hope you'll find this post useful. If you have some suggestions about this process or if you want to suggest some interesting link related to this topic please add a comment, thanks!

DryIcons is wishing you a lovable Valentine’s Day filled with candy, wine and music. These icons were designed to fit the romantic feel of the holiday. The “Valentine Love” free icon set comes with 12 high quality web icons in 32-bit transparency PNG and 32×32px, 48×48px and 128×128px size. February is about love and renewal, so don’t hesitate to let the breeze in, and may your heart be always full of love.