Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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 Barcelona, dedicated to smart front-end techniques and design patterns.

Inspiration Package: 50 Usable & Elegant Designs

We all love beautiful, usable and impressive web designs. To achieve them, web developers need to focus on many aspects, but basically it all boils down to the question, how well the content is presented and how easily the information can be perceived. Harmonic color schemes are as important as solid and consistent typography. Precise visual structure and intuitive navigation are essential for both usability and accessibility. In fact, mostly it’s a keen attention to small details which gives web-sites a profound and enduring nature.

We’ve selected some more of them. Over 60 elegant, usable and impressive designs with a well thought-out color scheme, typography and visual structure. Their beauty lies in the way the information is presented. Their usability lies in the way they communicate presented data. That’s what makes them different.

Next week we’ll present the .pdf-version of this showcase. You might be willing to check out further showcasese we’ve presented before – you’ll find the links at the bottom of the article.

Inspiration Package:
50 Elegant and Usable Designs

  1. 31Three1
  2. Beautiful Designs - 31Three - The Design Studio of Jesse Bennett-Chamberlain2
  3. North x East3
  4. Beautiful Designs - 12 Ways to Turn a Boring Post into Pure Gold at Weekly Articles About Blogging - NxE4
  5. Youtilize.com5
  6. Beautiful Designs - Youtilize.com - technology, web development and entrepreneurship6
  7. Oaktree Creative7
  8. Beautiful Designs - Oaktree Creative: The pixels, prose and portfolio of Chuck Mallott8
  9. CodeIgniter9
  10. Beautiful Designs - CodeIgniter - Open source PHP web application framework10
  11. WebRevolutionary11
  12. Beautiful Designs - WebRevolutionary — The semi-coherent ramblings of a web addict.12
  13. Pop Labs13
  14. Beautiful Designs - Search Marketing and Social Media Consulting - Pop Labs - Pop Labs14
  15. Creative Binge15
  16. Beautiful Designs - Creative Binge - Online Creative Portfolios16
  17. Designwise Studios17
  18. Beautiful Designs - Designwise Studios ~ Accessible, Simple, and Elegant Web Solutions18
  19. Mike McFarlane Landscape Photography19
  20. Beautiful Designs - Welcome - Mike McFarlane Landscape Photography20
  21. Pearsonified21
  22. Beautiful Designs - Best Damn Blog on the Planet — Pearsonified22
  23. BlogMinistry
  24. Beautiful Designs - BlogMinistry

  25. html life23
  26. Beautiful Designs - html life24
  27. Devlounge25
  28. Beautiful Designs - Devlounge : A resource for designers and developers26
  29. Putput Comunicacions27
  30. Beautiful Designs - Putput Comunicacions28
  31. Savana webhosting29
  32. Beautiful Designs - Savana webhosting - levný hosting s pohodlnou administrací30
  33. Stoodeo31
  34. Beautiful Designs - Website Development Services - Stoodeo32
  35. Koder33
  36. Beautiful Designs - Kodér - Domů | Vy designujete, my kódujeme do posledního detailu34
  37. Tappity: Mobile Homepage35
  38. Beautiful Designs - Tappity: Mobile Homepage36
  39. WorkOne Central37
  40. Beautiful Designs - WorkOne Central38
  41. Rifidi | Software Defined RFID39
  42. Beautiful Designs - Rifidi | Software Defined RFID40
  43. Pixel House41
  44. Beautiful Designs - Gold Coast Web Site Design - Pixel House42
  45. ~ VEDA ~ Healthy Indian Takeout & Eatery43
  46. Beautiful Designs - ~ VEDA ~ Healthy Indian Takeout & Eatery44
  47. Gaby Lopez45
  48. Beautiful Designs - Gaby Lopez46
  49. Versions – Mac Subversion Client47
  50. Beautiful Designs - Versions - Mac Subversion Client48
  51. Ted Lermontov49
  52. Beautiful Designs - Ted Lermontov : Web Designer50
  53. Pozycjonowanie INHEAD Krakow51
  54. Beautiful Designs - Pozycjonowanie INHEAD Kraków52
  55. Sonze53
  56. Beautiful Designs - Sonze54
  57. Corporate Image55
  58. Beautiful Designs - Corporate Image – Logo, Graphic Design, Website Development, Web Marketing Consultant, Melbourne, Sydney, Australia56
  59. Frazier Media57
  60. Beautiful Designs - Frazier Media58
  61. KellerAdv 59
  62. Beautiful Designs - KellerAdv - Agenzia di Pubblicità  - Comunicazione - Marketing - Latina60
  63. elan3.com61
  64. Beautiful Designs - elan3.com : Tim Sears' blog and personal site of web and .NET development.62
  65. Erratic Wisdom63
  66. Beautiful Designs - Erratic Wisdom64
  67. Design View / Andy Rutledge65
  68. Beautiful Designs - Design View / Andy Rutledge66
  69. Waggener Edstrom Worldwide67
  70. Beautiful Designs - Home | Waggener Edstrom Consumer Group | Waggener Edstrom Worldwide68

    Artwork Link

  71. EMS | Matthew Soriano69
  72. Beautiful Designs - EMéS | The online portfolio of Matthew Soriano70
  73. anixstudio.
  74. Beautiful Designs - anixstudio.
  75. Blues Sklep71
  76. Beautiful Designs - Blues Sklep – Live Blues and Jazz music72
  77. plasq.com73
  78. Beautiful Designs - plasq.com - Main >74
  79. sr28 Web Design75
  80. Beautiful Designs - sr28 Web Design, Houston based Web Designer and Illustrator Simon Reynolds76

    Remarkable Designs Link

  81. Warpspire77
  82. Beautiful Designs - Warpspire: Web, Design and Code Geekery78
  83. The 5th Avenue Theatre79
  84. Beautiful Designs - Welcome to The 5th Avenue Theatre80
  85. The Knowledge Well81
  86. Beautiful Designs - The Knowledge Well82
  87. Palm, Inc.83
  88. Beautiful Designs - Palm, Inc., Your Destination for Handhelds, Mobile Managers, Smartphones, Accessories and Software Titles84
  89. Dion.nu Design85
  90. Beautiful Designs - Dion.nu Design | Dion's Weblog 3.0 | Weblog of Dion Kesling. Designer in Rotterdam, the Netherlands.86
  91. FreeSwell Studios87
  92. Beautiful Designs - FreeSwell Studios | Creative, Web Design and Development, Kailua Honolulu Oahu Hawaii88
  93. Knoxville Life Church89
  94. Beautiful Designs - Knoxville Life Church90
  95. Footnote91
  96. Beautiful Designs - Footnote - The place for original documents online92
  97. FF Maria Raisenmarkt93
  98. Beautiful Designs - FF Maria Raisenmarkt |www.ff-raisenmarkt.at|94
  99. JoshLockhart.com95
  100. Beautiful Designs - JoshLockhart.com | Effective Web Applications & Rapidweaver Themes96

    Flash Designs Link

  101. Made by Mark Dearman97
  102. Beautiful Designs - Made by Mark Dearman98

    Further Design Showcases Link

    You can find more inspiration in the following showcases we’ve published before:

    1. 60 Elegant and Visually Appealing Designs99
    2. Keep It Simple, Stupid!100 – the showcase of simple designs.
    3. 45 Fresh, Clean and Impressive Designs101
    4. 30 Beautiful Dark Designs102
    5. 50 Beautiful CSS-Based Designs in 2006103

    Footnotes Link

    1. 1 http://31three.com/
    2. 2 http://31three.com/
    3. 3 http://northxeast.com/blogging/12-ways-to-turn-a-boring-post-into-pure-gold/
    4. 4 http://northxeast.com/blogging/12-ways-to-turn-a-boring-post-into-pure-gold/
    5. 5 http://www.youtilize.com/
    6. 6 http://www.youtilize.com/
    7. 7 http://www.oaktreecreative.com/
    8. 8 http://www.oaktreecreative.com/
    9. 9 http://codeigniter.com/
    10. 10 http://codeigniter.com/
    11. 11 http://webrevolutionary.com/
    12. 12 http://webrevolutionary.com/
    13. 13 http://poplabs.com/
    14. 14 http://poplabs.com/
    15. 15 http://www.creativebinge.com/
    16. 16 http://www.creativebinge.com/
    17. 17 http://www.designwisestudios.com/
    18. 18 http://www.designwisestudios.com/
    19. 19 http://www.mikemcfarlane.co.uk/
    20. 20 http://www.mikemcfarlane.co.uk/
    21. 21 http://www.pearsonified.com/
    22. 22 http://www.pearsonified.com/
    23. 23 http://www.htmllife.com/
    24. 24 http://www.htmllife.com/
    25. 25 http://devlounge.net/
    26. 26 http://devlounge.net/
    27. 27 http://putput.cat/
    28. 28 http://putput.cat/
    29. 29 http://www.savana.cz/
    30. 30 http://www.savana.cz/
    31. 31 http://www.stoodeo.com/
    32. 32 http://www.stoodeo.com/
    33. 33 http://www.koder.cz/
    34. 34 http://www.koder.cz/
    35. 35 http://www.tappity.com/
    36. 36 http://www.tappity.com/
    37. 37 http://www.workonecentral.org/
    38. 38 http://www.workonecentral.org/
    39. 39 http://www.rifidi.org/
    40. 40 http://www.rifidi.org/
    41. 41 http://www.pixel-house.com.au/
    42. 42 http://www.pixel-house.com.au/
    43. 43 http://www.vedatakeout.com/
    44. 44 http://www.vedatakeout.com/
    45. 45 http://www.gabylopez.com/
    46. 46 http://www.gabylopez.com/
    47. 47 http://www.versionsapp.com/
    48. 48 http://www.versionsapp.com/
    49. 49 http://www.tedler.com/
    50. 50 http://www.tedler.com/
    51. 51 http://www.inhead.pl/
    52. 52 http://www.inhead.pl/
    53. 53 http://www.sonze.com/
    54. 54 http://www.sonze.com/
    55. 55 http://www.cidesign.com.au/
    56. 56 http://www.cidesign.com.au/
    57. 57 http://www.fraziermedia.com/
    58. 58 http://www.fraziermedia.com/
    59. 59 http://kelleradv.it/
    60. 60 http://kelleradv.it/
    61. 61 http://www.elan3.com/
    62. 62 http://www.elan3.com/
    63. 63 http://www.erraticwisdom.com/
    64. 64 http://www.erraticwisdom.com/
    65. 65 http://www.andyrutledge.com/
    66. 66 http://www.andyrutledge.com/
    67. 67 http://www.waggeneredstromconsumer.com/
    68. 68 http://www.waggeneredstromconsumer.com/
    69. 69 http://www.emesstyle.com/
    70. 70 http://www.emesstyle.com/
    71. 71 http://www.bluessklep.cz/
    72. 72 http://www.bluessklep.cz/
    73. 73 http://plasq.com/
    74. 74 http://plasq.com/
    75. 75 http://www.sr28.com/
    76. 76 http://www.sr28.com/
    77. 77 http://warpspire.com/
    78. 78 http://warpspire.com/
    79. 79 http://www.5thavenue.org/
    80. 80 http://www.5thavenue.org/
    81. 81 http://www.robgoodlatte.com/portfolio/sites/KW/
    82. 82 http://www.robgoodlatte.com/portfolio/sites/KW/
    83. 83 http://www.palm.com/us/
    84. 84 http://www.palm.com/us/
    85. 85 http://weblog.dion.nu/
    86. 86 http://weblog.dion.nu/
    87. 87 http://www.freeswell.com/
    88. 88 http://www.freeswell.com/
    89. 89 http://www.knoxlife.org/
    90. 90 http://www.knoxlife.org/
    91. 91 http://www.footnote.com/
    92. 92 http://www.footnote.com/
    93. 93 http://ff-raisenmarkt.at/
    94. 94 http://ff-raisenmarkt.at/
    95. 95 http://www.joshlockhart.com/
    96. 96 http://www.joshlockhart.com/
    97. 97 http://www.markdearman.com/
    98. 98 http://www.markdearman.com/
    99. 99 https://www.smashingmagazine.com/2007/05/21/60-elegant-and-visually-appealling-designs/
    100. 100 https://www.smashingmagazine.com/2007/03/26/keep-it-simple-stupid-showcase-of-simple-and-clean-designs/
    101. 101 https://www.smashingmagazine.com/2007/03/05/45-fresh-clean-and-impressive-designs/
    102. 102 https://www.smashingmagazine.com/2007/01/13/30-dark-designs-you-shouldve-seen/
    103. 103 https://www.smashingmagazine.com/2006/12/19/50-beautiful-css-based-web-designs-in-2006/
    SmashingConf Barcelona 2016

    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 Barcelona, on October 25–26, with smart design patterns and front-end techniques.

    ↑ Back to top Tweet itShare on Facebook

    Advertisement

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  1. 1

    blah, blah, blah …
    Sorry but a lot of these designs are not very ‘inspirational’ at all plus I’m sure that you’ve featured quite a few of them already.

    0
  2. 2

    Vitaly Friedman & Sven Lennartz

    July 4, 2007 12:44 am

    @Digilee:

    thank you for your opinion. Could you explain your position? We haven’t featured any of these sites in our previous posts.

    0
  3. 3

    Although I love lists like this, I will agree that I am not very inspired by them either. It’s not just you, lately CSS Mania and The Best Design showcases have not been inspiring as well. Also a lot of these designs I have seen on those two showcases.

    I need something different, some that really inspires me. I know when I am inspired, because I will open up Fireworks and start to create something. None of these make me want to create something.

    But like I said it is not just you.

    0
  4. 4

    I agree with Digilee. You are just collecting lots of screenshots to create lists. The longer the better. Boring. These designs are good but not all of them exeptionally good. I mean: Look at the Skitch site. It is a nice product but the design of the site. Ah well …

    0
  5. 5

    Vitaly Friedman & Sven Lennartz

    July 4, 2007 1:12 am

    Thank you for your opinions.

    @Arne: it’s not about the list or the length of the lists. What we’ve tried to do with this post was to give our readers some more interesting points to get started from. We receive many e-mails in which our readers ask us for more inspirational stuff.

    Of course, design is subjective. And of course, you decide whether we’ve done our job well enough or not.

    0
  6. 6

    I agree and disagree… Some of these designs are quite nice. The one thing that bothers me is the reliance of Web designers on gradients/drop shadows/textured backgrounds. It seems like people believe throwing in one or two of these items automatically makes a design look good.

    0
  7. 7

    Randolph Valencia

    July 4, 2007 1:30 am

    Nice

    0
  8. 8

    Thx a lot for the list. Of course, you can’t find ALL of them VERY interesting, but at least few of them are very interessant.

    Thank you!

    0
  9. 9

    Great list as usual guys! You guys always put so much work into your posts and I’ve never posted a reply so I thought I’d take the opportunity to say thanks for all the hard work and keep it up!

    0
  10. 10

    Was a great list of clean, inspirational designs, right up to the point where you included Microsoft. There web presence is absolutely horrible and should only be included on such lists as what not to do.

    0
  11. 11

    Djurdjica Selec

    July 4, 2007 2:46 am

    Sorry guys….these are good as a gallery, but inspiration?
    Not one of them made me Open Link in New Tab…

    0
  12. 12

    Great list! Thanks for your works! My favorite design is CodeIgniter…

    0
  13. 13

    Awesome list !!! Beautiful Designs!

    0
  14. 14

    What percentage of these are fixed-width designs, and why does there seem to be a growing trend in that direction? Personally, I don’t really want to look at a page that is 750 pixels wide on my monitor that is 1920 pixels wide.

    0
  15. 15

    I have a lot of the first 1-44 sites bookmarked in my del.icio.us under a tag called inspiration. I really agree with Smashing on those designs, they are really inspiring.

    0
  16. 16

    Paul Enderson

    July 4, 2007 3:41 am

    I totally disagree with people saying that these aren’t inspirational! Just because they don’t make you run off to use Photoshop doesn’t mean that they wont prove useful in the future. I bookmark all these posts, and refer back to them when I have a site to build and I’m short of ideas.

    I appreciate the time and effort that the SM team put into these. I also find it fascinating to see what the current trend is for cutting-edge web design.

    I strongly suspect that many of the people who slam these posts (and CSS galleries too) only do so because they know that they can never create such stunning designs themselves.

    Keep them coming guys! :)

    0
  17. 17

    Agreed on every notion with the naysayers. This is a neat list somewhat just to look at. The only one I looked at was Microsoft, because let’s be honest, that design was came out of nowhere and the last time I bothered looking at their site was a good year ago.

    These designers took advantage of either a good background or a good picture and focus everything around it.

    The only thing that makes me inspired to code is when you start jumping into layered designs and I have to answer my own question of how do you do that?

    Most of these designs just offer a great structured layout, something anybody can really do. It’s the ones that make you think that should be called inspirational.

    0
  18. 18

    Nice collection! But if 60+ beautiful designs is not enough inspiration check out the largest design collection at http://www.screenalicio.us with more than 8900 screenshots.

    0
  19. 19

    Atomic Scrotum

    July 4, 2007 3:51 am

    Very nice. Lots of “2.0”-looking sites and the thumbnails make it easy to take it all in.

    A little inspiration to get the creative juices flowing on a beautiful, sunny afternoon when I should be outside…

    0
  20. 20

    Chris Grooms

    July 4, 2007 3:51 am

    The problem with 9/10 of these designs is that they are far too cluttered with a bunch of “pretty graphics” thrown about. When I see a site like that, it doesn’t encourage me away from clicking x on my Firefox tab anymore than a very badly designed website, because I immediately recognize the design was created by someone who thinks pretty little shiny stuff attracts me like a fish and I won’t find any more better content there than in most places.

    0

↑ Back to top