Line25

Huge Showcase of 85+ Detailed Interface Design Elements

Read the full post

Dribbble is a fantastic place for designers to share their works in progress and is also a great place for designers to gain inspiration and pick out recurring trends across the design spectrum. This post rounds up a collection of snapshots of rich interface design elements from both website designs and app designs. Each one has been carefully crafted for its detail, use of textures, subtle lighting effects, and various tones & colours.

Searching on Universal Subtitles (web app interface UI UX)

 Detailed Interface Design Elements

This web app interface uses a light blue palette and a green search button for its interface design.

Planner app

 Detailed Interface Design Elements Dribbble shot

This planner app is only a small detail in a cool interface design. This is a good example of choosing the right textures, fonts and colours for your project.

New Flyosity Design: Contact Page

Contact Page Dribbble shot

This is another example I find interesting through its neutral yet also friendly interface.

Web Stuff

Web Stuff Dribbble shot

Sarah Mick chose a dark and light grey palette of colour for project’s interface design.

Dashboard Design

Dashboard Design

This is an example of a light grey dashboard design that also shows a great interest in choosing the right typography.

A Theme

A Theme Dribbble shot

This is a much more creative example thanks to the textures and colours it uses for its design.

Web Store Mock

Web Store Mock Dribbble shot

This is a sneak peek at a web store project that uses grungy greys and bold green texture for its interface.

Web Interface

Web Interface

This light blue interface might be your next source of inspiration as it uses a classy and clean design.

Vintage

Vintage Dribbble shot

This example has a vintage theme for its interface design that uses light brown as its dominant colour.

We Need Web Heroes Today

interface design Dribbble shot

Check out this bold interface design that uses colours, textures, images and so much more for its web design layout.

Design Notes

Design Notes Dribbble shot

Design Notes has a sensitive touch thanks to the mathematics paper it uses as background texture.

Search

View the Dribbble shot

This innovative yellow search button might serve as a source of inspiration for your next project.

Blog Page Design for Marketing Website

Blog Page Design for Marketing Website

If you’re in the mood for a bold coloured interface inspiration then you might want to check out this blog page design.

Photoshop Browser UI Action

Photoshop Browser UI Action

Who says red is no longer trendy? check out this cool Photoshop browser.

Ubiquity.

View the Dribbble shot

Or maybe you’re in the mood for design layout that uses darker colours, if so you should check out this sneak peek from Ubiquity.

Dashboard Web App Product UI Design: Job Summary

Dashboard Web App Product UI Design

If you like dark blue themes, this dashboard design might be a good source of inspiration for your project.

Wood Navigation

Wood Navigation

This is another good example of mixing the right textures and colours. The dark and grungy green blends well with the wood texture and the pale pink.

Slider Caption

Slider Caption

This is yet another example that mixed the right textures for its interface design.

Website Design

Website Design

This interface’s colours blend really well with the chosen texture that makes images stand out.

dashboard UI

dashboard UI by uixNinja

This is another example of a dashboard UI this time with a much more girlier interface design thanks to the pink colours.

Freebie PSD: Flat UI Kit 2 (Blog)

Freebie PSD Flat UI Kit 2

This is a great set that also comes with a free PSD included. Feel free to try it out!

Ui Kit Rainy Season

Ui Kit Rainy Season by Sunbzy

If you’re up for a rainy season theme then you might want to have a look at this UI Kit.

Splash of red

UI Kit Dribbble shot

Or maybe you’re in the mood for a splash of red in which case this design might be exactly what you’re looking for.

Zora Dash – Properties (WIPs)

Zora Dash Properties (WIPs)

This example has a friendlier look and mixes bold orange colours with light grey tones.

Dellustrations New Look

Dellustrations New Look Dribbble shot

And if you like bold ideas you could also check out Dellustrations’ black and red interface design.

Sanithouse

red interface design

This is another inspiring example that uses grey tones and textures for its interface design.

eBay Redesign

Ebay Redesign by Tintins

This eBay Redesign is another good example of choosing the right palette and style for interface design.

Resources

style for interface design

Have a look at the orange themed interface design and their choice of textures.

CRM Search & Widget

CRM Search

Check out Ivo Mynttinen’s search widget.

Joomla – Leopard Theme 3.

Joomla - Leopard Theme 3

Joomla’s purple palette gives the interface a warm touch. You can also check the layout in full size.

Beta invite

Beta invite

This is yet another cool example of a black and red theme that could serve well as inspiration

Toy store – home

Toy store - home

Or how about this classy interface design that uses all the right textures.

Almost There

classy interface design

Almost there is combines a light grey palette with a letterpress effect in an interesting and innovative design.

Sanithouse Part II

Sanithouse Part II

This the second part of the Sanithouse project and has a neat interface design.

Buttons!

 neat interface design

Buttons can give you lots of troubles and headaches so maybe this example might come in really handy the next time you’re looking for some inspiration.

Vrb

View the Dribbble shot

This is yet another example of an interface that uses black as its background. This kind of design can seem a little rough but in this case and with the right typography you can get an interesting result.

Dropdown Menu UI

Dropdown Menu UI by Matt

This Dropdown Menu UI is only a small piece of a project for Love.ly. It uses a nice palette of colours and all the right textures.

Life on Prime UI

Life on Prime UI

This is yet another example of an interface that uses dark tones of blue, this time, with white typography.

Aviathemes

Aviathemes

This one has a much more dynamic touch thanks to its colours and typography.

D for Deploy

D for Deploy

Check out this sneak peek for Deploy and see whether you like the mix of colours, textures, images and typography.

AC redesign – old

AC redesign - old

This is a much more creative example thanks to the textures and the doodles it uses for its interface design.

StudioTwentyEight v7

interface design Dribbble shot

This project for StudioTwentyEight has a neat and clear design that uses blue tones and nice typography.

Search Animated

Search Animated by Kerem Suer

You might also want to check out this sneak peek for it may be a good source of inspiration in the future.

Navigation Treatment

Navigation Treatment Dribbble shot

This is a much more detailed interface. It uses leader and wood textures which give a neat and classy look of the interface.

Plans & Pricing

View the Dribbble shot

This one uses light blue textures which make content stand out and a green colour for the Plans and Pricing button.

Working on a new downloading UI for Miro

Plans and Pricing button

This is a sneak peek from 

Checkout Interface

Checkout Interface

This is yet another good example of mixing the right textures and colours into a nice interface design.

Web Interface

Web Interface

This web interface uses a light blue grey palette with only a bit of red at its menu bar.

Game on…

menu bar Dribbble shot

Check out these details from Josh Hemsley’s project that also uses grey tones.

Admin Interface

Admin Interface

This one mixes a purple palette with warm colours like orange and red but only in small quantities.

Webapp interface excerpt

Webapp interface excerpt

This is yet another example that has a clean and neat design and uses grey tones.

Forum Interface

Forum Interface

This forum interface design uses dark tones of grey and black with only a bit of blue.

Interface Design Elements

Interface Design Elements

This a creative example of how you can mix colours textures and typography into a nice interface design.

Social interface

Social interface

This is a much more playful example that uses bold colours like pink, green and purple.

Spot web app interface

Spot web app interface

This one uses a side bar menu and light colours for its interface design layout.

Dark CMS – Dashboard

Dark CMS - Dashboard

This dark dashboard interface mixes all the right textures and colour tones into its design.

Soon.

dashboard interface

This is yet another good example of choosing all the right textures for your next project.

Theme Builder V2

Theme Builder

This black grungy texture that this project’s interface uses makes all the other colours stand out.

Iconbox

Iconbox

If you’re looking for some icon ideas or ways to uses them this project might be your next inspiration.

Candy Cane Loader

Candy Cane Loader

This is another example of a playful interface that has a candy cane as a loader.

iPad UI for cookbook

iPad UI for cookbook

This interface also mixes the right texture and typography into a cool design.

Big Green Button

Big Green Button

This big green button might just be your next source of inspiration for your project

Vintage Play Button

Vintage Play Button

Or you could always have a look at this vintage purple play button. This is also a good example of mixing colours with textures into a good interface design.

Homepage Mashup

Homepage Mashup

This is yet another bold interface design that mixes textures with striking colours and white typography.

A Big White Button

Big White Button

This neat and clear button might be just what was missing from your design layout.

Button

Button

Or you could always get inspired by this bolder red button.

Sign In Button

Sign In Button

You might also want to check out this green sign in button and the way it blends in this interface design.

Big ‘ol button

Big 'ol button

This is yet another cool example of mixing colours with textures into a neat interface design.

Stable.io Login button

Login button

This textured thematic log in button could be your next source of inspiration.

MOJO Themes redesign

MOJO Themes redesign

This is a cool theme redesign by Brian Hoff that uses a black background and makes all the other colours stand out.

Mkb SRP

cool theme redesign

Mkb SRP is a small insight on Jonatan Flores project which has a neat interface design.

[Redacted] Quality Service

neat interface design

This interface design mixes textures with neat and clear designs making this example a good source of inspiration for futures projets.

Home Button

Home Button

If you’re in the mood for something more elegant than this home button is just what you’ve been looking for.

Upload button

Upload button

This orange upload button blends in really well with the light blue grungy texture in the background.

Download Button

Download Button

This is yet another example of a black background that makes typography and colours stand out.

Chunky Button

Chunky Button

This chunky sign-up button gives a much friendly look to a monochrome interface.

Wines Menu

Wines Menu

This example mixes textures and a vast range of colours for its interface design.

Trappe Door Menu

Trappe Door Menu

This themed vertical menu is another sneak peek from one of Matthew Smith’s projects.

bS

View the Dribbble shot

This example uses a blue palette and gives a friendly and familiar touch to the interface.

Short cut

Short cut

A shortcut example for a menu bar that uses grey tones in its interface design.

Coming together

interface design

This is a sneak peek at an online food menu by Matthew Smith that uses warm colours and white typography.

Still working on it…

white typography

This is Danny’s sneak peek of a project he’s been working on. It uses smooth textures and huge typography.

Theme Menu

Theme Menu

This is yet another project that uses orange and other warm colours in its interface and the background texture is something you don’t see every day in website designs.

Expanded menu

Expanded menu

This expanded menu an insight from one of Mike Precious’ projects.

Management Control Panel

Management Control Panel

This management control panel has a good choice of colours and texture in its design.

Pricing Welcu: UPDATE

Pricing Dribbble shot

The Pricing Welcu example uses a blue-grey palette and has a more formal interface.

Web Design

Web Design by Mike

This one uses warm colours and the right typography which give the interface an elegant touch.

Any Menu

Any Menu

This a much more colourful example from ‘Any Menu’ that gives the interface a much friendly design.

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

35 Comments

  1. Shout About You says:

    Amazing work!!!!!!!!!!!!!
    Cool and creative design specially for menu bar in Website Designing.

    Thanks for sharing

  2. Dzinepress says:

    inspiring collection you sharing.

  3. Kari says:

    Wow, really nice collection, thanks for sharing! :)

  4. Andrei says:

    Great! Thank you for sharing!!

  5. François says:

    Very interesting Illustration and UI works! Thanks for sharing.

  6. simon says:

    Perfect… This is a great source of inspiration, exactly what I need as I'm in the process of creating my own website.

  7. Jesse says:

    Great collection. It's all in the details.

  8. Adam Booth says:

    What a great collection of inspirational little details.

    It is so true that the attention to detail can lift any design, especially web design.

    The emergence and the relentless popularity of any type of Apple product, with its clean lines and sleek interface, which contain such attention to detail. This has seen the look rise dramatically in popularity and seen an abundance of its influence spread across the web.

    This is no means to the detriment of the web, quite the opposite, it has enhanced the look of many websites and has stop the web being filled with numerous generic, poorly built, hideous sites and has added a level of sophistication.

    This blog goes to show that with a little knowledge and several subtally placed gradients, textures, drop shadows and letterpress effects can elevate any websites design into a clean modern looking interface that would be welcome to grace the eyes of any Apple designer.

  9. HTML5awesome says:

    Great list! Thanks for sharing :)

  10. Freelance Web Designer London says:

    Some very beautiful examples here, all inspired—in my mind at least—by Apple, and more specifically Mac OS X. Apple leads; others follow.

  11. vmzona says:

    Spectra, it is important. This is especially valuable for the design. But, it is difficult for an unprepared person.

  12. Juan Gomez says:

    Thanks for the feature :) good selection.

  13. Thiago says:

    Some simple and beautiful examples… Thank you!

  14. GBaniya says:

    awsome collection..

    thanks for sharing…

  15. Antoine Guédès says:

    Nice selection Chris. I really appreciate this post, and I would love to see some more as your "best websites of th week" posts.

  16. Ajay says:

    Real nice collection.. thanks for compiling.

    This page has gone into my "Inspiration" bookmarks.. :)

  17. Christopher San-Claire says:

    Great collection I must say… Great scrap book for inspiration and ideas.

  18. Sean says:

    Nice selection here Chris, thanks.

  19. Felipe Genuino says:

    Muito boa seleção Chris, Thanks.

  20. Joachim says:

    Great collection! Very useful as inspiration.

  21. Foxinni says:

    These are excellent. Pretty much what dribbble has to offer.

  22. Brussells says:

    WOW! A great showcase of what can be done. Great inspiration, and makes me realize I've got a long way to go before my designs look that sexy!

    Amazing how little design touches really make the elements look so great.

    Thanks for another great post, Chris.

  23. alicetheblue says:

    Brilliant Collection. Love the textures.
    Thank you for sharing, Chris.

  24. Leon says:

    This is like 'the best of', very nice and great for inspiration! Thanks!

  25. Senabi says:

    Thanks Chris for sharing it in minute detail. It is a great collection.

  26. Pecul says:

    Nice round-up, Chris. Thanks!

  27. Hano Erasmus says:

    The subtle use of texture in some of these designs are very good. Thank you, great inspiration.

  28. Seth Gooch says:

    Very stunning designs Chris! Good choices…thanks for the inspiration! :)

  29. David says:

    Awesome selection of UI masterpieces. Thank you Chris for the inspiration!

  30. David says:

    Chirs, where is the 'Like' button for this post ;)

  31. Glenn Van Bogaert says:

    One by one it are bbbeautiful pieces that you have selected Chris :-)
    Detail and color selection are two important things in design.

  32. ryan says:

    Awesome..
    they are all beautiful

  33. Hannah Hurst says:

    Some beautiful design detail shown here! Adding a lot of detail is one of the most important elements in making a website stand out from the rest.

    Thanks for sharing.

  34. Sahan says:

    Truly awesome!

Leave a response