Getting started on making your first iOS App (High-Level)

In order to make an iOS app, there’s a list of steps that I personally follow through to make one. This is mostly for beginners and this is taken from being in classes, project and other sources that helped me! Link of resources will be listed down below.

I broke the steps into three that is easy to remember.

  1. Brainstorming
  2. Designing
  3. Implementation

🧠 Brainstorming

This is where you come up with your idea! This process includes thinking, eliminating and researching all in one.

Here are some tools that I recommend for this step:

  • Survey Monkey
  • Google Drive
  • Post-it Notes
  • Sharpie

Start off with a post-it notes and start thinking of random ideas, no limit. Make a whole board of post-it notes on a wall. 🗒

Now look at the post it notes and think of an idea that draws you and your team, eliminate them by groups. You guys can discuss on which idea is more relevant or would be more helpful for people!

After you picked your golden idea, now is the time to think about it in terms of features, what would users want, research similar apps and such.

First start seeing if there is already an app like yours in the App Store and explore it. Figure out the features it has or is lacking. Make notes, create a document on your reviews of the app in your drive.

You can use Survey Monkey to come up with user feedback and comment about the idea to get a feel for what users want or don’t want. For one of my group’s app ideas on a Transit System, we made questions on Survey Monkey to send to other college students on how they use transportation.


🎨 Designing

In this implementation, you start to visualize what your app is going to be like. There are number of ways in doing this which can include wireframes in pen and paper form to actual design in Adobe XD.

Here are a few tools that I recommend to use:

I’ll get into how I use them!

For starters, I first make wireframes which just involves paper and pen. I show navigation and this isn’t perfect at all.

After I have made the wireframes, I move onto the actual design which looks closer to the real product. For this, I religiously use Adobe XD.

Design for FitGram that I created on Adobe XD.

For this step, you can use Figma as well. Adobe XD allows for interactive prototype as well.

Angle.sh is just a website that provides vectors for mobile designs.

Another app that I use is OneScreen that’s only $0.99 on the App Store.

Here’s some of my app’s picture on this app:

Another design implementation that one can do is class diagrams, sequence diagram, model schema and such that helps ease into the implementation phase.

Here’s an example of these schemas/ diagrams from my previous projects:

Model

ProperyTypeDescription
objectIdStringunique id for the user post (default field)
authorPointer to Userimage author
updatedAtCalorieCountcalories after last excercise
authorPointer to Userimage author
competitionBooleanwhether won or lost challenge excercies

💻 Implementation

In this section, implementation of the app can begin! Happy coding.

There are a lot of design and communication patterns that one can follow while making an iOS app.

You can separate your code based off of what goes where. The MVC or MVVM design patterns tell you where to place your code. I made a blog post about it some time ago if you would like to read up on it! If you have data, decide if they need to be structs or classes. Have a notifier pattern to know when to change data, or protocol and delegates to pass data.

I personally watched Practical Design Patterns in Swift from LinkedIn Learning to learn about the different patterns I could use in my code.

Also, Google everything! But with caution.


Icons made by Nikita Golubev from www.flaticon.com
Icons made by Freepik from www.flaticon.com
Icons made by Eucalyp from www.flaticon.com
Icons made by iconixar from www.flaticon.com
https://www.CodePath.org
https://www.linkedin.com/learning/practical-design-patterns-in-swift/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.