Showing posts with label web design. Show all posts

Most Useful Web Design Cheat Sheets

Here are 14 incredibly useful Web Design Cheat Sheets, let’s make life easier and things done faster…!

JavaScript Frameworks

(X)HTML Elements and Attributes

Flash

Adobe Flash CS4 OS X Keyboard Shortcuts

Photoshop Lasso Tool Cheatsheet

Adobe Photoshop CS4 Keyboard Shortcuts

Adobe Photoshop CS3 Keyboard Shortcuts

Related Resources:

99 Resources for Web 2.0 Design

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.

Sliding Doors Text Box

Smart Rounded Corners

Rounded Corners in CSS

News List

LOGOS

Each of these tools will create a simple web 2.0 style logo.

Logo Creatr

ICONS

A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.

Web 2.0 icons

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.

Glass Style 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.

Gradient Image Maker

Gradient Generator

Online Gradient Image Maker (OGIM)

SPEECH BUBBLES

Speech bubbles are commonly used for styling comments or blockquotes.

Speech Bubbles from Will Mayo

Fluid CSS Speech Bubbles

MySpace Speech Bubble Generator

Photoshop Tutorial

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

Best CSS Magic and inspiration web design gallery list

Below you’ll find a brief overview of css-galleries you can explore inspiration from.

CSS Beauty
CSS
Beauty focuses on providing its audience with a database of well
designed CSS based sites, as well as news and happenings on the CSS
Design Community. It showcases designers work and serves as inspiration
for those looking to build CSS based websites.
CSS Blast
Russian CSS Showcase
CSSBloom
CSS Gallery with Blog’s and Online Portfolio’s
CSSGreen
CSS Gallery Of Great Design and valid Web Sites
CSSBrain
CSS gallery with comments.
CSS Clip
Web Design Inspiration and Gallery
CSS Collection
CSS collection web sites without tables
CSS-Demo
CSS Showcase
CSS Design Yorkshire
A gallery of CSS web design in Yorkshire UK
CSS Drive- Categorized CSS gallery and examples
CSS gallery, code samples, tutorials, and moreCSS Collection
CSSelite
We
are glad you like our site, that’s why we save every single entry we
make so you can get real inspiration from the best of the bests!
CeeSeS
CSS Gallery - We are the BalkaniCSS!
CESKO
CSS Showcase - Slovenia
Creative-Pakistan
Creative-Pakistan.com is a platform to showcase web and CSS designs of creative Pakistani web desginers
CSSFill
CSSFILL provides free CSS based layouts and templates
CSS Galaxy
CSS Gallery with voting and comments.CSS Hazard
CSS Inspiration and Gallery
CSS Heaven
CSS
Gallery - submit your own css design and view a gallery full of
creative design inspiration. The submitted designs can be rated
CSS ImportCSS
The no-frills CSS Gallery
CSS-Mania
CSSmania, the most updated css showcase all over the globe
CSS Princess
CSS
princess is showcase gallery of beautiful css sites. You can find web
sites primarily done completly with css , without tables.
CSS Reboot
CSS
Gallery - The CSS Reboot is a community event for web professionals and
enthusiasts. This November 1st at 18:00 GMT Rebooters from all over the
world will launch their web standards-based redesigns
CSS Remix
A Fresh Blend of the Best CSS Web Design
CSS smooth operator // Tite site collection
Tite site collection, conforms to Web Standards and designed with CSS
CSS Thesis
A Gallery of CSS based web sites, ranked by votes.
csstux - The best dressed sites on the web
A gallery of inspiring web site design and resources, focused primarily on sites using cascading style sheets.
CSS Vault - The Web’s CSS Site
A repository of sites using cascading style sheets and a list of resources
CSS Website
Gallery of Css Design Website. Submit your site.
CSS Zen Garden: The Beauty in CSS Design
A demonstration of what can be accomplished visually through CSS-based design. Classic!
Data Tables and Cascading Style Sheets Gallery
The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
Design Shack - Inspirational CSS and Blog Design
Design
Shack offers regular examples of great CSS, standards based design to
help inspire and create. We feature any website which shows off some
flair, and doesn’t fit into the standard pattern we come to expect from
CSS design.
Liquid Designs
Liquid Designs is a gallery of websites designed with liquid layouts using XHTML and CSS
Piepmatzel
collecting best practice web standards design examples
Proestilo
CSS/XHTML Gallery all standard complient.
showcase GR
The best of Greek CSS web design
Standards Reboot
Standards
Reboot is all about the use of standards in web design. This site was
built to take a back seat and showcase your talent.
Style Crunch
StyleCrunch is a css and standards websites gallery
Stylegala - Web Design Publication
Stylegala
is an online resource and inspiration guide for web agencies, designers
and developers who take interest in websites that combine the powers of
design, web standards and CSS.
Submit CSS
Submit your own css design and view a gallery full of creative design inspiration
Unmatched Style
Unmatched
Style is a constantly growing community dedicated to acknowledging
those who have made exceptionally gorgeous web sites using Cascading
Style Sheets and web standards. By recognizing these exceptionally
beautiful designs, other designers and businesses can get inspired and
find a direction they may wish to take with their own web sites.
W3 Compliant Sites: Sites designed to comply with W3C Web Site Standards
A collection of web standards compliant web sites and their designers
Webdigity
CSS gallery
Web Standards Awards
Awarding web sites that successfully combine form and function
Well Designed CSS Sites
Andy Budds List of well styled sites.

Best web 2.0 css templates websites collection

1- StyleHoust

2- CssTemps

3- Open Source Templates

4- Free CSS Templates

10- TriStar Webdesign

11- Free Layouts

12- Free Css Templates

13- Free Templates Online

14- Theme Base

Tips to design your site for mobile devices

Some day ago my friend Lucas asked to me some suggest to design a
mobile version of his blog. So, in this post I want to illustrate some
simple tips about how to develop a mobile version of your site such as:
choosing an URL address for your mobile site version, using a redirect
script for mobile devices, designing a mobile-friendly layout using CSS
and HTML and (if you are a WordPress user) using a free WordPress
plugin to develop your mobile site quikly.

Choose an URL address for the mobile version of your site
First
step is choosing an URL address for the mobile version of your site.
You have some options, for example, you can create a folder (mobile) in the root of your site so your mobile version will be publishet at this URL: http://www.yoursite.com/mobile.

...or if you can add custom sub domains to your domain, you can use an url like this http://m.yoursite.com or http://mobile.yoursite.com which links to the folder mobile which will contain all files of your mobile site version.

Redirect script for mobile devices
The second step is creating a redirect script
for mobile devices. It's not necessary, but it's useful to redirect
automatically all traffic coming from mobile devices to the mobile
version of your site. For more info about this topic take a look at the
following links:

Redirect a mobile/PDA to a "lite homepage"

Redirecting visitors who visit a standard webpage to a mobile version

...and in particular if you are a PHP, ASP programmer take a look here:

Device detection using PHP

Device detection using ASP

If you know other interesting links, please add a comment :)

Simple page structure mobile-friendly
What is the better layout style for your mobile site version? I suggest you to use a typical one-column layout which is very popular for this kind of sites and make them more usable and readable for mobile users. YouTube, Facebook, Twitter , for example, use this layout one-column for their mobile versions:

Using this layout is a good practice but not a rule. In fact, if you surf the web using a mobile version of Internet Explorer,
on Windows Mobile based devices, you can choose some layout options
which the browser uses to "arrange" the content of the page to the
device screen width (independently from the original page layout):

- Default, narrows content width to reduce horizontal scrolls
- One Column, forces all content to fit in a single column
- Desktop makes no change to the content (the site looks exactly how if you used a desktop version of IE)

But
in general, the result can be bad if your site layout is too complex.
To avoid this problem, you can think to spend a little bit of your time
to design an optimized mobile version of your site using a more
device-friendly one-coloumn layout how I illustrated in the following sections.

A proposal for your mobile site
If you have a blog, your mobile devices-friendly layout for your site can be something like this:

...with the following elements: header, body and footer. Header contains the site logo, body contains your post (or a summary) and footer contains other info about your site.

HTML and CSS basic code
You can use Dreamweaver or your preferred editor to develop the code. HTML code is very simple and can be something like this:

<div id="header">

</div>



<div id="page-body">

<h1><a href="post1.html">Title of your post</a></h1>
<p>A summary of your post</p>
<p class="tag">

</p>

</div>



<div id="footer">

<a href="index.html">Home</a> |
<a href="mailto:youremail@yoursite.com">Contact me</a>

</div>

...and CSS code could be something like:

/* -- Reset default style -- */
body, h1, p{border:0; margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}

/* ------------ */
/* HEADER */
#header{
padding:6px;
background:#444444;
}
/* PAGE BODY */
#page-body{padding:10px;}
h1{font-size:14px; font-weight:bold;}
h1 a:link, a:visited{color:#0033CC;}
.tag{font-size:12px; margin-bottom:20px;}
.tag a:link, .tag a:visited{color:#999999;}

/* FOOTER */
#footer{
padding:6px;
border-top:solid 1px #DEDEDE;
color:#999999;
font-size:11px;
}
#footer a:link, #footer a:visited{
color:#666666;
}

The result is something like this:

...naturally
this is only a very basic proposal which you have to modify adding
images, your logo, changing colors, font-family and add some lines of
PHP, Coldfusion, ASP or other code to display dinamically all your
post. For example with some lines of CSS code you can obtain a result
like this:

You can also add a search field
in the header of the page to help your readers to find quickly what
they are looking for in your site. I also suggest to be simple and
don't add useless element such as social network buttons (such as
delicious tagometer or digg) or other widgets which use javascript.
This is only a mobile version of your site and it have to be simple,
usable and readable. Nothing else!

Issue with fonts using devices with Windows Mobile
If
you use a mobile device with Windows Mobile, you don't have installed
by default fonts like Arial, Verdana, Georgia... So to display
correctly a web page you have to copy into your device some of the most
used fonts in web design. Click on Explorer and copy from your PC (or also from your MAC) these fonts into the folder Windows > Fonts in your mobile device:

- Arial
- Verdana
- Georgia
- Trebouchet MS
- Times New Roman

WordPress Mobile Plugin
If you are a WordPress user, and you want develop your mobile site quickly, you can download WordPress Mobile Plugin, a free to download plug-in developed to make your blog mobile friendly.

Download Wordpress Mobile Plugin

It'all! For other suggests or to add interesting links about this topic please add a comment :)

JavaScript Frameworks

CSS

XHTML