My First App - Grow (Journey from Scratch!)

[Pixel]

I would probably just keep the button a simple image icon with the accent color of your app without a background, this way the button won’t demand too much attention, yet have a clear intention.
I’ve also gone ahead and took a look to a “Task Tile”. What do you think of this?

struct TaskTile: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Title")
                .font(.title3)
                .fontWeight(.bold)
            Text("2 min.")
                .font(.subheadline)
                .fontWeight(.medium)
                .foregroundStyle(.secondary)
            
            HStack {
                // Edit button
                tileButton(systemImage: "pencil", action: {})
                Spacer()
                // Start Button
                tileButton(systemImage: "play", action: {})
            }
        }
        .padding()
        .background {
            RoundedRectangle(cornerRadius: 25)
                .foregroundStyle(Color(uiColor: .systemGroupedBackground))
        }
    }
    
    func tileButton(systemImage: String, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            Image(systemName: systemImage)
                .imageScale(.medium)
                .fontWeight(.bold)
                .foregroundStyle(Color(uiColor: .systemGroupedBackground))
                .padding(8)
                .background {
                    Circle()
                        .foregroundStyle(.blue.opacity(0.5))
                }
        }
        .buttonStyle(.plain)
    }
}

This design doesn’t have a shadow as I wasn’t able to replicate your exact shadow design, but I wouldn’t make changes to it, it looks perfect!

I you’d be able to make the blue shadow in dark as soft as the one in light mode, you’ve nailed it in my opinion.

Let me know what you think!

[Design_Pro]

Sorry it took me so long to reply! I just got back from my trip and have been swamped with work.

I’m still a little confused. I included some screenshots along with the primary shadow modifier that I use on both the Home and Progress views. Feel free to test and modify. Basically, I decreased the opacity of the color in the shadow so that it is almost as subtle as the light mode shadow opacity; the only issue is that this makes distinguishing the tasks in Dark Mode on an iPhone rather difficult (see screenshots). You can test this by applying my shadow modifier to a black circle in SwiftUI:

.shadow(color: colorScheme == .dark ? Color(colorModels.first?.secondaryColor ?? "Ultra Blue").opacity(0.4) : .black.opacity(0.3), radius: 7, x: 0, y: 2)

“Ultra Blue” = #9AB9F4 (Display P3)

As for the button for adding tasks/resetting stats, should that just be one colored circle with the white “plus” or “arrow.counterclockwise” SF Symbol, or should it only be the symbol?

I’m grateful for your ideas! If you could include some simple Figma designs (just the item you want changed), that would be great, but I can work with code too.

Have a nice day!

-Michael

[Design_Pro]

One more thing: the reason the add/reset button is a darker blue than the main app color is because I am trying to maintain continuity with the darker blue app icon, sidebar (macOS) / tabview (iOS) highlight color. Let me know if you have any suggestions in this area.

[Pixel]

Hi Michael, in my opinion just the symbol without background looks the best (more native and calm to look at).

As for the shadow in dark mode, I totally understand what you’re saying. This is why it mostly a better idea to avoid shadow when in dark mode and make use of complementary background for your tiles. I suggest using this color:
Color(uiColor: .systemGroupedBackground)

In theory this is also logic as in the night, there hardly aren’t any shadows because of the lack of sunlight, rather things are distinguishable by their shade of color.

Hope this helps!

[Design_Pro]

Awesome! Thank you so much, Rune. I’ll test and implement your suggestions over the coming weeks as work allows.

You made a great point about shadows in Dark Mode. Thank you for the resource code on this.

Have a nice day!

Take care,
-Michael

[Design_Pro]

Update 02/24/2025

Update 1.1.2 is now available in the App Store! Here are the release notes:

What’s New:

• Simplified the add task and reset progress buttons for a smoother experience

• Reduced glow coverage for dark mode task cards for better distinguishability

• Allow app window to decrease in size even further vertically by reducing space taken up by the user interface

Bug Fixes & Performance Improvements:

• Combined some repetitive code into reusable elements

Thank you @Pixel for your helpful suggestions. Right now I simply reduced the coverage of the Dark Mode timed task card glow and implemented the simpler user interface add and reset buttons. Let me know what you think of the result. I could create a new card style for Dark Mode, but I’ll need to design it in Figma and make sure it is consistent with my app. I do like the idea of using Color(uiColor: .systemGroupedBackground) as mentioned in your post.

Have a nice day!

-Michael

P.S. I fixed the app screenshots in the App Store! They look so much better now. Everything is consistent and clean.

[Design_Pro]

Update 03/17/2025

Hello everyone!

I was wondering if there are any feature requests for those who downloaded my app. If you’d like to participate, this is the poll. These are features I am considering adding over time, but would like to know if anyone has a preference:

• Custom Quotes (paid)
• Dynamic Island & Live Activities (paid)
• Progress Indicator for Timed Task
• iCloud Syncing (paid)
• More Friendly User Interface
• Shortcuts & Siri Integration
• Apple Watch App
• In-app Task Calendar
• Block Apps
• Focus Background Sounds
• Online Discord Server for Sharing Focus Tips and Tricks
• Reward System (other than new app colors)
• Ability to Share Stats with Friends
• Other (please leave a comment)

-Michael

[Pixel]

Hi Michael

You’re doing awesome! Keeping the pace nice and high.

Since I also told you my goal and why I was designing my own app GoalPilot, to submit for Apple’s Swift Student Challenge, I thought I’d share the result with you.

First of all, the process of creating an app has been invaluable, I learnt not only to develop, but a lot more qualities and skills such as designing, planning, visualizing, a lot of dedication and how to turn my vision into reality.

So I sent it to Apple, and the results are in! And I’m oh so happy to tell you that I’ve selected as a Distinguished Winner and have been invited by Apple to go to Apple Park in Cupertino for WWDC25!!!

I’m so siked about this adventure, I hope to learn an awful lot, meet a lot of new people and tell them about my dream and idea. But I’m even more siked about the fact that I was able to choose a high goal, dedicate myself to it and pull it in! It is my first little experience of success and I’m planning to go even further from here!!

Thank you so much for your support in my journey!
Hope your well.

Rune

[Design_Pro]

Hi Rune,

Thank you!

Yes, app creation is a wonderful skill. There certainly are so many skills required to make an app a reality, especially as indie developers. This is the path!

CONGRATULATIONS!!! Absolutely amazing work, Rune!! What an outstanding achievement and incredible opportunity! I’m so happy for you!!

Your dedication certainly paid off! Hard work for a good cause always leads to a good end. Once again, kudos on this accomplishment!

How does the Swift Student Challenge work? I’ve always been confused about the submitting a playground experience part. What is the process from start to finish, generally speaking? (Is it an Xcode Playground file? Is it an immersive demonstration, or an actual app?) It sounds very exciting!

You’re welcome! I’m honored to support such a hard-working and determined person! Keep it up!

-Michael

[Pixel]

Hi Michael

I’m very honored as well to be supporting you on your journey in app creation!
It seems to me as if you’re a very dedicated and creative person yourself as well

As for your question regarding the Swift Student Challenge, there are certain requirements for participants which are verified upon submitting your app. You just have to know these and start developing when you’re ready!

Some of the requirements are the file size, that it must be a .swiftpm file (app playground in Xcode) and that you must be a student and not a senior developer.
For a full explanation of the requirements you can visit: Eligibility - Swift Student Challenge - Apple Developer

Hope this helps!

Rune

[Design_Pro]

Hi Rune,

Thank you.

Right, this makes sense. Definitely good to check the requirements before building!

I appreciate the resource. I’ll have to look over it more thoroughly. It sounds like an exciting challenge.

I’m trying to take on app development more fully and now have an official website! I’ll probably keep up with coding as a hobby during college: thedesignprostudios.com.

Take care!

-Michael

[Design_Pro]

Just showcased Shadow Task on Product Hunt! Overall the app has been doing okay. I’ve released several updates and the app now has support for motivational quotes as well as a confetti celebration when a user completes a task.