238 Design & Layout tips, tutorials, techniques & resources
101 Awesome Downloadable Fonts for Designers
"Despite its prominence, Arial and other de-facto fonts just aren’t attractive enough for most designers. Fortunately, there are a number of foundries that create some truly impressive fonts, and are happy to share them with others. We’ve highlighted 101 of them here, but keep in mind that many request that you provide credit or at least ask for permission for commercial use."
Designing a Web site by the grid should be a rule, not a fad or trend
"Well known designers have often times admitted to using grids in almost every single one of their pieces. Especially ones that have a large amount of information."
On Choosing Type
"Typography is not a science. Typography is an art. There are those who’d like to ‘scientificize’; those who believe that a large enough sample of data will somehow elicit good typography. However, this sausage-machine mentality will only ever produce sausages. That typography and choosing type is not a science trammeled by axioms and rules is a cause to rejoice."
Justify My Text
"Factors affecting justification are the column width, type size, and width of the typeface used -- all of which contribute to the average number of characters per line, which is the most important factor in how justified text will look."
Popular websites’ logo typographies
"Sometimes, the typography used in a logo is a logo itself, without the need to add extra graphics in it. Therefore, in such cases, the font must be quite original because other brand may also use it and confuse both identities. In fact, hardly anyone creates an unique font for his logo, not even the big sites (I ignore why). Today, we’ll see the typography used in the logo of some famous websites."
Use custom type with sIFR
"Don’t let system fonts ruin the look of your site! Paul Wyatt explains how to make your headers look stunning with Scalable Inman Flash Replacement"
55+ Color Tools for Color Palettes, Color Combinations, Color Schemes & More
"Although, we all have a unique sense of what colors go together, many of us tend to use the same color schemes over and over again because they are safe. What these color tools do, in my opinion, is help us find new beautiful color schemes that we haven't tried to use before. Look below to find a huge list of online color tools and utilities to find new color schemes for your layouts and designs."
We All Love Typography
"When I see a good example of Typography, I just wonder why my designs don’t showcase that amazing element. Whether it’s spacing, font choice, position, kerning, I just can’t seem to get that look. I am always looking for designs that showcase amazing typography, below are 50+ examples of what I have found inspiring in my quest to achieve typography greatness."
Examples of Color Schemes and Color Combinations Within Designs
"Are you having problems thinking of new color combinations? Do you wish that you could have a reference file for evaluating new color combinations for your website? There area many helpful tools and websites out there that list good combination colors but wouldn't you prefer to look at designs implementing these colors? I would. I have created about 45 different simple designs implementing workable color combinations, and I will add to this list at regular intervals."
Find Out How to Combine Colors the Right Way
"For a graphic designer, the world of color is where we thrive. The more vibrant the color, the better I like it. With that being said though, color invades every nook and cranny of our lives. It infuses us with emotions and subconscious messages, creating pizzazz and passion wherever we look. As graphic designers we have to know which colors send the right message."
The Evolution of Websites: How 10 Popular Websites Have (And Have Not) Changed
"Having created websites for over half my life, I look back and see how much websites have changed in the last decade and a half. So in the vein of change, let's look at ten popular websites and their evolution throughout the last many years."
Superb Examples of Slick sIFR Typography
"Sadly, like most things, sIFR is often misused. However, below is a showcase of some of the best and varied examples I could find. Some of them are just downright gorgeous."
A guide to top color combinations in web design
"Are you having problems thinking of new color combinations? Do you wish that you could have a reference file for evaluating new color combinations for your website? There area many helpful tools and websites out there that list good combination colors but wouldn't you prefer to look at designs implementing these colors? I would. I have created about 45 different simple designs implementing workable color combinations, and I will add to this list at regular intervals."
Nice Drop caps with CSS
"There are a lot of websites using a extra -tag for the drop cap. But using the :first-letter pseudo-element, you can easily create nice drop caps with CSS. This pseudo element is included in CSS 1, so the browser support is very good. Let’s design some nice drop caps with CSS."
Choosing color combinations
"Sometimes finding the right color combinations can be really hard, especially if you have to start a project from scratch. If your client already has a logo, a house-style or branding guidelines, you have a starting point. But if it’s your job to design that house-style, the first thing you should do is decide which style the logo should reflect. Color plays a major part in all this."
Learning to Use Color on Your Web Site
"We often think of a good eye for color as something innate rather than something learned. But in fact, given the proper tools, and possibly a few electrical shocks along the way, even a person who's colorblind can pick color schemes that are pleasing to the eye."
Find the Perfect Colors for Your Website
"Color choice is a crucial decision in every website design. Sometimes you may be designing a site for an existing business that already has an established color scheme, but many design projects will require development of a color scheme. Fortunately, there are almost endless resources online to help you find that perfect color combination."
Grid tips for Photoshop users
"Grids greatly improve your layout. They add a level of consistency. Imagine the front page of the New York Times without a grid… It would be a mess, impossible to easily scan. I always make sure the number of columns I use is dividable with 3 or more numbers."
Rapid prototyping in Fireworks CS3
"Adobe Fireworks CS3 is a fantastic tool for quickly building out rich Internet applications. Adobe has recognized this "niche" and, in Creative Suite 3, added a number of new features that make it even more compelling in the specific area of rapid prototyping."
Prototyping with Adobe Fireworks
"It seems like Adobe Fireworks is becoming a new favourite prototyping tool of many interaction designers. With the CS3 version, Adobe has added a number of new features that makes it interesting for prototyping purposes"
Grid-Based Design: Six Creative Column Techniques
"A page without a grid is a usability nightmare. On the other hand, a grid that has creatively overlapping, escaping, or energizing columns leads to a more enjoyable user experience. Discovering or planning areas of the design that will have some freedom will lead to more interesting and appealing design solutions."
The Value Of White Space
"White space is a design term that refers to space that isn't occupied by text, images, or other visible page elements. The amount and use of white space is a key component of a page's readability and legibility."
Reading Online Text: A Comparison of Four White Space Layouts
"In this study, reading performance with four white space layouts was compared. Margins surrounding the text and leading (space between lines) were manipulated to generate the four white space conditions. Results show that the use of margins affected both reading speed and comprehension in that participants read the Margin text slower, but comprehended more than the No Margin text. Participants were also generally more satisfied with the text with margins. Leading was not shown to impact reading performance but did influence overall user preference."
On White Space in Graphic Design
"White space is nothing. White space is the absence of content. White space does not hold content in the way that a photograph or text holds meaning and yet it gives meaning and yet it gives meaning, through context, to both image and text. In fact, white space can make or break the effective transmission of image and text."
Give me my web space
"Many Web pages are like my aunts' houses—crowded with do-das and knick-knacks. As a designer, you can choose to make your pages light, if appropriate. Simplicity in Web design can be a very potent technique. This doesn't mean you have to restrict yourself, but that you should place each element with a purpose in mind."
Finding Information on the Web: Does the Amount of Whitespace Really Matter?
"It has been a long-held notion that the use of open space or "whitespace" adds not only to the attractiveness of the design of a written publication, but adds to the functionality as well."
Design Psychology
"Insights into the purpose and effect of physical elements, design, and layout of web pages ... and why clients should let designers handle design."
Design Matters: Fonts
"Most of us are familiar with fonts, as far as using Arial for headings and Times New Roman for body copy. But there is so much more to fonts than that. In this section, I’ll try and explain all the different options related to fonts, from classifications (yuck! I know), to how best to use them on screen, and in print."
Design Matters: White Space
"So why is white space so important? Part of the reason is pshychological, and part of it is physical: the text needs room to breathe. When text crowds all the way to the edge, it leaves us feeling crowded and cramped. Long passages of text, written edge to edge can actually tire the eyes."
The Laws of Simplicity
"I wrote The Laws of Simplicity in late 2005 to early 2006 to get my thoughts down about simplicity. In the course of 100-pages, I outline the Ten Laws as used on this website."
Web Design is 95% Typography
"95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography."
Web Typography Sucks
Presentation by Richard Rutter and Mark Boulton on web typography. Includes slides, notes, and an mp3 recording of the session.
Top ten tips for web typography
"The latest issue of Design Edge Canada magazine – a publication for Canada’s graphic design industry – was a web typography special for which I contributed the following top ten tips for web typography."
19 More Free Quality Fonts
"Here are the most beautiful fonts, created by the open-source community and free for personal, academic and (sometimes) commercial use."
My Favorite Free Fonts
15 Best License-Free Pixel Fonts
"So, now let’s take a look what the web-community has to offer for those looking for professional license-free pixelfonts."
Type Design Rules
OpenType
"The two main benefits of the OpenType format are its cross-platform compatibility (the same font file works on Macintosh and Windows computers), and its ability to support widely expanded character sets and layout features, which provide richer linguistic support and advanced typographic control."
A History of TrueType
"Apple had been developing what was to become TrueType from late 1987. At that time there were many competing font scaling technologies, and several would have been suitable for the Macintosh. It was by no means certain, according to lead engineer Sampo Kaasila, that Apple would adopt TrueType. In the end though, it proved itself on performance and rendering quality (at high and low resolution) against the others."
Glossary of typography terms
Classifying Type
A glossary of typographic terms
"This section provides a small glossary of terms frequently used in the type world."
Fine Tuning Web Typography
"Typography is a sadly neglected aspect of the web design process, an oversight traditionally blamed on the technical limitations and unpredictability of the medium. While it is true that the web may not offer designers the same typographic freedom as print, all it takes is careful consideration and a little typographic fine tuning to bring website layouts to life."
Expand Your Web Typography
"Most web designers know the common web-safe fonts, nearly all serif based sites are showcasing Georgia due to the inbred gag reaction most designers have to using Times because of its “default” status on the majority of computers."
The Elements of Design Applied to the Web
"Design is broken up into a number of basic principles that apply to all design from type creation to painting to page layout, both on the web and in print. However, especially on the web, these rules tend to be forgotten and we just go with what feels “right.” This isn’t because designers are feeling too loose to abandon these rules, but rather, most people working on the web don’t even know they exist – if they do, they don’t understand how to use them."
Typography For Headlines
"A showcase of headline typographic design from across the web."
Know Your Type: Starting points for typographic inspiration
"Practicing good typography is at the core to good design. Computers are all grown up (they even come with two buttons we hear) and everyone, including yer mama, is making christmas newsletters with custom type—comic sans and all. Knowing your em-dashes, serifs and line heights is important, but the key is developing typographic control. Here are some points to consider."
It's About Legibility
"Typographic clarity comes in two flavors: legibility and readability. What’s the difference? Legibility is a function of typeface design. It’s an informal measure of how easy it is to distinguish one letter from another in a particular typeface. Readability, on the other hand, is dependent upon how the typeface is used. Readability is about typography. It is a gauge of how easily words, phrases and blocks of copy can be read."
Choosing Type Alignments for the Web
"Text alignment is always a tricky issue, especially on the web where we are at the mercy of text rendering, sizing, and window space all at the discretion of the viewer. However, all forms of alignment have their place on the web. But before we get to the decision making process, let’s have a closer look at our options."
Erik Spiekermann’s Typo Tips
"With the invention of “desktop publishing”, designers found themselves setting type on their computers for the first time. Until then, they had made type specifications for typesetters and left the job up to the professionals. As a result, you can still see classic inaccuracies in typesetting, even in top-quality printed matter. Here you will find some tips that will prevent some of the more obvious blunders."
Working with a limited font set on the web
"Typography and the web have never seen eye to eye - largely thanks to the limited type rendering capabilities of computers at the dawn of the web. Coupled with the academic (and non-design-oriented) bias of sites from this time, we're left with a legacy of a poor choice of fonts."
Web Typography Cheat Sheet
"Let's be honest. Typography and the web do not go hand-in-hand. You're limited to a choice of about 5 fonts, most of which are cheap knockoffs of 'proper' typefaces. You've got practically no fine control over kerning or line spacing, and - worst of all - there's a very good chance that no matter what you do, no matter how hard you try - your type is going to look different on every single browser and operating system. So what is an avid graphic designer-cum-web designer to do when faced with the seemingly insurmountable task of making web type look good?"
Typography: serif vs. sans-serif
"For years now, we've more or less accepted the unwritten rule of typography on the web: sans-serif is good for small(er) type on screens, whereas serif is good for such type on paper. Serif fonts for headings work well either way. But does this still apply? What about usability and, to an extent, accessibility? Is it time to seriously reconsider this?"
Thirteen Ways of Looking at a Typeface
"Those thousands of typefaces are still out there, but my recovery has required that I become more discriminating and come up with some answers to this seemingly simple question: why choose a particular typeface? Here are thirteen reasons."
The Effect of Website Typeface Appropriateness on the Perception of a Company’s Ethos
"This study investigated the effect of website typeface appropriateness on the perception of the site’s company. Results indicate that typefaces that are high in appropriateness should be used for websites. Neutral and low appropriate typefaces significantly decreased the perception of the company as judged by professionalism, believability, trust, and intent to act on the site."
The non-typographer’s guide to practical typeface selection
"Let’s be frank right off the bat: I don’t presume to be a typographer, or even anything close to an expert with a replete knowledge of typography and its history. Instead, I take a more practical approach to typeface selection, given the environment I’m generally in rarely requires that I need to complicate the process further."
25 Best Free Quality Fonts
"I’ve decided to create the Top 20 Best Free Quality Fonts, which are likely to be used rather for official, serious presentations (such as business sites) than a colourful teenager’s homepage."
13 typefaces every graphic designer needs
"With thousands of different typefaces on offer, it’s vital to have a select few that act as pillars in your collection. The following 13 typefaces (shown in alphabetical order) are ones that I believe every graphic designer should be familiar with."
Great Fonts for Web 2.0
"Fonts are an essential part of design - but there are thousands of fonts out there, so knowing which ones to use can be quite daunting. Here's a roundup of some fonts that have found popularity recently."
Most Popular Free Quality Fonts
Grid-Based Design 101
"For many designers, grid-based design is still somewhat of a mystery. In this article we’ll take a look at some of the basics of grid-based design so that you can understand it and apply it to your projects."
6 Phases of the Web Design & Development Process
"There are numerous steps in the web site design and development process. From gathering initial information, to the creation of your web site, and finally to maintenance to keep your web site up to date and current. The exact process will vary slightly from designer to designer, but the basics are generally the same."
Printing the web
"The screen is just one of the media types for which we have to design for. Another media type, which I feel is often neglected as part of the design process for a web site, is print. There are times when a web designer has to know about print design. Not just the values and aesthetics of designing for print, but the terminology, measurements and production values that are important in print design—including typesetting."
Five Simple Steps to designing with colour
"Designing with colour is perhaps the element of graphic design which is the most difficult to get right. Why? Well, because it is the most subjective. For some, a palette of dark grey with splashes of bright pink will be just great; to others it would just be all wrong. Too many designers, whether schooled in colour-theory or not, end up making subjective decisions about colour and then when it comes to explaining those decisions to a client, things begin to unravel."
Grid-based design: Part 2, Designing blog theme templates
"I'd like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress. The purpose of this article is to give you an idea of how to approach blog theme design using a grid system. After reading this, you should be able to create a fully-functional grid-based design and HTML prototype that can be coverted into a theme template."
Designing Grid Systems For Flash
"I’ve decided that I’m going to write a little something up for those people interested in grids. I’m going to walk you through the process of creating a grid for a Flash based site. The beauty of creating a grid for Flash is that you can create a fixed grid and don’t have to be concerned with the user changing type sizes and screwing up the entire grid of the site."
Grids make eyes happy: How to use grids
"Check out your local newspaper. Well-designed papers will never have the same column running the length of the page. Great papers have very little semblance of a grid. Apply these rules to your site. A true grid may not even have visible rows. Great grid usage includes all sorts of variations of grids, weaving in and out of columns and rows, breaking the grid at strategic moments, and overall making it very hard to even notice the grid."
The Funniest Grid You Ever Saw
"Believe it or not, underlying every page of TheOnion.com are sixteen columns of 42 pixels each, separated by fifteen gutters (the empty white space between) of 10 pixels each, plus an additional, outsized column for the left-hand navigation. It’s an almost absurd number, I know, but it has a real purpose, because these pages are sufficiently complex that the practice of laying out elements on them requires lots of guidance."
Grid Computing... and Design
"I spent a tremendous amount of time fine-tuning the CSS so that it would match up very carefully with the grid, and so it would work across all modern browsers — and Internet Explorer too, though with decidedly less faithfulness. That was difficult but it least it was an intellectual challenge."
Oh Yeeaahh!
"I started thinking about how to visually represent the problem-solving process that I go through when designing new interfaces with grid layouts. So I hit upon the idea of a hypothetical redesign of an existing Web property. That approach would allow me to tackle a set of real world design problems that would be familiar to lots of users."
The Right Glyph for the Job
"Typesetting is the composition of a body of text from raw material into a designed presentation. One of the aspects of Typesetting which seems to be lacking in the design profession—and I'm guilty as this as the next designer—is that of a thorough understanding of the written word. A total grasp of punctuation, grammar and structure and when and where to use them."
Five simple steps to designing grid systems
"Before we even begin to tackle designing grid systems we need to have a basic understanding of what they are, why we use them and where they came from."
Cutting and sewing grid-based design: Part 1, working with other people's comps
"Visual designers have written about grid-based web design already. Few people, however, seem to have talked about their actual process of getting a comp, cutting up its graphics and using it to produce actual CSS. As you may know, this blog is all about exposing my processes. So I thought there might be some value in writing about it."
Why use a grid?
"Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform - web, print & real 3d environments."
Feeling your way around grids
"Many theories on aesthetic measurement have their basis in numerical patterns that occur naturally such as the proportions of the human body, for example the distance between your elbow and the tip of your fingers compared to the distance between your elbow and your wrist. Theories, such as the Golden Section, arise from these natural patterns and they are applied to art (either consciously or subconsciously) to create "beauty" by way of considered composition."
Columns & Grids
"One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. So the focus is usually on the horizontal layout, which usually means columns."
Design grids for Web pages
"Consistency and predictability are essential attributes of any well-designed information system. The design grids that underlie most well-designed paper publications are equally necessary in designing electronic documents and online publications, where the spatial relations among on-screen elements are constantly shifting in response to the user's input and system activity."
Grid-based Layout
"A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines."
Wireframing with Fireworks CS3
"Wireframes are barebones sketches of your website or application and you can use to demonstrate, document, and often validate the functionality of a design without any distracting pixel artistry. This article expressed my thoughts on why Fireworks CS3 is a particularly good tool for wireframing. I also share some of the techniques that have worked well for me in the past."
Designing With Grid-Based Approach
"We’ve decided to take a deep look in the articles about grid-based designs. We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we’ve listed the most useful references, tutorials and tools we found - with precise descriptions of what the articles are about."
Whitespace
"“Whitespace,” or “negative space” is the space between elements in a composition. More specifically, the space between major elements in a composition is “macro whitespace.” Micro whitespace, is—yes, you’ve guessed it—the space between smaller elements: between list items, between a caption and an image, or between words and letters. The itty-bitty stuff."
White Space and Simplicity: An Overview
"The importance of both white space and simplicity shouldn’t be underrated. Used correctly, they can enhance the performance of a web-site, improve readability and make a great first impression. We’ve collected some articles on this topic."
The Delicate Art of (Web) Design Critique
"It's quite one thing to criticize someone's code; one can argue the merits or not of being a stickler about standards compliancy, or using CSS, or whatever. But design is more personal than writing code. How do you constructively critique someone's work without being taken the wrong way? How do you accept criticism without feeling hurt or angry? Here are just a few ideas, gathered from observations and comments from others."
Designing the "Future Of" Sites
"Our first step in any project is to formulate a strategy for the design. This is very important in helping us ensure that the design communicates the right message about the brand. It also helps by giving both us and the client something to test our ideas against—a design litmus test of sorts."
60 Brilliant Typefaces For Corporate Design
"Below you’ll find over 60 first-class typefaces for corporate design. Please notice that they are not free; however, we’ve focused on typefaces which are definitely worth spending money on. So which typefaces are “bulletproof”? What fonts can be used effectively in almost every Corporate Design? And what are the options for unique, but still incredibly beautiful typefaces? Let’s find out."
12 Fantastically Free Graffiti Fonts
"Graffiti fonts are one of the most sought after free fonts available online, so below you will find a great collection of popular free graffiti fonts. All of the fonts can be downloaded for free from the great free font site dafont.com."
Calculating Font Sizes
"There are a lot of articles out there about typography on the web. I wanted to explain my method of controlling font sizes and margins in CSS."
Graphic Design Glossary
"This graphic design glossary contains vocabulary that many designers use on a daily basis and may be confusing to new designers or non-designers who need to communicate with designers. Remember, the following terms are defined as they relate to graphic design and desktop publishing."
What font says 'Change'?
"Typography can subtly or boldly define a company, product, or person. Whether it is Best Buy's big, bold, screaming signs or the sweet, elegant script on a wine label, the type talks to us, the reader. The logos of the presidential candidates are no exception."
Cool Business Cards
"Showcasing some very cool business cards and different approaches compared to the traditional ways of the business cards. I have been building up this posts for quite some time now."
Designing with a Grid
"Recent talk on the web about typography and the grid inspired me to pick up some books and do some reading and learning so I could expand my knowledge and produce more mature websites. I wanted to try and give some insight on how I created Version Four using a grid, and how I went from wireframes to the finished website you see here."
Using Spreadsheets to Brainstorm Grid Layouts
"Designing with a grid is becoming more and more common as a standard approach to designing a website. When designing this site I discovered a tool to aid in pixel calculation and proper proportions that proved highly valuable."
Gridlasticness
"A few notes when trying to create a grid layout using ems."
On grid design
"I’ve heard the term “grid design” more than I’ve seen the color blue around the web this year. Why such a resurgence of such an ancient technique? But more importantly — why doesn’t anyone use grids? I was always taught that grids were lines of integer multiples crossing both the vertical and horizontal. Then again, I’ve never been “trained” formally in design either. But here’s my opinion, for what it’s worth."
Quiet Structure
" Like many people, I’m a big fan of CNN’s recent website redesign. While I believe that a few structural and hierarchical elements could have been addressed better, the overall result of this redesign is a very neat, very clean and clear presentation of information; exactly what an online news site needs."
15 tips to choose a good text type
"I want to take time to analyze how to choose correct text typography design in different cases. It is very important to understand that these tips are not final word, but they can be good help at the moment of choosing a text type. In any case, it depends on what do you want to convey with this type, because many times legibility is as important as the character of the type."
Color and Typography in Good Design
"Typography is a significant issue for designers. On many projects, finding just the right font, size, spacing, etc. can require considerable time and attention. In addition to typography, color is also a major factor in the success of the design. What is sometimes overlooked is the combination of color and typography and the effect that it has on the overall project."
Common fonts to all versions of Windows & Mac equivalents
"Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts". This is the reference I use when making web pages and I expect you will find it useful too."
Web Typography
"The fonts you use for your website are an important decision, as they will often reflect your site’s tone and affect its visual impact. Typography is an interesting field if you can appreciate the skills that go into the design of a typeface. Below is an introduction to typography, starting with font classifications and then going into the practicalities of online text."
Five simple steps to better typography
"Typography, I find, is still a bit of mystery to a lot of designers. The kind of typography I'm talking about is not your typical "What font should I use" typography but rather your "knowing your hanging punctuation from your em-dash" typography. Call me a little bit purist but this bothers me. So, in an attempt to spread the word here's the first of five simple steps to better typography."
The Elements of Typographic Style Applied to the Web
"In order to allay some of the myths surrounding typography on the web, I have structured this website to step through its working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers."
My Development and Design Process
"My first step is an attempt to envision the overall structure of the document. I’ll first pick out the overall structural elements that need to be put in place. From there I’ll pick out such things as divisions, lists, paragraphs, headings, and definition lists, as those are the most common elements I end up working with. This process of envisioning the document structure doesn’t take long, but proves to be extremely valuable."
Improving Your Process: Site Planning Guides
"Sometimes improving your process not only helps yourself, it can benefit your clients as well. Using your time more effectively allows a client to receive more time and effort from you focused on enhancing the project as opposed to spending time resolving miscommunication."
Improving Your Process: Sitemaps and Design Preparation
"Sitemaps aren’t exactly a popular topic for conversation as of late. Given the improvements both in site architecture as well as search engine intelligence, it seems as though sitemaps have taken a backseat as far as priority is concerned. I’ve written specifically about sitemaps and whether or not they’re applicable today."
Stonebriar Community Church Redesign
"In our initial interviews, it was clear that the team at Stonebriar was eager to have a website design that more accurately reflected the vision and DNA of their community. The previous design wasn’t bad, but it needed freshening, and more personality."
Redesigning the ExpressionEngine Site
"I now tend to split my design process into somewhat separate phases: wireframing, design exploration, and detailing. In this article, I’ll attempt to detail those phases with some practical examples from the design of the ExpressionEngine.com website, as well as demonstrate what to do if the process encounters snags."
An Ode to Old-style Numerals
"All of the core Web fonts apart from Georgia have modern numerals. They are all equal width, and the same height as capital letters. They are great for tabular data because they line up vertically in tables which is probably their raison d’etre. They work perfectly with capitals, too. After that they start to fail. Miserably."
Smoothing out the Creases in Web Fonts
"Designers often choose one of the core Web fonts for body text because they are widely available, but like all typefaces, they render differently on different operating systems."
Aligning Images The Right Way Using CSS
"Images are great for blog posts and chunks of text in general. Even if they're just remotely relevant, they'll add some space and make the content more accessible. You want to spice your texts up with images."
Design Process of WDW
"Usually, I keep the sketches of every project I designed and use them as simple documentation. Sometime I might refer back to the old sketches for ideas and references. Here I would like to share my development process of Web Designer Wall with you. This article will show you how WDW is done - from start to finish."
Simple Double Quotes
"This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote."
Review: PayPal Redesign
"PayPal has made such a drastic change that it doesn’t even look or feel like PayPal (the PayPal that we used to). I think it will take us a while to adapt to the new design. Don’t get me wrong, I’m not saying change is bad. Changes are good if the results are positive. Here are my thoughts on the new PayPal design..."
A Command of Headings: Usage and Styling
"I command thee, headings. Do not defy me as I am the all-powerful web developer. I am your master for I wield a style sheet with which I can make you mine..."
Grunge Style In Modern Web Design
"Below we’ve collected everything you would ever need for a perfect design in a grunge style — design examples, free fonts, icons, textures, brushes and even few tutorials."
The Secrets Of Grunge Design
"Shiny and glossy design elements are now officially outdated. Just like retro is becoming trendy again, grungy look appears to rapidly gain on popularity. And there is a damn good reason behind it. In our everyday environment we’re unlikely to find ideal geometric forms or pretty shadow effects as they are manifested by glorious Web 2.0-designs."
Our Favorite Typefaces of 2007
"Typographica’s fourth annual review showcases the best in new typeface design. Twenty-five of the world’s brightest graphic and type designers selected their favorite font releases of the year."
Blank Business Card Templates
"Several different templates are handy to have on-hand. Some for designing single cards, and some for layout for home printing."
Visual Thinking
"This week we will be flexing that lump of worms between your ears. One of the biggest things that can separate a good design from a great design is a strong concept. Strong concepts don’t always just come to us; sometimes they take work."
Hierarchy and Focal Point
"We’ll take a quick look at two formidable bedfellows, Hierarchy and Focal Point. Hierarchy in design is simply the ranked classification of information, and Focal Point refers to a main area of visual interest. The power these two tools hold can not be overstated."
White Space
"When white space is used appropriately, it allows a page to create a general flow and balance, which in turn helps communicate the intent of the design by welcoming readers and inviting them to stay awhile. White space can highlight important elements and support the overall hierarchy, leading the viewer around the page by the designer’s intent."
Critiquing
"Though this won’t be a detailed process to critiquing (you should hopefully be somewhat familiar with the nature of a critique already), I will try and shed some light on constructive and respectful critiquing."
Creating The Perfect Portfolio
"If you’re a designer looking for a job—whether of the freelance or permanent variety—then an online portfolio is pretty much mandatory. If your portfolio has to stand alone in a critical situation like hiring, it’s worth spending some time making sure it’s going to get the job done!"
Keeping a Sketchbook
"This week we are going to take a brief look at the benefits of maintaining a sketchbook and the impact it can have on your own creative process."
Collecting for Design
"There are three disciplines that have been useful in my design self-education: Reading, practicing, and collecting. Let’s talk about the finer points of collecting."
Where Did My Beautiful Internet Go?
"Originality seems to have been sucked out of the majority of the internet. Why? Why has the internet so quickly fallen into certain patterns and simple designs? Here are four possible reasons for you to mull over while you drink your tea."
The Red Queen Color Theory
"Here I'd like to use the Red Queen concept to describe what goes on in your psyche when you color your website, and its relationship with what goes on in the psyches of your users when color makes an impression on them."
Brand Value and the User Experience
"Successful companies match business objectives with customer needs. They combine ongoing testing, feedback and improvement cycles into their daily practices and invest in listening, learning and modifying the user experience to create positive returns in revenue and loyalty."
Apples and Oranges
"Usability and design are two fields that collide more often than not. But why is that? Why can’t we all just get along and center our efforts around delivering a better product, a top-notch Web site or a user-friendly interface. Everybody would benefit from an open-minded, reciprocal understanding. Right?"
The Designer Is Dead, Long Live The Designer!
"Usability maharishis, with idiosyncratic attitudes and blaring random opinions about design, irritate me. While the importance of their field has been acknowledged for some years now, it is simply a sham to assume or suggest their role is principal (or sole) in shaping user interaction. In this column I will go as far as stating the contrary: design comes first, usability second."
CSS Typography
"Traditional typography is a very subtle and beautiful form of design, with thousands of variations and choices. Unfortunately, with CSS that’s not quite the case. Don’t lose hope just yet, though. CSS can do more than you might think."
Alien Typography
"Many of the principles that the print typographer has learned and holds sacred, are no longer true when the medium is a neon sign, a television title sequence or a Web page. Text that is not printed on paper takes them into alien territory."
The Evolution of Corporate Web Sites
"It’s fascinating to see how corporate websites have evolved over the years, from the early days of magazine-style brochureware to the most recent trends of two-way Web interfaces."
Simplicity vs. Innovation
"This article presents a look at the more limited field of usability and offers a way around the simple = dull equation that threatens good usability design."
Just Build It: HTML Prototyping and Agile Development
"Chances are, you use some sort of prototyping to illustrate Web interfaces for clients and stakeholders, and rely on those prototypes for approval. Whether you’re using visual design comps, wireframes, site maps, process flows, page description diagrams (PDDs), or a combination of these, your goal is always the same. You want to mitigate the cost of making changes."
Visual Architecture: The Rule of Three
"The object of this article is to discuss the universal language between words and visual objects (picture, illustration, graph, area boxing, layout, titling) and can be extrapolated to advertising, print, TV, Flash development and CD-ROM productions."
The process of redesigning a logo
"Who do I actually design the logo for? Who is their audience? What does that audience feel comfortable with? And so on... The answers to such questions are fundamental in order to create a decent and representative logotype."
Principles and Elements of Design
"In this article we will be reviewing many of the topics previously covered, but we will be doing so using actual Web sites so that we can see how everything we have been talking about fits together."
Packaging Design for Web-based Products
"I’ve taken it upon myself to dive deeper into the principles and lessons of packaging design in order to learn what lessons can be applied to the world of web applications. Here’s some of what I’ve found so far."
Typography and Web Advertising: Making Every Opportunity Count
"First, web ads must have content that matters to the target. Nothing is more important than a message that is fundamentally a mirror in which the target will recognize himself. Second, the presentation of the ad must be compelling, as well. Simplicity of presentation is critical, as well as visual difference. Our job is to craft a design that is distinct from its surroundings, and therefore noticeable."
Breathtaking Typographic Posters
"This post showcases over 50 breathtaking typographic posters designed by artists across the globe. We feature Oriental, Iranian, Hebrew, Japanese, Chinese and Russian typographic posters as well as a number of further references."
15 Excellent Examples of Web Typography
"Some of the examples mimic the typography of print, while others actually leverage web technology, smart CSS and delicious HTML to make their pages not only aesthetically pleasing, but legible, user-friendly and easily navigable."
15 Great Examples of Web Typography
"Last year I published 15 Excellent Examples of Web Typography, and owing to its popularity and people’s sateless appetite for lists, here are another 15."
16 Blogs With Unconventional Layouts
"I’d like to tackle one of the new directions in blog’s layout that I consider using in my new design - it’s the trend of featuring only the latest article on the homepage while providing an easy access to a number of previous articles."
Dingbats Roundup: 16 Incredibly Detailed, Useful (and free) Dingbat Fonts
"Personally, I love dingbats because (most of the time) I convert them to vectors in Illustrator and use them as very large elements in some cases. Here are some dingbat fonts that I thought you might enjoy."
13 Signs You’re A Bad Graphic Designer
"I have compiled 15 tell tale signs that you may still be considered a (don’t quote me) bad graphic designer."
Killing Some Bad Layout Conventions
"In this article I’ll examine a couple of these inferior Web design conventions and expose their flaws. I’ll then suggest more effective alternatives to these conventions and explain why they work better."
Creating A Successful Online Portfolio
"There are some common mistakes designers make in their portfolios. Let’s review these common pitfalls first to make sure you don’t fall into one of these traps."
DaFont
"Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity."
Steps to Becoming a Freelance Web Developer
"After the popularity of my previous going solo article, I thought I’d lay out some more specific ideas on how to become a freelance web developer. Naturally, these are focused on web development, but could just as easily be applied in whole or part to other industries."
Designing Interfaces: Patterns for Effective Interaction Design
"Features real-live examples from desktop applications, web sites, web applications, mobile devices, and everything in between."
Web Typography Style Guide
"This guide covers the basics of good typography on the web, explaining theory behind font choices, and the details of providing accessible and good looking text."
The One Page Graphic Design Portfolio Guide
"I think this portfolio website format is great for several reasons and I will give you tips on how to create your own one page graphic design portfolio and how you can market it for free."
The Logo Design Process of top graphic designers
"This article will reveal exactly how 75 top designers of todays modern age create their logos - a way previously untold or explored - the way they don’t want you to know about. It will show the design process that these designers go through to get to their final logo design."
The Funkiest Ampersands You Have Ever Seen
"Looking through large collections of typefaces highlights some real creative representations of the ampersand, many of which revert back to the traditional method of displaying the word ‘et’, others head for a more abstract approach. Here is a collection of possibly the funkiest ampersands you have ever seen!"
Book-style Chapter Introductions Using Pure CSS
"Today’s tutorial will show you how easy it is to create book-style chapter (article, whatever) introductions using nothing but pure CSS — no XHTML was harmed in the making of this tutorial."
The Incredible Em & Elastic Layouts with CSS
"This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm."
Vertically center content with CSS
"A convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative."
Grid and Column Designs
"If you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites. These sites show how grid layout can be applied on various type of sites — whether a massive content editorial site or just a personal blog."
30 Fonts That ALL Designers Must Own
"There are 15 serif fonts and 15 sans-serif fonts. These fonts will last you your whole career! A brief description of what each font is best suited for is provided however are not limited to this."
Questions to Ask Yourself When a Design is Coming Up Short of Your Expectations
"In this post we’ll take a look at some questions to ask yourself when a design is not living up to your expectations. These questions focus primarily on the design, not necessarily the effectiveness of the site overall, the usability, or the content."
Web 2.0 for Designers
"There are six trends that characterize Web 2.0 for designers. In this introductory article we’ll summarize each of those trends and give brief examples."
Inspiration vs. Theft: The Thin Gray Line
"As long as web browsers come with the "view source" button, plagiarism will always be a problem. The madness does not end there, however. It goes much deeper than most people tend to realize - straight to the root of original art, design, and concepts."
Better Web Forms: Redesigning eBay's Registration
"The eBay registration form isn’t so unusable that it brings sign-ups to a screeching halt, but it is rough enough to justify some tweaking."
Web Design 101: Floats
"This article will introduce you to the basics of float, explain how to contain a float when the floated element is larger than the size of its container, and give you example layouts created with floats."
Web Design 101: Positioning
"Let’s shed some light on the shadowy mysteries of CSS positioning. If your CSS skills are limited or even moderate, you will learn what you need to master positioning."
Color: An Investigation
"We will explore the subject of color, including the historical underpinnings of contemporary color theory, key color theories, theorists who have been influential over the past few millennia, and the current state of color—including color in digital environments."
Reading Design
"With so many specialists working so hard at their craft, why are so many pages so hard to read? Unabashed text enthusiast Dean Allen thinks designers would benefit from approaching their work as being written rather than assembled."
Paper Prototyping
"With interfaces becoming more complex, and development schedules growing shorter the best prototyping tools may be simpler than you think."
Home Page Goals
"...home pages are anxiety-inducing for companies. The home page is your first impression. And like the old saying goes, you only get one chance. So home pages themselves have a unique set of design goals."
Designing For Flow
"Flow, as a mental state, is characterized by a distorted sense of time, a lack of self-consciousness, and complete engagement in the task at hand. For designers, it’s exactly the feeling we hope to promote in the people who use our sites."
Design by Metaphor
"If a client says he wants his new auction site to be “like eBay,” what does that mean? An artist hears “It has a tacky color scheme.” A developer hears “It’s scalable to 20 million users.” A user hears “It has feedback ratings on all sellers.”"
Contrast and Meaning
"Design is largely an exercise in creating or suggesting contrasts in an effort to convey meaning."
Usability experts are from Mars, graphic designers are from Venus
"Usability mavens like Jakob Nielsen think the web is an ill-used database. Graphic designers like Kioken think it is a fledgling multimedia platform. Could both groups be right? New ALA author Curt Cloninger explains why usability experts are from Mars, graphic designers are from Venus. This one’s a hottie."
Typography Matters
"It’s a style thing. It’s a usability thing. It’s a tricky thing for large content sites and a step up for independents. It’s typographically correct punctuation on the web, and ALA’s Erin Kissane makes the case for it."
Good Designers Redesign, Great Designers Realign
"Too often, look and feel, color scheme, layout, and identity are presented as solutions to problems discussed in these conversations long before regard is given to other less-aesthetic issues that may very well be the root of the problem. The old warning against treating symptom rather than cause comes to mind."
Art Direction and the Web
"If design lives in the details, art direction’s turf is the Big Idea. Stephen Hay introduces the principles and techniques of the art director, and shows how art directional concepts can shape memorable user experiences."
The Bathing Ape Has No Clothes (and other notes on the distinction between style and design)
"Why has the level of discussion in “design forums” degenerated so quickly? Maybe because they’re not populated by “designers.” Greenfield explains the difference between Stylists and Designers—and why that difference matters so much."
Setting Type on the Web to a Baseline Grid
"Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts."
The Trouble With EM ’n EN (and Other Shady Characters)
"More than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography. HTML specs, grammatical rules, browser bugs and character encoding—it’s all here, in this famous and much-bookmarked ALA article."
Multi-Column Layouts Climb Out of the Box
"Create an elastic multi-column layout of equal height."
Automatic Magazine Layout
“Finding an attractive way of displaying any two, three, or four images together (regardless of shape and size) has always been difficult without manual resizing or cropping.”
Thinking Outside the Grid
"There is a new kid on the block, and her name is ‘I’ve never designed with a table in my career.’"
Cross-Column Pull-Out Part Two: Custom Silhouettes
"The cross-column pull-out gave us a new technique for marking up a layout with a pull-out positioned between columns. Now we examine a variation of the technique for wrapping around the edges of a non-rectangular image positioned between columns."
Cross-Column Pull-Outs
"Print designers like to wrap text around images that sit between columns. Now you can, too. Daniel Frommelt takes us where no web layout has gone before."
Creating Liquid Layouts with Negative Margins
"Two- and three-column, liquid page designs with header and footer are easy to dash off using old-school HTML table layout methods. Designing them in CSS is trickier, and can sometimes even require you to structure your page’s content elements in a specific (and undesirable) order. Negative margins to the rescue! Ryan Brill whips up two quick CSS layouts to demonstrate the power of negative thinking."
Dynamic Text Replacement
"Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow."
Power To The People: Relative Font Sizes
"Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution."
Exploring Footers
"With old-school table layout methods, vertical positioning is a piece of cake. With CSS layout, it’s a piece of something else. New ALA contributing writer Bobby van der Sluis shows how to regain control of footers and other vertically positioned layout elements via CSS, JavaScript, and the DOM."
Elastic Design
"Not quite liquid, yet not fixed-width either, Elastic Design combines the strengths of both. Done well, it can enhance accessibility, exploit neglected monitor and browser capabilities, and freshen your creative juices as a designer. Patrick Griffiths shows how to start."
Faux Columns
"It’s a beginning CSS designer’s nightmare and a frequently asked question at ALA: Multi-column CSS layouts can run into trouble when one of the columns stops short of its intended length. Here’s a simple solution."
CSS Design: Size Matters
"Everything you think you know about controlling text sizes on the web is either wrong, or else it doesn’t work. In this much-bookmarked ALA classic, UI designer and CSS Todd Fahrner provides a way out of the mess by showing how to make CSS font size keywords work – even in stubborn browsers that get CSS wrong."
On Creativity
"As designers, we’re wrongly perceived as custodians and exponents of creativity. This matters because business currently overvalues creativity. To avoid the inevitable backlash, we must lead our clients’ perceptions."
Design is in the Details
"Stop worrying about how good a designer you are, and start worrying about the myriad tiny details that can elevate your work from passable to near-perfect."
50 Ways to Become a Better Designer
"Being a successful creative has a lot to do with the way you work. Sure, you can't teach good design, but it never hurts to learn a few new tricks, or simply make the most of your talents."
Web Design-isms: 7 Surefire Styles that Work
"Glossy buttons, ornamental backgrounds, futuristic interfaces. We’ve all been guilty at one time or another of committing the 7 design-isms in this article from Larissa Meek. But that’s okay, she tells us, they’re classics for a reason."
34 Places to Get Design Inspiration - Online and Off
"We’ve compiled a list, online and off to serve up everything from logos to icons to art to fashion to just inventive ideas to get your mind ticking."
35 Designers x 5 Questions
"35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world."
Elements of Great Web Design: The Polish
"When I put together designs I usually do so in two phases - Layout and Polish. During the layout phase I place the main objects on the page usually finishing with something that looks relatively complete. In the second stage - the Polish - I go over the design and adjust colours, type treatments, shadows, layers, and generally clean it all up."
Whitespace
"Whitespace, or negative space is the space between elements in a composition."
9 Essential Principles for Good Web Design
"I've put together my 9 principles for good web design, it's only my opinions and I've tried to link off to more reading on subjects so you don't only hear my voice."