Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Showcase Of Clean And Minimalist Designs

Advertisement

By Jacob Gube and Smashing Editorial Team

Minimalism, in the context of design, refers to simple, unadorned designs that embody only the most basic and fundamental needs. In art, it is a movement that has its roots in the post-World War II era, started by highly regarded minimalist artists such as Donald Judd1, Carl Andre2, and Robert Morris3. Minimalism today refers to a certain style (or even a certain attitude or way of life) that transcends different fields, such as architecture, philosophy, law and, of course, Web design.

In this article, we explore the meaning of minimalism in the context of Web design. First, we’ll look at some features of a minimalist Web design in the hope of learning by way of deconstruction. Then, we’ll see a showcase of minimalist designs. Finally, you’ll find some useful resources on the topic of minimalism in Web design.

Showcase of clean and minimalist designs Link

Though there are different ways to achieve a minimalist Web design, and designers have varying definitions and interpretations of what minimalist Web design truly is, there are certainly some commonalities among what we can consider minimalist designs.

In the review below we’ll consider some common features and attribues of a minimalist Web design. However, let’s first take a look at some truly outstanding examples of excellent minimalist and clean web design.

Jan Reichle4

Jan Reichle screen shot.5

HUGE6

HUGE screen shot.7

Markenpersonal.de

Screenshot

Rodrigo Galindez

Screenshot

BrynnShepherd.com8

BrynnShepherd.com screen shot.9

SpiekermannPartners

SpiekermannPartners screen shot

MaximNew10

MaximNew screen shot.11

Muller12

Muller screen shot.13

FLOWmarket14

FLOWmarket screen shot.15

Rbg6.se16

Screenshot17

80/2018

80/20 screen shot.19

Minus.dk20

GG screen shot.21

Cubic22

Cubic screen shot.23

Vitor Lourenco24

Vitor Lourenco screen shot25

Deep.co.uk26

Screenshot27

fellswoop28

Screenshot29

3rings30

3rings screen shot.31

AIGA New York32

AIGA New York screen shot.33

Kalle Gustafsson34

Kalle Gustafsson35

Clagnut36

Clagnut screen shot.37

BetterInteractive.com38

Screenshot39

Concentric-Studio.com40

Screenshot41

Clandrei.de42

FLOWmarket screen shot.43

Ab-c.com.au

Screenshot

Forgetfoo

Screenshot

MAYØ44

MAYØ screen shot45

Berit Sømme46

Berit Sømme screen shot47

Poccuo48

Poccuo screen shot.49

SMeltery50

SMeltery screen shot.51

kraaft52

kraaft screen shot.53

Hermes.com54

Hermes.com screen shot.55

Sitening56

Sitening screen shot.57

bora aksu58

bora aksu screen shot.59

hillmancurtis60

hillmancurtis screen shot.61

BuuHouse Interactive62

BuuHouse Interactive screen shot.63

Theme64

Theme screen shot65

Marek Levák66

Marek Levak screen shot.67

Mark Wieman68

Mark Wieman screen shot69

Rogier Bikker

Rogier Bikker screen shot.

Razvan Stavila

Screenshot

Lovecreative.com70

Screenshot71

1. Design is focused on the content Link

In minimalist designs the focus lies not on the visual presentation, but on the content — the information presented in a “naked”, clean and intuitive way. The property of being minimal refers to the structure of the layout; but it is the main task of every simple design to keep its functionality and communicate the information it is supposed to present.

The content is the focal point of the Web page, whether that content is a showcase of photography, Web designs, or writing. The design provides little to no distraction.

Autumn Whitehurst Illustration
In this Web design, the use of a plain white background and de-emphasized text makes your eyes gravitate towards the artwork.

Autumn Whitehurst Illustration screen shot.

Frieze Magazine72
When viewing this design, note where your eyes look first. Probably, you would have looked at either the large image or the “frieze” logo first.

Frieze Magazine screen shot.73

2. Whitespace is the king… Link

To make it easy for readers to scan and read the content, minimal designs usually need a lot of whitespace to breathe. In some cases whitespace dominates in the design, taking 60-70% of the whole layout space. In such designs whitespace, while remaining passive, strongly bundles user’s attention on very few site elements and thus effectively influences users’ perception of the overall design.

Rule of thumbs: the fewer elements you have and the more whitespace you have, the more attention will each element in your design get.

Cameron.io74 uses whitespace as the primary element. Notice how little space is used by content and how strongly your attention is focused on the navigation menu and the blog posts. Please also notice that very calm, neutral and subtle colors are used.

Cameron.io screen shot.75

3. Typography is the queen Link

Typography is used to convey messages to the user. Larger, bold text draws the user’s attention to the intended area. Careful use of color, size and style of text is used in the design phase to underscore important elements and make others less prominent.

i love typography76
Notice how the large bold, centered logo on the page manages to grab your attention.

Rikcat Industries screen shot.77

Astheria78
This design directs the user’s focus straight to the “featured” content (in this case, the most recent article of the author). Notice how your focus bypasses the logo, even though it appears before the “featured” content; completely the opposite of i love typography’s design, which directs you to the logo/website name.

Astheria screen shot79

Corporate Risk Watch80

CRW screen shot81

4. Color palette consists of solid colors Link

The in-your-face, flashy, loud color schemes associated with Web 2.0 and vintage/retro design trends are avoided. Usually, designers pick one vibrant color and use it effectively to communicate the most important information presented on the site. Such elements are usually clickable; the number of these elements rarely exceeds 5-7.

Behance82

Behance Screen shot.83

Alltop84

Alltop screen shot.85

5. Plain, solid white/gray or solid dark backgrounds are common Link

Solid backgrounds are effective especially when the content is vibrant and colorful (such as in design showcases). Plain colors doesn’t fight for users attention; instead, they support the readers and make it easy to actually scan the page when looking for the content. “Minimal” designg almost never have vibrant background images — patterns, textures and vivid colors are used very rarely.

kind company86
The thumbnail project images really stand out from the solid white background.

kind company screen shot.87

The Consult™88
The same concept applies to dark backgrounds.

The Consult™ - screen shot.89

6. A minimal number of colors Link

Many minimalist Web designs use only one to three colors, and page elements outside the content are often monochromatic. This again reduces distraction from the Web page content.

Rikcat Industries90
This design showcases a monochromatic color palette in the foreground.

Rikcat Industries screen shot.91

Cameron Moll92
In this design, page elements such as the logo, navigation bar and sidebar use different hues of gray.

Cameron Moll screen shot.93

7. Text-based logos instead of illustrative, iconic logos Link

Again, to uphold the concept of minimalism whereby you strip down the design to the bare, unadorned minimum, the logos of minimalist websites are plain and simple.

The Idiot Behind the Iron Mask94

The Idiot Behind the Iron Mask - screen shot.95

8. Clean right angles and lines in use Link

Very often clean right angles and lines are used instead of rounded and uneven edges. Rounded graphic elements, the main clichée of Web 2.0, and the uneven edges seen in grunge style are avoided in minimalist Web designs.

Monty Lounge96

Monty screen shot97

Builtbybuffalo.com98

Buffalo screen shot.99

Antonio Carusone100

Antonio Carusone screen shot101

SIGMA6102

SIGMA6 screen shot.103

9. Minimal ? white, gray and black colors Link

White/black (or dark gray) is the typical color scheme of minimalist Web designs, but others use different colors to achieve the same goals.

Soulellis Studio104

Soulellis Studio screen shot.105

Emigre106

Emigre screen shot.107

10. Use of vibrant, colorful images Link

The use of colorful, bold images can enrich the visual impact of the design by providing a stark contrast to the muted, solid colors of the minimalist design elements.

Coptix108

Coptix screen shot109

11. Use of grid-based designs Link

Many minimalist designs use a grid-based layout110 to reflect the structured, right-angled, rigid nature of minimalism.

Jamie Gregory

Jg screen shot.

Resources Link

(al)

Footnotes Link

  1. 1 http://en.wikipedia.org/wiki/Donald_Judd
  2. 2 http://www.haberarts.com/andre.htm
  3. 3 http://en.wikipedia.org/wiki/Robert_Morris_(artist)
  4. 4 http://www.janreichle.com/
  5. 5 http://www.janreichle.com/
  6. 6 http://www.hugeinc.com/
  7. 7 http://www.hugeinc.com/
  8. 8 http://brynnshepherd.com/
  9. 9 http://brynnshepherd.com/
  10. 10 http://www.maximfma.com/
  11. 11 http://www.maximfma.com/
  12. 12 http://www.hellomuller.com/
  13. 13 http://www.hellomuller.com/
  14. 14 http://theflowmarket.com/
  15. 15 http://theflowmarket.com/
  16. 16 http://www.rbg6.se/
  17. 17 http://www.rbg6.se/
  18. 18 http://www.8020studio.com/
  19. 19 http://www.8020studio.com/
  20. 20 http://www.minus.dk/
  21. 21 http://www.minus.dk/
  22. 22 http://www.cubicstudio.co.uk/
  23. 23 http://www.cubicstudio.co.uk/
  24. 24 http://www.vlourenco.com/
  25. 25 http://www.vlourenco.com/
  26. 26 http://www.deep.co.uk/
  27. 27 http://www.deep.co.uk/
  28. 28 http://www.fellswoop.com/index.html
  29. 29 http://www.fellswoop.com/index.html
  30. 30 http://3rings.designerpages.com/
  31. 31 http://3rings.designerpages.com/
  32. 32 http://www.aigany.org/
  33. 33 http://www.aigany.org/
  34. 34 http://www.kallegustafsson.com/
  35. 35 http://www.kallegustafsson.com/
  36. 36 http://clagnut.com/
  37. 37 http://clagnut.com/
  38. 38 http://www.betterinteractive.com/
  39. 39 http://www.betterinteractive.com/
  40. 40 http://concentric-studio.com/work/
  41. 41 http://concentric-studio.com/work/
  42. 42 http://clandrei.de/
  43. 43 http://clandrei.de/
  44. 44 http://www.jasonmayo.co.uk/
  45. 45 http://www.jasonmayo.co.uk/
  46. 46 http://www.somme.no/
  47. 47 http://www.somme.no/
  48. 48 http://www.poccuo.com/
  49. 49 http://www.poccuo.com/
  50. 50 http://www.smeltery.net/
  51. 51 http://www.smeltery.net/
  52. 52 http://www.kraaft.com/
  53. 53 http://www.kraaft.com/
  54. 54 http://www.hermes.com/
  55. 55 http://www.hermes.com/
  56. 56 http://sitening.com/
  57. 57 http://sitening.com/
  58. 58 http://www.boraaksu.com/
  59. 59 http://www.boraaksu.com/
  60. 60 http://www.hillmancurtis.com/
  61. 61 http://www.hillmancurtis.com/
  62. 62 http://www.buuhouse.com/
  63. 63 http://www.buuhouse.com/
  64. 64 http://www.thememagazine.com/
  65. 65 http://www.thememagazine.com/
  66. 66 http://www.designme.sk/
  67. 67 http://www.designme.sk/
  68. 68 http://www.markwieman.com/
  69. 69 http://www.markwieman.com/
  70. 70 http://www.lovecreative.com/
  71. 71 http://www.lovecreative.com/
  72. 72 http://www.frieze.com/magazine/
  73. 73 http://www.frieze.com/magazine/
  74. 74 http://cameron.io/
  75. 75 http://cameron.io/
  76. 76 http://ilovetypography.com/contents
  77. 77 http://ilovetypography.com/contents
  78. 78 http://astheria.com/
  79. 79 http://astheria.com/
  80. 80 http://www.corporateriskwatch.com/
  81. 81 http://www.corporateriskwatch.com/
  82. 82 http://www.behance.com/
  83. 83 http://www.behance.com/
  84. 84 http://alltop.com/
  85. 85 http://alltop.com/
  86. 86 http://www.kindcompany.com/
  87. 87 http://www.kindcompany.com/
  88. 88 http://theconsult.com/prc.html
  89. 89 http://theconsult.com/prc.html
  90. 90 http://www.rikcatindustries.com/work/
  91. 91 http://www.rikcatindustries.com/work/
  92. 92 http://www.cameronmoll.com/about/
  93. 93 http://www.cameronmoll.com/about/
  94. 94 http://www.wanzafran.com/
  95. 95 http://www.wanzafran.com/
  96. 96 http://www.montylounge.com/
  97. 97 http://www.montylounge.com/
  98. 98 http://builtbybuffalo.com/
  99. 99 http://builtbybuffalo.com/
  100. 100 http://www.yearofthesheep.com/
  101. 101 http://www.yearofthesheep.com/
  102. 102 http://www.sigma6.ch/
  103. 103 http://www.sigma6.ch/
  104. 104 http://www.soulellis.com/
  105. 105 http://www.soulellis.com/
  106. 106 http://emigre.com/EOther.php
  107. 107 http://emigre.com/EOther.php
  108. 108 http://coptix.com/
  109. 109 http://coptix.com/
  110. 110 https://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
  111. 111 http://rainfall-daffinson.com/minimalism/
  112. 112 http://www.emilychang.com/go/weblog/comments/design-20-minimalism-transparency-and-you/
  113. 113 http://webdesignledger.com/inspiration/is-minimalistic-design-more-effective
  114. 114 http://tomayko.com/writings/administrative-debris
  115. 115 http://www.minimalsites.com/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Jacob Gube is the Founder and Chief Editor of Six Revisions, a web publication for web developers and designers, and the Deputy Editor of Design Instruct, a web magazine for designers and digital artists. He has over seven years of experience as professional web developer and web designer and has written a book on JavaScript.

Advertisement
  1. 1

    You guys should feature my site in the next round (I wish I was found in this round), because I think I embody most of those qualities. I absolutely LOVE minimalism and I think it is paramount for blogs, because those should be ALL ABOUT the content, the words, which is usually a reason to turn to the minimalist style as you all have outlined in this article. Some sites, as mentioned above, should not focus on minimalism because it does not work with their sites well. Portfolio sites or promotional sites usually require heavy graphics and showcasing details of their work, minimalism does the opposite. Either way, minimalism is amazing and should be utilized more in the web, especially in the blogging world!

    0
  2. 2

    Nice collection of some amazing sites here. I really like the write-up at the end that pulls out some common features.

    I think my site uses many of these principles too: http://www.aptdesignonline.com

    What do you think?

    0
  3. 3

    you made my day :)
    i’m a minimalism addict ;)

    btw. FIRST! :)

    0
  4. 4

    Wow. It’s amazing. Tks for sharing this.
    Salaam.

    0
  5. 5

    Minimalist design, great typography and smart grid design go hand in hand. Great examples here, cheers!

    0
  6. 6

    I love seeing excellent examples of minimalism in design (and thanks for linking to one of my articles). It seems like it would be an easier style of design, but it’s probably more difficult to do well with minimalism than other styles of design.

    1
  7. 7

    In my previous incarnation my web site was of very simple layout and entirely css based…. you make me think to back to this roots!

    Nice article!

    0
  8. 8

    Brynn Shepherd

    November 17, 2008 3:52 pm

    Thank you so much for featuring my portfolio!

    0
  9. 9

    Great collection!!!

    0
  10. 10

    Fabulous collection. This style speaks to me, and all these sites stand out in an over cluttered and under-grid(ed) web design culture. Simplify, simplify, simplify! Thoreau had it right, and so do these sites. Thanks for sharing!

    0
  11. 11

    Rhyming Designer

    November 17, 2008 4:54 pm

    Minimalism doesn’t guarantee great design, but minimal designs have a much better chance of being great (i.e., visually pleasing and effective). Minimalist design is oriented to the user/reader, and is the exact opposite of the “Look-what-I-learned-in-Photoshop-class-today” mentality you see so often today. THANK YOU for this wonderfully refreshing look at minimal design.

    0
  12. 12
  13. 13

    Ante Salinovic

    November 17, 2008 6:35 pm

    The animation on the ab+c site (featured in the article) is top-shelf.

    0
  14. 14

    Hey guys I’m the UX Manager at Coptix. Thanks for the nod, it’s quite an honor.

    0
  15. 15

    Great for inspiration! Thanks Smashing!

    0
  16. 16

    Do you want minimalist and clean designs check this website http://www.ruibarrocadesigner.com

    0
  17. 17

    It would have been great if you posted the screenshots of these websites instead of partial graphics! Anyway, nice post, and a great collection. I wonder how you guys find such impressive and interesting sites throughout the year!

    0
  18. 18

    Derek McDonald

    November 17, 2008 8:15 pm

    What a nice collection and some nice tips to build a nice minimalistic design. I’m not the greatest designer, I’m more of a developer, so these topics help me build my skills in website interface design.
    Keep these coming, they are great.

    0
  19. 19

    Geoffrey Hiller

    November 17, 2008 8:44 pm

    Thanks for the great selection. I’m featuring some of the work in my web design class in Bangladesh.

    0
  20. 20

    Muhammad Ahmad

    November 17, 2008 9:22 pm

    thank u

    0
  21. 21

    You gotta mention Khoi Vinh’s site, Subtraction when you’re talking about minimialist!

    0
  22. 22

    Martin Šnajdr

    November 17, 2008 9:57 pm

    Great post! I am a minimalist so I thank you for this showcase

    0
  23. 23

    Nice roundup.

    0
  24. 24

    Minimalism is difficult to pull off. It’s great to see this roundup of sites by designers that know what they’re doing with minimal elements.

    0
  25. 25

    I love minimalistic design. After the glowy “web 2.0”-style and the already not so new trend: “grunge”, I would say: minimalistic design is the new shit. Keep it simple and focus on the content.

    0
  26. 26

    who cares if your first or not?its not a contest..

    great post SM,I love topics about typography..

    0
  27. 27

    Nice selection! Maybe you’ll like to check this one also : aSeed

    0
  28. 28

    You people save my life on a regular basis :-)

    0
  29. 29

    I could see “Mutum Sigillum” website in this list.
    Great post, great typography and color tones…

    0
  30. 30

    I too love minimalist design on the web.
    And this is an outstanding collection, well done.

    Just to add my two cents, came across a nice photo site that embraces minimalist principles allowing the user to focus on the pictures and not the website. http://www.markboyle.com.au

    0
  31. 31

    Sorry… but this is not the real world.
    These design are beautiful, but are design relative mode, design or art environment.. or this kind of design is acceptable. Now let’s back to the real world where clients from small companies or industries pay to us. I doubt who have an internet agency can do this with all your clients. Don’t get wrong.. i love clean design… but in the real world.. things are different.

    0
  32. 32

    I love the minimalism. Great collection.

    0
  33. 33

    Hey, really nice designs!
    My website would also have fit in this showcase :)
    BORABORA
    Great collection!

    0
  34. 34

    WOW!!!
    Thank you for featuring my web site. <3

    0
  35. 35

    Great post! Along the same lines is http://www.helpineedhelp.com

    0
  36. 36

    lovely <—minimalist

    0
  37. 37

    I also like Link [www.bam-multimedia.nl]

    0
  38. 38

    Michael [Boicozine]

    November 18, 2008 3:32 am

    Awesome Post. Thank you.

    0
  39. 39

    Anyone see a similarity between This and Khoi Vinh’s site?

    Kind of shameless, me thinks.

    0
  40. 40

    This showcase is absolutely wonderful !
    Thanx a lot.

    0

↑ Back to top