read more about StyleMap V2
Showing posts with label Scripts. Show all posts
Showing posts with label Scripts. Show all posts
Apr 23, 2009
HTML Visual Sitemap (StyleMap v2)
StyleMap v2 uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an unordered list (UL). The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project.
HTML Visual Sitemap (StyleMap v2)
StyleMap v2 uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an unordered list (UL). The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project.
read more about StyleMap V2
read more about StyleMap V2
Apr 21, 2009
WriteMaps Site Map Application - Create, edit, and share online
WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.WriteMaps was created to provide a fast, fun, and easy way to plan your websites. WriteMaps' aim is to enable any user, not just web professionals, with the tools they need to get their ideas mapped out in a visually pleasing environment.
read more about WriteMaps
WriteMaps Site Map Application - Create, edit, and share online
WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.
read more about WriteMaps
read more about WriteMaps
Nov 12, 2007
99 Resources for Web 2.0 Design
[Update: This post was originally published a while ago, however, almost all of the resources mentioned are still relevant. Since this post was published we've added tons of new resources that you may also find useful (see our Popular Posts page). To get all of the new content, subscribe to our RSS feed or by email.]
BADGES
Web 2.0 Badges - A set of free badges to download and use in your own designs.
Fresh Badge - Quickly generate your own badge.
adClustr - Starburst badges.
Deziner Folio - A collection of different badges.
BittBox - Free vector badges.
Official Seal Generator - An alternative to the typical badge.
Photoshop Tutorial - A quick lesson on making your own badge.
Glossy Photoshop Tutorial - Create a glossy badge with this tutorial.
BUTTONS
My Cool Button - A nice online tool that will help you to quickly create the button that you want.
Adam Kalsey’s Button Maker - Simple tool to make your own buttons.
Button Maker from Blog Flux - Create your own custom button.
Brilliant Button Maker - A similar button maker to the previous 2.
CSS Buttons - Choose the text, border, and background.
Buttonator - A paid option for creating buttons.
RSS Button Maker - The name pretty much says it all.
Button Boost - A little bit different than some of the other button generators.
ButtonGenerator.com - Create buttons for navigation menus.
Crystal Button - Slick web buttons made easy.
Chicklet Creator - Create buttons that allow visitors to subscribe in their feed reader of choice.
ROUNDED CORNERS
Rounded corners are a staple in web 2.0 design. Here are some tools and scripts that will help you to quickly create your own rounded corners.
LOGOS
Each of these tools will create a simple web 2.0 style logo.
ICONS
A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.
UtomBox - A great collection of web 2.0 icons.
Feed Icons - The standard RSS icon.
Map Icon Factory - Create your own map icon.
Perishable Press - A nice collection of RSS icons.
Snap2Objects - Vector RSS icons.
31 Sources of Quality, Free Icons
GRADIENT IMAGES
Another common element of web 2.0 is gradient images. Here are a few tools to help you.
Online Gradient Image Maker (OGIM)
SPEECH BUBBLES
Speech bubbles are commonly used for styling comments or blockquotes.
MySpace Speech Bubble Generator
BACKGROUND IMAGES
Background Image Maker - Create background images with choices like transparency and gradients.
Stripe Generator 2.0 - If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.
Stripe Designer - Easily create striped images.
Tartan Maker - Create a tartan background image.
Texture Generator - Creates textured images that you can use as a background.
All Free Backgrounds - Choose the background you want.
COLORS
The Colors of Web 2.0 - Are you looking to match the color of a popular web 2.0 site?
Web 2.0 Color Pallete - Popular web 2.o colors.
Color Schemer Gallery - Having problems choosing a color scheme? Find one you like in this gallery.
COLOURlovers - More samples of color combinations.
Website Color Picker - Test color combinations quickly.
I Like Your Colors - Get the colors used by a particular site.
NAVIGATION
CSS Menu Generator - Easily create attractive CSS menus.
Listamatic - Collection of CSS menus.
List-O-Matic - Create your own CSS menus.
List-U-Like - Another tool to create your own navigation bars.
Tabs Generator - Create tabbed images for navigation.
Flash Buttons - Create navigation menus with flash buttons
CSS Play - An extensive collection of CSS menus.
Exploding Boy - Tabbed CSS navigation menus.
CSS Navigation Menu Generator - A tool to help you create your own menu.
FAVICONS
Favicon Generator - Create your own favicon from an image on your computer.
Favicon from Pics - Create a favicon from a photo.
Favicon Editor - Upload a photo, create a favicon.
Favicon.cc - Another option for favicons.
Photoshop Tutorial - Creating a favicon with Photoshop.
CHARTS
PHP/SWF Charts - Create attractive charts.
amCharts - Flash charts.
OTHER
Avatar Maker - Create and edit an avatar.
Shrink Pictures - Create an avatar from your photo.
ScaleNine - Collection of skins and themes created for Flex and Adobe AIR.
VectorMagic - Converts bitmap images to vector art.
Templatr - Create a layout.
PsycHo - Blog template generator.
Web 2.0 Generator - Creates layouts.
Typetester - Compare fonts on-screen.
BlogPoll - Create a free poll for your blog.
RSSxl - Convert an HTML page to RSS.
Meta Tag Generator - Easily create meta tags for your pages.
URL Rewrite - Create search engine-friendly URLs for dynamic pages.
.htacces generator - Quickly create an .htaccess file.
Thumbnail Generator - Create thumbnails for a large amount of images.
Reflection.js - Adds reflections to your photos.
Drop Shadow - Improve your images with a drop shadow.
CSS Sprite Generator - From Website Performance.
Vecteezy - Stupid name. Cool vectors.
Brusheezy - Photoshop brushes.
PSBrushes.net - More Photoshop brushes.
deviantART - Photoshop brushes at deviantART
99 Resources for Web 2.0 Design
[Update: This post was originally published a while ago, however, almost all of the resources mentioned are still relevant. Since this post was published we've added tons of new resources that you may also find useful (see our Popular Posts page). To get all of the new content, subscribe to our RSS feed or by email.]
BADGES
Web 2.0 Badges - A set of free badges to download and use in your own designs.
Fresh Badge - Quickly generate your own badge.
adClustr - Starburst badges.
Deziner Folio - A collection of different badges.
BittBox - Free vector badges.
Official Seal Generator - An alternative to the typical badge.
Photoshop Tutorial - A quick lesson on making your own badge.
Glossy Photoshop Tutorial - Create a glossy badge with this tutorial.
BUTTONS
My Cool Button - A nice online tool that will help you to quickly create the button that you want.
Adam Kalsey’s Button Maker - Simple tool to make your own buttons.
Button Maker from Blog Flux - Create your own custom button.
Brilliant Button Maker - A similar button maker to the previous 2.
CSS Buttons - Choose the text, border, and background.
Buttonator - A paid option for creating buttons.
RSS Button Maker - The name pretty much says it all.
Button Boost - A little bit different than some of the other button generators.
ButtonGenerator.com - Create buttons for navigation menus.
Crystal Button - Slick web buttons made easy.
Chicklet Creator - Create buttons that allow visitors to subscribe in their feed reader of choice.
ROUNDED CORNERS
Rounded corners are a staple in web 2.0 design. Here are some tools and scripts that will help you to quickly create your own rounded corners.
LOGOS
Each of these tools will create a simple web 2.0 style logo.
ICONS
A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.
UtomBox - A great collection of web 2.0 icons.
Feed Icons - The standard RSS icon.
Map Icon Factory - Create your own map icon.
Perishable Press - A nice collection of RSS icons.
Snap2Objects - Vector RSS icons.
31 Sources of Quality, Free Icons
GRADIENT IMAGES
Another common element of web 2.0 is gradient images. Here are a few tools to help you.
Online Gradient Image Maker (OGIM)
SPEECH BUBBLES
Speech bubbles are commonly used for styling comments or blockquotes.
MySpace Speech Bubble Generator
BACKGROUND IMAGES
Background Image Maker - Create background images with choices like transparency and gradients.
Stripe Generator 2.0 - If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.
Stripe Designer - Easily create striped images.
Tartan Maker - Create a tartan background image.
Texture Generator - Creates textured images that you can use as a background.
All Free Backgrounds - Choose the background you want.
COLORS
The Colors of Web 2.0 - Are you looking to match the color of a popular web 2.0 site?
Web 2.0 Color Pallete - Popular web 2.o colors.
Color Schemer Gallery - Having problems choosing a color scheme? Find one you like in this gallery.
COLOURlovers - More samples of color combinations.
Website Color Picker - Test color combinations quickly.
I Like Your Colors - Get the colors used by a particular site.
NAVIGATION
CSS Menu Generator - Easily create attractive CSS menus.
Listamatic - Collection of CSS menus.
List-O-Matic - Create your own CSS menus.
List-U-Like - Another tool to create your own navigation bars.
Tabs Generator - Create tabbed images for navigation.
Flash Buttons - Create navigation menus with flash buttons
CSS Play - An extensive collection of CSS menus.
Exploding Boy - Tabbed CSS navigation menus.
CSS Navigation Menu Generator - A tool to help you create your own menu.
FAVICONS
Favicon Generator - Create your own favicon from an image on your computer.
Favicon from Pics - Create a favicon from a photo.
Favicon Editor - Upload a photo, create a favicon.
Favicon.cc - Another option for favicons.
Photoshop Tutorial - Creating a favicon with Photoshop.
CHARTS
PHP/SWF Charts - Create attractive charts.
amCharts - Flash charts.
OTHER
Avatar Maker - Create and edit an avatar.
Shrink Pictures - Create an avatar from your photo.
ScaleNine - Collection of skins and themes created for Flex and Adobe AIR.
VectorMagic - Converts bitmap images to vector art.
Templatr - Create a layout.
PsycHo - Blog template generator.
Web 2.0 Generator - Creates layouts.
Typetester - Compare fonts on-screen.
BlogPoll - Create a free poll for your blog.
RSSxl - Convert an HTML page to RSS.
Meta Tag Generator - Easily create meta tags for your pages.
URL Rewrite - Create search engine-friendly URLs for dynamic pages.
.htacces generator - Quickly create an .htaccess file.
Thumbnail Generator - Create thumbnails for a large amount of images.
Reflection.js - Adds reflections to your photos.
Drop Shadow - Improve your images with a drop shadow.
CSS Sprite Generator - From Website Performance.
Vecteezy - Stupid name. Cool vectors.
Brusheezy - Photoshop brushes.
PSBrushes.net - More Photoshop brushes.
deviantART - Photoshop brushes at deviantART
Sep 10, 2007
77 Resources to Simplify Your Life as a Web Designer
As a web designer, achieving efficiency in your workflow will have a significant impact on your success. Fortunately, there are a number of great resources that have been created with the intent of making your life easier and your work quicker and more effective.
Color Tools
Choosing the right color combination can be a difficult task. Try some of these tools to make it an easier decision.
For more color-related tools, see Find the Perfect Colors for Your Website.
Free CSS Navigation Menus
CSS-based navigation menus are used by most websites now, but they don’t need to be created from scratch. There are hundreds of menus already created and available for your use. You can use them as is, or customize them to meet your needs and match your website.
DHTML Navigation Menus
Xtreeme DHTML Menu Studio is a great tool for quickly creating dynamic navigation menus (cost: $49).
Photos for Your Website
Quality images greatly enhance the look and appearance of a website. You can find photos for free or buy higher quality photos for as little as $1.
- Stock.Xchng - free stock photos.
- Stock Expert - Low cost stock photography.
- iStockphoto - Low cost stock photography.
- Big Stock Photo - Low cost stock photography.
Icons
- IconFinder.net - Icon search engine
- 31 Sources of Quality, Free Icons
Blank WordPress Templates
If you design WordPress themes you can save yourself a lot of time by downloading these blank themes (from Tomorrow’s Laundry). The blank themes provide you with a very basic starting point to work from.
CSS-Based Design Templates
You may be able to save time by starting with a basic CSS-based template. Most websites are built off a one of several different layouts that can be started from a template.
- Layout-O-Matic - A tool that lets you create your own CSS-based template.
- CSS Creator - CSS layout generator.
- Layout Gala - Collection of templates.
- Open Designs - Open source templates.
- Open Source Templates - More open source templates.
Eric Meyer’s CSS Sculptor
One of the leading CSS designers has created CSS Sculptor to speed up the creation of CSS-based layouts. If you design a lot of websites this $149 software may be very helpful.
Dead Links Checker
Dead links are extremely frustrating to visitors, but checking them manually is not realistic. These tools will do it for you.
Testing in Multiple Browsers
Adequate testing is a part of the design process, and unfortunately that means testing in a variety of browsers.
For more information on this subject see Effectively Testing Your Website in Multiple Browsers.
Validators
Valid code is generally more accessible and it should be one of the first things you test when you encounter a problem.
Scripts
There’s no need to re-invent the wheel. Save yourself some time by using free scripts that others have created.
- JavaFile
- PHP Freaks
- DynamicDrive
- The JavaScript Source
- PowerfulScripts
- DHTMLGoodies.com
- PHP Open Source Scripts
Favicon Generator
Favicons are very popular right now, and they don’t have to be difficult to create. Try these free tools to create your own and help brand your website.
- Dynamic Drive
- Favicon from Pictures
- FaviconGenerator.com
- Favicons with text instead of images
- Graphics Guru
Fonts
Typography and fonts can make or break a design, but it can be time consuming to try a number of different options. Try some of these resources.
- 80 Beautiful Typefaces for Professional Design (Smashing Magazine)
- dafont.com
- Urban Fonts
- 1001 Free Fonts
Web 2.0 Tools
Most of the modern web 2.0 and social media sites have several design features in common. Help to make your designs look more modern by incorporating some of these design tools.
Button Makers
Buttons are everywhere. Easily and quickly create your own buttons with these tools.
Gradient Image Tools
Gradient images are another staple of web 2.0. If you don’t have Photoshop there are some other ways to create gradients.
Rounded Corner Boxes
Creating boxes with rounded corners is easy when you have the right tools.
CSS Speech Bubbles
Speech bubbles will give comments and quotes some variety and add to your design.
CSS Tools
If you’re looking to clean, optimize and compress your CSS code, here are some choices.
- CSS Tidy - a CSS parser and optimizer.
- Clean CSS - a CSS optimizer and formatter.
- CSS Optimizer
- CSS Analyzer - a validator plus.
- CSS Mate - online CSS editor.
- CSS Compressor
Miscellaneous
- Web Host Uploader - A simple FTP tool that eliminates the need to manually upload changes with an FTP client. This tool uploads changes with a single click.
- Web Standards Checklist from Max Design.
- Firebug Add-On for Firefox - Edit, debug and monitor your CSS, HTML and JavaScript in any live web page.
- Web Developer Firefox Add-On - Adds a toolbar with a number of features and web developer tools.
77 Resources to Simplify Your Life as a Web Designer
As a web designer, achieving efficiency in your workflow will have a significant impact on your success. Fortunately, there are a number of great resources that have been created with the intent of making your life easier and your work quicker and more effective.
Color Tools
Choosing the right color combination can be a difficult task. Try some of these tools to make it an easier decision.
For more color-related tools, see Find the Perfect Colors for Your Website.
Free CSS Navigation Menus
CSS-based navigation menus are used by most websites now, but they don’t need to be created from scratch. There are hundreds of menus already created and available for your use. You can use them as is, or customize them to meet your needs and match your website.
DHTML Navigation Menus
Xtreeme DHTML Menu Studio is a great tool for quickly creating dynamic navigation menus (cost: $49).
Photos for Your Website
Quality images greatly enhance the look and appearance of a website. You can find photos for free or buy higher quality photos for as little as $1.
- Stock.Xchng - free stock photos.
- Stock Expert - Low cost stock photography.
- iStockphoto - Low cost stock photography.
- Big Stock Photo - Low cost stock photography.
Icons
- IconFinder.net - Icon search engine
- 31 Sources of Quality, Free Icons
Blank WordPress Templates
If you design WordPress themes you can save yourself a lot of time by downloading these blank themes (from Tomorrow’s Laundry). The blank themes provide you with a very basic starting point to work from.
CSS-Based Design Templates
You may be able to save time by starting with a basic CSS-based template. Most websites are built off a one of several different layouts that can be started from a template.
- Layout-O-Matic - A tool that lets you create your own CSS-based template.
- CSS Creator - CSS layout generator.
- Layout Gala - Collection of templates.
- Open Designs - Open source templates.
- Open Source Templates - More open source templates.
Eric Meyer’s CSS Sculptor
One of the leading CSS designers has created CSS Sculptor to speed up the creation of CSS-based layouts. If you design a lot of websites this $149 software may be very helpful.
Dead Links Checker
Dead links are extremely frustrating to visitors, but checking them manually is not realistic. These tools will do it for you.
Testing in Multiple Browsers
Adequate testing is a part of the design process, and unfortunately that means testing in a variety of browsers.
For more information on this subject see Effectively Testing Your Website in Multiple Browsers.
Validators
Valid code is generally more accessible and it should be one of the first things you test when you encounter a problem.
Scripts
There’s no need to re-invent the wheel. Save yourself some time by using free scripts that others have created.
- JavaFile
- PHP Freaks
- DynamicDrive
- The JavaScript Source
- PowerfulScripts
- DHTMLGoodies.com
- PHP Open Source Scripts
Favicon Generator
Favicons are very popular right now, and they don’t have to be difficult to create. Try these free tools to create your own and help brand your website.
- Dynamic Drive
- Favicon from Pictures
- FaviconGenerator.com
- Favicons with text instead of images
- Graphics Guru
Fonts
Typography and fonts can make or break a design, but it can be time consuming to try a number of different options. Try some of these resources.
- 80 Beautiful Typefaces for Professional Design (Smashing Magazine)
- dafont.com
- Urban Fonts
- 1001 Free Fonts
Web 2.0 Tools
Most of the modern web 2.0 and social media sites have several design features in common. Help to make your designs look more modern by incorporating some of these design tools.
Button Makers
Buttons are everywhere. Easily and quickly create your own buttons with these tools.
Gradient Image Tools
Gradient images are another staple of web 2.0. If you don’t have Photoshop there are some other ways to create gradients.
Rounded Corner Boxes
Creating boxes with rounded corners is easy when you have the right tools.
CSS Speech Bubbles
Speech bubbles will give comments and quotes some variety and add to your design.
CSS Tools
If you’re looking to clean, optimize and compress your CSS code, here are some choices.
- CSS Tidy - a CSS parser and optimizer.
- Clean CSS - a CSS optimizer and formatter.
- CSS Optimizer
- CSS Analyzer - a validator plus.
- CSS Mate - online CSS editor.
- CSS Compressor
Miscellaneous
- Web Host Uploader - A simple FTP tool that eliminates the need to manually upload changes with an FTP client. This tool uploads changes with a single click.
- Web Standards Checklist from Max Design.
- Firebug Add-On for Firefox - Edit, debug and monitor your CSS, HTML and JavaScript in any live web page.
- Web Developer Firefox Add-On - Adds a toolbar with a number of features and web developer tools.
Subscribe to:
Posts (Atom)