Smashing Magazine we smash you with the information that will make your life easier. really.
White Space and Simplicity: An Overview
January 12th, 2007 in How-To | 29 Comments
Last year we’ve seen a lot of simple, even minimalistic designs, which impress not with the amount of presented information but with the way the information is actually presented. Complex layouts are giving way to simple 2-col- or 3-col layouts, which usually have large amount of white space without any content whatsoever.
Indeed, 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. Recently Mark Boulton has written an insightful article about Whitespace and its importance in web design. Very well written, it describes in a very simple, but clear way, how to deal with white space in practice and how to use it in your web-projects. We’ve collected some more articles on this topic. So what do we have?
Simplicity:
- A Culture of Simplicity
Simplicity from a philosophical standpoint. - Keep it simple
Why does a page look complex? A brief article about the “exciting design vs. simple design”-question. - Keep it simple, stupid!
Describes the importance of simplicity regarding the way human brain works. - Simplicity: The Cobbles of the Designer’s Path
Stepheen Van Doren about wrong and correct use of simple solutions. - Simplicity Is Highly Overrated
Don Norman criticizes that the simplicity and minimalism lead to less functions and decrease the total performance of products. - The Beauty of Simplicity
Google is simple. But how did its developers achieve it? - The Complexity of Simplicity
Luke Wroblewski describes a complex path to simplicity, its features and reasons, why the simple solutions are more complex than complex solutions. - The Laws of Simplicity
John Maeda presents 10 excerpts from his book, in which he talks about rules and principles of ‘Simplicity’. - Wikipedia: Simplicity
Explains what simplicity is and related information about the topic.
White Space (Negative Space):
- Design Matters: White space
About the potential power behind Negative Space. - ALA: Whitespace
An excellent introduction to the theory and use of whitespace, by Mark Boulton - Design Psychology
An insight in the psychology of web design. Among other information White Space is analyzed. - Developing the Invisible
Luke Wroblewski gives examples of situations, in which white space is essential and explains, why it is indeed so significant. - Finding Information on the Web: Does the Amount of Whitespace Really Matter?
How important is White Space? “Whitespace may be better (at least from a user’s preference) than none or too much”. - Give me my web space
Molly E. Horzschlag gives guidelines, which can help you to reduce the complexity of your web-sites and improve its readability. - Negative Space Tutorial
This tutorial explains, how you can use White Space efficiently. - On White Space in Graphic Design
Keith Robertson about fields and areas, in which Negative Space dominates - primarily graphic design. - Page Layout and Design for Digital Scrapbooking
Carla Rose about the importance of White Space. - Psychology Studies on Human Interaction
Studies in psychology confirm: White Space improves the perception of information by 20%. - The Importance of White space for Legibility
This study compares 4 White Space Layouts and presents results about the influence of White Space in design. - The value of white space
Offers a detailed introduction in the theory of white space, with examples. - Typography and White space
White Space in practice: how can you guarantee an optimal legibility with CSS? - Under The Loupe #1: White Space
Jason Santa Maria: “Empty space serves a purpose and supports the visual integrity of a layout.”
Simplicity and White Space in Practice:
- Global White Space Reset
Global Padding/Margin Reset in CSS-files can be used as a template for your web-projects. - The Best Minimalist WordPress Themes
A collection of hand-picked Wordpress-Themes, which impress with their simplicity, clarity and readability.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
Miles (January 13th, 2007, 1:23 am)
I really enjoy every Smashing Mag post, this one is very dear to me, I am working on designing my new homepage and modifying a WP template to make it more user friendly (and eye friendly).
Great post again!
Miles
Link [www.mileswilliams.net]
Uzbek (January 15th, 2007, 7:16 pm)
I got a feeling that you guys reading my mind. Everything I want to learn or need to develop/enhance my project pops on here next day.
Great list and great work.
Uzbek
- Link [www.uzforum.com]
Pablo Rosales (May 6th, 2007, 10:28 am)
I’m new to smashing magazine, but i could keep clicking the previous posts and never stop saying SMASHING!
Jeff (August 31st, 2007, 3:49 am)
awesome, thanks for these they are very useful!
Budhi Nandika (September 20th, 2007, 2:24 pm)
Very useful informations, most people like simplicity in design, layout and more user friendly.
I’ll use all the articles for my projects and to redesign my own site.
Thank you and keep these great work.
vreme (September 23rd, 2007, 8:47 pm)
Yes it shure has to be simple but the problem is when designing a website for companies they all think that it MUST be complicated with a lot of flash animations etc. How to tell someone that the simpler the better if they all think they know everything?
Bodrum (January 8th, 2008, 7:59 am)
I got a feeling that you guys reading my mind. Everything I want to learn or need to develop/enhance my project pops on here next day.
jd (February 8th, 2008, 7:11 pm)
i can’t imagine live whitout smashing!
sandie sørensen (March 10th, 2008, 7:23 am)
nice articles- but I would much rather have seen a lot of examples on the minimalistic design with lots of whitespace…
I’m very visuel in that way…