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:
- How the pages are split up, how the content is separated from other content e.g. a dashed line, change of colour
- How the navigation is structured and presented in the design.
- 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
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:
- Dividing content with dashed lines, adding light sources to new sections to emphasise where new content starts
- Floral background adds interest as well as fading the background out in to solid colour.
- 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:
- Realistic looking dirt with other features such as moss, others i can think of sand with shells.
- Leather textures with thread as well as dirt edges where grime collects.
- 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:
- Water marks on paper, and textures on textures, hear a blotched tea bag effect.
- Grime on the under and on the edges of images makes them look more 3D and gives depth.
- 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:
- Notice board effect with cork background and torn paper edges.
- 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:
- Clear dirt textures and add extra detail to suit the theme in this case tyre marks for the quad bike.
- Old metal plaque nailed to wood frame, slightly at an angle, gives the impression its all been held together.
- 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:
- Showing bare brick can help attract more interest.
- cello tape making the design look placed on the wall.
- Add more colour to the design wit certain logical stains.
Euro Com
Info: View larger image | Designed by: ecp-pro
Interesting Design Features:
- Crosshatched and a deep shade around a container can give the appearance of a texture and depth.
- Grainy backgrounds give really good interest instead of plain black.
Factory Four
Info: View larger image | Designed by: z1ppy
Interesting Design Features:
- Subtle patterned background.
- dashed lines, cut here as if it was paper or cardboard with grunge edges.
- torn corners and edges to add extra interest to images.
Fear Tox
Info: View larger image | Designed by: feartox
Interesting Design Features:
- small details can play a big part, and make a design alot more interestign to explore.
- Creating a unique yet easy to use navigation system to fit the design.
- Add depth, colour and flow with vector elements.
Junk Design
Info: View larger image | Designed by: amandhingra
Interesting Design Features:
- Photographs that compliment the style of the design making it more life like.
- Doodles and little pieces of work that is not necessarily the main focus. Get your scanner and your pencil and make your own.
- 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.
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. See all posts by: Max Stanworth
Typographic + Design inspiration from music magazine ads – pt 2
Awesome artistic inspiration from music magazine adverts
Ultimate resources for grunge design a massive collection
Guest Post: Enhance Your Web Designs with Javascript
25 Examples of Clean and Well designed Web Sites
10 Free Original Hi-Res Fully Stained Paper Textures
5 Free Hi-Res Stock Picture Frame Images
16 Great Photoshop Light Effect Tutorials
20 Free Hi-Res Yellow Grunge Concrete Textures
25 Examples Of Light Effects In Web Design
11 Great Photoshop Photo Effects Tutorials
25 Examples of Light and Space Effects In Web Design
19 Awesome Photoshop Text Effect Tutorials
Space and Planet Photoshop Tutorials To Create Amazing Space Scenes
Inspiring Grunge Style Big Typography Posters
Ultimate Source for tiled background patterns
Photoshop Brushes | Brushes For Photoshop: Nice! Thank for share!
--------------
...
Tobin: Whew. I can knock off a couple dozen tut...
herbert: A healthy mind in a healthy body....
chesapeake web design: the good die young is awesome...these ar...
GrooveChick {Mel}: I have several free for use.
http://w...
Very good designs
Разное
This is great, i have to make a brown one and this showes what you can do with that color.
Thanks for sharing!
Wow! Great stuff. I’m not one to advocate design for design’s sake but these samples really do a great job of capturing what I believe was the intended experience set forth by the brand. Thanks for sharing.
Web design is the first thing your visitors will see. It will determine your credibility and whether or not your visitors will stay or leave. That is what most of us take into consideration so heavily. However, many of us forgot about the loading time of the page which takes about 7-9 seconds. Longer loading time will make visitors leave your site even without reading your content :D
Great resource… I love all… THanks
A lot of nice sites here.
wow…
that is sound interest me to inspecting the web design
i never thinking like that…
i just know that the design is great but i never know why…
ipool´s latest blog post..Arrow Themes
@ 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.
Nice collection of inspiring websites. I like it, although some of them aren´t looking that organized.
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
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!
Great post with some really nice designs! ;)
Ovi Dogar
AbsoluteCovers.com
…what a great read, appreciate it.
@ 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
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 =]
Nice informative Information for web designer like me.
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
Hey Max, thanks for the comments, I love the new design.
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.
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.
@ 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
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 .
Ой, классно :)
good design..thank you