Design Shard Now has a Flickr group Join Here to show off your inspirations and work

Get web design ideas & inspiration from other designs - Brown

  • Bump It!
  • Vote It!
  • Save It!
  • Save It!

The aim of this post is to gain design inspiration and ideas from what others have already done, some times its best not to reinvent the wheel and see what others are doing to make there designs work.

Sometimes you can take an idea such as how the navigation looks or how the page has been separated in to different sections and build on this to produce your own variation or new concept.

I’ve managed to compile various websites that look particularly interesting and have certain design elements to get designers thinking about what they could include in there next design.

Points to consider:

  1. How the pages are split up, how the content is separated from other content e.g. a dashed line, change of colour
  2. How the navigation is structured and presented in the design.
  3. Colours that have been used in the designs

I’ve created Photoshop colour swatches of all the designs so if you feel that you want to play around with a certain colour you can download them here

I would be interested to know how other people analyse designs to get inspiration and what they look for Inperticular in a design, please leave a comment.

Most of these screens are based on a brown and earthy theme, most of the designs are not live sites and are just concepts, i thought it would be best to categorise any additional posts in this way to see how colours are used and what colours complement the designs.

Im not saying these designs are perfect and every ones a critic, but they have some cool design features that could be useful to any one wanting to get some good ideas.

All That Jazz


Info: View larger image | Designed by: cc-designs

Interesting Design Features:

  1. Dividing content with dashed lines, adding light sources to new sections to emphasise where new content starts
  2. Floral background adds interest as well as fading the background out in to solid colour.
  3. Making objects look like they are stacked on top of each other like paper with a slight dropdown.

Andrew Brown


Info: View larger image | Designed by: nextexile

Interesting Design Features:

  1. Realistic looking dirt with other features such as moss, others i can think of sand with shells.
  2. Leather textures with thread as well as dirt edges where grime collects.
  3. Metal, giving metal a shine makes it look more realistic and enchanting to look at.

Arnette


Info: View larger image | Designed by: cutwater55

Interesting Design Features:

  1. Water marks on paper, and textures on textures, hear a blotched tea bag effect.
  2. Grime on the under and on the edges of images makes them look more 3D and gives depth.
  3. Hand drawn elements add a whole new perspective to a design that is mixed with photographs.

Buzzul


Info: View larger image | Designed by: hyar

Interesting Design Features:

  1. Notice board effect with cork background and torn paper edges.
  2. Cutting out images and placing at random like news paper clippings can add more interest to certain designs, cloud also be used for a fashion site.

Cerro Azul

Info: View larger image | Designed by: timedeiros

Interesting Design Features:

  1. Clear dirt textures and add extra detail to suit the theme in this case tyre marks for the quad bike.
  2. Old metal plaque nailed to wood frame, slightly at an angle, gives the impression its all been held together.
  3. Tattered paper with the logo dropping down from the top of the screen.

Design Studio

Info: View larger image | Designed by: ahmedzahran

Interesting Design Features:

  1. Showing bare brick can help attract more interest.
  2. cello tape making the design look placed on the wall.
  3. Add more colour to the design wit certain logical stains.

Euro Com

Info: View larger image | Designed by: ecp-pro

Interesting Design Features:

  1. Crosshatched and a deep shade around a container can give the appearance of a texture and depth.
  2. Grainy backgrounds give really good interest instead of plain black.

Factory Four


Info: View larger image | Designed by: z1ppy

Interesting Design Features:

  1. Subtle patterned background.
  2. dashed lines, cut here as if it was paper or cardboard with grunge edges.
  3. torn corners and edges to add extra interest to images.

Fear Tox


Info: View larger image | Designed by: feartox

Interesting Design Features:

  1. small details can play a big part, and make a design alot more interestign to explore.
  2. Creating a unique yet easy to use navigation system to fit the design.
  3. Add depth, colour and flow with vector elements.

Junk Design

Info: View larger image | Designed by: amandhingra

Interesting Design Features:

  1. Photographs that compliment the style of the design making it more life like.
  2. Doodles and little pieces of work that is not necessarily the main focus. Get your scanner and your pencil and make your own.
  3. Again an interesting navigation yet simple for the user to follow, tear up some paper or use some ones brush.

The Colour Swatches

All Colour swatches were made with Adobe Kuler and you can download all the colour swatches in this post here [7kb]

Don’t know how to load the swatches in to Photoshop or illustrator learn on veerles blog

How do you analyse designs

I would be interested to know how other people analyse designs to get inspiration and what they look for Inperticular in a design, please leave a comment.

Share and Bookmark:
  • StumbleUpon
  • del.icio.us
  • Digg
  • votetime
  • Technorati
  • Reddit
  • Mixx
  • De.lirio.us
  • Fark
  • NewsVine
  • Furl
  • Ma.gnolia
  • Google
  • TwitThis
  • Spurl
  • YahooMyWeb
  • Live
  • E-mail this story to a friend!
  • Print this article!

Related Articles

  • Bump It!
  • Vote It!
  • Save It!
  • Save It!

42 Comments

  1. Posted September 1, 2008 |Permalink

    Awesome… I like brown style (with wood).

    Tks dude

  2. Posted September 1, 2008 |Permalink

    photoshop is such a good design tool,really like the Design Studio site

  3. Posted September 1, 2008 |Permalink

    Great post! Dugg :)

  4. Posted September 1, 2008 |Permalink

    @ bobmartien - cool, hope this can help inspire some cool designs
    @ neil - No probs
    @Tom -Thanks apreciated

  5. Posted September 1, 2008 |Permalink

    Same here! DUGG

    btw been trying to buy an ad on your blog for two days but still no activation of my account! ;(

  6. Posted September 1, 2008 |Permalink

    @ Styletime - hmm i check my email every day, i dindt see any thing…there set to auto approve as well, i double check and get back to you.

    Thanks for the Digg

  7. Posted September 1, 2008 |Permalink

    Great designs. I love them!

  8. Posted September 1, 2008 |Permalink

    great collection of brown design sites.such a nice inspiration:)thanks a lot

  9. Posted September 2, 2008 |Permalink

    Thanks for sharing with us those beatuifull designs and your own opinion about each of them.

  10. Posted September 2, 2008 |Permalink

    @ Spill to Jill - Great, thanks
    @ NaldzGraphics - No problem
    @ Munky - Glad you like it.

  11. Adam Bird
    Posted September 2, 2008 |Permalink

    Great article, some really great designs. Just one minor gripe, there are quite a few typo’s in the article which made reading a tad frustrating…sorry!

  12. Posted September 2, 2008 |Permalink

    @ Adam Bird - Don’t be sorry, my fault I’m definatly from now on going to thoroughly spell check my articles, I’m relatively new to writing on a blog and do it all in code view, so thanks for putting me straight, the next article should be perfect.

    All mistakes are now corrected

  13. Posted September 2, 2008 |Permalink

    Клёво, мне понравилось! ;)

  14. Adam Bird
    Posted September 3, 2008 |Permalink

    Cheers Max! Hope the blog keeps up the good work!

  15. Posted September 3, 2008 |Permalink

    I like this post very much. Not just the idea of showing excellent brown designs, but also the way you analyzed details and color schemes. Great one, Max! I have to share this with my team mates.

  16. Posted September 3, 2008 |Permalink

    @ Janko - Thanks for reading, Cool that brings a smile to my face, hope it can be helpful, keep up the good work btw.

  17. Cristiano
    Posted September 5, 2008 |Permalink

    Just a heads-up: you’ve got the “interesting design features” for the Design Studio website under the Euro Com one, and those for Euro Com under Factory Four I think, too..
    Great article anyway, loved it and it’s brought in some good inspiration for the design I am working on!
    Also, I’m now following you on Twitter (DaEMoN33) - See you there!

  18. Posted September 5, 2008 |Permalink

    @ Christiano - I completly missed that, funny how you cant see you own mistakes, thaks for letting me know sorted now, ill see you on twitter then. :)

  19. Posted September 6, 2008 |Permalink

    Nice post, lots of great inspiration. You went above and beyond most inspiration posts by including the features, and the swatches, good work!

  20. Boring_Me
    Posted September 6, 2008 |Permalink

    Hi, i consider myself to be awful at all forms of creative web design and graphic design also.

    Since starting to play around with web dev (People like me still enjoy webdev coding etc even though we can not get to grips with throwing a good looking site together)

    All of my designs have been bland, poor and boring and of a strong code orginated style - most of my sites over the years have had NO GRAPHICS end of story about how plan they have all been if none of them have had any graphics

    I just dont know what looks good never mind how to get there.

    Reading this page was a huge help to me, i think i just had some sort of mental creative block break through (mega long ass forever writers styled block maybe?!) reading it

    I studied the pictures for what i myself thought was good, then i read what you wrote, what you thought was good and it blew me away. Why did i not think that those elements made the site look NOT just GOOD but more than good a huge step past good, excellent.

    This is why people like me do not design things!

    I can (when i studied your pictures) appreciate what you have done

    You have inspired me. Even me starting to use a really funky background image will transform every single one of my websites in such an inmense way.

    I am planning alot more webdev in the coming weeks and i will now take it to a whole new level

  21. Posted September 7, 2008 |Permalink

    @Matt - Awesome thanks.

    @ Boring_me - At first i thought your comment was going to be negative with the name you used, but im glad these analysis of designs can help generate some good ideas, just because there focused on brown doesnt mean most aspects of the design cant be used on other projects, good luck, thanks for the comment.

  22. Posted September 7, 2008 |Permalink

    Wow Max, this is a truly amazing post. I love it, I really do. Nice work!

  23. Posted September 7, 2008 |Permalink

    I meant to reply to this sooner but I’ve been swamped this week. I love this article and I don’t think I’ve ever broken designs down like this. I guess I’ve been going with a more intuitive approach to studying good design but I need to do more of a critical breakdown like this as well.

    And thanks for doing brown sites. I’m working on a brown & blue color scheme for the new Arbenting layout and this was very inspirational!

  24. Posted September 10, 2008 |Permalink

    This is an amazing article. I love that youve included ps swatches, I really hope you do many more articles like this. I love detail in designs, quirky things that really give a site personality. All of these are great examples of designs with big personalities. I would love to see an article of white designs. for some reason I have a hard time with white designs. Other than grungy style, what are some good ways to add personality to white sites?

  25. Posted September 10, 2008 |Permalink

    @ Angie Bowen - yea breaking down site design is a good way to identify what makes it up and how to use certain parts of the design.

    @Brooke - Thanks for the comments means alot when you get a great compliment, well it depends on the site and how minimal it needs to be, you could try adding vectors, floral patterns, to white designs they can add a huge impact as well as hand drawn style elements whether it be drawn buttons, horizontal rules, they dont nessesarily need to be in color either. hope this helps create some imagery for you.

    i came across Minimal Designs the other day could be useful there mainly white.

    ill be doing more like this i might even go through the colours of the rainbow hehe thanks for the comments guys and gals

  26. Posted September 17, 2008 |Permalink

    good design..thank you

  27. Posted September 17, 2008 |Permalink

    Ой, классно :)

  28. Posted September 17, 2008 |Permalink

    Awesome article, I love how you took the time to analyze the sites and give a little description. and nice touch adding the swatches

    all those sites were all very inspirational,

    and how great is the Minimal Designs website

    I discovered it not too long ago .

  29. Posted September 17, 2008 |Permalink

    @ Pab - Thanks, sometimes picking out some aspects of a site can help trigger some good ideas, youve got some good designs in your portfolio :) , and minimal sites is a good place to start for minimal inspiration

  30. Posted September 20, 2008 |Permalink

    Your articles is very good. Thank you for your sharing.

    I would like share my website development experience.
    http://www.pickto.net/index.php?p=2_1_Website-Development

    I use mind map to write each training summary.

    And I would like to introduce SMART Goals to set your website goals.

  31. sezam20
    Posted September 26, 2008 |Permalink

    to Max | Design Shard…

    you gathered a great and unique collection of sites in brown.

    I would like to share my collection,

    http://www.designreviewers.com/category/Tags-Category/brown

    still it’s not so perfect…

    I should definitely add there sites from your collection.

  32. Posted September 29, 2008 |Permalink

    Hey Max, thanks for the comments, I love the new design.

  33. Posted October 1, 2008 |Permalink

    Nice list! I would like to suggest my own site as well, http://www.richardcastera.com

    Richard´s lastest blog post..PHP - Generate a random password based on length

  34. Posted October 7, 2008 |Permalink

    Nice informative Information for web designer like me.

  35. Emre
    Posted October 9, 2008 |Permalink

    How just could you do that:

    Normally when right-click on images / links, there would be dots border.

    However there is no dot in your site.

    Please teach me! Thanks =]

  36. Posted October 9, 2008 |Permalink

    @ Emre - Thanks for commenting , normaly this can be achieved by putting

    a{outline:none;}

    in you CSS file, that removes any dots on links especially from FireFox

  37. Mark
    Posted October 9, 2008 |Permalink

    …what a great read, appreciate it.

  38. Posted October 9, 2008 |Permalink

    Great post with some really nice designs! ;)

    Ovi Dogar
    AbsoluteCovers.com

  39. Posted October 11, 2008 |Permalink

    Nice Stuff! I have been designing for about 10 years but never ventured into brown. After seeing this i am definetly going to try it out!

  40. Posted October 12, 2008 |Permalink

    This was a great post. I like the breakdown and analysis of the intricate detail that you noticed thst other designers created. And as designers, we love to show off our work and love even more that other talented designers noticed the hard work put into it.

    Antonio Wells´s lastest blog post..Using sIFR to Control Fonts

  41. Posted November 12, 2008 |Permalink

    Nice collection of inspiring websites. I like it, although some of them aren´t looking that organized.

  42. Posted November 12, 2008 |Permalink

    @ Dietmar - The point of the post wasnt really looking at the overall organisation of the entire page because i would agree that they arent the best, but you can look at a part of a web site and be able to see how they have organised the information / seperated the information even if part of it is unorganised, it was also looking at some of the design elements and graphics that they used to achieve theire overall design, thanks for the comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

Design Resources

Design Resources

Comments

  • Max | Design Shard: Thanks liam means alot...
  • liam: One vote from me, good luck man!...
  • Auggie4000: Always looking for great texture...
  • Tom Ross: Great list! I'll definitely be j...
  • Andy Sowards: Really good article, Thanks! Lik...
  • povilli: This post thanks povi...
  • Jay Hilgert: Sweetness! Downloading now.........
  • Bainsey: Loving this - nice collection ...
  • Thomas: Love the textures. It's really h...
  • Marco: Great article! I was thinking ab...