Monday, November 26, 2012

2012 campaign for Saks Fifth Avenue: flowchart

http://new.pentagram.com/2012/11/new-work-shop-saks-campaign/
The Fall 2012 campaign for Saks Fifth Avenue features humorous flowcharts helping shoppers decide what to buy.
Shopping and gift-giving are all about choices. Should you give her shoes or earrings? Do they want something for the house or a present that’s more personal? And how about a little something for myself?
Pentagram’s new fall campaign for Saks Fifth Avenue attempts to diagram this complex decision-making process in a series of humorous flowcharts. Designed by Michael Bierut and Katie Barcelona with Sabrina Friebis Ruiz, the graphics appear on shopping bags, print promotions and advertising for the luxury retailer. In developing the campaign, Pentagram worked once again with Saks Executive Vice President and Chief Creative Officer Terron Schaefer and his creative team led by Christopher Wieliczko and Andrew Winton.
The flowcharts are used as patterns on shopping bags.
Each flowchart starts with a problem posed in a circle (“Uh oh, is that today?”) and branches off at different decision points as shoppers consider their options, winding through various stages of deliberation (“He’d like to have…. Jeans that aren’t ‘Dad jeans’”) or distress (“Think quick… I think I need an expert”). The paths all lead to Saks, represented by the store’s square logo, also designed by Pentagram.
The campaign complements the grid-based, black-and-white brand identity we designed for Saks in 2006, as well as the look and feel of previous campaigns we’ve developed for the retailer, which are often playful, usually highly graphic, sometimes directional, and may involve games and puzzles.
Project Team: Michael Bierut, partner-in-charge and designer; Katie Barcelona, designer; Sabrina Friebis Ruiz, design assistant.

Sunday, November 11, 2012

10 Resources for When You Need Help with CSS


http://vandelaydesign.com/blog/css/resources-for-help/

Stack Overflow

Stack Overflow
Stack Overflow is sort of a combination of social media and a forum. It is a niche specific site focused on programming and development (CSS is just one of the topics being discussed). The purpose of Stack Overflow is to ask and provide answers to questions for programmers. Anyone can post a question (you don’t even have to create an account) and then other members will be able to provide answers to your questions. Other users can then vote up or down on the various answers so it’s easy for everyone to identify the best ones.

CSS-Discuss.org

CSS-Discuss.org
CSS-Discuss is a large and very active mailing list for CSS-related issues. You can either join the list to post and answer questions, you can browse through the archives in search of a particular issue, or you can browse through the wiki and get involved there if you have something to contribute.

CSS Cheat Sheet

CSS Cheat Sheet
The CSS Cheat Sheet is a great reference to have on hand in anticipation of those times when a little extra help might be needed. It is a one-page PDF document that includes all selectors and properties.

CSS Shorthand Cheat Sheet

CSS Shorthand
If you’re looking for help in reducing the size and optimizing your css files, the CSS Shorthand Cheat Sheet is an excellent resource. With this one-page PDF document you’ll be able to create more efficient CSS code with shorthand techniques.

Web Developer Add-On

Web Developer
Chris Pedrick’s Web Developer add-on provides a great deal of functionality for your development in general, and CSS is just one of the specific aspects. Using the toolbar, you can do such things as identify all the styles that affect an element, view the CSS source code, see the sizes of block elements, and disable CSS to see how your pages degrade.

Firebug

Firebug
Firebug is another add-on that puts a great deal of CSS information and resources at your fingertips. With firebug you can edit, debug and monitor CSS, in addition to HTML and JavaScript in any webpage. For anyone working with CSS, Firebug is a great tool to quickly edit and test your code, particularly when you’re experimenting and you need to see how your changes will impact the site.

CSS-Tricks

CSS-Tricks
CSS-Tricks is a popular blog, which many Vandelay Design readers probably subscribe to. At CSS-Tricks Chris Coyier publishes articles and tutorials that cover all kinds of aspects of CSS. The archives contain plenty of posts that will be helpful to anyone looking to learn more about CSS. In addition to Chris’s articles, CSS-Tricks also includes a forum that is pretty active where you can get help.

Using CSS to Do Anything: 50+ Creative Examples and Tutorials

Noupe
Noupe published a post earlier this year with 50 examples of things you can do with CSS. If you’re looking for some new ideas this is a great resource, and if you’re looking for help on a specific issue, there may be a resource here that is just what you need. Included in the post is help for styling lists, working with forms, footers, image replacement, image sprites, other image techniques, text and link effects, navigation, galleries, drop caps, rounded corners, blockquotes, and more.

CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices

Noupe
This is another helpful post from Noupe that focuses on one of the most common problem areas for working with CSS, layouts. If you’re experiencing issues getting a layout to work the way you want it to, most likely there is something here that is just what you need.

Top Reasons Your CSS Columns are Messed Up

Warspire
Warspire provides help for common issues in dealing with columns and layouts. The post covers the most likely problems and provides the necessary fix, including the code to be used.

CSS positioning

http://www.alistapart.com/articles/css-positioning-101/

http://www.w3schools.com/css/css_positioning.asp

https://developer.mozilla.org/en-US/docs/CSS/position

Relative positioning
To position an element relatively 20px from the top and left of its normal position, the following CSS is used.
#two { position: relative; top: 20px; left: 20px; }
Note how the other elements are displayed as if "Two" were in its normal position and taking up space.

Absolute positioning

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document.  In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.  The absolutely positioned element is positioned relative to nearest positioned ancestor.  If a positioned ancestor doesn't exist, the initial container is used.
In the example below, the blue ancestor div is positioned relative (so it becomes the nearest positioned ancestor) and box Two is positioned absolutely:
#ancestor { position: relative; background: #ddf; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }


If #ancestor had not been positioned relative, box Two would have appeared relative to the upper left corner of the page.

Fixed positioning

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.  This is often used to create a floating element that stays in the same position even after scrolling the page.  In the example below the "One" box is fixed 80px from the top of the page and 20px from the left:
#one { position: fixed; top: 80px; left: 20px }
When viewing the top of the page, the position box appears in the upper left, and after scrolling, it remains in the same place relative to the viewport:
fixed-1.png
fixed-2.png


http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/


inspiration: Swiss Typography













http://www.tm-research-archive.ch/

Wednesday, October 31, 2012

css3: Hover Effect

http://blog.templatemonster.com/2011/12/22/css3-hover-effect-tutorials/

http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

http://tympanus.net/Tutorials/OriginalHoverEffects/

More about WEB effect and tutorials:
http://tympanus.net/codrops/category/tutorials/

Menu Hover Transition to change the color

CSS3 Tutorial for Hover Transition to change the color
http://www.imajine.in/tutorials/css/texthover.aspx

CSS:

a:link {
color:#666666;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
-webkit-transition-property:color, text;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-in;

-moz-transition-property:color, text;
-moz-transition-duration:0.5s;
-moz-transition-timing-function: linear, ease-in;

-o-transition-property:color, text;
-o-transition-duration:0.5s;
-o-transition-timing-function: linear, ease-in;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
color:#009999;
}

SNS Icons




Monday, October 29, 2012

Design Process Report: Project 2 [Website]


Cover
     (Title of the project, Dates (October, 2012), Designer’s name)

Table of Contents

Purpose

Target Audience

Project Recommendations

Research (3 websites)

Contents Outline

Contents of Area

Information Architecture (flowchart)

Wireframes (each menus)

Design Proposal 
     1. Visual Results: apply to iMac, iPad
     2. Final Design: captured screen for each pages
Design Process 
     (Pencil sketch, Refine sketch, Design Development(computer))

Credits

Monday, October 15, 2012

social widgets


FACEBOOK: http://developers.facebook.com/docs/plugins/

TWITTER: https://dev.twitter.com/docs/embedded-timelines

twitter.com/about/resources/widgets

FLICKR: http://www.flickr.com/badge.gne


-----------------------------------------------------------
http://blog.hostbaby.com/2011/10/10-widgets-to-make-your-website-more-social/


10 Widgets to Make Your Website More Social

Everybody loves web widgets: mini web applications that can be embedded almost anywhere. But with so many widgets out there, it's hard to know which will enhance your website and engage your audience. Below are some of the most popular and social widgets available.
Note: Embedding a widget involves 'cut, copy, and paste' functions and a website that allows you to embed HTML code. If you are using HostBaby's Site Builder, you can embed any of these widgets in your widget sidebar or directly on a page.

Facebook's Like Button

The Like allows your visitors to see how many people "Like" you page. When clicked, it also sends a status update to the visitors' Facebook page so their friends can see what they 'Liked.' This is a great and easy way to increase your visibility on Facebook. You can set up the Facebook "Like" button here.

Twitter Widgets

Twitter offers 4 widgets you can put on your website. The Profile Widget Displays your most recent Twitter updates, the Search Widget displays the twitter search results of your choosing, the Favs widget shows off your favorite tweets and the List Widget allows you to put your favorite Twitter users in a single feed. You can set up any of the four here.

Widgetbox RSS Widget

This Widget allows you to syndicate any blog feed right on your website. This could be your blog or simply a blog that you think your visitors will enjoy. This is a great way to constantly refresh your site with new content without lifting a finger.Build a RSS Widget here.

Google +1

Adding a +1 button allows your fans to give you a boost in search ranking (the boost is mostly noticible within the visitors' Google network of friends, but that's not a bad thing). Clicking the +1 also updates your Google+ status. You can get theGoogle +1 button here.

StumbleUpon Badge

Tap into a the rabid and numerous StumbleUpon users by encouraging them to 'like" your page. The more people that like it, the more people will see it.StumbleUpon serves up random webpages based on user preferences. Warning: It's very addictive. StumbleUpon Badge
StumbleUpon also just added a new widget that will showcase your favorite 'stumbled' websites. You can get that here.

Flickr Slideshow

If you use Flickr (or even if you don't) you can embed any Flickr slideshow on your site. Simply navigate to the Flickr slideshow you want to embed, click the share menu. From there, grab the embed code or click "customize this HTML" if you want to specify the size of your slideshow. Grab the code and drop it into your website.

YouTube Videos

Never underestimate the power of video to make your website come alive. Sharing YouTube videos on your website will increase your views and hopefully your video "likes". Don't forget to encourage people to subscribe to your YouTube channel. In  order to embed a YouTube video on your site, simply click the 'share' button located below the YouTube video in question and then click "embed." Copy the code and then paste it on the page you want the video to appear.

PayPal Donation Widget

Why not give your fans the opportunity to give you money for all your hard work? If you have a PayPal account, setting up a donation button is easy. You'll find the widget creator under merchant services in your account at www.paypal.com. Don't forget to send contributors a nice thank you note.

Wufoo Forms

With Wufoo forms you can create a submission or booking form, a survey, quiz or a questionnaire and embed it on your website.Go to wufoo.com to get started.

USTREAM

For the ultimate social experience set up a USTREAM feed and talk to your fans live on your website. USTREAM allows you to host live video on your website. Schedule a talk, concert, or performance and stream it on your website. Visitors will be able to interact with you live. You can embed any USTREAM channel on your website by using the embed button located beneath the video. www.Ustream.tv
Do you have a favorite widget you'd like to recommend? Let us know in the comments below.

Modifying Your Navigation

Navigation Menu: Vertical or Horizontal

http://proquestcombo.safaribooksonline.com/book/web-design-and-development/9780133006018/8dot-using-styles-for-layout/ch08lev1sec5#X2ludGVybmFsX0ZsYXNoUmVhZGVyP3htbGlkPTk3ODAxMzMwMDYwMTglMkZjaDA4bGV2MXNlYzU=

Perfect Full Page Background Image



http://css-tricks.com/perfect-full-page-background-image/


<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 
 <title>Full Page Background Image | Progressive</title>
 
 <style>
  * { margin: 0; padding: 0; }
  
  html { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
  }
  
  #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
  p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
 </style>
</head>

<body>

    <div id="page-wrap">
           <p>Pellentesque habitant morbi tristique senectuss</p>
</body>

7 Key Principles That Make A Web Design Look Good

7 Key Principles That Make A Web Design Look Good


By Juul Coolen

Everyone and their grandfather (and dog) seems to have a website these days. The Web is getting more crowded by the day, with literally dozens of websites being added as you read this article. It is becoming harder and harder to get noticed among the masses.
“Fortunately” for us designers, not everyone seems to understand what makes or breaks a Web design. Granted, Web design is to a large extent a creative process and can therefore be called more art than science. But because it is intrinsically a medium of presentation, some rules (or at least principles) apply. By following some simple pointers, anyone should be able to create a visually pleasing design and take one step closer to fame. Okay, it’s not that simple, and talent and experience do matter, but anyone can turn their home page into something prettier within mere minutes.

substraction
So what makes something pretty? It is not Flash. Not to say that Flash has no merit, but Flash alone doesn’t make a design good; some nasty Flash websites are out there. Also, one doesn’t have to be a great illustrator to make appealing designs. Instead, look at Web design as a symbiosis of different elements. No single element counts the most; rather, the sum of the elements makes a design look good.
These elements are the 7 key principles that make a Web design look good:
  • Balance,
  • Grid,
  • Color,
  • Graphics,
  • Typography,
  • White space,
  • Connection.
[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]

1. Balance

Balance is all about ensuring that your design does not tip to one side or the other. It is like the balance of weight in achieving symmetry or asymmetry.

Example

Look at the dog in the header graphic of Khoi Vinh’s Subtraction website below. I took this example from The Principles of Beautiful Web Design by Jason Beaird. Jason points out how the cross to the right makes up for the added visual weight that the dog provides on the left. It is a small but not insignificant detail. See for yourself by hiding the cross with your hand.
This is what we call asymmetrical balance, and this is what balance is about. If you’re not careful about how you lay things out, the design will become unbalanced rather quickly. You can manipulate the visual weight of a design in many ways, such as with color, size and the addition or removal of elements. If you were to make the cross, say, a vibrant orange, it would become heavier and perhaps throw the layout off balance again. Achieving asymmetrical balance is an especially delicate matter that takes time to fine-tune and a somewhat trained eye to really pull off.
Here below is another example of symmetrical balance, this one by The First Twenty. Although the header graphic is asymmetrically balanced (can you spot how it’s done?), the rest of the design lower down has symmetrical columns. Asymmetrical balance might be harder to pull off, but it tends to make a design more playful.
You will find that every design you think looks good has a well-constructed balance underlying it. And every design featured here scores high on each of the seven principles we discuss. So take a minute to scroll up and down and see for yourself if they all pass muster.

2. Grid

The concept of grids is closely related to that of balance. Grids are a series of horizontal and vertical rulers that help you “compartmentalize” a design. Think of columns. Columns improve readability, making a page’s content easier to absorb. Spacing and the use of the Rule of Thirds (or similar Golden Ratio) make everything easier on the eye.
The Rule of Thirds and Golden Ratio account for why sidebars, for example, are usually about a third of the width of the page and why the main content area is roughly equal to the design’s width divided by 1.62 (equalling phi in mathematics). We won’t get into why this is, but it does seem to hold true in practice. It is also why the subject in professionally taken photographs is usually positioned not in the middle but at the intersection of an imaginary nine-square grid (three by three, with two horizontal and two vertical lines).

Example

The grid lends itself particularly well to minimalist designs. 5 Thirty One by Derek Punsalan shows why:
While the design is not visually impressive in itself, the clear strict structuring of elements makes it easy on the eye. The left column is roughly twice the size of the right sidebar, which just makes sense and is something to think about when creating your own designs.

3. Color

What if you changed the base red on the The First Twenty website (above) to lime green? Would it look good? Most likely not. Because it does not belong to the same color palette (and of course lime green isn’t the easiest color to work with). Websites such as ColourLovers exist for a reason. You can’t just pick your colors Rambo-style, guns blazing. Some colors go well together, others don’t. A lot of theories on colors and their combinations exist, including conventions on monochrome and contrasting schemes, but a lot comes down to common sense and having afeel for it.
Find out for yourself what works together. Soak up as many website designs as possible, such as those featured on any of the many CSS showcase websites (like Best Web Gallery), to get a feel for how colors interact with each other. Pick two or three base colors at most for your design, and then use tints (which are lighter, mixed with white) and shades (which are darker, mixed with black) of these base colors to expand the palette where necessary.
Picking nice colors is as important as picking the right colors (that is, the right colors for the job). A Web design for a cozy little restaurant would do well with “earthy” tones: reds, browns, etc. Of course, there is no such thing as a surefire recipe. Every color sends out a message, and it is up to you to get the message right.

Example

Bence Kucsan’ Quommunication website has a color scheme style of his own. It’s mainly monochromatic (tints and shades of a single color) and achromatic (black and white) with a color (red) to stand out:
The black and white conveys chic and professional, while the red adds the spice that makes certain elements stand out and keeps the design from looking dull; of course, more than just red makes this design interesting. By the way, one company in particular popularized this style.
Speaking of color, WebDesigner Wall by Nick La is pure bliss:
All of those soft pastels make this design shine. At first glance, the color choices may look somewhat arbitrary, but when you look closely you notice a strictly defined color palette, which is necessary to ensure that all of the elements get along well. The website, and especially its background, also demonstrates a good combination of colors and graphics, which brings us to number four…

4. Graphics

Okay, great design doesn’t need fancy graphics. But poor graphics will definitely hurt a design. Graphics add to the visual message. Websites like WebDesigner Wall have impressive illustrations, while others are understated.

Example

Tim van Damme uses only a handful of graphics on his website Max Voltar, but he implements them with the greatest thought and care. A non-intrusive background image and a sophisticated crown are two of the graphics. Visually, they are not overly impressive, but they all add to the look and feel of the website, and nowhere is one out of place.
For some time now, Max Voltar has had a different design than the one shown above. But for the two months that this one was online, it was easily one of my favorites. Because of this and because its use of graphics is so exemplary, I picked it over the lastest version.
Rogie King’s Komodo Media is a lot more graphics-heavy, perfectly executed from both a technical and thematic standpoint.
You may not be a great illustrator or photographer, but that doesn’t mean you can’t put great graphics on your website. Some basic Photoshop skill, possibly some stock images and great taste are all you need. Try to make the graphics go well together, and make sure they embody the style you are aiming for. We are not all gifted with the same natural ability, though. You can pick up some things by learning from others, but sometimes you just have to pick the style that suits you best (like a clean style if you are not the greatest of illustrators).

5. Typography

The art of type is a tricky subject to talk about because it encompasses so many elements. While it can be regarded as a branch of design, one can spend a lifetime mastering all of its aspects. This is not the place to provide a complete typographic reference, so we will limit our discussion to what will benefit you in the short term.
Web typography is handicapped compared to print typography. The biggest difference is our lack of complete control over the appearance of type on the Web, due to its dynamic character. Obviously, dynamic rendering has its strenghts, but Web designers have little control over the results, at least for now. Missing fonts on the user’s computer, differences in browser and platform rendering, and generally subpar support in CSS make Web typography a daunting if not frustrating task. But while we may have to wait for CSS 3 for Web typography to reach its full potential, we have the means now to make it look interesting and, more importantly,pretty.

Font Stacks

There are several fairly easy ways to significantly improve your website’s typography, three of which we’ll cover here. One of them is font stacks.
Font stacks are just basic CSS. They let you define the order in which fonts should be rendered. To be precise, we are speaking of typefaces here, not fonts. For a good summary on this, please refer to Jon Tan’s Typeface != Font.
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
The property above will give the body copy the typeface of “Helvetica Neue.” This, however, requires that the user’s computer has that particular typeface installed. Macs nowadays come with Helvetica (Neue) pre-installed, but most Windows machines don’t.
The beauty of font stacks is that you can define “fallbacks,” meaning that whenever a defined typeface is missing, the browser simply looks for the next one in line. Of course, this means the design will not look exactly the same for everyone, and as such we lose some control yet again. But for those who do not want to resort to another solution (such as image replacement), this is the best that pure CSS offers at the moment (until the day we can comfortably use @font-face).
Wilson Miner uses the font stack we cited above. Helvetica Neue is an improvement of Helvetica. And while Arial is installed on almost every computer (at least on Windows and Mac machines) and therefore a popular choice for the Web, most designers prefer Helvetica to Arial. This way, you get the best of both worlds: Helvetica for those who have it and Arial in case Helvetica is unavailable.
Jon Tan uses another interesting font stack for his headings:
body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }
Only a relatively small number of visitors will see the headers in Baskerville, but that is not a problem. It gives the design an extra bit of character while not hurting anyone who doesn’t have it. Again, font stacks are not a perfect solution, but they do give you an advantage.

Measure and Leading

Measure is the length of lines, and leading is the height (or vertical spacing) of lines. In CSS, measure can be controlled by defining a width for the containing box (e.g. the paragraph element). Both affect readability. If the lines are too short or too long, users won’t be comfortable reading the content; one often sees this problem with fluid layouts. Between 40 and 80 characters per line seems ideal.
Leading can be increased (or decreased, if you really want to) by defining the line-height CSS property. Generally, a line height of 1.5 works well for paragraphs. This means that when the size of the text is 12 points, the height of the line becomes 18 points (12 × 1.5), which gives the text some breathing room.

Hanging Quotes and Bullets

A third way to improve readability is with hanging quotes and bullets. Rather than leave the text of bulleted lists and quotes with the default alignment, horizontally align it with the rest of the text on the page.
Tim van Damme uses hanging bullets for his latest redesign of Max Voltar:
We have added the red line to emphasize how all of the text has been horizontally aligned. By simply setting the padding-left CSS property of the bulleted list to 0, you can achieve the same result.
Pulling off hanging quotes, on the other hand, is not as straightforward. Most designers resort to a background image for quotation marks and then align accordingly, as done by Matthew Buchanan:
The hanging quotation mark here does not disrupt the flow of text. It’s a detail not often attended to but well worth the investment.

Print Rules That Do Not Apply

Print and Web are not the same. That seems pretty obvious, but a lot of people treat them as if they were the same. Print is fixed, and the Web is dynamic. Having complete control over how your Web design will look for everyone is impossible.
Vertical rhythm, proper justified text (with hyphenation and without rivers) and multi-column layouts are just a few of the features of print that are (almost) impossible on the Web. Thus, we have a lot to look forward to with CSS 3. CSS 3 will probably not be, however, a be-all and end-all solution, and it will likely be another few years before we can fully take advantage of it. We simply have to accept these differences for now: don’t look at the Web as an online version of print; rather, use the intrinsic potential of the Web to its fullest.

A Word About Image Replacement

What about image replacement (the technique of replacing fonts with images)? We’ve talked about font stacks, but aren’t they inferior to image replacement? Well, that depends on what you think is more important: being able to display the exact font you want or having dynamic, accessible and SEO-friendly content? Certain image replacement techniques have gotten pretty advanced, but they still aren’t as flexible as plain text. Image replacement lends itself well to headers and excerpts, but it is hardly a solution for body text.

6. White Space

White space, or negative space, has to do with what is not there. Like measure and leading, white space gives text some breathing room and spatial peace. You can make elements stand out by adding white space around them. Copy, for example, shouldn’t look cramped. To ensure readability, make sure paragraphs have sufficient padding.
Perfume ads — or any ad for a luxury product for that matter — are known for their use of white space… loads of it; and a serif typeface for good measure.

Example

I suppose it’s time for a shameless plug. The screenshot above is of my own website Shift (px). The design relies heavily on typography and white space. White space probably takes up about 50% of the page. White space is one of the easiest (because you aren’t really adding anything, are you?) and most effective ways to create a visually pleasing and readable design.
White space adds a lot of class to a design. Don’t be afraid to leave some holes open, even gaping ones. Inexperienced designers are tempted to put something in every little corner. Design is about communicating a message. Design elements, therefore, should support this message, not add noise to it.
Another good example of plenty of white space:
Kyle Meyer’s Astheria shows that not much is needed for a pleasing design. Some people may confuse “minimalist” with “simple.” But pulling off such a style is neither simple nor easy (even if one does not have to be great with graphics or illustrations).

7. Connection

“Connection” is a bit of a made-up term here, but it seems to be the best one for what we mean. Connection here refers to a Web design that has both unity and consistency. These two attributes demonstrate the profesionalism of a design (and thus its designer). They are very broad attributes. A design should be consistent in its use of colors, in its range of fonts, with its icons, etc. All of these aspects count; a design can look great and still suffer from inconsistencies.
When a design is inconsistent, its unity can be lost on the user. Unity is slightly different from consistency. Unity refers to how the different elements in a design interact and fit together. For example, do the colors and graphics match? Does everything contribute to one unified message? Consistency, on the other hand, is found between the pages of a design.
Unity is perhaps the more important of the two. Without unity, having a good design is hard. Inconsistency, however, may look a bit “sloppy” but may not make the design “bad.”
Of the seven principles addressed in this article, connection is the most important. Connection has to do with how all elements come together: balance, grid, colors, graphics, type and white space. It is sort of the glue that binds everything together. Without this glue, the design falls apart. You could have pretty type and a brilliant and meticulously chosen color palette, but if the graphics are awful or simply don’t match or if everything is crammed together without thought, the design will fail.
This is the hardest part of designing. It is not something that can be easily taught or necessarily be taught at all. A little natural ability and experience is required. But it is what it is, and it makes a design look good in the end.

Example

We praised Nick La’s WebDesigner Wall earlier because of its lovely graphics, but it is also a good example of connection. When you look closely at the graphics and the style in general, everything has a hand-drawn watercolor look to it: the articles’ images, the watercolored background images, the hand-drawn doodles and icons, the styling of the poll, and so on. The attention to detail makes this design excel.

Further Resources

Conclusion

Good Web design is not limited to the seven key principles discussed here. Aspects such as accessibility, readability and usability play a part, too.
This is the reason why Web design is so difficult. Getting your feet wet in design is easy, especially today, with so many content management systems, blogging tools and themes readily available. But truly mastering all of the facets of Web design takes time and, let’s be honest, talent. Having the ability to craft pretty designs is just one facet, but an important one.