Git Product home page Git Product logo

awesome-neumorphism's Introduction

alt text

awesome-neumorphism Awesome

A curated list of awesome things related to the concept of Neumorphism

What's Neumorphism ?

How it all start ?

Flat UIs

Once upon a time, the design world was flat. It was 2-d. There were no shadows or gradients. Everything was either growing in x or y direction. At this stage, designs were used to be called Flat UIs.

Skeumorphism

Then, a new age came. Designs became 3-d. Shadows and gradients got used excessively. Design components became more better, more close to real-world counterparts. UIs got more advanced. We came to know this period as Skeumorphic period.

But then..... Neumorphism came. It got her name from 'New Skeumorphism'. Neumorphism got popular.

The main difference between Neumorphism and Skeumorphism is that Skeumorphism only focused on using shadows or gradients. However, Neumorphism focuses on using shadows to create design components which are raised from root layer or vice versa. This gives designs a transition from life-less representations to something more real and close to the world in which we live. And that's the motivation for this library.

Resources

UI Toolkits

JavaScript :

Vanilla JS
  • Neomorphism - UI components library in the new neomorphism design style
ReactJS
  • Neumorphic-UI - A library of React components based on the concept of Neumorphism
  • React Neumorphism - A Framework which you can use for creating Containers with a Neumorphism look for React
  • UI-Neumorphism - React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend
React Native
  • neumorphism-ui - React Native components based on the concept of Neumorphism (iOS only)
  • react-native-neomorph-shadows - Neumorphism/Neomorphism UI shadows for iOS & Android, include SVG inner/outer shadow component powered with react-native-svg, which can provide shadow on Android identical like iOS.

Dart

Flutter
  • neumorphic.flutter - Implementation of Neumorphism user interface consisting of sets of principles and widgets for the Flutter framework

Android

  • Awesome-Neumorphism-Android-Library - Native android library to easily convert android views to Neumorphism UI pattern view in Android app without create any custom drawable
  • Neumorphism in Android - This is the experimental codes to build Neumorphism designs in Android. Not a library. Just sample project now.

Swift

  • Neumorphic SwiftUI - Neumorphic is a SwiftUI utility to build Neumorphism Soft UI (supports both outer shadow and inner shadow)
  • NeumorphismUI - NeumorphismUI is a library that can be used with SwiftUI. Compatible with Swift Package Manager.

Python

Django

Design Ideas

  • Dribble - Neumorphism designs, themes, templates and downloadable graphic elements on Dribbble

Articles :

  • Neumorphism in user interfaces - How UI trends reach for inspiration into the real world and what problems do we have to solve to make those trends work.

Contributions

Feel free to contribute. If you have worked on something amazing related to the concept of Neumorphism or you think I missed something in this list, feel free to add it to the list or share your ideas with me.

awesome-neumorphism's People

Contributors

mrsaeeddev avatar akaspanion avatar zoltanszogyenyi avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.