284
Views
12
Comments
Top 10 mobile app UI and UX sites for inspiration for the first mobile project

I am guessing most of you have created mobile apps. While most of those do a great job, sometimes you see an app and you say "Wow" for its UI and UX. 

I am about to start building some demo mobile and web apps on OutSystems and would like to get some simple projects ideas and cool designs to build on OutSystems. Looking forward to hearing from you all about your list of top websites to inspiration, ideas and guidance of app ideas.

2023-09-05 11-58-17
AMAN JOSHI

You can combine practical project ideas with design inspiration sources and implement JS, CSS, and other integrations to achieve industry-grade learning.


Travel App with interesting UI/UX designs and JS

License plate recognition (OutSystems camera) 

Port Logistics Tracker (Shipping/Logistics) with Animation Integration

Expense Splitter with Push Notification

Fitness Tracker 

2023-03-24 11-55-45
Pawan Purohit

Hi @Ilay

1. Employee Directory App
Search, filter, and view employee profiles
Cool UI: profile cards, filters, map view (for office locations)

2. Leave & Vacation Manager

Request/approve vacations
Calendar view + notifications + role-based access (HR Manager demo?)

3. Task & Project Tracker
Boards like Trello, task assignments, and progress tracking
Responsive for both web & mobile

2025-04-08 05-20-35
Ilay
Staff

Thanks @Pawan Purohit and @AMAN JOSHI for the suggestions.

My point is a little different. The idea behind this question is for any new users of OutSystems, along with intermediate users, to pick up projects and build using OutSystem with different difficulty levels.

Yes, there is the Employee Directory app in the training and I am sure there are many others online if you Google. However, the idea is to help people develop the relevant skills just following these examples. Ideas should be somewhat detailed, like in the training, but without step by step details, empowering the learners... Starting with a User Story (Journey). Then the developer can expand on this. Example of this might contain excel files to create and load entities and data, creating entity relationships. Samples of what the UI should look like, the business process flow, users involved etc. It would be great to compose a list of sites to such content would be most helpful for new starters in my opinion. Then, expanding this with using SOA, creating multiple modules, libraries and so on...

This is an idea to start off with to help solidify concepts with hands on experiences. 


I will do some googling this weekend to start such list. I am sure it will be very helpful to many in various ways.


Thanks in advance.


2023-03-12 08-39-51
Iheb Maatali Riahi

One approach I’d recommend: Pick an existing UI design you really like from platforms like Pinterest, Dribbble, or Behance. Open that design and try to extract high-level user stories based on how the app looks and flows. Ask yourself:

  • What is the user trying to achieve on each screen?

  • What features are implied by the design?

  • What kind of user roles might be involved?

Once you’ve listed those out, spend some time grooming the stories—break them down into manageable tasks, define priorities, and organize them into sprints.

Then you can start building the app UI in OutSystems, since the design is already there—this lets you focus on translating that experience into a working prototype.

It’s a great way to build both your UX eye and your delivery skills.

UserImage.jpg
Balu K

Hey @Ilay  Since I am also new to Outsystems, I would recommend several amazing UI-based Web and mobile applications to you.

* Grocery apps (where you can utilize nice styles like photos, cards, zoom effects, Caurosel images, double-shaded CSS for backdrop, and more)...

* The IMDB movie rating app, where you can contribute detailed information and vibrant movie photographs 


2026-01-23 11-38-55
Dinesh Murugan
Champion

Hi @Ilay ,

That's fantastic! Additionally, I'm investigating concepts for OutSystems demo apps. I typically use websites like Dribbble, Behance, and Mobbin for inspiration when looking for simple UI/UX designs. For app ideas, a smart to-do list with AI suggestions, a personal finance tracker, or even a planner for community events could be excellent places to start. I'm excited to see what you think of.

2023-10-21 19-42-11
Tousif Khan
Champion

A messaging application like whatsapp, with push notification, will help new learners to howe we implement it in Outsystems.

2018-08-26 20-34-32
Pankaj pant





1. Simple but Impressive Project Ideas for OutSystems (Mobile + Web)



  • Event Booking App
    • Shows listing of events, book tickets
    • Extra: Animated calendar, RSVP, event maps

  • Expense Tracker
    • Add daily expenses, see chart
    • Extra: Cool dashboard graphs, dark/light mode

  • Fitness Tracker
    • Track workouts, water intake, steps
    • Extra: Use mobile sensors (Pedometer API)

  • Recipe Sharing App
    • Share recipes, cooking videos
    • Extra: Upload photos, ratings, comments

  • Plant Care App
    • Reminds users to water plants
    • Extra: Use push notifications beautifully

  • Travel Itinerary App
    • Plan trip, manage bookings
    • Extra: Offline mode, travel checklist

  • Personal Diary App
    • Daily notes, moods, memories
    • Extra: Mood emojis, lock app with pin

  • Learning Tracker App
    • Track books read, courses completed
    • Extra: Progress bars, achievements

  • Pet Care Reminder App
    • Track vet visits, feed times
    • Extra: Cute UI design with pet avatars

  • Local Business Finder
    • Find cafes, salons nearby
    • Extra: Integrate with Google Maps API






2. Top Websites for App UI/UX Inspiration



  • Dribbble — Best place for creative mobile/web UI screens
  • Behance — Professional full case studies (Mobile, Web)
  • Mobbin — Ready-made real app screens (iOS/Android)
  • Uplabs — Web, mobile design + free resources
  • Pttrns — Real iOS and Android screen examples
  • Figma Community — Free UI Kits you can use directly
  • UI8 — Premium-quality app templates (Paid + Free)
  • Awwwards — Beautiful award-winning web designs
  • Screenlane — Daily UI mobile inspiration






3. Some UI/UX Styles You Can Try in OutSystems



  • Neumorphism (Soft 3D shadows)
  • Glassmorphism (Frosted glass effects)
  • Minimalism (Simple, clean layouts)
  • Bold Typography (Big titles, strong font)
  • Card-based Layouts (Use Cards widget heavily)






4. Pro OutSystems Tip



  • Use Forge Components like:
    • OutSystems Charts (for dashboards)
    • Mobile Patterns (beautiful ready-made components)
    • FlipCards, Carousel, Progress Circle

  • Add CSS custom classes to match designs from Dribbble or Behance.






Quick Summary



  • Pick one cool idea.
  • Search a matching design on Dribbble or Mobbin.
  • Build it cleanly using OutSystems aggregates, client actions, and CSS.
  • Focus more on small animations, micro interactions for the “Wow” effect!





2025-04-08 05-20-35
Ilay
Staff

Spot on with your answers/help @Pankaj pant and Ziggy. This is what exactly I was looking for. Awesome responses, much appreciated.

Now, newcomers and people looking to do more hands on development and get into more complex scenarios can utilise these lists.

2021-09-25 07-23-16
Ramkumar saini

Hi @Ilay 

You can create Patient Portal

Where Patient can book appointment and able to see appointment status 

Docter can approve/ cancel appointment and update treatment detail after approving the request.

2025-05-02 20-28-47
Drishti Menghani

Hi @Ilay,

I would highly recommend to have a look at the below as well.

1.  Spotify - (It has very seamless UI)

2. Google Pay (Clean, Fast & Fluid Interaction)

3. Groww App - (It's perfect example of simplicity over complexity, the graphs are amazing)

4. Outsystems Home Page - (I must say it's too good, so much of the efforts whole team has put, it's smooth and very inspiring)


They are not ordered high to low, it's just the list, many of them are out of my head, but really each app stands out in itself.

2023-06-13 12-29-43
Sakthivel P

UI/UX Inspiration Websites for creative app designs, micro-interactions, animations, and layout patterns.

  1.  Mobbin 
  2.  UI Sources
  3.  Pttrns
  4.  Pinterest 

Simple Project Ideas to Build

  1. Expense Tracker 
  2. Booking App 
  3. Event Organizer 

Tips for Building UI/UX 

  • Use OutSystems UI Templates (Mobile/Wide Web patterns)

  • Learn about custom UI styling using CSS in OutSystems

  • Clone Forge templates like:

    • OutSystems UI Mobile Templates

    • Event App

  • Use containers, columns, and flex layout smartly to match modern layouts

  • Add smooth client-side animations using JavaScript or Forge plugins like Animate.css

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.