Advertise here with BSA

Minimalist design is one of the most significant design movements of the 20th century and early 21st century. It isn’t the flashiest, or the most popular, but it arguably penetrated more fields than almost any other art or design trend. Everything from user interfaces, to hardware designs, to cars, to films and games, to the web and visual designs of today – all those fields and more were influenced by minimalism.

(Image by Jason Garber)

Your friends might not know what minimalism is, but chances are they’re currently using or viewing a minimalist design: a modern phone, a clean web or application interface, looking at a slick brochure or other graphically-presented information, sitting in a simple living space on a sleek sofa, and so forth.

The reason why minimalism penetrated so many fields yet is less known than, say, pop art or something, is because it’s more of a principle than a visual style. And since it is only a principle and direction of designing, designers outside of architecture and industrial design can apply and improve their designs as well – including many web and visual designers of today.

Okay, so minimalism is great and important and all. It’s not flashy but is more influential and widespread. Got it. So what the heck is minimalist design? Let’s find out, along with its roots and key figures. This article will give you a brief history of minimalist design, then offer some practical tips for use in your web and visual designs, and then showcase some examples of minimalist web design.

1. What Is Minimalist Design?

Minimalism is a design trend that started in the 20th century and continues today, most prominently through companies like Apple and various graphic and visual designers. A minimalist design is a design stripped down to only its essential elements.

The unofficial mission statement for minimalist design came from architect Ludwig Mies van der Rohe:

Less is more.

Another motto was from designer Buckminster Fuller:

Doing more with less.

There’s not much else to add to that, other than reiterating that minimalist design is more of a principle than visual design. It doesn’t matter if you’re designing a website, a flyer, a user interface, a piece of hardware, a house, or anything else – you remove the unnecessary (ie. can the design still function at a 100% level without it?) and keep only the essential elements.

2. Roots of Minimalist Design

Like with anything in life, minimalist design was influenced by certain things that came before it. Specifically, what influenced minimalist design was:

1. The De Stijl art movement
2. Architects like Van Der Rohe
3. Traditional Japanese design

I. De Stijl

(Image by Tom Rolfe)

De Stijl was an artistic movement in the Netherlands that started in 1917 and lasted till roughly the early 1930s. “De Stijl” is Dutch for “The Style”. The movement included painters, sculptors, architects, and designers.

De Stijl pushed for simplicity and abstraction by reducing designs only to its essential form and color, sticking to only:

• Horizontal and vertical lines
• Rectangular forms
• Primary values white, black, and grey
• Primary colors blue, red, and yellow

In addition to that, many of the elements or layers don’t intersect, letting each of them to be independent and not covered or interfered by other elements.

It doesn’t take a stretch of the imagination to figure out how De Stijl influenced minimalist design.

II. Van Der Rohe

(Image by seier+seier)

Ludwig Mies van der Rohe was a German architect who’s considered a pioneer of modern architecture, and his architectural style during post-World War I laid the groundwork for minimalist design. He has designed many landmark buildings, including Chicago’s Crown Hall and New York’s Seagram Building.

Van der Rohe strived for simplicity and clarity in his architectural designs by:

• Using modern materials like steel and plates of glass
• Having a minimal structural framework
• Including lots of open space

He is the one who popularized the term “less is more”, which as mentioned earlier, is one of the unofficial mission statements for minimalist design.

Like with De Stijl, the connection between Van Der Rohe and minimalist design is clear.

III. Traditional Japanese design

(Image by Tanaka Juuyoh)

Adding only what’s needed and removing the rest has always been a focus in traditional Japanese design. If you look at old Japanese architecture and interior design, you’ll see that there were very few flourishes, simple color and design choices, and clean lines and forms.

There is a connection between Japanese design and Japanese culture. Japanese culture is infused with Zen and simplicity. Everything from how food is prepared, to how it’s presented, to how it’s ate, to things like tea ceremonies and stone gardens – all place a focus on simplicity and focus to the activity at hand. Anything that isn’t essential to the activity is not included. Even traditional Japanese clothing like the kimono exude simplicity. There are practically no flourishes and decorations. Every element of the garment is designed with essential functionality in mind: freedom of movement, natural cooling, comfort, durability, and ease of putting on and off.

Naturally, minimalist designers would be influenced by traditional Japanese design; usually more so than much of traditional Western design such as Gothic or Victorian.

3. Brief History of Minimalist Design

Minimalist started in the early 20th century with architecture, roughly around the 1920s. Post-World War I architect Van der Rohe was one of the first prominent architects who used principles in his designs that came to exemplify minimalist design. The reason minimalist architecture started taking off was the availability of modern materials: glass, concrete, steel. Also, standardized ways of building were forming, which helped to more effectively design and build minimalist buildings. The trend continued through the mid-20th century, with notable designer and architect Buckminster Fuller (more on him below) designing domes using simple geometric shapes that still stand and look modern today.

The focus on simplicity spilled over into painting, interior design, fashion, and music. That’s how the following were formed and are now commonplace: minimal painting, minimal music, the minimalism school of composing, and so forth. Painter Frank Stella was quoted as saying, “What you see is what you see”. Minimal art in particular especially grew in the 1960s in America. Similar to De Stijl, painters reacted against the abstract-expressionism art and used only the rudimentary geometric shapes in their works and didn’t add decorations or any other elements.

Naturally, the focus on simplicity also spilled over into consumer products, with designer Dieter Rams (also more on him below) using minimalist design in products for Braun. Ikea, the Swedish furniture company, is another example of minimalist designed consumer products. The furniture is so simple that it’s designed for everyday people to be able to assemble with ease, often without even needing instructions due to it being self-explanatory.

And of course, minimalist design carried over naturally into the digital realm, with visual and web designers applying minimalism principles into their own designs and designs for clients.

4. Influential Minimalist Designers

There were plenty of people doing minimalist designs, but like with any trend or movement, there were a few key figures that were more prominent and influential than the rest. Two key figures in minimalist design were Buckminster Fuller and Dieter Rams.

Buckminster Fuller

(Image by mksfca)

Buckminster Fuller was an American designer who’s best known for his architectural design of the geodesic dome. Born in 1895, Fuller’s futurist tendencies helped him to design minimalist geodesic domes in the middle of the 20th century which could stand on its own – and still stand today.

Dieter Rams

(Image by Ged Carroll)

To designers, Dieter Rams should be an even more familiar name. Rams is a German industrial designer who was born in 1932 and was head designer at the Braun company, where he helped design things like record players, radios, calculators, and consumer appliances.

Rams heavily pursued minimalist design, focusing on including only the essential aspects of a product so that it’s not filled with non-essentials. That resulting product would then be simple and as pure as possible. Rams’ self-described design approach is:

Less, but better.

Rams also has a ten principles to good design. He states that good design:

1. Is innovative – uses technology to innovate
2. Makes a product useful – emphasizes the usefulness and functionality
3. Is aesthetic – beautiful and makes people feel good
4. Makes a product understandable – at best, it’s self-explanatory
5. Is unobtrusive – is neutral and lets user impose their personal style on it
6. Is honest – doesn’t promise things the product can’t deliver
7. Is long-lasting – is timeless
8. Is thorough down to the last detail
9. Is environmentally friendly – conserves resources and space, both physically and visually
10. Is as little design as possible – gets out of the way of the product

5. The Right Practical Approach to Minimalist Design

Knowing the history and key figures of minimalist design is nice and all, but knowledge without action is useless (outside of entertainment purposes, of course). So here are some resources on the right practical approach to minimalist design.

Principles of Minimalist Web Design – a Smashing article with examples that runs through the essential principles of minimalist design and how to apply it to web design:

• Less is more – use only elements that are necessary for your web design; the end effect is greater than the sum of its parts.
• Omit needless things – don’t include unnecessary elements in your designs; include only what’s necessary to the content and function of your website (including certain design and graphical elements that directly affect readability and usability).
• Subtract until it breaks – remove elements until your design stops working the way it should (stops being user-friendly or stops delivering your intent experience); the point right before that is when you’ve achieved the most minimalist design possible.
• Every detail counts – what you choose to leave in is vital, so think of the feeling you want visitors to have, then include only the details that will create that feeling (funky, modern, clean, sophisticated, and so forth).
• Color minimally – use only the colors that interact well with each other and create the feeling you want visitors to have.
• White space is vital – don’t try to fill every space, instead use white space to emphasize certain elements over others.

The Ins and Outs of Minimalist Design – a Design Shack article that looks at key aspects of minimalism in web design and showcases examples from designers who got it right. The key aspects it covers are:

• Typography – choose clean, simple fonts with a high level of readability.
• Strong grid alignments – a readable and pleasing arrangement of content; our eyes are familiar with this pattern, and we want items to line up in a predictable manner.
• Contrast – increased contrast can drastically improve your design’s readability and user-friendliness.
• White space – emphasize where you want viewers to look while making them feel comfortable and less claustrophobic.

6. Examples of Minimalist Web Design In Practice

Now that you know some of the history of minimalist design, it’s time to make it relevant and applicable to you, the web designer. The following links showcase examples of minimalist web design in practice. All of the principles of minimalist design applied to websites.

• Showcase of Clean and Minimalist Designs
• Minimalist Design Gallery – Showcasing Minimalism in Web Design
• 50 Inspiring Examples of Minimalism in Web Design
• A Showcase of Effective Minimalism in Web Design
• 40 Beautiful Examples of Minimalism in Web Design
• 25 Beautifully Minimalist Websites

Over to you: are you creating minimalist designs? Why or why not? Share you reasons for why minimalism is either the greatest thing in the world or a bunch of nonsense in the comments section below.

Advertise here with BSA

Advertise here with BSA

The computer sitting at your desk is far more powerful than anything available to all but the largest businesses in the 1980s, enabling us to continue to add layer upon layer without slowing down, and possibly losing focus on why we are here in the first place – to deliver a high quality product.

One possible solution is to this is to artificially limit your design and color options the way Shigeru Miyamoto was limited by technical constraints when designing Zelda and Mario on the NES.

While some of the NES library was filler, there were many standouts that used the limitations of 8 bit technology as strengths, rather than weakness.

In this article, we’ll learn how to gain inspiration from those interactive icons of yesteryear. Let the past inspire the future!

Use Limitations Effectively

In the early to mid-80s, abstraction and creativity weren’t design choices, but were a direct result of technological constraints being put to good use.

Mario, one of gaming’s icons, has a mustache, bib overalls and inhabits a surreal landscape for creative and practical reasons. Famed designer Shigeru Miyamoto gave Mario these features not only so that we could identify Mario as Mario, but for the simple fact it was easier to animate him with a hat instead of hair, made him stand out more against the background, and show as much detail in as little space as possible.

Today, even an inexpensive personal computer from the local discount store is a graphical powerhouse. Unlike the millions of colors most modern computers can display, the NES has a hard-wired palette of 48 colors and 5 grays to draw from. Along with a 256 by 240 resolution, and 2kb of graphics memory, NES games had severe graphical limitations. 24 colors per scanline (the lines that make up the picture on analogue TVs), one background color, four tile sets of 3 colors each for building background graphics, and four tile sets of 3 colors for enemy and character sprites were all that were available to create a breathing world..

Within these seemingly insurmountable limitations, the gaming public received such diverse titles as Ninja Gaiden, Final Fantasy, Tetris, and countless others; many of which still have sequels in production.

Prepare to get retro.

Use A Lack Of Color To Create Atmosphere

The Metroid series is well known for its creepy, unnerving alien monster flick feel.

From the moment we hit the start button, we have a feeling we aren’t in Kansas any more, and are drawn into the Space Pirate base on the Planet Zebes.

Instead of going for a slick, polished 1950s chrome feel, Metroid is a spartan affair visually, like the sci-fi horror film Alien, which appears to have inspired it…

Like any good horror film, what we do not see is often more terrifying than what we do see. Enemies are placed sparingly, rooms are connected by bubble doors; the player not knowing what lies beyond. The most important aspect of the graphic design in Metroid is the use of color, or lack of it. By creating atmosphere with the absence of color, the game uses a black background to create a world shrouded in darkness and untouched by human hands, similar to the Alienhomeworld.

Complimenting the cave-like environments, creative use of tile placement creates an organic landscape with peaks and valleys similar to the real world, which is rarely flat and perfect..

This was a revolutionary approach in 1986 when the game was released. The mixture of grid-like and organic structures is an inspiration in the modern world where many adhere to convention a bit too much, or not enough..

Life Platform is a corporate-styled theme for WordPress, which, like Metroid has managed to create a compelling world with what we don’t see.

It’s Saturday Morning All Over Again

While Metroid took design cues from sci-fi horror films, Megaman 3 isn’t too far removed from resembling an episode of a 1980s Saturday Morning cartoon.

Megaman 3′s visuals are painted with bright, bold, colors. The visuals are inspired by Japanese comics and anime, which is fitting given the similarities to Osamu Tezuka’s Astroboy both in story and art direction. This is especially apparent in Capcom’s official artwork and story.

Instead of the dreary dark labyrinth of Metroid where change is a bit more subtle, graphic diversity is the name of the game here. With such locales as a mining colony on another planet , a rock quarry, and the obligatory lava level, gamers of all types could have their favorite level.

Megaman’s level layout is far more grid-like and boxier than Metroid’s. Not only does it serve the function of building a vibrant world with limited resources, the angular look only adds to the inorganic nature of the game’s cold, futuristic setting.

The game world itself is a robot…

Japanese culture including games, both past and present has invaded Western consciousness. By using Asian inspired motifs from Japanese pop culture or traditions such as Ukiyo-e, you can create a killer design for your project.

Create A World Beyond Imagination

Life is but a dream.

While most people are realists and dreamers get a bad rap, sometimes it can pay off to be unconventional and dream.

In Super Mario Brothers 2, Mario and Pals are traveling through Subcon, the world of dreams. With materializing door potions and vegetables with smiley faces on them, the game world is nothing short of surreal. This game is even less conventional than its predecessor, Super Mario Brothers.

Yes, somehow mushrooms and turtles taking over the world under the supervision of a dragon makes more sense.

A dinosaur that shoots eggs as projectiles? Really?

The lesson learned here is, the conventional rules not always need apply; it just needs to work within the context of the whole, and have great layout and control. Luckily for you, you don’t have to be an egg spitting dinosaur.

Exhibiting this surreal dream-like quality in modern web design is Creative Spaces, a website to help artists find spaces to develop, exhibit or perform their work within the Australian state of Victoria.

Show That The Powerup Is Working

Much like the foaming cleanser hocked on a late-night infomercial by an obnoxious pitchman, Megaman 3 and many other NES games change the color of their characters or modify their appearance to indicate a specific powerup is in use.

Megaman changes color when using a Robot Master weapon, while Mario grows in size after grabbing a Super Mushroom..

On the web we see this behavior most commonly with hyperlinks indicating whether we have visited the link or not, or on a menu which changes color when a mouse cursor hovers over it.

Much like an NES designer, you can come up with something that stands out AND makes it easy for the end-user to notice the status of something more readily..

A modern example of this is Burnstudios Audiotool which emulates a virtual studio environment in Flash.

Like Propellerhead Reason, Audiotool uses virtual cables to indicate how devices are connected and routed visually, rather than through menus or confusing diagrams.

How, as a designer can you show us that the powerup is working?

Show, Don’t Tell Us It’s Friendly

In Super Mario Brothers, we first learn that the mushroom is our friend at the beginning of the first level by the fact it’s nearly impossible to avoid. We also learn shortly that it can protect Mario from death when we collide with a goomba shortly there after.

Undefined Method, the homepage of a creative technologist from the UK, has more in common with a kinetic sculpture at an art exhibition than your average site. It is one of the most original navigation methods I have seen in quite awhile.

Like Super Mario Brothers, the user is drawn instinctively to towards the circle-like navigation nodes out of curiosity, and is guided by the limitation of only being able to use the site as the designer intended, causing a dance of pixels to commence when they discover this isn’t their grandfather’s portfolio site..

Unfortunately, “Our Princess is in another castle”, and this article has merely scratched the surface of the world of classic gaming and what can be gained by a modern audience from studying it.

Like all journeys, this one is ongoing. Just don’t jump too high over the flagpole by the castle ;)

Advertise here with BSA

Advertise here with BSA

If you’re been reading SpyreStudios for a while now you probably already know we like minimalist designs. In fact we’ve showcased many websites featuring a minimalist design in the past. We thought it was time for another round.

Minimalism doesn’t rhyme with grid systems, but many grid-based websites will feature a stripped down and clean design and make great use of typography. After all, it’s all about letting the content shine. I hope you enjoy this post!

Nice Device

DBA

Original Championship of Design

Joris Landman

Ben Martineau

Hello Keppa

Pierrick Calvez

Beautiful Explorer

In.somiac

Giang Nyuen

Untitled Studio

Francesco Bertelli

Scribble Tone

Lars Ahrens

Alexandr Schwarz

Futurefabric

IDRAWALLDAY

Derek-Chan

NoirPlus

Republika

Your Turn To Talk

I hope you liked this post. Do you know of some awesome minimalist grid-based web designs that were not featured in this post? Please feel free to share your thoughts by leaving a comment below!

Advertise here with BSA

Advertise here with BSA

For Christmas this year, my beautiful wife gave me a copy of The Web Designer’s Idea Book, Volume 2. Obviously, I have been perusing the book, and I am finding that there are tons of awesome web designs to take in. I’m super happy with the gift and I expect that it will prove to be a highly valuable resource throughout 2011, and beyond.

Yet, even just a quick perusal of the book reveals the prevailing influence of Photoshop (or other graphics programs) on the industry at large. Today, the web is full of beautiful, rich and colourful graphics that continuously amaze and impress us in all manner of very legitimate ways. But just because we can include all of this incredible imagery, it doesn’t necessarily follow that we have to. Sometimes, the simple use of colour, shape and typography can create an attractive and elegant design all on its own.

In this first installment of a two part tutorial, I would like to show you how to use simple CSS to apply an attractive, well-balanced design to an article. Instead of just using meaningless placeholder text or writing something entirely new, I will also be using one of my favourite articles that I have written here at SpyreStudios, entitled “A Coder’s Journey”. So, let’s get started.

Step 1 – The HTML

Of course, before we start tackling any styling, we are going to need some HTML first. For our purposes here, we’re going to be using some pretty plain markup. The only anomaly you might find is that we wrap our content <div> in another <div>. This may not appear to have all that much of a purpose, but it will become important in Part II, when we will be introducing a sidebar and some jQuery goodness, so we’ll just leave it for now.

Here is the markup:

<!DOCTYPE HTML>
<html>
   <head>
      <title></title>
</head>
<body class="framed">
   <h1><span>A Coder's Journey:</span><span>Or, The Lessons I've Learned Along the Way</span></h1>
   <div class="clearfix">
      <div class="content">
         <p>As a web designer, coding is an important part of what I do. Recently, there has been some discussion in the design community about whether or not designers should know how to code. I&#39;m not going to get into that debate in this article.</p>
         <p>Suffice it to say that I do my work both in Photoshop and Coda, and actually do all my own coding by hand. For me, learning how to do it has been a long and interesting process that has spanned several years.</p>
         <p>I thought that it might be interesting to actually map the course of that journey, so that&#39;s what this particular article is going to be all about. Novices and beginners might be able to learn a thing or two from my mistakes. And as for you more experienced readers, hopefully you will be at least entertained or be able to relate to some of what I&#39;m talking about.</p>
         <h2>The Basic Story</h2>
         <p>Let&#39;s start with the recent past, head back to my beginnings and then move forward again. As of 2006, I completed five years of school at a small (but awesome) university near where I live. First, I did a four year program and graduated with a Bachelor&#39;s degree in English literature. I then blitzed through an intense eight month Master&#39;s program in the same field.</p>
         <p>A few months ago, I would have said that my degree is completely unrelated to what I actually do as a designer and developer. Some of my recent thinking has started to change that, though, as you can see in a pair of articles I wrote recently on the <a href="http://blog.echoenduring.com/2010/03/05/language-and-metaphor-an-alternate-view-on-coding-for-the-web/">relationship</a> between <a href="http://blog.echoenduring.com/2010/03/09/more-thoughts-on-language-and-coding-for-the-web/">language and coding</a>.</p>
         <blockquote><p>I don't remember this, but apparently at that age I was able to build a very simple program in Basic, with a little guided assistance from my dad.</p></blockquote>
         <p>Anyhow, that&#39;s all a very roundabout way to come to the point that, despite having not actually completed a PhD (something I did consider pursuing), I seem to have earned the nickname of &ldquo;<em>professor</em>&rdquo; in my family, especially from my father. My dad always supported my schooling, but he has often said that he thought I would have gone into something to do with computers or programming.</p>
         ...
         <p>Now it&#39;s your turn to share. What was your journey like? Did you follow a similar path, or did you come to coding through a completely different avenue? Let&#39;s hear some of your stories!</p>
      </div>
   </div>
   </body>
</html>

Alright, there are a few things worth noting here. First, you’ll see that we are technically using HTML5, with its simple DOCTYPE declaration. That’s about as far as it goes at the moment though. Technically, we could have used the new <article> or <section> elements, but I wanted to focus more on the design and CSS, without having to deal with issues of browser compatibility, so I kept it old-school with and used <div> elements.

You will also notice that I placed the main title and sub-heading into two different pairs of <span> tags. My rationale here is to be able to distinguish them as separate parts of the same basic element. Some might argue that it should be done with a first level heading (h1) and second level heading (h2). While I can understand the position of this argument, I don’t entirely agree, since the entire thing is actually the complete title, and stylistic differentiation that we’ll be doing is actually more presentational than structural. As such, I keep it all in the first level heading and just break things up with the <span> tags.

Lastly, you may also notice that I’ve truncated the article text in a few areas. I’ve included the header, a few paragraphs, a blockquote and then the ending of the document, but there was no need to reproduce the entire article here!

Step 2 – CSS Resetting

One of the very first things that I always do when I start on the CSS for any new web design project is to introduce a style reset. Fundamentally, this just strips off all the default padding and margins from elements and then, depending on the reset that you use, applies some basic stylistic treatments to different elements.

Now, while people like Johnathan Snook have written about why, strictly speaking, reset stylesheets are not really necessary, I do still like using them. I guess I am just more comfortable bringing everything back to a common baseline and then building up from there.

So, for the purposes of this project, we will be using Eric Myer’s excellent CSS reset code.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
   text-decoration: none;
}
del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

Also, because I typically don’t make any changes to the reset, and thus don’t really need to be able to read it, I will also strip off the line endings and make it one long line of code.

Step 3 – Basic Styles & Type

Alright, now that we’ve reset everything, we’re ready to start defining our styles. To start with, we’ll just apply some basic styles to the <body> tag. This allows us to make use of the natural behaviours of the CSS cascade, through which all of the other children of the <body> tag—which should be all visible elements—inherit these same styles.

body{
   font-family: Arial, sans-serif;
   font-size: 10px;
   line-height: 1.4em;
   color: #444;
   margin: 0px;
   padding: 10px 20px 0em 0px;
   background: #eee;
}

For the sake of this article, we will set the basic typeface to Arial in our first declaration. Personally, I would prefer the somewhat more appealing Helvetica, but I know there are some rendering issues with Helvetica on some Windows platforms. So, we’ll just go with the web safe clone that is Arial. We’ll also set our default font size to a nice, even 10 pixels.

Don’t worry, we won’t actually render any text this small, but it provides a nice simple base unit for us to run with. We’ll also set our line height to a nicely spaced 1.4em (we’ll be tweaking this as we go) and the colour to a much more readable #444 instead of a pure #000 black. This reduces contrast a bit and makes the type easier to read.

Now, for this design exercise, we’re also going to add in some extra typography styling using web fonts. Personally, I’ve always been partial to thick stroked, condensed sans-serif typefaces for headings and titles. They’re not appropriate in every circumstance, but I really love them and will be using the awesome League Gothic font, available from the equally awesome folks at The League of Moveable Type. Or, you can pick up a @font-face kit directly from the ever-useful Font Squirrel. That’s what I did, and I included the CSS from the kit, tweaking paths so that I can keep my font files in a sub directory.

@font-face {
   font-family: 'LeagueGothicRegular';
   src: url('fonts/League-Gothic/League_Gothic-webfont.eot');
   src: local('☺'), url('fonts/League-Gothic/League_Gothic-webfont.woff') format('woff'), url('fonts/League-Gothic/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League-Gothic/League_Gothic-webfont.svg#webfontOTINA1xY') format('svg');
   font-weight: normal;
   font-style: normal;
}

Now we have our web font attached to our CSS and ready to use. We’ll get to that in a bit.

Step 4 – Paragraphing

With out basic styles in place, let’s turn to styling the biggest part of the document – namely all of the different paragraphs. First, we’ll start with some basic styles:

p{
   margin: 1.22em 0px 1.5em 0px;
   line-height: 1.41em;
   font-size: 1.4em;
}

We’ll start by bumping up our font size to 1.4em (1.4 x 10 = 14px). Then we need to readjust the line spacing again. Otherwise it will stick at 14px itself, inherited from the <body> tag. To me this is weird – I always feel that the line height should automatically adjust when the font size is adjusted – but that’s the way it is, and I’m sure there’s a good reason that I just haven’t considered. Right…?

Next, we’ll want to set our top and bottom margins to provide the proper spacing between individual paragraphs. By now you’ve probably noticed that we’re using some weird, fractional numbers here. The reason for this is that I attempted to use a simple 10px baseline grid to bring structure to the design. However, I wanted to use em units instead of static pixel units which, while more precise, are somewhat less flexible in terms of resizing.

We’ll touch on this in more detail at the end of this article, but that’s the reason you will see some strange, decimal values in the CSS!

Alright, now our paragraphs are nicely styled, but to make things a bit more interesting I often like to add a little something extra to the first paragraph, to help draw attention and really pull the reader in. So, we’re going to use some pseudo-classes to increase the size of the font in the opening paragraph and then transform the first line to bold, green small caps!

p:first-child{
   margin: 1.2em 0px 0.60em 0px;
   line-height: 1.64em;
   font-size: 1.8em;
}
p:first-child:first-line{
   font-weight: bold;
   font-variant: small-caps;
   color: #227722;
}

I love using :first-child and :first-line, which do pretty much exactly what their names suggest. The :first-child pseudo-class allows us to access the first child of an element, which can be incredibly useful in so many ways. One thing to note, however, is that this declaration targets the first child of an element, not the first instance of a particular type of child element. In other words, if there was another element before our paragraph, these styles would not be applied to the paragraph. However, there are some other selector techniques that we can use, which we will touch on below.

As for the first-line pseudo-class, that one targets just the first line in a block of text. It’s a nice little technique that allows you to do some cool things, like what we’ve done here.

One last note about these properties: remember that they are inherited. So, if we have a nested block of text that is wrapped in some other element, and if the first child is a paragraph, the :first-child declaration will be applied there too. In same cases you may need to use some reset styles to counteract this type of behaviour, as we’ll see below!

Step 5 – Containers and Links

Before we go much further, we’re going to very quickly deal with spacing and linking styling. First, you will notice that, in our HTML, we wrapped the article itself in a <div> with the class of “content”. Now we’ll just quickly limit its width and provide a bit of padding:

.content{
   max-width: 600px;
   padding: 0px 100px 10em 20px;
}

Now the content area will not stretch beyond 720px. Yes 720px. We have the maximum width of 600, but we’ve also added an additional 120px of padding to the left and right of the content area (20 on the left and 100 on the right). These extra pixels are calculated in addition to the declared width (or max width in this case), coming to a total of 720. Also, if you’re wondering why we’re adding so much padding on the right, it has to do with what we’re going to do with some blockquotes later on.

Next, we’ll style our links.

a{
   color: #227722;
   text-decoration: none;
   border-bottom: 1px dotted #227722;
}
a:hover{
   background: #227722;
   color: #fff;
   border-bottom: none;
}

Here we set our link colour to the same green that we are using throughout the design. I’ve also removed the standard underlining in favour of using a single pixel dotted, bottom border. It achieves a similar visual effect, indicating that the text is an active link, but is just a bit more interesting than the default underline.

We’ll also set a hover state where we remove the border, add a solid green background and some white text.

Step 6 – Article Headings

By this point the styling is coming along nicely, but we’re really going to need to do something with those headings, and that means it’s time to actually use our League Gothic web font. Here’s the style that we’ll apply to all of our <h2> elements.

h2{
   color: #227722;
   font-family: 'LeagueGothicRegular', sans-serif;
   font-size: 4em;
   text-transform: uppercase;
   width: 100%;
   border-left: 20px solid #222;
   border-right: 20px solid #ddd;
   height: 0.47em;
   margin: 0.62em 0px 0.64em -20px;
   padding: 0.24em 90px 0.05em 10px;
}

Most of the stuff here is pretty simple. We start by changing the colour to our standard green. Then we set the font family. Notice how we use the same identifier name (in single quotes) that was used in our @font-face declaration. Doing both alerts the browser to the presence of a web font and tells it which font is being used. The browser will then load that font (either from the website or from chache) and apply it like any other font. For instances where @font-face is not supported, we will just default to the standard sans-serif.

Next, we set our font size (League Gothic is a proportionately smaller font, so we need to make it a good size here, but not so large that the regular sans-serif will look ridiculous if there is no @font-face support). Then we’ll transform all of our text to uppercase to ensure that nice blocky look.

We set the width to 100% and then the right and left borders to 20 pixel solid colour blocks. This gives each title added visual weight and interest, and helps create a clear division between the different sections of the article. Then we play around with height, margins and padding in order to get the proper configuration, where the left border is set flush against the left edge of the window, and where the height of the block is pretty much exactly the same as the height of the text, creating a nicely balanced visual relationship between the titles and the surrounding blocks.

In this step, we will also make quick use of the adjacent sibling CSS selector in order to effectively mirror the first-line styling of our opening paragraph.

h2 + p:first-line{
   color: #227722;
   font-variant: small-caps;
}

Basically, this selector is telling the browser that this rule applies to the first line of any paragraph element that is the next adjacent element to an <h2> element. It’s a great little trick that allows affords remarkably precise targeting, and in this case, allows us to bring an added level of continuity to our design.

Step 7 – Blockquotes

Alright, now it’s time for some blockquote goodness, again turning to those ever useful CSS psuedo-classes. In this case, we are going to be treating our blockquotes as callouts from the main body, and as such will target the blockquotes directly. If you were doing a design that had both blockquotes and callouts, you could use a class to differentiate.

So, we’ll start off with the main blockquote styles:

blockquote{
   color: #888;
   font-family: Georgia, serif;
   line-height: 1.4em;
   width: 230px;
   margin: -2.65em -80px 0px 30px;
   float: right;
}

I like the contrast of using a serif font like Georgia here, and the negative right margin helps pull the entire callout slightly out of the main body text, thus brininging added attention to it through very deliberate imbalance. That’s also the reason why we added the extra right padding on the main content container earlier. See, I told you there was a reason.

Now, at this point you may notice that the first line of the paragraph is actually picking up the :first-line styles that we set earlier. We don’t really want that here, so we’ll just write a few quick rules to override the inherited styles:

blockquote p:first-child{
   color: #888
   font-size: 1.8em;
   line-height: 1.66em;
}
blockquote p:first-child:first-line{
   color: #888;
   font-weight: normal;
   font-variant: normal;
}

The basic premise here is to just “undo” the styles that we set for the first line of our opening paragraph by setting them to match the rest of our blockquote styling.

These callout looks pretty good already, but we want to add an extra special touch by wrapping it in quotation marks. One common trick is to use an image in the background. While that works fine for the opening quote, we want a closing quote too, and positioning that with a background image can be a bit more tricky. Fortunately, with a bit of work, we can do it entirely with CSS. Here’s the code:

   blockquote p::before {
   content: '\201C';
   color: #227722;
   font-size: 2em;
   line-height: 0.5em;
   height: 0.25em;
   margin-left: -18px;
   margin-right: 5px;
   position: relative;
   top: 10px;
}
blockquote p::after {
   content: '\201D ';
   color: #227722;
   font-size: 2em;
   line-height: 0.5em;
   height: 0.25em;
   margin-left: 5px;
   position: relative;
   top: 10px;
}

Alright lets run through this real quick. We are using the ::before and ::after pseudo-elements, which basically allow us to “target” virtual content that comes before and after the contents of a given element – in this case any paragraph within a blockquote. The reason I call it virtual is that such content doesn’t actually exist within the HTML. It is actually added by the CSS. Using this technique is pretty much like any other CSS rule, except for one very important consideration – you actually need to declare some content to be included. Otherwise, there is nothing for the declared styles to work upon. In this case, we want open and closing quotes.

Now, you might think that we would use an HTML entity here, such as &ldquo;. Sadly, you would be mistaken. For reasons that I still do not quite understand, you need to use an “escaped reference to the hexadecimal Unicode character value” (quoted from this excellent article). As you can see in our code, that’s exactly what we’ve done. Knowing this ahead of time can save you hours of frustration and hair tearing agony.

With that taken care of, we actually have something for our styles to work on. So, we very quickly change the colour to green and adjust our font size and line height. Next, we do something weird and reduce the height to 0.25em. This reduces the actual size of the element, letting the contents overflow, and solves some nasty line spacing issues.

Next, we adjust some margins. These are different for the opening and closing quote. For the opening one, we use a negative margin to move it left, into the white space beyond the quote itself. The 18px left margin and 5px right margin pretty much brings the first word back into nice, flush left alignment with the rest of the of the text. On the closing quote, we just use a 5px left margin to give the mark a little room to breath.

Finally, we’ll set the entire thing’s position to be relative and then move it down 10px from its top position to bring it into better alignment with the rest of the text. There, everything looks great. We have nice blockquote styling done entirely with CSS.

There are just a couple of things to note. In this document, there is only ever a single paragraph in the callouts. As such, there are some inherited styles from our earlier p:first-child rule. If you had multiple paragraphs you would have to take this into consideration. Similarly, ::before and ::after pseudo-elements are being applied to each paragraph here. Again, with a single paragraph, it’s not an issue, but if you had more than one, you would need to distinguish with rules like

blockquote p:first-child::before { ... } and
blockquote p:last-chile::after{ ... }

Just something to be aware of.

Step 8 – Headers and Footers

Well we’re coming to the end here, and there’s really only a couple more things to do, with the main one being to style the title. Now, given the relatively simple structure of our HTML document, let’s take advantage of the block level nature of the <h1> element by using it to create the entire header:

h1{
   background: #444;
   margin: -1em -20px 0px 0px;
   padding: 1px 20px 2em 20px;
}

We just set the background to a dark grey and tweak the padding and margins to balance the actual content within the block.

Of course, because the background is the same colour of grey that we set our text to back in step 3. So, now we’ll add some styling for the text, and this is where our spans becomes useful! We’ll start by just targeting spans in general:

h1 span{
   color: #eee;
   font-family: 'LeagueGothicRegular', sans-serif;
   font-size: 6em;
   text-transform: uppercase;
   display: block;
   margin: 0.5em 0em 0em 0em;
   padding-top: 0.52em;
   height: 0.47em;
}

On the first line, we set the colour of the text to a grey that almost looks white, but which is just a bit softer on the eyes that pure #fff. Then we’ll set our font to League Gothic and transform the text to upper case, just as we did with the <h2> tags. The primary differences is that, in this case, we’ll set the font size even bigger, to 6px. Then, to help with spacing, we’ll set the display mode to block and adjust the padding, margins and height (these properties work differently on inline elements like <span>).

Of course, all of this will apply to both of our spans, and we certainly don’t want our sub-title to be this big and bold. To fix this, we’ll come back to the adjacent sibling selector to get things looking just the way we want it to:

h1 span + span{
   color: #ccc;
   font-family: Georgia, serif;
   font-weight: normal;
   font-style: italic;
   font-size: 2em;
   text-transform: lowercase;
   letter-spacing: 0.075em;
   margin: 0.5em 0px 0px 0px;
   padding-bottom: 0em;
   padding-top: 0.5em;
   height: 1em;
}

Right off the bat, we set the colour to a slightly darker grey for visual contrast. Then we change our font to Georgia (like with our callouts), change the font weight to regular, italicize the text and bring the font size way down. We’ll also use a different text transformation and make everything lower case.

Next, we’ll very slightly increase the letter spacing. This is something that I will do quite frequently with Georgia, especially when italicized. It brings a little bit of extra visual interest to the typography treatment, and helps a bit with readability (I sometimes find the default tracking/kerning on Georgia to be a little tight when using italics). When adjusting letter spacing, just remember to use relatively small values. A full em unit is pretty huge and is probably not what you’re looking for.

The last few declarations just set some padding and sizing for the sub-title.

And we’re almost done! As one last finishing touch, we’ll flip back to the body and add in top and bottom borders so that the full rule will now look like:

body{
   font-family: Arial, sans-serif;
   font-size: 10px;
   line-height: 1.4em;
   color: #444;
   margin: 0px;
   padding: 10px 20px 0em 0px;
   background: #eee;
   border-top: 8px solid #227722;
   border-bottom: 5px solid #227722;
}

This is really just a bit of personal preference and could easily be left out and still have the entire design look great. I just like the extra splash of colour here, and find that it helps tie the whole thing together.

Notes on Units

Okay, so I promised that I would talk a little bit about the weird units that I was using throughout this tutorial. Basically, I wanted to create a design where the spacing of all the textual elements had some level of proportion to all the other elements. To do this, I basically faked myself a baseline grid. I created an image that would repeat a vertical line every 10px and set that to the background as I was playing around. Then, I very meticulously adjusted my em units for different textual elements until they all pretty much lined up with the grid.

While things appear to line up in the screenshot above, a fraction of a pixel is actually lost on each line, so that by the time you get halfway down the page, the text is no longer aligned exactly to the grid. This is symptomatic of the browser’s rendering of em units.

Fortunately, the text blocks remain in proportion to each other, and that’s what I was aiming at achieving more than anything else, so I feel that the use of the grid served its basic purpose. I could have been much more precise if I had used absolute pixel values, but as stated earlier, I elected to go with the more scalable and fluid em option.

Conclusion

So there you have it. I know that this article was a bit on the longish side (okay maybe a lot on the longish side), but I hope that you’ve enjoyed it and been inspired with how a simple and attractive design can be achieved with CSS and absolutely no images. With increasing support for things like CSS gradients and other CSS3 goodness, the possibilities are becoming more and more diverse too!

Oh, and I’ve also provided a demo for you to check out too. This way you can see all of the styling as applied to the entire article.

Check out the demo

In Part II of this post, we’re going to be looking at something quite different, using a variety of different jQuery techniques to bring some added interaction to the design. That should be rolling over the next few weeks, so stay tuned

Advertise here with BSA

Advertise here with BSA

Minimalism in movie posters is something that is becoming more and more popular, as you can clearly see from the examples showcased below, there are many more minimal posters from recent years compared to the amount seen in the 90′s and earlier.

Is this a good thing or a bad thing? It does take a reasonable amount of work and organization to pull of a minimalistic poster, especially as they are typically designed to advertise and sell tickets to huge, multi-millionaire movies, although a lot of people see minimalism in design as pure laziness, or just a way to keep costs low as there isn’t a need for thousands of dollars to be spent on photo shoots. Take a look at the incredible examples below!

Don’t forget to check out our other movie poster showcase posts: Blood & Guts – Vampire and Zombie Movie Poster Inspiration, Trends Used In Comedy Movie Posters From 1915 to 2010, Evolution of Animation Film Posters from 1937 to Present

The Graduate (1967) ↓

This is a very minimalistic two-color poster that uses nothing but typography and an incredibly simple sketch. The two colors – red and black – work really well together and although very simple, this poster stands out very well among others.

Carnal Knowledge (1971) ↓

Jeremiah Johnson (1972) ↓

Harold and Maude (1972) ↓

The Valachi Papers (1972) ↓

A Midsummer Night’s Sex Comedy (1982) ↓

A Midsummer Night’s Sex Comedy is one of the minimalistic posters in this showcase, using loads of whitespace, three different typefaces and nothing but black ink.

The Accidental Tourist (1988) ↓

Imagine: John Lennon (1988) ↓

Proof (1992) ↓

Proof is a lovely minimalistic poster that uses a subtle-grunge effect that is very popular in the present day, eighteen years after this poster was designed!

Batman Returns (1992) ↓

This Batman Returns poster from 1992 is one of my favorite posters in this showcase, as it totally depends on brand identity and the familiarity of the infamous Batman silhouette.

King of the Hill (1993) ↓

Red Firecracker, Green Firecracker (1995) ↓

Antz (1998) ↓

Antz is an incredibly clever poster that uses a magnifying glass technique to enlarge the ant. The rest of the poster is purely whitespace with very simple typography, focusing all eyes on the title and main character of the movie.

edTV (1999) ↓

Romance (1999) ↓

Dancer in the Dark (2000) ↓

This poster takes on the style of the traditional eye-test poster, using big bold lettering to spell out the movie title “Dancer in the Dark”.

Ghost World (2001) ↓

The War Effort (2002) ↓

Kill Bill: Vol. 2 (2004) ↓

This Kill Bill poster is very different compared to the other Kill Bill posters which take on a dramatic black and bright yellow color scheme. The blurred, watercolor style photographic background adds a lovely subtle but interesting background to the background, with a combination of strong and experimental typography.

I, Robot (2004) ↓

The Chumscrubber / Glück In Kleinen Dosen (2005) ↓

Gypo (2005) ↓

The Thing About My Folks (2005) ↓

The use of color in this poster really makes it pop, combining over-saturated stock images of an apple and orange to produce very vivid results, merged with a light background and dark typography.

American Hardcore (2006) ↓

Electroma (2006) ↓

Fur: an Imaginary Portrait of Diane Arbus (2006) ↓

Madea’s Family Reunion (2006) ↓

This is an incredible and beautiful minimalistic movie poster, and one of the most elegant in this showcase. The silhouette and photoshopped hair is a superb background for the simple typography.

Jade Warrior (2006) ↓

Children of Men (2006) ↓

Inside Man (2006) ↓

The TV Set (2007) ↓

3:10 to Yuma (2007) ↓

One of the most eye-catching posters in this showcase, mainly because of the stunningly bright yellow – the poster is also one of the minimalistic, using nothing but a the title of the film and a fairly simple illustration.

Before the Devil Knows You’re Dead (2007) ↓

Zack and Miri Make a Porno (2008) ↓

Birds of America (2008) ↓

This poster uses a handful of modern day trends; repeating patterns in the background, subtle grunge, modern illustration and simple typographic elements. All in all, it works perfectly well.

XXY (2008) ↓

Blindness (2008) ↓

Rent: Filmed Live on Broadway (2008) ↓

You Suck Sarah Marshall (2008) ↓

A handwritten-style poster using only black ink on white paper. This funny poster works well because it is so simple, using lots of whitespace and a suitable typeface.

Filth and Wisdom (2008) ↓

Tokyo Sonata (2009) ↓

Untitled (2009) ↓

Voices / Du Saram-Yida (2009) ↓

Precious (2009) ↓

Madea Goes to Jail (2009) ↓

He’s Just Not That Into You (2009) ↓

Moon (2009) ↓

Although this poster uses a rather mesmerising spiral pattern in the background, it is still rather minimalistic, using this and one image as its main focal.

The Garden (2009) ↓

You Will Meet a Tall Dark Stranger (2010) ↓

For Colored Girls (2010) ↓

This is a rather stylish and beautiful movie poster, taking on a fashion illustration approach by using traditional watercolors to produce an unfinished image.

The Art of the Steal (2010) ↓

Athlete (2010) ↓

Your Turn To Talk

So, what do you think? Do any of the above examples, in your opinion, that you think work particularly well, or vice versa? Discuss in the comments section below! :)

Advertise here with BSA

Advertise here with BSA

Minimalism is always a hot topic in web-design and there are many well-crafted minimalist websites and interfaces out there.

While searching for some icons for a recent project I came across some great minimalist icon and symbol sets and thought I’d expand my search and share my findings here with you.

Please note that some of those sets are not free and of course make sure you read the license before using them.

Devine Icons ↓

Only2 Icons ↓

Simple Small Icons ↓

Iconic ↓

Mnml Icon Set ↓

Aiga Symbol Signs ↓

Patricia Clausnitzer’s PC Icons ↓

PICOL Icons ↓

Ecqlipse 2 ↓

Wireframe Toolbar Icons ↓

Devine Icons Part II ↓

Sanscons ↓

bwpx.icns ↓

Goo-EE ↓

Default Icons ↓

Icon Sweets ↓

Mini Icons 2 ↓

iPhone Toolbar Icons ↓

Glyphish ↓

Token ↓

Pictoico ↓

Bitcons ↓

Brightmix Iconset ↓

Android Menu Icons ↓

Monochrome Symbols Icon Set – Part 5 ↓

BacktoPixel ↓

Symbolize Icon Set ↓

Marker Vector Set ↓

Helveticons ↓

Webdesigner Sketchup Icons ↓

30 Vector Icons ↓

Twotiny ↓

Kostenlose Icons ↓

Minimalist Pixel Icon Set ↓

SimplyBold Vector Set ↓

Symbol Signs collection ↓

Socialmonochromicons v.2 ↓

Rocky Vector Set ↓

108 Mono Icons ↓

Pictos ↓

Your Turn To Talk

What do you think? Have you used one of those sets in a project before? Did I miss any? Please feel free to chime in and leave a comment below!

Advertise here with BSA

Advertise here with BSA

Minimalism is beautiful. It truly is. The best part about minimalism in web design is that it comes in many styles, colors and sizes, but they always have the same goal in mind – saying the most while saying the least.

A great quote by Albert Einstein can sum up minimalism (in my opinion) 100%.

Everything should be as simple as possible, but never simpler.

In essence, this is exactly what minimalism in web design is – saying something as simple as possible, but not simpler. It’s a beautiful thing. So, below I’ve rounded up 40 amazing minimalist web designs for you to be inspired by.

The Consult ↓

Sideshow Press ↓

Adam Hoganson ↓

Invoko ↓

Maxence Guillaume ↓

Made With Love ↓

Royale ↓

Proclaim Design ↓

Web Is Love ↓

I am Docto ↓

Jack Osborne ↓

Rodney Keeling ↓

The Rules of a Gentleman ↓

David Salvatori ↓

Brett Arthur ↓

Infinitum ↓

Kilian Muster ↓

Druck Deine Diplomarbeit! ↓

Design Vetica ↓

We Are Sofa ↓

Nation ↓

Bedrich Rios ↓

Definium ↓

Salvator ↓

West Coast Design Co. ↓

Benny Roth ↓

Simon Collison ↓

SucraM ↓

Bill Gates ↓

Distinctive Catering ↓

Breezy Baby ↓

Neue Blanc ↓

Corvid Creative ↓

Jump Media ↓

Speak Creative ↓

Matt Kursmark ↓

Information Highwayman ↓

Public Facing ↓

52 Weeks of UX ↓

Carsonispace ↓

Which design is your favorite?

Let us know in the comments which design from the list above is your favorite. If there’s one you love that isn’t on the list, feel free to link it in the comments so we can check it out – We’re always on the hunt for amazing minimalism here on SpyreStudios :)

We offer first time success in PMI-001 exam! Just go through the 640-553 study pack and pass your 220-702 exam on first try guaranteed.

Advertise here with BSA

Advertise here with BSA

The shopping list for a new home office gets bigger and bigger every year, with more technology invading our desks and forcing us to divide our attention even further. From new phones to do-all PC applications, the average design office is absolutely packed with technology, most of it largely unnecessary.

However, despite the wave of endless technology a lot of entrepreneurs, designers, and programmers are seeing the light, quite literally. Minimalist offices aren’t about making things more difficult – although they occasionally can – but about changing the dynamics around work. From eliminating needless comforts to boosting overall work output, investing in a minimalist office can have a number of interesting, inspiring, and unusual effects for your business.

Less Technology = Fewer Distractions

While technology is often sold as a way for us to help ourselves work, once it hits the tipping point it can become nothing but an unwanted and unnecessary distraction. An office stocked with a desk phone, cell phone, and VOIP program is no more able than one without, but it’s packed with distractions just waiting to rob you of your time.

Instead of having an application, appliance, or utility for anything and everything, invest in gear that covers you in 90% of all situations. You’ll quickly find that a lot of gear, both physical and virtual, allows you to do almost anything in your regular office routine without cluttering your desk space and PC desktop. Cut down on technology and you’ll become less distracted, more productive, and much better at your work.

Single-tasking cuts down on wasted time

Five screens are great for trading currencies, but they’re not particularly worthwhile for most digital workers. As online workers, we have a tendency to pick up everything we need for our PCs (or Macs, if you prefer) without thinking about the utility. As a result, applications stack up in the taskbar and we quickly lose track of just how much there is that’s robbing us of time.

Instead of having everything open at once, with your attention constantly divided between them, why not stick with the same three basic applications at once? Instead of keeping your instant messenger open 24/7, why not cut it out of your work routine entirely and focus on single-tasking alone? When you take distractions out of the equation altogether, you’re free to focus on the task at hand.

You don’t need that much technology to work

Really, you don’t. Even as web designers, the bulk of our work is carried out in the same catalog of five programs. From coding to graphics, flash animation to on-site testing, the vast majority of web design work can be performed on a PC that’s almost freshly set up. Outside of the core graphics suites and coding applications, software quickly becomes overkill.

Jon Phillips’s workstation. (see on Workstation Setups)

It’s a similar situation on the hardware side of the equation. Multiple monitors are gold for productivity, but extra technology in other places doesn’t really serve any purpose. Take a ‘technology audit’ of your office, and cut out anything that takes up space but doesn’t provide any direct application.

Technology robs you of energy

Ever get off your computer and feel sleep-starved, uncomfortable, and overwhelmingly tired? Staring at a computer screen isn’t just boring, but energy-zapping and somewhat unhealthy. Night owls are especially at risk – staring at a computer screen well into the night tricks the body into believing that it’s day, which makes the post-work sleep even more difficult. Instead of nodding off instantly, you lie there sleep starved and still convinced it’s 2pm.

If you’re a late-night worker, there’s one simple way you can make the transition from work to sleep easier: get off the computer earlier. Cut your computer time out an hour before you begin sleep, and spend the time in low light, still working. A break from the computer screen isn’t just about switching into night mode, but inspiring productivity and creativity – some of the best business ideas and innovations happen when we’re slightly tired and free from technology (at least that’s the case for many of us).

Improvisation keeps work fresh and interesting

It’s much more fun to have to think on your feet than to be able to fall back on the same old tools and applications. A desktop toolbar loaded with fix-all programs and do-everything applications certainly helps with efficiency and workload, but it steals away creativity and makes work, quite frankly, boring.

Instead of having everything at your fingertips, set up your office so tasks require improvisation and occasional analytical thinking. With the elimination of just a few tools, you workday can become more interesting, significantly more creative, and switch your mind from office-drone mode to that of an inspired, innovative entrepreneur. Challenges aren’t always bad, and sometimes it’s best to embrace them somewhere as comfortable as the office.

Your Turn To Talk

So, how is your office? Are you the ‘stuff everywhere’ type or do you embrace minimalism? Please take a minute to share your thoughts by leaving a comment below.

Advertise here with BSA

Advertise here with BSA

Regular readers of SpyreStudios will recognize that the love of minimalism runs pretty deep around here (judging by the minimalism articles we’ve published before: here, here and here). So today we’re going to explore the excellent use of minimalism in blog design.

The designers of these blogs knew what was important and made sure that the website focused on those pieces, and for that – we appreciate them.

Share Some Candy ↓

DFCKR ↓

Brand New ↓

Information Architects ↓

The Designed ↓

Heartworker ↓

Beyond the Pixels ↓

Jaboo ↓

Jonathan Snook ↓

Kim Ellefsens Blog ↓

Human Resources ↓

Burstoid ↓

Max Voltar ↓

Stefan Persson ↓

Triimpuls ↓

andread.it ↓

The Old Fashioned ↓

Novak ↓

Nathan Borror ↓

The Post Family ↓

Inkcover ↓

Aphichat Panjamanee ↓

Design View ↓

This Made My Day ↓

Posh CSS ↓

daus.trala.la ↓

Arbol Textual ↓

Cynosura ↓

Reachably ↓

Quality Peoples ↓

Huwshimi ↓

Blanketrash ↓

It’s Nice That ↓

Do it for the fame ↓

Minima ↓

Stuart Hobday ↓

Spinz ↓

Daring Fireball ↓

MAY ↓

I Love Typography ↓

In conclusion

I know the readers here have some minimal designs that weren’t on the list, so feel free to drop a comment and let us know. We’d love to check out your minimal sites – we seriously love them!

If you want to pass your 642-813 exam on first attempt without spending extra time on 70-640 preparation then join the winning team of testking to ensure your success in 642-832.

Advertise here with BSA

Advertise here with BSA

By now I’m sure you’ve figured out that I love minimalist designs. I’ve featured many simple and minimalist websites on SpyreStudios before but this time I wanted to feature sites that not only have a minimalist layout but that also use very little colors.

I tried to find sites that use a greyscale color scheme but that also introduce a vibrant and/or contrasting color, usually for links and buttons. Most of the sites on this list use at most 3 or 4 colors (black, white, shade of grey, contrasting color) excluding pictures and images that are placed in the content area.

The websites are listed alphabetically. Hope you enjoy it!
*Warning: Lots of whitespace ahead! :)

5 Thirty One ↓

72 Rivington Street ↓

39/18 ↓

80/20 Studio ↓

Aen Tan ↓

Andy Rutledge ↓

Anthony James Bruno ↓

Arias ↓

Astheria ↓

Beyond Standards ↓

Big Kid ↓

Brilliancy ↓

Bryan Culver ↓

Cade Martin ↓

Daniel Howells ↓

Daniel Oliver ↓

David Airey ↓

The Deck ↓

Eduardo de la Roque ↓

Derek Bender ↓

Eightface ↓

Feed A Fever ↓

Fell Swoop ↓

FRKT ↓

Header Footer ↓

Hello Stefan ↓

Jamie Gregory ↓

Joni Korpi ↓

Jon Tangerine ↓

LindenTibbets ↓

Made By On ↓

Make Tea ↓

Martin Hipp ↓

Max Voltar ↓

Middle Mind Project ↓

Minimal Sites ↓

NUYU ↓

Offset Media ↓

Oh Deer ↓

Olex ↓

Peter Rozek ↓

Pixel Bot ↓

Rikcat Industries ↓

Rodrigo Galindez ↓

Shaun Inman ↓

Site Inspire ↓

Stefan Persson ↓

Strange Beautiful ↓

Subtraction ↓

Superrevolver ↓

Thirty One West ↓

Voce Antica ↓

Welcome To HR ↓

Year Of The Sheep ↓

Yoo Tae Han ↓

Z8 ↓

Your Turn To Talk

I hope you enjoyed this post! Please share your favorites with the rest of us – I love to read what other people like about minimalist designs and layouts. And what do you think of monochrome designs? Love ‘em? Hate ‘em?

Testking offers 100% pass guarantee for your EX0-101 exam. Get PMI-001 and 70-291 real questions for practice and pass your cert exam on first dive guaranteed.

Advertise here with BSA