Get web design ideas & inspiration from other designs – Brown

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.

website design

Author of this post: Max Stanworth

Iam the creator and editor of Design Shard, I created this blog to post my inspirations, work and free resources that I hope others find interesting too you can also follow me on twitter @designshard. See all posts by:

80 Comments (Leave a Comment)

  1. julie

    Some of these designs are really good but on the other hand some of them don’t seem to be user friendly…

    Julie from http://www.tradefair.co.uk/creative-forum

    Reply
  2. Many web host organizations provide services using FrontPage Internet hosting from Microsoft. FrontPage Web Hosting has become regarded as the most convenient web designing software in market.Website Design & Hosting

    Reply
  3. I want to know if the design is scalable and reliable. As technology advances and monitors keep changing, you can’t test your site across all platforms and screen sizes. Make sure the design, hosting, and code is scalable. Do this by making sure it’s error-free and making the loading smooth. This helps you create a good design that works for many circumstances.

    Reply
  4. Thanks for such a nice website with information and data source.

    Reply
  5. Nice post. Loved some of the selections you chose!

    Reply
  6. Great blog posts. There’s allot of great things ive learned from your site. Thanks for takeing the time. keep it up.

    Reply
  7. Great article. You not only show design inspiration, but you advice some trick to analysis these resource. It’s useful for beginner like me. who is find the way to start. Thank you Max. :)

    Reply
  8. Some really high quality designs here, nice list! I’m putting a strong focus on ‘unique’ website designs. Actually it would be nice to get your opinion on this on:

    http://www.webdesignaberdeen.org

    It’s a personal site to promote myself as a designer, I was going for a simplistic ‘everything-on-one-page’ look.
    Thanks.

    Reply
  9. Ricardo

    Wow! What a great article! Found it while researching due to the fact that I got an order from a customer who needs a brown based website. And you do present such a great source of ideas!

    Reply
  10. Great selection of inspiration with nice notations.

    Reply
  11. Excellent post Max, and a very nice site. I’ll be back for more!

    Reply
  12. The quality of these designs demonstrate the true value a professional designer brings to a project. You certainly get what you pay for.

    Reply

Leave a Reply

WordPress Hosting
Wordpress Themes Website Templates

Facebook Fan Page

Design Resources

  • Magazinly
  • Revenant - Responsive Business Wordpress Theme
  • Minicorp WP - Not Just a Corporate Theme
  • Staggerly - Responsive News, Magazine & Blog Theme
  • Wedding vow - Responsive WordPress Theme
  • Orion - Responsive One Page Wordpress Template
  • Ipsum Social Blogging Responsive Wordpress Themeu
  • Gratia - WordPress Simple Creative Theme
  • Sereno | Fully Responsive & Retina Ready

Monthly Archives

Design Shard Flickr Group

DAN of SteelRBF_Paper Composites_ex_218RBF_Paper Composites_ex_217RBF_Paper Composites_ex_3l7jpgRBF_Paper Composites_ex_l8 (2)RBF_Paper Composites_ex_l4Ottowa - Responsive, Minimal, ProfessionalOttowa - Responsive, Minimal, Professional HtmlChenTop Gear Where's Stig? Stig's Secret Lair - Illustration by Rod Hunt - Isometric Pixel ArtBeinecke Rare Book and Manuscript Library