Most designers wireframe their designs in one way or another, even if it just involves them making quick sketches on the back of some scratch paper. Wireframing is an important part of the design process, especially for more complex projects.

Wireframes can come in handy when you’re communicating with clients, as it allows them to visualize your ideas more easily than when you just describe them verbally.

This guide covers what you need to know about website wireframes to get started.

For a while now, I’ve had a dream. My work in the last 8 or 9 years has been heavily focused around education, whether I’ve been commissioning and editing technical books to help people create cool stuff with technology, training new employees at the various companies I’ve worked for, or editing and writing tutorial articles to help people use Opera’s software. I am passionate about the Web too, and a big believer in open web standards. I wanted to do my bit to help make the Web a better place, and I think this comes back to education, whether that’s teaching people how to collaborate and have more respect for one another, or teaching them how to make their web sites work across platforms and devices, and be accessible to people with disabilities. Web standards are key to the latter, so I decided to try putting my time and energy into something that would help increase the adoption of web standards on the Web today and in the future. It has been floating around my head for a while now, but it has finally come to fruition at Opera—many thanks to my wonderful employers for paying me to do this! One of my dreams has finally been realised.

FOUT is what I'm calling the flash of unstyled text that you get while using @font-face in Firefox and Opera.

In June, Remy Sharp documented the how a browser progressively renders a page using @font-face. Things work differently between browsers natch:

Here's how in Firefox; basically the text is in a default webfont until the custom font is ready:
[gecko & presto's progressive rendering]

Webkit takes a very different approach, and very intentionally. They believe it's better to keep the text invisible until the font is ready. This way, there is no moment where the text flashes into its newly upgraded self. (This moment should be familiar to you if you've used sIFR)

Paravel has just wrapped up an exciting secret project with three of the web’s most talented designers: Jason Santa Maria, Frank Chimero, and Naz Hamid. These designs are epic, like 18,123px epic. Working with these guys was a complete joy. There were a few fun development challenges and – as you might expect from these gentlemen – a lot of fancy typography work in the delivered PSDs.

Before Trent and I marked up the designs, we noticed that in many instances we would need to style individual letters. We decided we’d need a system to keep our markup maintainable. Something agile enough that a text change wouldn’t ruin us. Our solution was to call upon the power of Javascript to insert some easy to remember span tags.

This site simply hosts icons for lots of filetypes that you can use and link to. You can use a file extention like /html, a filename like /movie.avi, a mimetype like /application/pdf and/or choose from a specific set like /neu/html or even combine them like /neu/image/png. You can also use the ?size=16 to get a consistent size of icons, and the ?default=http%3a%2f%2fmetaward.com%2ffavicon.ico to force a default instead of an HTTP 404.

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.

View font details to get the code needed to embed the font on your web site. Please also visit our quick start guide and FAQ page. For more help and suggestions, use our moderator page

This guide explains how to use the Google Font API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

Negative space is often misunderstood as a tool to implement in certain designs that call for a simple aesthetic.

However, it is in fact something you should pay attention to and carefully structure in every design you create.

This guide discusses what negative space is and how to effectively use it to analyze and improve your designs.

Everyone love free fonts. If you want to be a bit different, you can use these creative fonts to make sure that your designs will stand out.

Your blog post thumbnail will play a big part in how your users see your website, and how they navigate it. A well designed post thumbnail can really engage your visitors and help encourage them to explore your website.

These overlays use a number of new CSS properties, some of which are simple like
border-radius and using RGBa colors.

The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Creating buttons with CSS becomes a lot more comfortable. The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

CSS has the ability to target HTML elements based on any one of their attributes.

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 7 Impressive techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website.

The UA Style Sheet is a simple set of css styles that each web browser uses before any other css styles are applied.

This chart lists and compares the different default style sheets used to render HTML in the four major versions of Internet Explorer; IE6, IE7, IE8, and IE9 Platform Preview.

You can download each of these UA stylesheets by using the links at the top of this chart.

Classic Luxury is a high quality, clean and simple CSS-based template with three custom pages created by CssTemplateHeaven exclusively for Six Revisions readers.

It is clean and has a lot of whitespace and nice typography. The code is well-organized and uses standards-based HTML and CSS.

Classic Luxury is great for portfolios and personal photo sites, and can be converted easily to a CMS theme as needed (such as Drupal or WordPress).

Features

* 3 custom page templates
* Photoshop PSD files included
* Valid XHTML
* FancyBox support (jQuery plugin for modal windows)
* Dropdown menus
* Social media icons for Facebook, Twitter, and LinkedIn

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline <font> and <br> tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages.

As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.

We have put together a great compilation of beautiful web application interfaces.

The web applications that were selected to be part of this showcase are based on usability, simplicity, colors and overall layout.

This article showcases modern and interesting contact/web form solutions found around the Internet. I also collected interesting ways how people decide to call their contact forms – get in touch, contact info, say hello, talk to me, say hey, connect, say “hi”, mail us and of course – contact us. My own personal opinion is, you should use Contact or Contact Us in your navigation, but supplement it with creative relate photos and styled text.

With jQuery outside events you can bind to an event that will be triggered only when a specific “originating” event occurs outside the element in question. For example, you can click outside, double-click outside, mouse-over outside, focus outside (and over ten more default “outside” events). Also, if an outside event hasn’t been provided by default, you can easily define your own.

Note that this was previously known as the “jQuery clickoutside” plugin.. but, hey—it’s pretty amazing what a an awesome idea and few more lines of code can do!

Sometimes you don’t need to build interactive wireframes, or may not feel all that comfortable in Visio or OmniGraffle. I know here are times I just want to open up Photoshop and start laying things out.

This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable. There are no usage restrictions but if you find them helpful give us a shout. We love hearing from you!

Typographic consistency:

* Is there a consistent vertical rhythm?
* Is the typographic alignment consistent?
* Are the typeface choices consistent?
* Is the typographic navigation predictable across pages?

Graphic consistency:

* Do the website’s images convey a consistent mood?
* Do the colors in the images match?
* Are the textures of the images consistent?
* Are the sizes of the images consistent with the overall structure of the website and each other?

Color consistency:

* Are colors used consistently across pages?

Icon and button consistency:

* Are the website’s icons of the same family?
* Do the icons match in size?

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block.

Problems with float

The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it. Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt.
Enter display: inline-block

This is where the magic value inline-block for the display property comes into play. Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.

In this ultimate collection, we bring you a massive selection of great Web design tutorials from all over the design community. All of the tutorials use Photoshop for the main application. By the end, you should have a pretty good idea of where and how to start designing for the Web.

If you’re already an experienced Web designer, don’t ignore this post. Even the most talented and professional designers can pick up tips and tricks from others. After all, design is a field in which no one knows it all.